refactoring des items

src/app/shared/components/chips/chips.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { TitleCasePipe } from '@angular/common';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { SectorFacade } from '@app/ui/sectors/sector.facade';
@@ -6,19 +6,22 @@ import { SectorFacade } from '@app/ui/sectors/sector.facade';
 @Component({
   selector: 'app-chips',
   standalone: true,
+  providers: [SectorFacade],
   imports: [TitleCasePipe],
   templateUrl: './chips.component.html',
   styleUrl: './chips.component.scss',
 })
 @UntilDestroy()
-export class ChipsComponent implements OnInit {
+export class ChipsComponent implements OnChanges {
   @Input({ required: true }) sectorId: string | null = null;
 
-  private readonly sectorFacade = new SectorFacade();
+  private readonly sectorFacade = inject(SectorFacade);
   protected sector = this.sectorFacade.sector;
+  protected readonly loading = this.sectorFacade.loading;
+  protected readonly error = this.sectorFacade.error;
 
-  ngOnInit(): void {
-    if (this.sectorId) {
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.sectorId && !this.loading().isLoading) {
       this.sectorFacade.loadOne(this.sectorId);
     }
   }

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

@@ -69,24 +69,22 @@
         }
 
         <!-- Profession -->
-        <p class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-4">
+        <p class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">
           {{ profile.profession || 'Profession non renseignée' }}
         </p>
       </div>
 
       <!-- Partie inférieure avec infos -->
-      <div class="px-6 pb-6 space-y-3 border-t border-gray-100 dark:border-gray-700 pt-4">
-        <!-- Secteur -->
-        <div class="flex justify-center">
-          <app-chips [sectorId]="profile.secteur" />
+      <div class="px-6 pb-6 space-y-3 border-t border-gray-100 dark:border-gray-700">
+        <div class="pt-3">
+          <button
+            class="block w-full select-none rounded-lg bg-pink-500 py-3.5 px-7 text-center align-middle font-sans text-sm font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
+            type="button"
+            data-ripple-light="true"
+          >
+            <small>En savoir plus</small>
+          </button>
         </div>
-
-        <!-- Réseaux sociaux -->
-        @if (profile.reseaux) {
-          <div class="flex justify-center">
-            <app-reseaux [reseaux]="profile.reseaux" />
-          </div>
-        }
       </div>
 
       <!-- Indicateur de hover (bordure animée) -->

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

@@ -1,8 +1,6 @@
 import { Component, inject, Input, OnInit } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
 import { UntilDestroy } from '@ngneat/until-destroy';
-import { ChipsComponent } from '@app/shared/components/chips/chips.component';
-import { ReseauxComponent } from '@app/shared/components/reseaux/reseaux.component';
 import { environment } from '@env/environment';
 import { ProfileViewModel } from '@app/ui/profiles/profile.presenter.model';
 import { UserFacade } from '@app/ui/users/user.facade';
@@ -11,7 +9,7 @@ import { UserFacade } from '@app/ui/users/user.facade';
   selector: 'app-vertical-profile-item',
   standalone: true,
   providers: [UserFacade],
-  imports: [ChipsComponent, ReseauxComponent, RouterLink],
+  imports: [RouterLink],
   templateUrl: './vertical-profile-item.component.html',
   styleUrl: './vertical-profile-item.component.scss',
 })

src/app/ui/sectors/sector.facade.ts

@@ -1,4 +1,4 @@
-import { inject, signal } from '@angular/core';
+import { inject, Injectable, signal } from '@angular/core';
 import { SECTOR_REPOSITORY_TOKEN } from '@app/infrastructure/sectors/sector-repository.token';
 import { ListSectorUsecase } from '@app/usecase/sectors/list-sector.usecase';
 import { GetSectorUseCase } from '@app/usecase/sectors/get-sector.usecase';
@@ -9,6 +9,7 @@ import { SectorPresenterModel } from '@app/ui/sectors/sector.presenter.model';
 import { Sector } from '@app/domain/sectors/sector.model';
 import { SectorPresenter } from '@app/ui/sectors/sector.presenter';
 
+@Injectable()
 export class SectorFacade {
   private readonly sectorRepo = inject(SECTOR_REPOSITORY_TOKEN);