Merge pull request #75 from Potits-chats/fix-minor-bug

Fix minor bug
Potits-chats · Jul 18, 2024 · 1302336 · 1302336 · vercel · Jul 18, 2024
2 parents fbb689f + 99409fe
commit 1302336
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 46 deletions.
diff --git a/src/app/components/animaux/animaux-details/animaux-details.component.html b/src/app/components/animaux/animaux-details/animaux-details.component.html
@@ -134,13 +134,13 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh
                     Race :
                 </label>
                 <p class="text-sm text-gray-900">
-                    {{chat.race}}
+                   Je suis un {{chat.race}}
                 </p>
             </div>
 
             <div class="pb-4 mb-4 border-b">
                 <label class="mb-2 block text-sm font-medium leading-5 text-gray-900">
-                    Ententes :
+                    Je m'entends :
                 </label>
                 <div *ngIf="!isEditMode">
                     <p class="text-sm text-gray-900" *ngIf="chat.ententeChat !== undefined">
@@ -203,7 +203,7 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh
                     Association :
                 </label>
                 <p class="text-sm text-gray-900">
-                    Je suis pour le moment gardé par l'association
+                    Je suis actuellement chouchouté par l'association
                     <a class="text-orange-600 hover:text-orange-800" [routerLink]="'/associations/'+chat.association.id">{{ chat.association.nom }}</a>
                 </p>
             </div>
@@ -212,7 +212,7 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh
 
     <!-- New description block -->
     <div class="max-w-screen-lg mt-8 md:mx-auto lg:max-w-screen-lg md:mt-12">
-        <label class="mb-2 block text-sm font-medium leading-5 text-gray-900">Description :</label>
+        <label class="mb-2 block text-lg font-medium leading-5 text-gray-900">Description :</label>
         <p *ngIf="!isEditMode" class="text-base text-gray-700" [innerHTML]="sanitizeHtml(chat.description)">
         </p>
 
@@ -252,9 +252,11 @@ <h3 class="mb-4 text-xl font-semibold leading-6">Santé :</h3>
         Sauvegarder
     </button>
 
-    <button *ngIf="!isEditMode"
+    <button *ngIf="!isEditMode" [routerLink]="['/tchat', chat.association.id]"
         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>
