feat : #14 partage de profil

.act.secrets.example

@@ -0,0 +1,2 @@
+ROBOT_TOKEN=fake_gitea_token
+ENV_URL=fake_env_url

.actrc

@@ -1,3 +1,5 @@
---container-architecture linux/amd64
+--container-architecture linux/arm64
--W .gitea/workflows
+--workflows .gitea/workflows/
--P ubuntu-latest==ghcr.io/catthehacker/ubuntu:act-latest
+--platform ubuntu-latest
+--secret-file .act.secrets
+--env-file .env

.env.example

@@ -0,0 +1 @@
+GITEA_SERVER_URL=https://fake-gitea-url.example.com

.gitea/workflows/trigger-deploy.yaml

@@ -0,0 +1,31 @@
+name: Trigger Deploy Repo
+run-name: Trigger deploy
+
+on:
+  push:
+    tags:
+      - '*' # Se déclenche sur n'importe quel tag
+
+jobs:
+  dispatch:
+    runs-on: ubuntu-latest
+
+    env:
+      # ------- À ADAPTER -------
+      CODE_REF: ${{ gitea.ref }}                            # branche/tag/sha à récupérer
+      GITEA_SERVER_URL: https://git.prod.k3s.technostrea.fr # URL du serveur Gitea
+      # --------------------------
+    steps:
+      - name: Dispatch Signal to ttp-deploy
+        run: |
+          # Récupération de la version sans le "refs/tags/"
+          VERSION=${{ env.CODE_REF }}
+
+          echo "Déclenchement du déploiement pour la version $VERSION sur l'instance  ${{ env.GITEA_SERVER_URL }}"
+
+          # Appel API Gitea.
+          # Notez la structure de l'URL : /api/v1/repos/{owner}/{repo}/dispatches
+          curl -X POST "${{ env.GITEA_SERVER_URL }}/api/v1/repos/technostrea/trouvetonprofile-deployment/dispatches" \
+            -H "Authorization: token ${{ secrets.ROBOT_TOKEN }}" \
+            -H "Content-Type: application/json" \
+            -d "{\"event_type\": \"build-release\", \"client_payload\": {\"version\": \"$VERSION\"}}"

.gitignore

