Fix fav

src/app/components/animaux/animaux-details/animaux-details.component.html

@@ -13,7 +13,16 @@
         class="focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:focus:ring-yellow-900">
             Sauvegarder
         </button>
-
+
+        <!-- Bouton Favori -->
+        <fa-icon *ngIf="isAuthenticated" [icon]="chat.isFavori ? faHeart : fasHeart"
+            aria-label="Favori"
+            title="Favori"
+            class="mr-2 fa-xl"
+            [ngClass]="{'text-red-500': chat.isFavori, 'cursor-pointer': true}"
+            (click)="toggleFavori(chat)">
+        </fa-icon>
+
         <div class="flex justify-center">
             <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tight text-gray-900 sm:text-2xl md:mx-auto">
                 <label *ngIf="!isEditMode" class="block">{{ chat.nom }}</label> <!-- class="block" pour assurer l'affichage correct -->

src/app/components/animaux/animaux-details/animaux-details.component.ts

@@ -3,11 +3,13 @@ import { Component, Inject } from '@angular/core';
 import { Chat, Sexe } from '../../../interfaces/interfaces';
 import { AppService } from '../../../services/app.service';
 import { ActivatedRoute } from '@angular/router';
-import { faMars, faTrash, faUpload, faVenus } from '@fortawesome/free-solid-svg-icons';
+import { faMars, faTrash, faUpload, faVenus, faHeart } from '@fortawesome/free-solid-svg-icons';
+import { faHeart as fasHeart } from '@fortawesome/free-regular-svg-icons';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ToastrService } from 'ngx-toastr';
 import { AuthService } from '@auth0/auth0-angular';
 import { UserService } from '../../../services/user.service';
+import { Subscription, firstValueFrom } from 'rxjs';
 
 @Component({
   selector: 'app-animaux-details',
@@ -21,9 +23,14 @@ export class AnimauxDetailsComponent {
   faVenus = faVenus;
   faTrash = faTrash;
   faUpload = faUpload;
+  faHeart = faHeart;
+  fasHeart = fasHeart;
   dataModel: any;
   description: string = '<p>Le chat est ....</p>';
   isEditMode: boolean = false;
+  isAuthenticated: boolean = false;
+  private subscriptions = new Subscription();
+
   constructor(
     private route: ActivatedRoute,
     private appService: AppService,
@@ -34,8 +41,12 @@ export class AnimauxDetailsComponent {
     public userService: UserService,
   ) {}
 
-  ngOnInit() {
+  async ngOnInit() {
+    this.isAuthenticated = await firstValueFrom(this.auth.isAuthenticated$);
     this.getCat();
+    if (this.isAuthenticated) {
+      this.getFavs();
+    }
   }
 
   sanitizeHtml(html: string): SafeHtml {
@@ -75,4 +86,44 @@ export class AnimauxDetailsComponent {
       },
     });
   }
+  getFavs() {
+    const favSubscription = this.appService.getFavorisByUser().subscribe({
+      next: (favoriIds: number[]) => {
+        if (this.chat) {
+          this.chat.isFavori = favoriIds.includes(this.chat.id);
+        }
+      },
+      error: (error) => {
+        const errorText = 'Erreur lors de la récupération des favoris';
+        console.error(errorText, error);
+        this.toastr.error(errorText, 'Erreur');
+      },
+      complete: () => console.log('Completion handler')
+    });
+    this.subscriptions.add(favSubscription);
+  }
+
+  toggleFavori(chat: Chat) {
+    if (!this.isAuthenticated) {
+      this.toastr.warning('Vous devez être connecté pour ajouter un chat aux favoris', 'Connexion requise');
+      return;
+    }
+
+    if (chat.isFavori) {
+      this.appService.removeFavoriByCat(chat.id).subscribe(() => {
+        chat.isFavori = false;
+        this.toastr.info('Chat retiré des favoris', 'Favori');
+      });
+    } else {
+      this.appService.createFavori({ chatId: chat.id }).subscribe(() => {
+        chat.isFavori = true;
+        this.toastr.info('Chat ajouté aux favoris', 'Favori');
+      });
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
+
 }

src/app/components/animaux/animaux-list/animaux-list.component.ts

@@ -8,7 +8,7 @@ import { DOCUMENT, DatePipe } from '@angular/common';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ToastrService } from 'ngx-toastr';
 import { AuthService } from '@auth0/auth0-angular';
-import { Subscription } from 'rxjs';
+import { Subscription, firstValueFrom } from 'rxjs';
 
 @Component({
   selector: 'app-animaux-list',
@@ -25,6 +25,7 @@ export class AnimauxListComponent {
 
   sexe = Sexe;
   fasHeart = fasHeart;
+  isAuthenticated: boolean = false;
 
   constructor(
     private appService: AppService,
@@ -38,18 +39,25 @@ export class AnimauxListComponent {
   chats: Chat[] = [];
   favoris: Favori[] = [];
   private subscriptions = new Subscription();
-
-
-  ngOnInit() {
-    if (this.profileContext) {
+  
+  async ngOnInit() {
+    this.isAuthenticated = await firstValueFrom(this.auth.isAuthenticated$);
+    if (this.profileContext && this.isAuthenticated) {
       this.getCatByFavoris();
     } else {
-      this.getFavs();
       this.getCats();
+      if (this.isAuthenticated) {
+        this.getFavs();
+      }
     }
   }
-
+  
   toggleFavori(chat: Chat) {
+    if (!this.isAuthenticated) {
+      this.toastr.warning('Vous devez être connecté pour ajouter un chat aux favoris', 'Connexion requise');
+      return;
+    }
+
     if (chat.isFavori) {
       // Si le chat est déjà un favori, retirez-le des favoris
       this.appService.removeFavoriByCat(chat.id).subscribe(() => {
@@ -118,8 +126,6 @@ export class AnimauxListComponent {
     });
     this.subscriptions.add(favSubscription);
   }
-
-
 
   ngOnDestroy() {
     this.subscriptions.unsubscribe();