Add list cats

package.json

@@ -18,6 +18,9 @@
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
+    "@fortawesome/angular-fontawesome": "^0.13.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@ionic/angular": "^7.4.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import { ConnexionComponent } from './components/connexion/connexion.component';
 import { InscriptionComponent } from './components/inscription/inscription.component';
 import { HomeComponent } from './components/home/home.component';
 import { ContactComponent } from './components/contact/contact.component';
+import { AnimauxListComponent } from './components/animaux/animaux-list/animaux-list.component';
 
 const routes: Routes = [
   {
@@ -24,6 +25,10 @@ const routes: Routes = [
     path: 'contact',
     component: ContactComponent,
   },
+  {
+    path: 'animaux',
+    component: AnimauxListComponent,
+  },
   {
     path: '',
     component: HomeComponent,

src/app/app.module.ts

@@ -13,6 +13,8 @@ import { InscriptionComponent } from './components/inscription/inscription.compo
 import { FooterComponent } from './components/footer/footer.component';
 import { HomeComponent } from './components/home/home.component';
 import { ContactComponent } from './components/contact/contact.component';
+import { AnimauxListComponent } from './components/animaux/animaux-list/animaux-list.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
   declarations: [
@@ -24,13 +26,15 @@ import { ContactComponent } from './components/contact/contact.component';
     InscriptionComponent,
     HomeComponent,
     ContactComponent,
+    AnimauxListComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
     HttpClientModule,
     IonicModule.forRoot(),
+    FontAwesomeModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

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

@@ -0,0 +1,40 @@
+<div *ngIf="chats" 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">
+
+    <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 duration-300 bg-white rounded shadow-sm">
+            <img [src]="chat.photos[0].url" loading="lazy" decoding="async" class="object-cover w-full h-64" alt="" />
+            <div class="p-5 border border-t-0">
+                <p class="mb-3 text-xs font-semibold tracking-wide uppercase">
+                    <a href="/assos/1"
+                        class="transition-colors duration-200 text-blue-gray-900 hover:text-deep-purple-accent-700"
+                        aria-label="Catégorie" title="Association de Chats">Association : {{chat.association.nom}}</a>
+                    <span class="text-gray-600">— 28 Dec 2020</span>
+                </p>
+                <div href="/animaux/1" aria-label="Animaux" title="En savoir plus"
+                    class="inline-block mb-3 text-2xl font-bold leading-5 transition-colors duration-200 hover:text-deep-purple-accent-700">
+                    <a href="/animaux/1" class="inline-block">{{chat.nom}}</a>
+                    <fa-icon *ngIf="chat.sexe === 'FEMELLE'" [icon]="faVenus" aria-label="Sexe" title="Femelle"
+                        class="ml-2" style="color: fuchsia;"></fa-icon>
+                    <fa-icon *ngIf="chat.sexe === 'MALE'" [icon]="faMars" aria-label="Sexe" title="Male" class="ml-2"
+                        style="color: Dodgerblue;"></fa-icon>
+
+                </div>
+                <p class="mb-2 text-gray-700">
+                    {{chat.description}}
+                </p>
+                <a href="/animaux/1" aria-label=""
+                    class="inline-flex items-center font-semibold transition-colors duration-200 text-deep-purple-accent-400 hover:text-deep-purple-800">
+                    En savoir plus sur {{chat.nom}}
+                </a>
+            </div>
+        </div>
+
+
+
+
+
+
+    </div>
+</div>

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnimauxListComponent } from './animaux-list.component';
+
+describe('AnimauxListComponent', () => {
+  let component: AnimauxListComponent;
+  let fixture: ComponentFixture<AnimauxListComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AnimauxListComponent]
+    });
+    fixture = TestBed.createComponent(AnimauxListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { faMars, faVenus } from '@fortawesome/free-solid-svg-icons';
+import { AppService } from '../../../services/app.service';
+import { Chat } from '../../../interfaces/interfaces';
+
+@Component({
+  selector: 'app-animaux-list',
+  templateUrl: './animaux-list.component.html',
+  styleUrls: ['./animaux-list.component.scss'],
+})
+export class AnimauxListComponent {
+  faMars = faMars;
+  faVenus = faVenus;
+  constructor(private appService: AppService) {}
+
+  chats: Chat[] = [];
+
+  ngOnInit() {
+    this.getCats();
+  }
+
+  getCats() {
+    this.appService.getAllCats().subscribe((chats) => {
+      this.chats = chats;
+      console.log(
+        '🚀 ~ AnimauxListComponent ~ this.appService.getAllCats ~ this.chats:',
+        this.chats
+      );
+    });
+  }
+}

src/app/interfaces/interfaces.ts

@@ -0,0 +1,42 @@
+export interface Chat {
+  id: number;
+  nom: string;
+  age: number;
+  automatiqueAnnonce: boolean;
+  description: string;
+  race: string;
+  annonceUrl: string;
+  sterilise: any;
+  vaccinations: string;
+  adopte: boolean;
+  histoire: string;
+  type: string;
+  sexe: string;
+  couleur: string;
+  taille: string;
+  ententeChien: boolean;
+  ententeChat: boolean;
+  ententeEnfant: boolean;
+  typeFoyerMaison: boolean;
+  typeFoyerAppartement: boolean;
+  contactEmail: string;
+  contactTel: string;
+  contactUrl: any;
+  createdAt: string;
+  updatedAt: string;
+  associationId: number;
+  photos: Photo[];
+  association: Association;
+}
+
+export interface Photo {
+  id: number;
+  createdAt: string;
+  url: string;
+  chatId: number;
+}
+
+export interface Association {
+  id: number;
+  nom: string;
+}

src/app/services/app.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, map, share, take } from 'rxjs';
+import { Chat } from '../interfaces/interfaces';
 
 @Injectable({
   providedIn: 'root',
@@ -17,4 +18,12 @@ export class AppService {
       take(1)
     );
   }
+
+  getAllCats(): Observable<Chat[]> {
+    return this.http.get(this.api + '/chats').pipe(
+      map((res: any) => res),
+      share(),
+      take(1)
+    );
+  }
 }