update message

Potits-chats · Jul 16, 2024 · e18eced · e18eced
1 parent 5bae6e7
commit e18eced
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 26 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -72,6 +72,11 @@ const routes: Routes = [
     path: 'mentions-legales',
     component: CguComponent,
   },
+  {
+    path: 'tchat/:id',
+    component: TchatComponent,
+    canActivate: [AuthGuard],
+  },
   {
     path: 'tchat',
     component: TchatComponent,

diff --git a/src/app/components/associations/associations-details/associations-details.component.html b/src/app/components/associations/associations-details/associations-details.component.html
@@ -141,8 +141,9 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh
     </button>
 
     <button *ngIf="!isEditMode"
-        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 {{asso.nom }}
+    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"
+        [routerLink]="['/tchat', asso.id]">
+    Contacter {{asso.nom }}
     </button>
 
 </div>
diff --git a/src/app/components/tchat/tchat-message/tchat-message.component.html b/src/app/components/tchat/tchat-message/tchat-message.component.html
@@ -1,33 +1,40 @@
-<div *ngIf="selectedConversation && auth.user$ | async as user">
+<div *ngIf="auth.user$ | async as user">
   <!-- Chat Header -->
   <header class="bg-white p-4 text-gray-700 dark:border-t dark:border-orange-900 dark:bg-gray-800 dark:text-white">
-    <a [routerLink]="'/associations/'+selectedConversation!.id" class="hover:text-orange-800">
+    <a *ngIf="!isAssociation && selectedConversation" [routerLink]="'/associations/'+selectedConversation!.id" class="hover:text-orange-800">
       <h1 class="text-2xl font-semibold text-center">{{selectedConversation!.nom}}</h1>
     </a>
+    <h1 *ngIf="isAssociation && selectedConversation" class="text-2xl font-semibold text-center">{{selectedConversation!.nom}}</h1>
   </header>
 
   <!-- Chat Messages -->
   <div class="h-screen overflow-y-auto p-4 pb-36 bg-gray-100 dark:bg-gray-700">
-    <div *ngFor="let msg of messages">
-      <!-- Receveur -->
-      <div *ngIf="!msg.isUserSender && !isAssociation || msg.isUserSender && isAssociation" class="flex mb-4 cursor-pointer">
-        <div class="w-9 h-9 rounded-full flex items-center justify-center mr-2">
-          <img alt="..." src="../../../../assets/happy-cat.jpg" class="w-8 h-8 rounded-full">
+    <div *ngIf="messages && messages.length > 0; else noMessages">
+      <div *ngFor="let msg of messages">
+        <!-- Receveur -->
+        <div *ngIf="!msg.isUserSender && !isAssociation || msg.isUserSender && isAssociation" class="flex mb-4 cursor-pointer">
+          <div class="w-9 h-9 rounded-full flex items-center justify-center mr-2">
+            <img alt="..." [src]="selectedConversation?.img || selectedConversation!.photos![0].url" class="w-8 h-8 rounded-full">
+          </div>
+          <div class="flex max-w-96 bg-white rounded-lg p-3 gap-3">
+            <p class="text-gray-700">{{ msg.contenu + ' (receveur)' }}</p>
+          </div>
         </div>
-        <div class="flex max-w-96 bg-white rounded-lg p-3 gap-3">
-          <p class="text-gray-700">{{ msg.contenu + ' (receveur)' }}</p>
-        </div>
-      </div>
-      <!-- L'envoyeur -->
-      <div *ngIf="msg.isUserSender && !isAssociation || !msg.isUserSender && isAssociation" class="flex justify-end mb-4 cursor-pointer">
-        <div class="flex max-w-96 bg-orange-600 text-white rounded-lg p-3 gap-3">
-          <p>{{ msg.contenu + ' (envoyeur)' }}</p>
-        </div>
-        <div class="w-9 h-9 rounded-full flex items-center justify-center ml-2">
-          <img alt="..." [src]='user.picture' loading="lazy" decoding="async" referrerpolicy="no-referrer" class="w-8 h-8 rounded-full">
+        <!-- L'envoyeur -->
+        <div *ngIf="msg.isUserSender && !isAssociation || !msg.isUserSender && isAssociation" class="flex justify-end mb-4 cursor-pointer">
+          <div class="flex max-w-96 bg-orange-600 text-white rounded-lg p-3 gap-3">
+            <p>{{ msg.contenu + ' (envoyeur)' }}</p>
+          </div>
+          <div class="w-9 h-9 rounded-full flex items-center justify-center ml-2">
+            <img *ngIf="isAssociation" alt="..." [src]='user.picture' loading="lazy" decoding="async" referrerpolicy="no-referrer" class="w-8 h-8 rounded-full">
+            <img *ngIf="!isAssociation" alt="..." [src]='user.picture' loading="lazy" decoding="async" referrerpolicy="no-referrer" class="w-8 h-8 rounded-full">
+          </div>
         </div>
       </div>
     </div>
+    <ng-template #noMessages>
+      <p class="text-center text-gray-500 dark:text-gray-300">Merci d'écrire votre message</p>
+    </ng-template>
   </div>
 
   <!-- Chat Input -->

diff --git a/src/app/components/tchat/tchat-message/tchat-message.component.ts b/src/app/components/tchat/tchat-message/tchat-message.component.ts
@@ -5,6 +5,7 @@ import { WebSocketService } from '../../../services/web-socket.service';
 import { Message } from '../../../interfaces/interfaces';
 import { Conversation } from '../../../interfaces/interfaces';
 import { UserService } from '../../../services/user.service';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-tchat-message',
@@ -15,6 +16,7 @@ export class TchatMessageComponent implements OnInit, OnChanges {
 
   @Input() selectedConversation: Conversation | null = null;
   associationId: number = 1; // Remplacez par l'ID de l'association appropriée
+  idFromUrl: number | null = null;
   isAssociation = false;
   utilisateurId: number = 1; // Remplacez par l'ID de l'utilisateur approprié
   message = '';
@@ -23,23 +25,35 @@ export class TchatMessageComponent implements OnInit, OnChanges {
   constructor(
     public auth: AuthService,
     private appService: AppService,
-    private webSocketService: WebSocketService
+    private webSocketService: WebSocketService,
+    private route: ActivatedRoute
   ) {}
 
   ngOnInit(): void {
-    this.loadMessages();
+    this.route.params.subscribe(params => {
+      const idFromUrl = params['id'];
+      if (idFromUrl) {
+        this.idFromUrl = +idFromUrl;
+        this.associationId = this.idFromUrl;
+        this.loadMessages();
+        this.appService.getByIdAsso(this.idFromUrl).subscribe((association) => {
+          this.selectedConversation = association as unknown as Conversation;
+        });
+      }
+    });
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['selectedConversation'] && this.selectedConversation) {
-      console.log('🚀 ~ TchatMessageComponent ~ ngOnChanges ~ this.selectedConversation:', this.selectedConversation);
+      this.isAssociation = !!this.selectedConversation.img ? true : false;
+      console.log('🚀 ~ TchatMessageComponent ~ ngOnChanges ~ this.isAssociation:', this.isAssociation);
+      this.associationId = this.selectedConversation.id;
       this.loadMessages();
     }
   }
 
   loadMessages(): void {
-    if (this.selectedConversation) {
-      this.associationId = this.selectedConversation.id;
+    if (this.selectedConversation || this.idFromUrl) {
       this.appService.getMessages(this.utilisateurId, this.associationId).subscribe((messages: Message[]) => {
         this.messages = messages;
         console.log('🚀 ~ TchatMessageComponent ~ this.appService.getMessages ~ this.messages:', this.messages);

diff --git a/src/app/interfaces/interfaces.ts b/src/app/interfaces/interfaces.ts
@@ -142,4 +142,5 @@ export interface Conversation {
   img?: string;
   messages: Message[];
   photos?: Photo[];
+  associationId?: number;
 }
diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, map, share, take } from 'rxjs';
 import { AuthService } from '@auth0/auth0-angular';
-import { Conversation, UserRole } from '../interfaces/interfaces';
+import { Conversation, UserRole, Utilisateur } from '../interfaces/interfaces';
 import { environment } from 'src/environments/environment';
 
 @Injectable({
@@ -13,6 +13,7 @@ export class UserService {
   public isAsso = false;
   public isUser = false;
   api = environment.urlAPI;
+  public user: Utilisateur | null = null;
 
   constructor(
     private http: HttpClient,
@@ -30,6 +31,10 @@ export class UserService {
         }
         this.isAsso = this.isRole(roles, UserRole.Asso);
         this.isUser = true;
+
+        this.getMeInfo().subscribe((res) => {
+          this.user = res;
+        });
       }
     });
   }