Merge pull request #11 from Potits-chats/LMST-13-Animaux-Detail

Lmst 13 animaux detail

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { InscriptionComponent } from './components/inscription/inscription.compo
 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 { AnimauxDetailsComponent } from './components/animaux/animaux-details/animaux-details.component';
 
 const routes: Routes = [
   {
@@ -25,10 +26,15 @@ const routes: Routes = [
     path: 'contact',
     component: ContactComponent,
   },
+  {
+    path: 'animaux/:id',
+    component: AnimauxDetailsComponent,
+  },
   {
     path: 'animaux',
     component: AnimauxListComponent,
   },
+
   {
     path: '',
     component: HomeComponent,

src/app/app.module.ts

@@ -15,6 +15,7 @@ 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';
+import { AnimauxDetailsComponent } from './components/animaux/animaux-details/animaux-details.component';
 
 @NgModule({
   declarations: [
@@ -27,6 +28,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     HomeComponent,
     ContactComponent,
     AnimauxListComponent,
+    AnimauxDetailsComponent,
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,118 @@
+<div *ngIf="chat" 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="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
+        <div>
+            <p
+                class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-accent-400">
+                Catégorie : Chat
+            </p>
+        </div>
+        <button
+            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">
+            Édition
+        </button>
+
+        <h2
+            class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto">
+            {{ chat.nom }}
+
+
+        </h2>
+        <!-- <p class="text-base text-gray-700 md:text-lg">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque
+            ipsa quae.
+        </p> -->
+
+
+    </div>
+
+
+
+    <div class="grid max-w-screen-lg gap-8 lg:grid-cols-2 sm:mx-auto">
+        <div class="grid grid-cols-2 gap-5">
+            <img *ngIf="chat.photos[0] && chat.photos[0].url" [src]="chat.photos[0].url"
+                class="object-cover w-full h-56 col-span-2 rounded shadow-lg" alt="" />
+            <img *ngIf="chat.photos[1] && chat.photos[1].url" [src]="chat.photos[1].url"
+                class="object-cover w-full h-48 rounded shadow-lg" alt="" />
+            <img *ngIf="chat.photos[2] && chat.photos[2].url" [src]="chat.photos[2].url"
+                class="object-cover w-full h-48 rounded shadow-lg" alt="" />
+        </div>
+        <div class="flex flex-col justify-center">
+            <div class="pb-4 mb-4 border-b">
+                <h6 class="mb-2 font-semibold leading-5">
+                    Sexe :
+                </h6>
+                <p class="text-sm text-gray-900">
+                    {{ chat.sexe ==='MALE' ? 'Je suis un mâle' : 'Je suis une femelle' }}
+                    <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>
+                </p>
+            </div>
+            <div class="pb-4 mb-4 border-b">
+                <h6 class="mb-2 font-semibold leading-5">
+                    Age :
+                </h6>
+                <p class="text-sm text-gray-900">
+                    J'ai {{ chat.age }} ans
+                </p>
+            </div>
+
+            <div *ngIf="chat.race" class="pb-4 mb-4 border-b">
+                <h6 class="mb-2 font-semibold leading-5">
+                    Race :
+                </h6>
+                <p class="text-sm text-gray-900">
+                    {{chat.race}}
+                </p>
+            </div>
+
+            <div class="pb-4 mb-4 border-b">
+                <h6 class="mb-2 font-semibold leading-5">
+                    Ententes :
+                </h6>
+                <p class="text-sm text-gray-900" *ngIf="chat.ententeChat !== undefined">
+                    {{chat.ententeChat ? 'Avec les autres chats' : 'Pas avec les autres chats ❌'}}
+                </p>
+                <p class="text-sm text-gray-900" *ngIf="chat.ententeChien !== undefined">
+                    {{chat.ententeChien ? 'Avec les chiens' : 'Pas avec les chiens ❌'}}
+                </p>
+                <p class="text-sm text-gray-900" *ngIf="chat.ententeEnfant !== undefined">
+                    {{chat.ententeEnfant ? 'Avec les enfants' : 'Pas avec les enfants ❌'}}
+                </p>
+            </div>
+
+
+            <div>
+                <h6 class="mb-2 font-semibold leading-5">
+                    Association :
+                </h6>
+                <p class="text-sm text-gray-900">
+                    Je suis pour le moment gardé par l'association
+                    <a [routerLink]="'association/'+chat.association.id">{{ chat.association.nom }}</a>
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- New description block -->
+    <div class="max-w-screen-lg mt-8 md:mx-auto lg:max-w-screen-lg md:mt-12">
+        <h3 class="mb-4 text-xl font-semibold leading-6">Description :</h3>
+        <p class="text-base text-gray-700">
+            {{ chat.description }}
+        </p>
+    </div>
+
+    <div *ngIf="chat.vaccinations" class="max-w-screen-lg mt-8 md:mx-auto lg:max-w-screen-lg md:mt-12">
+        <h3 class="mb-4 text-xl font-semibold leading-6">Santé :</h3>
+        <p class="text-base text-gray-700">
+            {{ chat.vaccinations }}
+        </p>
+    </div>
+    <button
+        class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">
+        Contacter {{chat.nom }}
+    </button>
+
+
+</div>

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

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

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

@@ -0,0 +1,33 @@
+import { DatePipe } from '@angular/common';
+import { Component } from '@angular/core';
+import { Chat } from '../../../interfaces/interfaces';
+import { AppService } from 'src/app/services/app.service';
+import { ActivatedRoute } from '@angular/router';
+import { faMars, faVenus } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+  selector: 'app-animaux-details',
+  templateUrl: './animaux-details.component.html',
+  styleUrls: ['./animaux-details.component.scss'],
+})
+export class AnimauxDetailsComponent {
+  chat: Chat | undefined;
+  faMars = faMars;
+  faVenus = faVenus;
+
+  constructor(private route: ActivatedRoute, private appService: AppService) {}
+
+  ngOnInit() {
+    this.getCat();
+  }
+
+  getCat() {
+    this.route.params.subscribe((params) => {
+      if (params['id']) {
+        this.appService.getByIdCat(params['id']).subscribe((chat) => {
+          this.chat = chat;
+        });
+      }
+    });
+  }
+}

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

@@ -7,14 +7,14 @@
             <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="/associations/1"
+                    <a [routerLink]="'/animaux/' + chat.id"
                         class="transition-colors duration-200 text-blue-gray-900 hover:text-deep-purple-accent-700"
                         aria-label="Association" title="L'association">Association : {{chat.association.nom}}</a>
                     <span class="text-gray-600"> - {{formatDate(chat.createdAt)}}</span>
                 </p>
-                <div href="/animaux/1" aria-label="Animaux" title="En savoir plus"
+                <div [routerLink]="'/animaux/' + chat.id" 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>
+                    <a [routerLink]="'/animaux/' + chat.id" 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"
@@ -24,7 +24,7 @@
                 <p class="mb-2 text-gray-700">
                     {{chat.description}}
                 </p>
-                <a href="/animaux/1" aria-label=""
+                <a [routerLink]="'/animaux/' + chat.id" 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>

src/app/components/home/home.component.html

@@ -9,7 +9,7 @@ <h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight te
     </p>
     <div class="mt-10 flex justify-center gap-x-6">
         <a class="group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900"
-            variant="solid" color="slate" href="/animaux">Voir tout les animaux</a>
+            variant="solid" color="slate" routerLink="/animaux">Voir tout les animaux</a>
     </div>
 
 </div>

src/app/services/app.service.ts

@@ -37,4 +37,12 @@ export class AppService {
       take(1)
     );
   }
+
+  getByIdCat(id: number): Observable<Chat> {
+    return this.http.get(this.api + '/chats/' + id).pipe(
+      map((res: any) => res),
+      share(),
+      take(1)
+    );
+  }
 }