Merge pull request #62 from Potits-chats/LMST2-95-Edition-page-Detail…

…-Association-ne-fonctionne-pas

23 Filtre et Pagination

src/app/app.module.ts

@@ -47,6 +47,8 @@ import { BugComponent } from './components/bug/bug.component';
 
 
 import { AssociationsDetailsComponent } from './components/associations/associations-details/associations-details.component';
+import { PaginatorModule } from 'primeng/paginator';
+
 
 @NgModule({
   declarations: [
@@ -130,6 +132,7 @@ import { AssociationsDetailsComponent } from './components/associations/associat
     ToastrModule.forRoot({
       positionClass: 'toast-bottom-right',
     }),
+    PaginatorModule,
   ],
   providers: [
     { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' },

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

@@ -1,13 +1,50 @@
+<div class="bg-white px-2 py-8 sm:py-10 lg:px-8">
+    <div class="mx-auto max-w-2xl text-center">
+        <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">Les chats à adopter</h1>
+        <p class="mt-4 text-md leading-6 text-gray-500">Nous avons plusieurs adorables chats qui cherchent un foyer
+            aimant. Parcourez notre liste pour trouver votre compagnon parfait.</p>
+    </div>
+</div>
+
 <app-loader *ngIf="!isLoaded"></app-loader>
 
-<div *ngIf="isLoaded && chats &&  chats.length > 0"
-    class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
+<!-- Filter Inputs -->
+<div *ngIf="isLoaded" class="px-4 py-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+    <form [formGroup]="form" (ngSubmit)="onSearch()" class="flex flex-wrap gap-4 justify-center items-center mb-8">
+        <select formControlName="ville"
+            class="form-select block w-full sm:w-auto px-3 py-2 border border-gray-300 rounded-md text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+            <option value="">Ville</option>
+            <option value="toulouse">Toulouse</option>
+        </select>
+        <select formControlName="race"
+            class="form-select block w-full sm:w-auto px-3 py-2 border border-gray-300 rounded-md text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+            <option value="">Race des chats</option>
+            <option value="siamois">Siamois</option>
+            <option value="persan">Persan</option>
+            <option value="maine-coon">Maine Coon</option>
+        </select>
+        <select formControlName="association" class="form-select block w-full sm:w-auto px-3 py-2 border border-gray-300 rounded-md text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+            <option value="">Association</option>
+            <option *ngFor="let association of associations" [value]="association.id">
+                {{ association.nom }}
+            </option>
+        </select>
+        <button type="submit" class="px-4 py-2 bg-indigo-500 text-white rounded-md">Chercher</button>
+        <button type="button" (click)="onClear()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md">Clean</button>
+    </form>
+</div>
 
-    <div class="grid gap-8 lg:grid-cols-3 sm:max-w-sm sm:mx-auto lg:max-w-full">
 
+<div *ngIf="isLoaded && chats && chats.length > 0"
+    class="px-4 py-12 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-16">
+
+    <div class="text-left mb-8">
+        <p class="text-lg font-medium text-gray-700">Nombre de chats disponibles : {{ chats.length }}</p>
+    </div>
+    <div class="grid gap-8 lg:grid-cols-3 sm:max-w-sm sm:mx-auto lg:max-w-full">
         <div *ngFor="let chat of chats; let index = index"
             class="overflow-hidden transition-shadow shadow-xl duration-300 bg-white rounded shadow-sm">
-            <div class="group relative m-0 flex h-full w-96 rounded-xl ring-gray-900/5 sm:mx-auto sm:max-w-lg">
+            <div class="group relative m-0 flex h-full w-full rounded-xl ring-gray-900/5 sm:mx-auto sm:max-w-lg">
                 <div
                     class="z-10 h-full w-full overflow-hidden rounded-xl border opacity-80 transition duration-300 ease-in-out group-hover:opacity-100 dark:opacity-80">
                     <a [routerLink]="'/animaux/' + chat.id">
@@ -21,15 +58,10 @@
                                 aria-label="Association" title="L'association">{{chat.association.nom}}</a>
                             <span class="text-gray-600"> - {{formatDate(chat.createdAt)}}</span>
                         </p>
-                        <fa-icon *ngIf="auth.isAuthenticated$ | async"
-                                [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>
-
+                        <fa-icon *ngIf="auth.isAuthenticated$ | async" [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 [routerLink]="'/animaux/' + chat.id" aria-label="Animaux" title="Découvrir plus"
                             class="inline-block mb-3 text-2xl font-bold leading-5 transition-colors duration-200 hover:text-deep-purple-accent-700">
                             <a [routerLink]="'/animaux/' + chat.id" class="inline-block">{{chat.nom}}</a>
@@ -43,15 +75,15 @@
                 </div>
             </div>
         </div>
-
     </div>
-</div>
 
-
-<div *ngIf="isLoaded && (!chats || chats.length == 0)" class="text-center mt-12" >
-    <h2 class="text-4xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2">
-        Pas de chat pour le moment :/
-    </h2>
+    <!-- Pagination Block -->
+    <div class="w-full flex justify-center mt-8">
+        <p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="chats.length"
+            [rowsPerPageOptions]="[10, 20, 30]"></p-paginator>
+    </div>
 </div>
 
-
+<div *ngIf="isLoaded && (!chats || chats.length == 0)" class="text-center mt-12">
+    <h2 class="text-4xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2">Pas de chat pour le moment :/</h2>
+</div>

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

@@ -3,12 +3,14 @@ import { faMars, faVenus, faHeart } from '@fortawesome/free-solid-svg-icons';
 import { faHeart as fasHeart } from '@fortawesome/free-regular-svg-icons';
 
 import { AppService } from '../../../services/app.service';
-import { Chat, Sexe, Favori } from '../../../interfaces/interfaces';
+import { Chat, Sexe, Favori, PageEvent, Association } from '../../../interfaces/interfaces';
 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, firstValueFrom } from 'rxjs';
+import { PaginatorState } from 'primeng/paginator';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-animaux-list',
@@ -26,20 +28,41 @@ export class AnimauxListComponent {
   sexe = Sexe;
   fasHeart = fasHeart;
   isAuthenticated: boolean = false;
+  chats: Chat[] = [];
+  favoris: Favori[] = [];
+  associations: Association[] = [];
+  private subscriptions = new Subscription();
+
+
+  // Pagination
+  totalRecords = 3;
+  rows = 10;
+  first = 0;
+  currentPage = 1;
+  selectedCity: string | null = null;
+  selectedCatBreed: string | null = null;
+  selectedAssociation: string | null = null;
+  form: FormGroup;
+
 
   constructor(
     private appService: AppService,
     private datePipe: DatePipe,
     private sanitizer: DomSanitizer,
     private toastr: ToastrService,
+    private fb: FormBuilder,
     public auth: AuthService,
     @Inject(DOCUMENT) private doc: Document
-  ) {}
+  ) {
+    this.form = this.fb.group({
+      ville: [''],
+      race: [''],
+      association: ['']
+    });
+  }
 
-  chats: Chat[] = [];
-  favoris: Favori[] = [];
-  private subscriptions = new Subscription();
 
+
   async ngOnInit() {
     this.isAuthenticated = await firstValueFrom(this.auth.isAuthenticated$);
     if (this.profileContext && this.isAuthenticated) {
@@ -50,6 +73,7 @@ export class AnimauxListComponent {
         this.getFavs();
       }
     }
+    this.getAllAssociation();
   }
 
   toggleFavori(chat: Chat) {
@@ -76,7 +100,14 @@ export class AnimauxListComponent {
   }
 
   getCats() {
-    const catSubscription = this.appService.getAllCats().subscribe({
+    const filters = {
+      ville: this.form.value.ville,
+      race: this.form.value.race,
+      association: this.form.value.association
+    };
+
+    console.log('🚀 ~ AnimauxListComponent ~ catSubscription ~ filters:', filters);
+    const catSubscription = this.appService.getAllCats(filters).subscribe({
       next: (chats) => {
         this.chats = chats;
         this.isLoaded = true;
@@ -92,6 +123,22 @@ export class AnimauxListComponent {
     this.subscriptions.add(catSubscription);
   }
 
+  getAllAssociation() {
+    const associationSubscription = this.appService.getAllAssociations().subscribe({
+      next: (associations) => {
+        this.associations = associations;
+        console.log('🚀 ~ AnimauxListComponent ~ associationSubscription ~ this.associations:', this.associations);
+      },
+      error: (error) => {
+        const errorText = 'Erreur lors de la récupération des associations';
+        console.error(errorText, error);
+        this.toastr.error(errorText, 'Erreur');
+      },
+      complete: () => console.log('Completion handler')
+    });
+    this.subscriptions.add(associationSubscription);
+  }
+
   getCatByFavoris() {
     const favCatSubscription = this.appService.getCatByFavoris().subscribe({
       next: (chats) => {
@@ -140,4 +187,28 @@ export class AnimauxListComponent {
     const formattedDate = this.datePipe.transform(date, 'dd MMM yyyy');
     return formattedDate || ''; // return an empty string if the date is not valid
   }
+
+  onPageChange(event: PaginatorState) {
+    this.first = event.first ?? 0;
+    this.rows = event.rows ?? 10;
+    this.currentPage = Math.floor(this.first / this.rows) + 1;
+  }
+
+  onSearch() {
+    console.log('Search clicked');
+    console.log(this.form.value);
+    this.getCats();
+
+  }
+
+  onClear() {
+    console.log('Clear clicked');
+    this.form.reset({
+      ville: '',
+      race: '',
+      association: ''
+    });
+    this.getCats();
+  }
+
 }

src/app/interfaces/interfaces.ts

@@ -120,4 +120,13 @@ export enum UserRole {
   User = 'User',
   Admin = 'Admin',
   Asso = 'Asso'
+}
+
+
+// PrimeNG Paginator
+export interface PageEvent {
+  first: number;
+  rows: number;
+  page: number;
+  pageCount: number;
 }

src/app/services/app.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable, map, share, take } from 'rxjs';
 import { Chat, Favori, Association } from '../interfaces/interfaces';
 import { environment } from 'src/environments/environment';
@@ -26,8 +26,18 @@ export class AppService {
     );
   }
 
-  getAllCats(): Observable<Chat[]> {
-    return this.http.get(this.api + '/chats').pipe(
+  getAllCats(filters: any = {}): Observable<Chat[]> {
+    let params = new HttpParams();
+    if (filters.ville) {
+      params = params.append('ville', filters.ville);
+    }
+    if (filters.race) {
+      params = params.append('race', filters.race);
+    }
+    if (filters.association) {
+      params = params.append('associationId', filters.association);
+    }
+    return this.http.get(this.api + '/chats', { params }).pipe(
       map((res: any) => res),
       share(),
       take(1)