Merge pull request #56 from Potits-chats/LMST2-57-Page-Association

Add asso list

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

@@ -1,14 +1,29 @@
-<p>associations-list works!</p>
-
-
-<!-- <div class="card flex justify-content-center">
-    <p-toast></p-toast>
-    <p-fileUpload name="demo[]" url="https://www.primefaces.org/cdn/api/upload.php" (onUpload)="onUpload($event)" [multiple]="true" accept="image/*" [maxFileSize]="1000000">
-        <ng-template pTemplate="content">
-            <ul *ngIf="uploadedFiles.length">
-                <li *ngFor="let file of uploadedFiles">{{ file.name }} - {{ file.size }} bytes</li>
-            </ul>
-        </ng-template>
-    </p-fileUpload>
-</div> -->
+<app-loader *ngIf="!isLoaded"></app-loader>
 
+<div *ngIf="isLoaded && associations && associations.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">
+  <ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+    <li *ngFor="let association of associations" class="col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow">
+      <div class="flex w-full items-center justify-between space-x-6 p-6">
+        <div class="flex-1">
+          <div class="flex items-center space-x-3">
+            <a [routerLink]="['/associations', association.id]">
+              <h3 class="truncate text-sm font-medium text-gray-900">{{ association.nom }}</h3>
+            </a>
+          </div>
+          <p class="mt-1 text-sm text-gray-500">
+            {{ association.shortDescription }}
+          </p>
+        </div>
+        <img class="h-20 w-20 flex-shrink-0 rounded-full bg-gray-300" [src]="association.photos[0].url" alt="{{ association.nom }}">
+      </div>
+      <div>
+        <div class="flex justify-center border-gray-200">
+          <div class="relative inline-flex items-center gap-x-3 py-4 text-sm font-semibold text-gray-900">
+            <fa-icon [icon]="faLocationDot" aria-label="Favori" title="Favori" class="mr-2 fa-xl"></fa-icon>
+            {{ association.ville }}
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>

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

@@ -1,23 +1,62 @@
-import { Component } from '@angular/core';
-import { MessageService } from 'primeng/api';
-import { FileUploadEvent } from 'primeng/fileupload';
+import { Component, Inject } from '@angular/core';
+import { AppService } from '../../../services/app.service';
+import { DOCUMENT } 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 { Association } from '../../../interfaces/interfaces';
+import { faLocationDot, faPen } from '@fortawesome/free-solid-svg-icons';
+
 
 @Component({
   selector: 'app-associations-list',
   templateUrl: './associations-list.component.html',
   styleUrls: ['./associations-list.component.scss'],
-  providers: [MessageService]
 })
 export class AssociationsListComponent {
-  uploadedFiles: any[] = [];
+  isLoaded: boolean = false;
+  isAuthenticated: boolean = false;
+  faLocationDot = faLocationDot;
+  faPen = faPen;
+  constructor(
+    private appService: AppService,
+    private sanitizer: DomSanitizer,
+    private toastr: ToastrService,
+    public auth: AuthService,
+    @Inject(DOCUMENT) private doc: Document
+  ) {}
+
+  associations: Association[] = [];
+  private subscriptions = new Subscription();
+
+  async ngOnInit() {
+    this.getAssociations();
+  }
 
-  constructor(private messageService: MessageService) {}
+  getAssociations() {
+    const associationSubscription = this.appService.getAllAssociations().subscribe({
+      next: (associations) => {
+        this.associations = associations;
+        console.log('🚀 ~ AssociationsListComponent ~ associationSubscription ~ this.associations:', this.associations);
+        this.isLoaded = true;
+      },
+      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('Associations chargées')
+    });
 
-  onUpload(event:FileUploadEvent) {
-      for(let file of event.files) {
-          this.uploadedFiles.push(file);
-      }
+    this.subscriptions.add(associationSubscription);
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
 
-      this.messageService.add({severity: 'success', summary: 'Fichier importé', detail: ''});
+  sanitizeHtml(html: string): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(html);
   }
 }

src/app/interfaces/interfaces.ts

@@ -74,6 +74,7 @@ export interface Association {
   url: string;
   ville: string;
   description?: string;
+  shortDescription?: string;
   tel?: string;
   chats: Chat[];
   utilisateurs: Utilisateur[];

src/app/services/app.service.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, map, share, take } from 'rxjs';
-import { Association, Chat, Favori } from '../interfaces/interfaces';
+import { Chat, Favori, Association } from '../interfaces/interfaces';
 import { environment } from 'src/environments/environment';
 import { DOCUMENT } from '@angular/common';
 
@@ -34,6 +34,14 @@ export class AppService {
     );
   }
 
+  getAllAssociations(): Observable<Association[]> {
+    return this.http.get(this.api + '/associations').pipe(
+      map((res: any) => res),
+      share(),
+      take(1)
+    );
+  }
+
   getCatByFavoris(): Observable<Chat[]> {
     return this.http.get(this.api + '/chats/favoris').pipe(
       map((res: any) => res),