@@ -127,3 +127,11 @@ logs/*.log
 
 pb/data/*
 src/environments/environment.development.ts
+
+*.iml
+.idea
+logs/
+*.log
+*.secrets
+.act.secrets
+.env

src/app/app.component.spec.ts

@@ -30,7 +30,7 @@ describe('AppComponent', () => {
       create: jest.fn(),
       list: jest.fn(),
       update: jest.fn(),
-      getByUserId: jest.fn(),
+      getById: jest.fn(),
     };
 
     await TestBed.configureTestingModule({

src/app/app.config.ts

@@ -2,6 +2,7 @@ import { ApplicationConfig } from '@angular/core';
 import {
   PreloadAllModules,
   provideRouter,
+  withComponentInputBinding,
   withInMemoryScrolling,
   withPreloading,
   withViewTransitions,
@@ -21,6 +22,8 @@ import { USER_REPOSITORY_TOKEN } from '@app/infrastructure/users/user-repository
 import { PbUserRepository } from '@app/infrastructure/users/pb-user.repository';
 import { AUTH_REPOSITORY_TOKEN } from '@app/infrastructure/authentification/auth-repository.token';
 import { PbAuthRepository } from '@app/infrastructure/authentification/pb-auth.repository';
+import { WEB_SHARE_SERVICE_TOKEN } from '@app/infrastructure/shareData/web-share.service.token';
+import { WebShareService } from '@app/infrastructure/shareData/web-share.service';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -31,7 +34,8 @@ export const appConfig: ApplicationConfig = {
       withInMemoryScrolling({
         scrollPositionRestoration: 'enabled',
         anchorScrolling: 'enabled',
-      })
+      }),
+      withComponentInputBinding()
     ),
     provideAnimations(),
     provideHttpClient(withFetch()),
@@ -40,6 +44,7 @@ export const appConfig: ApplicationConfig = {
     { provide: SECTOR_REPOSITORY_TOKEN, useExisting: PbSectorRepository },
     { provide: USER_REPOSITORY_TOKEN, useExisting: PbUserRepository },
     { provide: AUTH_REPOSITORY_TOKEN, useExisting: PbAuthRepository },
+    { provide: WEB_SHARE_SERVICE_TOKEN, useExisting: WebShareService },
     provideToastr({
       timeOut: 10000,
       positionClass: 'toast-top-right',

src/app/domain/profiles/profile.repository.ts

@@ -4,7 +4,7 @@ import { SearchFilters } from '@app/domain/search/search-filters';
 
 export interface ProfileRepository {
   list(params?: SearchFilters): Observable<ProfilePaginated>;
-  getByUserId(userId: string): Observable<Profile>;
+  getById(profileId: string): Observable<Profile>;
   create(profile: Profile): Observable<Profile>;
   update(profileId: string, profile: Partial<Profile>): Observable<Profile>;
 }

src/app/domain/shareData/share-data.repository.ts

@@ -0,0 +1,3 @@
+export abstract class ShareDataRepository {
+  abstract share(shareData: ShareData): void;
+}

src/app/domain/shareData/share-data.ts

@@ -0,0 +1,5 @@
+export interface ShareData {
+  title: string;
+  text: string;
+  url: string;
+}

src/app/infrastructure/profiles/pb-profile.repository.ts

@@ -29,9 +29,9 @@ export class PbProfileRepository implements ProfileRepository {
     );
   }
 
-  getByUserId(userId: string): Observable<Profile> {
+  getById(userId: string): Observable<Profile> {
     return from(
-      this.pb.collection('profiles').getFirstListItem<Profile>(`utilisateur="${userId}"`)
+      this.pb.collection('profiles').getOne<Profile>(`${userId}`, { expand: 'utilisateur' })
     );
   }
 

src/app/infrastructure/shareData/web-share.service.token.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+import { ShareDataRepository } from '@app/domain/shareData/share-data.repository';
+
+export const WEB_SHARE_SERVICE_TOKEN = new InjectionToken<ShareDataRepository>(
+  'ShareDataRepository'
+);

src/app/infrastructure/shareData/web-share.service.ts

@@ -0,0 +1,36 @@
+import { inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { ShareDataRepository } from '@app/domain/shareData/share-data.repository';
+import { ToastrService } from 'ngx-toastr';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class WebShareService implements ShareDataRepository {
+  private document = inject(DOCUMENT);
+  private toastr = inject(ToastrService);
+
+  async share(shareData: ShareData) {
+    const navigator = this.document.defaultView?.navigator;
+
+    if (navigator && navigator.canShare && navigator.canShare(shareData)) {
+      try {
+        await navigator.share(shareData);
+        return;
+      } catch (error) {
+        return;
+      }
+    }
+    this.copyToClipboard(shareData.url!);
+  }
+
+  private copyToClipboard(text: string) {
+    navigator.clipboard.writeText(text).then(() => {
+      this.toastr.info(`Le lien du profil est copié dans le presse papier !`, `Partage de profil`, {
+        closeButton: true,
+        progressAnimation: 'decreasing',
+        progressBar: true,
+      });
+    });
+  }
+}

src/app/routes/home/home.component.spec.ts

@@ -21,7 +21,7 @@ describe('HomeComponent', () => {
     mockProfileRepo = {
       create: jest.fn().mockReturnValue(of({} as Profile)),
       list: jest.fn().mockReturnValue(of([])),
-      getByUserId: jest.fn().mockReturnValue(of({} as Profile)),
+      getById: jest.fn().mockReturnValue(of({} as Profile)),
       update: jest.fn().mockReturnValue(of({} as Profile)),
     };
 

src/app/routes/my-profile/my-profile.component.spec.ts

@@ -26,7 +26,7 @@ describe('MyProfileComponent', () => {
       create: jest.fn(),
       list: jest.fn(),
       update: jest.fn(),
-      getByUserId: jest.fn().mockReturnValue(of({} as Profile)),
+      getById: jest.fn().mockReturnValue(of({} as Profile)),
     };
 
     mockUserRepo = {

src/app/routes/profile/profile-detail/profile-detail.component.html

@@ -9,11 +9,13 @@
           <!-- Overlay gradient -->
           <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30"></div>
 
-          <!-- Bouton retour -->
+          <!-- Boutons en haut -->
           <div class="relative z-10 p-4 flex justify-between items-start">
+            <!-- Bouton retour -->
             <a
               [routerLink]="['/profiles']"
               class="group flex items-center justify-center w-10 h-10 md:w-12 md:h-12 bg-white/20 backdrop-blur-md rounded-full hover:bg-white/30 transition-all duration-300 hover:scale-110"
+              aria-label="Retour à la liste des profils"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -30,10 +32,13 @@
               </svg>
             </a>
 
+            <!-- Conteneur pour badge vérifié et bouton partage -->
+            <div class="flex items-center gap-2">
               <!-- Badge vérifié -->
-            @if (profile().estVerifier) {
+              @if (profile()!.estVerifier) {
                 <div
                   class="flex items-center gap-2 bg-purple-500/20 backdrop-blur-md px-3 py-2 rounded-full animate-pulse-slow"
+                  data-testid="verified-badge"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -51,6 +56,29 @@
                   <span class="text-white text-sm font-medium hidden md:inline">Vérifié</span>
                 </div>
               }
+
+              <!-- Bouton partage -->
+              <button
+                (click)="onShare()"
+                class="group flex items-center justify-center w-10 h-10 md:w-12 md:h-12 bg-indigo-500/20 backdrop-blur-md rounded-full hover:bg-indigo-500/30 transition-all duration-300 hover:scale-110"
+                aria-label="Partager ce profil"
+                data-testid="share-button"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  class="w-5 h-5 md:w-6 md:h-6 text-white"
+                >
+                  <title>Partager</title>
+                  <path
+                    fill-rule="evenodd"
+                    d="M15.75 4.5a3 3 0 11.825 2.066l-8.421 4.679a3.002 3.002 0 010 1.51l8.421 4.679a3 3 0 11-.729 1.31l-8.421-4.678a3 3 0 110-4.132l8.421-4.679a3 3 0 01-.096-.755z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
 
@@ -103,7 +131,7 @@
               }
 
               <p class="text-lg md:text-xl text-indigo-600 dark:text-indigo-400 font-semibold">
-                {{ profile().profession | uppercase }}
+                {{ profile()!.profession | uppercase }}
               </p>
             </div>
           </div>
@@ -135,9 +163,9 @@
               </svg>
               Biographie
             </h3>
-            @if (profile().bio) {
+            @if (profile()!.bio) {
               <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
-                {{ profile().bio }}
+                {{ profile()!.bio }}
               </p>
             } @else {
               <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
@@ -149,7 +177,7 @@
           </div>
 
           <!-- Card Secteur -->
-          @if (profile().secteur) {
+          @if (profile()!.secteur) {
             <div
               class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
             >
@@ -168,12 +196,12 @@
                 </svg>
                 Secteur
               </h3>
-              <app-chips [sectorId]="profile().secteur" />
+              <app-chips [sectorId]="profile()!.secteur" />
             </div>
           }
 
           <!-- Card Réseaux -->
-          @if (profile().reseaux) {
+          @if (profile()!.reseaux) {
             <div
               class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
             >
@@ -195,7 +223,7 @@
                 </svg>
                 Réseaux
               </h3>
-              <app-reseaux [reseaux]="profile().reseaux" />
+              <app-reseaux [reseaux]="profile()!.reseaux" />
             </div>
           }
         </div>
@@ -203,7 +231,7 @@
         <!-- Colonne droite - À propos et Projets -->
         <div class="lg:col-span-2 space-y-6 animate-slide-up animation-delay-300">
           <!-- Card À propos -->
-          @if (profile().apropos) {
+          @if (profile()!.apropos) {
             <div
               class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300"
             >
@@ -225,7 +253,7 @@
                 À propos
               </h2>
               <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-base">
-                {{ profile().apropos }}
+                {{ profile()!.apropos }}
               </p>
             </div>
           }

src/app/routes/profile/profile-detail/profile-detail.component.spec.ts

@@ -9,12 +9,22 @@ import { Project } from '@app/domain/projects/project.model';
 import { Sector } from '@app/domain/sectors/sector.model';
 import { SectorRepository } from '@app/domain/sectors/sector.repository';
 import { SECTOR_REPOSITORY_TOKEN } from '@app/infrastructure/sectors/sector-repository.token';
+import { ToastrService } from 'ngx-toastr';
+import { PROFILE_REPOSITORY_TOKEN } from '@app/infrastructure/profiles/profile-repository.token';
+import { Profile } from '@app/domain/profiles/profile.model';
+import { ProfileRepository } from '@app/domain/profiles/profile.repository';
+import { USER_REPOSITORY_TOKEN } from '@app/infrastructure/users/user-repository.token';
+import { UserRepository } from '@app/domain/users/user.repository';
+import { User } from '@app/domain/users/user.model';
 
 describe('ProfileDetailComponent', () => {
   let component: ProfileDetailComponent;
   let fixture: ComponentFixture<ProfileDetailComponent>;
   let mockProjectRepository: jest.Mocked<ProjectRepository>;
+  let mockProfileRepository: jest.Mocked<Partial<ProfileRepository>>;
   let mockSectorRepo: SectorRepository;
+  let mockToastr: Partial<ToastrService>;
+  let mockUserRepo: jest.Mocked<Partial<UserRepository>>;
 
   beforeEach(async () => {
     mockProjectRepository = {
@@ -29,12 +39,34 @@ describe('ProfileDetailComponent', () => {
       getOne: jest.fn().mockReturnValue(of({} as Sector)),
     };
 
+    mockToastr = {
+      warning: jest.fn(),
+      success: jest.fn(),
+      info: jest.fn(),
+      error: jest.fn(),
+    };
+
+    mockProfileRepository = {
+      create: jest.fn().mockReturnValue(of({} as Profile)),
+      list: jest.fn().mockReturnValue(of([])),
+      getById: jest.fn().mockReturnValue(of({} as Profile)),
+      update: jest.fn().mockReturnValue(of({} as Profile)),
+    };
+
+    mockUserRepo = {
+      getUserById: jest.fn().mockReturnValue(of({} as User)),
+      update: jest.fn(),
+    };
+
     await TestBed.configureTestingModule({
       imports: [ProfileDetailComponent],
       providers: [
         provideRouter([]),
         { provide: PROJECT_REPOSITORY_TOKEN, useValue: mockProjectRepository },
+        { provide: PROFILE_REPOSITORY_TOKEN, useValue: mockProfileRepository },
         { provide: SECTOR_REPOSITORY_TOKEN, useValue: mockSectorRepo },
+        { provide: USER_REPOSITORY_TOKEN, useValue: mockUserRepo },
+        { provide: ToastrService, useValue: mockToastr },
       ],
     }).compileComponents();
 

src/app/routes/profile/profile-detail/profile-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, inject } from '@angular/core';
+import { Component, computed, effect, inject, OnInit } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { UpperCasePipe } from '@angular/common';
 import { User } from '@app/domain/users/user.model';
@@ -7,29 +7,86 @@ import { ReseauxComponent } from '@app/shared/components/reseaux/reseaux.compone
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { ProjectListComponent } from '@app/shared/components/project-list/project-list.component';
 import { environment } from '@env/environment';
-import { Profile } from '@app/domain/profiles/profile.model';
+import { WebShareService } from '@app/infrastructure/shareData/web-share.service';
+import { ProfileFacade } from '@app/ui/profiles/profile.facade';
+import { ProfileViewModel } from '@app/ui/profiles/profile.presenter.model';
+import { ActionType } from '@app/domain/action-type.util';
+import { UserFacade } from '@app/ui/users/user.facade';
 
 @Component({
   selector: 'app-profile-detail',
   standalone: true,
   imports: [ChipsComponent, ReseauxComponent, RouterLink, UpperCasePipe, ProjectListComponent],
+  providers: [UserFacade],
   templateUrl: './profile-detail.component.html',
   styleUrl: './profile-detail.component.scss',
 })
 @UntilDestroy()
-export class ProfileDetailComponent {
+export class ProfileDetailComponent implements OnInit {
+  private readonly webShare = inject(WebShareService);
+  private readonly profileFacade = inject(ProfileFacade);
+  private readonly userFacade = inject(UserFacade);
   protected readonly environment = environment;
+  protected readonly ActionType = ActionType;
   private readonly route = inject(ActivatedRoute);
 
-  protected extraData: { user: User; profile: Profile } = this.route.snapshot.data['profile'];
+  protected extraData: { user: User; profile: ProfileViewModel } | undefined =
+    this.route.snapshot.data['profile'];
 
-  protected user = computed(() => {
+  slug = computed(() => this.route.snapshot.params['name'] ?? '');
-    if (this.extraData != undefined) return this.extraData.user;
-    return {} as User;
-  });
 
-  protected profile = computed(() => {
+  protected user = this.userFacade.user;
-    if (this.extraData != undefined) return this.extraData.profile;
+  protected readonly userLoading = this.userFacade.loading;
-    return {} as Profile;
+  protected readonly userError = this.userFacade.error;
+
+  protected profile = this.profileFacade.profile;
+  protected readonly profileLoading = this.profileFacade.loading;
+  protected readonly profileError = this.profileFacade.error;
+
+  constructor() {
+    effect(() => {
+      if (!this.profileLoading().isLoading) {
+        switch (this.profileLoading().action) {
+          case ActionType.READ:
+            if (!this.profileError().hasError) {
+              this.profile = this.profileFacade.profile;
+            }
+            break;
+        }
+      }
+      if (!this.userLoading().isLoading) {
+        switch (this.userLoading().action) {
+          case ActionType.READ:
+            if (!this.userError().hasError) {
+              this.user = this.userFacade.user;
+            }
+            break;
+        }
+      }
     });
   }
+
+  ngOnInit() {
+    if (this.extraData === undefined) {
+      const extractSlug = this.slug().split('-');
+      const profileId = extractSlug[extractSlug.length - 1];
+      const userId = extractSlug[extractSlug.length - 2];
+      this.profileFacade.loadOne(profileId);
+      this.userFacade.loadOne(userId);
+    } else {
+      this.profile.set(this.extraData.profile);
+      this.user.set(this.extraData.user);
+    }
+  }
+
+  async onShare() {
+    if (!this.profile) return;
+    const fullUrl = `${window.location.origin}/profiles/${this.slug()}`;
+
+    await this.webShare.share({
+      title: `Découvrez le profil de ${this.profile.name}`,
+      text: `Jette un œil à ce profil intéressant sur notre application !`,
+      url: fullUrl,
+    });
+  }
+}

src/app/routes/profile/profile-list/profile-list.component.spec.ts

@@ -20,7 +20,7 @@ describe('ProfileListComponent', () => {
     mockProfileRepository = {
       create: jest.fn().mockReturnValue(of({} as Profile)),
       list: jest.fn().mockReturnValue(of([])),
-      getByUserId: jest.fn().mockReturnValue(of({} as Profile)),
+      getById: jest.fn().mockReturnValue(of({} as Profile)),
       update: jest.fn().mockReturnValue(of({} as Profile)),
     };
 

src/app/shared/components/my-profile-update-cv-form/my-profile-update-cv-form.component.spec.ts

@@ -26,7 +26,7 @@ describe('MyProfileUpdateCvFormComponent', () => {
       create: jest.fn(),
       list: jest.fn(),
       update: jest.fn().mockReturnValue(of({} as Profile)),
-      getByUserId: jest.fn().mockReturnValue(of({} as Profile)),
+      getById: jest.fn().mockReturnValue(of({} as Profile)),
     };
 
     await TestBed.configureTestingModule({

src/app/shared/components/my-profile-update-form/my-profile-update-form.component.spec.ts

@@ -39,7 +39,7 @@ describe('MyProfileUpdateFormComponent', () => {
       create: jest.fn(),
       list: jest.fn(),
       update: jest.fn().mockReturnValue(of({} as Profile)),
-      getByUserId: jest.fn().mockReturnValue(of({} as Profile)),
+      getById: jest.fn().mockReturnValue(of({} as Profile)),
     };
 
     mockSectorRepo = {

src/app/shared/components/my-profile-update-project-form/my-profile-update-project-form.component.spec.ts

@@ -51,7 +51,7 @@ describe('MyProfileUpdateProjectFormComponent', () => {
       create: jest.fn(),
       list: jest.fn(),
       update: jest.fn(),
-      getByUserId: jest.fn(),
+      getById: jest.fn(),
     };
 
     await TestBed.configureTestingModule({

src/app/shared/components/nav-bar/nav-bar.component.html

@@ -7,12 +7,12 @@
       <a
         [routerLink]="['/']"
         class="flex items-center space-x-2 group"
-        aria-label="Accueil TrouveTonProfile"
+        aria-label="Accueil TrouveTonProfil"
       >
         <span
           class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
         >
-          TrouveTonProfile
+          TrouveTonProfil
         </span>
       </a>
 

src/app/shared/components/nav-bar/nav-bar.component.spec.ts

@@ -4,7 +4,6 @@ import { NavBarComponent } from './nav-bar.component';
 import { ThemeService } from '@app/core/services/theme/theme.service';
 import { provideRouter } from '@angular/router';
 import { signal } from '@angular/core';
-import { AuthModel } from '@app/domain/authentification/auth.model';
 import { User } from '@app/domain/users/user.model';
 import { AUTH_REPOSITORY_TOKEN } from '@app/infrastructure/authentification/auth-repository.token';
 import { AuthRepository } from '@app/domain/authentification/auth.repository';
@@ -53,7 +52,7 @@ describe('NavBarComponent', () => {
       create: jest.fn(),
       list: jest.fn(),
       update: jest.fn(),
-      getByUserId: jest.fn(),
+      getById: jest.fn(),
     };
 
     await TestBed.configureTestingModule({

src/app/shared/components/project-list/project-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { ProjectItemComponent } from '@app/shared/components/project-item/project-item.component';
 import { ProjectFacade } from '@app/ui/projects/project.facade';
@@ -11,14 +11,14 @@ import { ProjectFacade } from '@app/ui/projects/project.facade';
   styleUrl: './project-list.component.scss',
 })
 @UntilDestroy()
-export class ProjectListComponent implements OnInit {
+export class ProjectListComponent implements OnChanges {
   @Input({ required: true }) userProjectId = '';
 
   private readonly projectFacade = new ProjectFacade();
 
   protected projects = this.projectFacade.projects;
 
-  ngOnInit(): void {
+  ngOnChanges(changes: SimpleChanges) {
     this.projectFacade.load(this.userProjectId);
   }
 }

src/app/shared/components/vertical-profile-item/vertical-profile-item.component.html

@@ -1,5 +1,5 @@
 @if (user() !== undefined) {
-  <a [routerLink]="[user().slug]" [state]="{ user: user(), profile }" class="block group">
+  <a [routerLink]="[slug()]" [state]="{ user: user(), profile }" class="block group">
     <!-- Card du profil -->
     <div
       class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"

src/app/shared/components/vertical-profile-item/vertical-profile-item.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, Input, OnInit } from '@angular/core';
+import { Component, computed, inject, Input, OnInit } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { environment } from '@env/environment';
@@ -23,6 +23,12 @@ export class VerticalProfileItemComponent implements OnInit {
   protected readonly loading = this.facade.loading;
   protected readonly error = this.facade.error;
 
+  protected slug = computed(() => {
+    const slug = this.user().slug ?? '';
+    const profileId = this.profile.id ? this.profile.id : '';
+    return slug === '' ? profileId : slug.concat('-', profileId);
+  });
+
   ngOnInit(): void {
     this.facade.loadOne(this.profile.utilisateur);
   }

src/app/shared/features/filter/filter.component.spec.ts

@@ -20,7 +20,7 @@ describe('FilterComponent', () => {
     mockProfileRepository = {
       create: jest.fn().mockReturnValue(of({} as Profile)),
       list: jest.fn().mockReturnValue(of([])),
-      getByUserId: jest.fn().mockReturnValue(of({} as Profile)),
+      getById: jest.fn().mockReturnValue(of({} as Profile)),
       update: jest.fn().mockReturnValue(of({} as Profile)),
     };
 

src/app/shared/features/login/login.component.spec.ts

@@ -42,7 +42,7 @@ describe('LoginComponent', () => {
       create: jest.fn(),
       list: jest.fn(),
       update: jest.fn(),
-      getByUserId: jest.fn(),
+      getById: jest.fn(),
     };
 
     await TestBed.configureTestingModule({

src/app/shared/features/register/register.component.spec.ts

@@ -21,7 +21,7 @@ describe('RegisterComponent', () => {
       create: jest.fn(),
       list: jest.fn(),
       update: jest.fn(),
-      getByUserId: jest.fn(),
+      getById: jest.fn(),
     };
 
     mockToastrService = {

src/app/shared/features/search/search.component.spec.ts

@@ -21,7 +21,7 @@ describe('SearchComponent', () => {
     mockProfileRepo = {
       create: jest.fn().mockReturnValue(of({} as Profile)),
       list: jest.fn().mockReturnValue(of([])),
-      getByUserId: jest.fn().mockReturnValue(of({} as Profile)),
+      getById: jest.fn().mockReturnValue(of({} as Profile)),
       update: jest.fn().mockReturnValue(of({} as Profile)),
     };
 

src/app/testing/domain/profiles/fake-profile.repository.ts

@@ -8,8 +8,8 @@ export class FakeProfileRepository implements ProfileRepository {
     return of(mockProfilePaginated);
   }
 
-  getByUserId(userId: string): Observable<Profile> {
+  getById(profileId: string): Observable<Profile> {
-    const profile = mockProfiles.find((p) => p.utilisateur === userId) ?? ({} as Profile);
+    const profile = mockProfiles.find((p) => p.utilisateur === profileId) ?? ({} as Profile);
     return of(profile);
   }
 

src/app/testing/infrastructure/profiles/pb-profile.repository.spec.ts

@@ -15,7 +15,7 @@ describe('PbProfileRepository', () => {
     // Création d’un faux client PocketBase avec les méthodes dont on a besoin
     mockCollection = {
       getList: jest.fn(),
-      getFirstListItem: jest.fn(),
+      getOne: jest.fn(),
       create: jest.fn(),
       update: jest.fn(),
     };
@@ -54,13 +54,13 @@ describe('PbProfileRepository', () => {
   // ------------------------------------------
   // 🔹 TEST : getByUserId()
   // ------------------------------------------
-  it('devrait appeler pb.collection("profiles").getFirstListItem() avec le bon filtre utilisateur', () => {
+  it('devrait appeler pb.collection("profiles").getOne() avec le bon filtre utilisateur', () => {
-    const userId = '1';
+    const profileId = '1';
 
-    mockCollection.getFirstListItem.mockResolvedValue(mockProfiles);
+    mockCollection.getOne.mockResolvedValue(mockProfiles);
 
-    repo.getByUserId(userId).subscribe((result) => {
+    repo.getById(profileId).subscribe((result) => {
-      expect(mockCollection.getFirstListItem).toHaveBeenCalledWith(`utilisateur="${userId}"`);
+      expect(mockCollection.getOne).toHaveBeenCalledWith(`${profileId}`, { expand: 'utilisateur' });
       expect(result).toEqual(mockProfiles[0]);
     });
   });

src/app/ui/profiles/profile.facade.ts

@@ -67,9 +67,9 @@ export class ProfileFacade {
     });
   }
 
-  loadOne(userId: string) {
+  loadOne(profileId: string) {
     this.handleError(ActionType.READ, false, null, true);
-    this.getUseCase.execute(userId).subscribe({
+    this.getUseCase.execute(profileId).subscribe({
       next: (profile: Profile) => {
         this.profile.set(ProfilePresenter.toViewModel(profile));
         this.handleError(ActionType.READ, false, null, false);

src/app/ui/users/user.presenter.ts

@@ -4,8 +4,8 @@ import { User } from '@app/domain/users/user.model';
 export class UserPresenter {
   toViewModel(user: User): UserViewModel {
     const slug = user.name
-      ? user.name.toLowerCase().replace(/\s/g, '-')
+      ? this.generateProfileSlug(user.name, user.id)
-      : user.email.split('@')[0].toLowerCase().trim();
+      : this.generateProfileSlug('Non renséigné');
 
     let userViewModel: UserViewModel = {
       id: user.id,
@@ -30,4 +30,16 @@ export class UserPresenter {
   toViewModels(users: User[]): UserViewModel[] {
     return users.map(this.toViewModel);
   }
+
+  private generateProfileSlug(name: string, id?: string): string {
+    return name
+      .concat(id ? ` ${id}` : '')
+      .toLowerCase()
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '') // Enlève les accents
+      .trim()
+      .replace(/[^a-z0-9 -]/g, '') // Enlève les caractères spéciaux
+      .replace(/\s+/g, '-') // Remplace les espaces par des tirets
+      .replace(/-+/g, '-'); // Évite les tirets multiples
+  }
 }

src/app/usecase/profiles/get-profile.usecase.ts

@@ -5,7 +5,7 @@ import { Profile } from '@app/domain/profiles/profile.model';
 export class GetProfileUseCase {
   constructor(private readonly repo: ProfileRepository) {}
 
-  execute(userId: string): Observable<Profile> {
+  execute(profileId: string): Observable<Profile> {
-    return this.repo.getByUserId(userId);
+    return this.repo.getById(profileId);
   }
 }

src/app/usecase/users/get-user.usecase.ts

@@ -1,8 +1,10 @@
 import { UserRepository } from '@app/domain/users/user.repository';
+import { Observable } from 'rxjs';
+import { User } from '@app/domain/users/user.model';
 
 export class GetUserUseCase {
   constructor(private readonly repo: UserRepository) {}
-  execute(userId: string) {
+  execute(userId: string): Observable<User> {
     return this.repo.getUserById(userId);
   }
 }