+</div>
+
+<app-loader *ngIf="!isLoaded"></app-loader>
diff --git a/src/app/components/animaux/animaux-details/animaux-details.component.ts b/src/app/components/animaux/animaux-details/animaux-details.component.ts
@@ -18,6 +18,7 @@ import { Subscription, firstValueFrom } from 'rxjs';
 })
 export class AnimauxDetailsComponent {
   chat: Chat | undefined;
+  isLoaded: boolean = false;
   sexe = Sexe;
   faMars = faMars;
   faVenus = faVenus;
@@ -61,6 +62,7 @@ export class AnimauxDetailsComponent {
     this.route.params.subscribe((params) => {
       if (params['id']) {
         this.appService.getByIdCat(params['id']).subscribe((chat) => {
+          this.isLoaded = true;
           this.chat = chat;
         });
       }

diff --git a/src/app/components/animaux/animaux-list/animaux-list.component.html b/src/app/components/animaux/animaux-list/animaux-list.component.html
@@ -1,4 +1,4 @@
-<div class="bg-white px-2 py-8 sm:py-10 lg:px-8">
+<div *ngIf="!profileContext" 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
@@ -9,7 +9,7 @@ <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">Les chat
 <app-loader *ngIf="!isLoaded"></app-loader>
 
 <!-- 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">
+<div *ngIf="isLoaded && !profileContext" 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">
@@ -19,7 +19,7 @@ <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">Les chat
         <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="bengal">Bengal</option>
             <option value="persan">Persan</option>
             <option value="maine-coon">Maine Coon</option>
         </select>
@@ -38,7 +38,7 @@ <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">Les chat
 <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">
+    <div class="text-left mb-8" *ngIf="!profileContext">
         <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">

diff --git a/src/app/components/associations/associations-details/associations-details.component.html b/src/app/components/associations/associations-details/associations-details.component.html
@@ -147,4 +147,7 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh
     Contacter {{asso.nom }}
     </button>
 
-</div>
+</div>
+
+
+<app-loader *ngIf="!isLoaded"></app-loader>
diff --git a/src/app/components/associations/associations-details/associations-details.component.ts b/src/app/components/associations/associations-details/associations-details.component.ts
@@ -17,6 +17,7 @@ import { Subscription, firstValueFrom } from 'rxjs';
 })
 export class AssociationsDetailsComponent {
   asso: Association | undefined;
+  isLoaded: boolean = false;
   faTrash = faTrash;
   faUpload = faUpload;
   dataModel: any;
@@ -56,6 +57,7 @@ export class AssociationsDetailsComponent {
     this.route.params.subscribe((params) => {
       if (params['id']) {
         this.appService.getByIdAsso(params['id']).subscribe((asso) => {
+          this.isLoaded = true;
           this.asso = asso;
           if (this.asso.urlGoogleMapsEmbled){
             this.safeUrlGoogleMapsEmbled = this.sanitizer.bypassSecurityTrustResourceUrl(this.asso.urlGoogleMapsEmbled);

diff --git a/src/app/components/profil/profil.component.html b/src/app/components/profil/profil.component.html
@@ -21,44 +21,36 @@
             <div class="w-full lg:w-3/12 px-4 lg:order-2 flex justify-center">
               <div class="relative">
                 <img alt="..." [src]='user.picture' loading="lazy" decoding="async" referrerpolicy="no-referrer"
-                  class="shadow-xl rounded-full h-auto align-middle border-none absolute -m-16 -ml-20 lg:-ml-16 max-w-150-px">
+                  class="shadow-xl rounded-full h-auto align-middle border-none -mt-12 max-w-150-px">
               </div>
             </div>
             <div class="w-full lg:w-4/12 px-4 lg:order-3 lg:text-right lg:self-center">
-              <div class="py-6 px-3 mt-32 sm:mt-0">
-                <button
-                  class="text-white bg-orange-700 hover:bg-orange-800 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none">
-                  Editer
-                </button>
-              </div>
             </div>
             <div class="w-full lg:w-4/12 px-4 lg:order-1">
-              <div class="py-6 px-3 mt-32 sm:mt-0">
-                <button [routerLink]="'/'"
-                  class="text-white bg-orange-700 hover:bg-orange-800 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none">
-                  Retour
-                </button>
+              <div class="py-6 px-3 sm:mt-0">
+                <button [routerLink]="'/'" class="text-white bg-orange-700 hover:bg-orange-800 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none">Retour</button>
               </div>
             </div>
           </div>
           <div class="text-center mt-12">
-            <h3 class="text-4xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2">{{user.name}}
-            </h3>
-            <div class="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase">
-              <i class="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"></i>
-              user.adresse, user.codePostal user.ville
+            <h3 class="text-4xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2">{{ user.name }}</h3>
+            <div class="mt-0 mb-2 text-blueGray-600">
+              <i class="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i>{{ user.email }}
+            </div>
+            <div class="mt-0 mb-2 text-blueGray-600">
+              <i class="fas fa-check mr-2 text-lg text-blueGray-400"></i> E-mail Vérifié : <span class="text-green-500" *ngIf="user.email_verified">Oui</span><span class="text-red-500" *ngIf="!user.email_verified">Non</span>
             </div>
             <div class="mt-0 mb-2 text-blueGray-600">
-              <i class="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i>{{user.email}}
+              <i class="fas fa-user-tag mr-2 text-lg text-blueGray-400"></i> Rôle : {{ user?.['https://potits-chats.com/roles'][0] ? user?.['https://potits-chats.com/roles'][0] : 'Utilisateur' }}
             </div>
             <div class="mt-0 mb-2 text-blueGray-600">
-              <i class="fas fa-university mr-2 text-lg text-blueGray-400"></i>user.telephone
+              <i class="fas fa-sign-in-alt mr-2 text-lg text-blueGray-400"></i> Connecté via : {{ getLoginMethod(user.sub || "") }}
             </div>
           </div>
           <div class="mt-10 py-10 border-t border-blueGray-200 text-center">
             <div class="flex flex-wrap justify-center">
               <div>
-                <h2 class="text-center">Mes favoris:</h2>
+                <h2 class="text-center">Mes favoris :</h2>
                 <div>
                   <app-animaux-list [profileContext]="true"></app-animaux-list>
                 </div>
@@ -69,4 +61,4 @@ <h2 class="text-center">Mes favoris:</h2>
       </div>
     </div>
   </section>
-</div>
+</div>
diff --git a/src/app/components/profil/profil.component.ts b/src/app/components/profil/profil.component.ts
@@ -15,4 +15,15 @@ export class ProfilComponent {
   faXmark = faXmark;
 
   constructor(public auth: AuthService) {}
+
+
+  getLoginMethod(sub: string): string {
+    if (sub.startsWith('google-oauth2')) {
+      return 'Google';
+    } else if (sub.startsWith('auth0')) {
+      return 'Compte manuel';
+    } else {
+      return 'Autre';
+    }
+  }
 }
diff --git a/src/app/components/tchat/tchat-icon/tchat-icon.component.html b/src/app/components/tchat/tchat-icon/tchat-icon.component.html
@@ -1,5 +1,5 @@
 <!-- component -->
-<div class="relative" noHeaderFooter [restrictedRoutes]="['/connexion', '/inscription', '/erreur']">
+<div class="relative" noHeaderFooter [restrictedRoutes]="['/connexion', '/inscription', '/erreur', '/tchat']">
     <button routerLink="/tchat" routerLinkActive="active" ariaCurrentWhenActive="page" class="z-20 text-white flex flex-col shrink-0 grow-0 justify-around 
                     fixed bottom-0 left-0 left-5 rounded-lg
                     mr-1 mb-5 lg:mr-5 lg:mb-5 xl:mr-10 xl:mb-10">

diff --git a/src/app/components/tchat/tchat.component.html b/src/app/components/tchat/tchat.component.html
@@ -5,11 +5,8 @@
     <header class="p-4 flex justify-between items-center bg-orange-600 text-white">
       <h1 class="text-2xl font-semibold">Messages</h1>
       <div class="relative">
-        <button id="menuButton" (click)="toggleMenu()" class="focus:outline-none">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-100 pointer-events-none" viewBox="0 0 20 20" fill="currentColor">
-            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
-            <path d="M2 10a2 2 0 012-2h12a2 2 0 012 2 2 2 0 01-2 2H4a2 2 0 01-2-2z" />
-          </svg>
+        <button *ngIf="menuVisible" id="menuButton" (click)="toggleMenu()" >
+          <fa-icon [icon]="faCaretSquareLeft" size="2x"></fa-icon>
         </button>
       </div>
     </header>
@@ -31,7 +28,7 @@ <h1 class="text-2xl font-semibold">Messages</h1>
 
           <div class="flex-1">
             <h3 class="text-lg font-semibold">{{ conversation.nom }}</h3>
-            <p class="text-gray-600 dark:text-white">{{ conversation.messages[0].contenu || 'No message yet' }}</p>
+            <p class="text-gray-600 dark:text-white">{{ timeAgo(conversation.messages[0].createdAt) || "" }} - {{ truncateMessage(conversation.messages[0].contenu) || 'No message yet' }}</p>
           </div>
         </div>
       </div>
@@ -44,11 +41,8 @@ <h3 class="text-lg font-semibold">{{ conversation.nom }}</h3>
   <!-- Main Content -->
   <div class="flex-1 relative">
     <app-tchat-message *ngIf="utilisateur" [selectedConversation]="selectedConversation" [utilisateur]="utilisateur"></app-tchat-message>
-    <button id="menuButton" (click)="toggleMenu()" class="absolute top-4 left-4 focus:outline-none bg-orange-600 text-white p-2 rounded-md">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 pointer-events-none" viewBox="0 0 20 20" fill="currentColor">
-        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
-        <path d="M2 10a2 2 0 012-2h12a2 2 0 012 2 2 2 0 01-2 2H4a2 2 0 01-2-2z" />
-      </svg>
+    <button *ngIf="!menuVisible" id="menuButton" (click)="toggleMenu()" class="absolute top-4 left-4 focus:outline-none bg-orange-600 text-white p-2 rounded-md">
+      <fa-icon [icon]="faCaretSquareRight" size="2x"></fa-icon>
     </button>
   </div>
 </div>
diff --git a/src/app/components/tchat/tchat.component.ts b/src/app/components/tchat/tchat.component.ts
@@ -4,6 +4,7 @@ import { AppService } from '../../services/app.service';
 
 import { Conversation, Utilisateur } from '../../interfaces/interfaces';
 import { ActivatedRoute } from '@angular/router';
+import { faCaretSquareRight,  faCaretSquareLeft } from '@fortawesome/free-regular-svg-icons';
 
 @Component({
   selector: 'app-tchat',
@@ -13,6 +14,8 @@ import { ActivatedRoute } from '@angular/router';
 export class TchatComponent implements OnInit {
   conversations: Conversation[] = [];
   menuVisible = true;
+  faCaretSquareRight = faCaretSquareRight;
+  faCaretSquareLeft = faCaretSquareLeft;
   selectedConversation: Conversation | null = null;
   utilisateur: Utilisateur | null = null;
   idFromUrl: number | null = null;
@@ -54,4 +57,35 @@ export class TchatComponent implements OnInit {
       this.menuVisible = false;
     }
   }
+
+    // Fonction pour calculer le temps écoulé depuis la date donnée
+  // Fonction pour calculer le temps écoulé depuis la date donnée avec des règles spécifiques
+  timeAgo(date: Date): string {
+    const now = new Date();
+    const seconds = Math.floor((now.getTime() - new Date(date).getTime()) / 1000);
+
+    let interval = Math.floor(seconds / 60);
+    if (interval < 60) {
+      return `il y a ${interval} minutes`;
+    }
+    interval = Math.floor(seconds / 3600);
+    if (interval < 24) {
+      return `il y a ${interval} heures`;
+    }
+    interval = Math.floor(seconds / 86400);
+    if (interval < 30) {
+      return `il y a ${interval} jours`;
+    }
+    interval = Math.floor(seconds / 2592000); // 30 jours approximatifs
+    if (interval < 12) {
+      return `il y a ${interval} mois`;
+    }
+    interval = Math.floor(seconds / 31536000); // 365 jours approximatifs
+    return `il y a ${interval} ans`;
+  }
+
+  // Fonction pour tronquer le message à 20 caractères
+  truncateMessage(message: string): string {
+    return message.length > 25 ? `${message.substring(0, 25)}...` : message;
+  }
 }
diff --git a/src/app/no-header-footer.directive.ts b/src/app/no-header-footer.directive.ts
@@ -1,4 +1,3 @@
-// no-header-footer.directive.ts
 import {
   Directive,
   Input,
@@ -39,7 +38,7 @@ export class NoHeaderFooterDirective implements OnInit, OnDestroy {
 
   private checkVisibility() {
     const currentRoute = this.router.url;
-    const shouldHide = this.restrictedRoutes.includes(currentRoute);
+    const shouldHide = this.restrictedRoutes.some(route => currentRoute.startsWith(route));
     if (shouldHide) {
       this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
     } else {