Skip to content

Commit

Permalink
Update tchat
Browse files Browse the repository at this point in the history
  • Loading branch information
@FazCodeFR
FazCodeFR committed Jul 17, 2024
1 parent e18eced commit eb6475b
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 69 deletions.
44 changes: 26 additions & 18 deletions src/app/components/tchat/tchat-message/tchat-message.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,47 @@
<div *ngIf="auth.user$ | async as user">
<div *ngIf="utilisateur">
<!-- 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 *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>
<h1 *ngIf="!utilisateur!.isAssociation && selectedConversation" class="text-2xl font-semibold text-center flex items-center justify-center space-x-2">
<a [routerLink]="'/associations/'+selectedConversation!.id" class="hover:text-orange-800">
{{selectedConversation!.nom}}
</a>
<div *ngIf="!utilisateur!.isAssociation" class="flex items-center justify-center mr-2 hidden sm:flex">
<img alt="..." [src]="selectedConversation!.photos![0].url" class="w-16 h-16 rounded-full object-cover">
</div>
</h1>
<h1 *ngIf="utilisateur!.isAssociation && selectedConversation" class="text-2xl font-semibold text-center">{{selectedConversation!.nom}}</h1>
<h1 *ngIf="!selectedConversation" class="text-2xl font-semibold text-center">Sélectionnez une conversation</h1>
</header>

<!-- Chat Messages -->
<div class="h-screen overflow-y-auto p-4 pb-36 bg-gray-100 dark:bg-gray-700">
<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 *ngIf="!msg.isUserSender && !utilisateur!.isAssociation || msg.isUserSender && utilisateur!.isAssociation" class="flex mb-4 cursor-pointer items-start">
<div class="flex-shrink-0 mr-2 hidden sm:flex">
<img alt="..." [src]="selectedConversation?.img || selectedConversation!.photos![0].url" class="w-8 h-8 rounded-full object-cover">
</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 class="flex flex-col bg-white rounded-lg p-3 gap-3 max-w-full sm:max-w-md md:max-w-lg lg:max-w-xl min-w-0">
<p class="text-gray-700 break-words">{{ msg.contenu }}</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 *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 *ngIf="msg.isUserSender && !utilisateur!.isAssociation || !msg.isUserSender && utilisateur!.isAssociation" class="flex justify-end mb-4 cursor-pointer items-start">
<div class="flex flex-col bg-orange-600 text-white rounded-lg p-3 gap-3 max-w-full sm:max-w-md md:max-w-lg lg:max-w-xl min-w-0">
<p class="break-words">{{ msg.contenu }}</p>
</div>
<!-- <div class="flex-shrink-0 ml-2 hidden sm:flex">
<img *ngIf="utilisateur!.isAssociation" alt="..." [src]="user.picture" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="w-8 h-8 rounded-full object-cover">
<img *ngIf="!utilisateur!.isAssociation" alt="..." [src]="user.picture" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="w-8 h-8 rounded-full object-cover">
</div> -->
</div>
</div>
</div>
<ng-template #noMessages>
<p class="text-center text-gray-500 dark:text-gray-300">Merci d'écrire votre message</p>
<div class="flex items-center justify-center h-full">
<h1 class="text-center text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white">Vous pouvez commencer une conversation</h1>
</div>
</ng-template>
</div>

Expand Down
85 changes: 54 additions & 31 deletions src/app/components/tchat/tchat-message/tchat-message.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@ import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/cor
import { AppService } from '../../../services/app.service';
import { AuthService } from '@auth0/auth0-angular';
import { WebSocketService } from '../../../services/web-socket.service';
import { Message } from '../../../interfaces/interfaces';
import { Message, Utilisateur } from '../../../interfaces/interfaces';
import { Conversation } from '../../../interfaces/interfaces';
import { UserService } from '../../../services/user.service';
import { ActivatedRoute } from '@angular/router';

@Component({
Expand All @@ -15,59 +14,83 @@ import { ActivatedRoute } from '@angular/router';
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é
@Input() utilisateur: Utilisateur | null = null;
@Input() idFromUrl: number | null = null;

associationId: number | undefined = undefined;
utilisateurId: number | undefined = undefined;
message = '';
messages: Message[] = [];

constructor(
public auth: AuthService,
private appService: AppService,
private webSocketService: WebSocketService,
private route: ActivatedRoute
private webSocketService: WebSocketService
) {}

ngOnInit(): void {
this.route.params.subscribe(params => {
const idFromUrl = params['id'];
if (idFromUrl) {
this.idFromUrl = +idFromUrl;
this.associationId = this.idFromUrl;
this.messages = [];
if (this.idFromUrl) {
this.associationId = this.idFromUrl;
this.appService.getByIdAsso(this.idFromUrl).subscribe((association) => {
this.selectedConversation = association as unknown as Conversation;
this.associationId = this.selectedConversation!.id;
this.utilisateurId = this.utilisateur!.id;
this.loadMessages();
this.appService.getByIdAsso(this.idFromUrl).subscribe((association) => {
this.selectedConversation = association as unknown as Conversation;
});
}
});
});
}else {
this.calculateIds();
this.loadMessages();
}
}

ngOnChanges(changes: SimpleChanges): void {
if (changes['selectedConversation'] && this.selectedConversation) {
this.isAssociation = !!this.selectedConversation.img ? true : false;
console.log('🚀 ~ TchatMessageComponent ~ ngOnChanges ~ this.isAssociation:', this.isAssociation);
this.associationId = this.selectedConversation.id;
this.messages = [];
this.calculateIds();
this.loadMessages();
}
}

calculateIds(): void {
if (this.utilisateur) {
if (this.utilisateur.isAssociation) {
if (this.selectedConversation?.id) {
this.utilisateurId = this.selectedConversation.id;
}
this.associationId = this.utilisateur.associationId;
} else {
this.utilisateurId = this.utilisateur.id;
if (this.selectedConversation?.id) {
this.associationId = this.selectedConversation.id;
}
}
}
}

loadMessages(): void {
if (this.selectedConversation || this.idFromUrl) {
this.appService.getMessages(this.utilisateurId, this.associationId).subscribe((messages: Message[]) => {
if (this.utilisateur && this.utilisateurId && this.associationId) {
this.appService.getMessages(this.utilisateurId!, this.associationId).subscribe((messages: Message[]) => {
this.messages = messages;
console.log('🚀 ~ TchatMessageComponent ~ this.appService.getMessages ~ this.messages:', this.messages);
});
// Subscribe to WebSocket messages
this.webSocketService.subscribeToChannel(`association-${this.associationId}-user-${this.utilisateurId}`, 'new-message', (data: Message) => {
this.messages.push(data);
});
this.listenForNewMessages();
}
}

listenForNewMessages(): void {
this.webSocketService.subscribeToChannel(`association-${this.associationId}-user-${this.utilisateurId}`, 'new-message', (data: Message) => {
if (!this.messages.some(message => message.id === data.id)) {
this.messages.push(data);
}
})
};


submit(): void {
this.appService.sendMessage(this.utilisateurId, this.associationId, this.message, !this.isAssociation).subscribe(() => {
this.message = '';
});
if (this.utilisateurId && this.associationId) {
this.appService.sendMessage(this.utilisateurId, this.associationId, this.message, !this.utilisateur?.isAssociation).subscribe(() => {
this.message = '';
});
}
}
}
35 changes: 20 additions & 15 deletions src/app/components/tchat/tchat.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,29 +16,34 @@ <h1 class="text-2xl font-semibold">Messages</h1>

<!-- Contact List -->
<div class="overflow-y-auto h-screen p-3 mb-9 pb-20 dark:bg-gray-700 dark:text-white">
<div *ngFor="let conversation of conversations"
(click)="onSelectConversation(conversation)"
class="flex items-center mb-4 cursor-pointer p-2 rounded-md dark:hover:bg-gray-600"
[ngClass]="{
'bg-gray-100 dark:bg-gray-600': selectedConversation?.id === conversation.id,
'hover:bg-gray-100': selectedConversation?.id !== conversation.id
}">
<div *ngIf="conversation.img || conversation?.photos" class="w-12 h-12 bg-gray-300 rounded-full mr-3">
<!-- lazy -->
<img [src]="conversation?.img || conversation!.photos![0].url" alt="User Avatar" class="w-12 h-12 rounded-full" loading="lazy">
</div>
<div *ngIf="conversations.length > 0; else noConversations">
<div *ngFor="let conversation of conversations"
(click)="onSelectConversation(conversation)"
class="flex items-center mb-4 cursor-pointer p-2 rounded-md dark:hover:bg-gray-600"
[ngClass]="{
'bg-gray-100 dark:bg-gray-600': selectedConversation?.id === conversation.id,
'hover:bg-gray-100': selectedConversation?.id !== conversation.id
}">
<div *ngIf="conversation.img || conversation?.photos" class="w-12 h-12 bg-gray-300 rounded-full mr-3">
<!-- lazy -->
<img [src]="conversation?.img || conversation!.photos![0].url" alt="User Avatar" class="w-12 h-12 rounded-full" loading="lazy">
</div>

<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>
<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>
</div>
</div>
</div>
<ng-template #noConversations>
<p class="text-center text-gray-600 dark:text-gray-300">No conversations available.</p>
</ng-template>
</div>
</div>

<!-- Main Content -->
<div class="flex-1 relative">
<app-tchat-message [selectedConversation]="selectedConversation"></app-tchat-message>
<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" />
Expand Down
36 changes: 31 additions & 5 deletions src/app/components/tchat/tchat.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { UserService } from '../../services/user.service';
import { Conversation } from '../../interfaces/interfaces';
import { AppService } from '../../services/app.service';

import { Conversation, Utilisateur } from '../../interfaces/interfaces';
import { ActivatedRoute } from '@angular/router';

@Component({
selector: 'app-tchat',
Expand All @@ -11,13 +14,33 @@ export class TchatComponent implements OnInit {
conversations: Conversation[] = [];
menuVisible = true;
selectedConversation: Conversation | null = null;
utilisateur: Utilisateur | null = null;
idFromUrl: number | null = null;

constructor(private userService: UserService) {}
constructor(private appService: AppService, private userService: UserService, private route: ActivatedRoute, ) {}

ngOnInit() {
this.userService.getMeInfo().subscribe((res) => {
this.utilisateur = res;
// Ensure conversations are loaded after utilisateur is set
this.loadConversations();
});

this.route.params.subscribe(params => {
const idFromUrl = params['id'];
if (idFromUrl) {
console.log('🚀 ~ TchatComponent ~ ngOnInit ~ idFromUrl:', idFromUrl);
this.idFromUrl = +idFromUrl;
this.appService.getByIdAsso(this.idFromUrl).subscribe((association) => {
this.selectedConversation = association as unknown as Conversation;
});
}
});
}

loadConversations() {
this.userService.getConversations().subscribe(conversations => {
this.conversations = conversations;
console.log('🚀 ~ TchatComponent ~ this.userService.getConversations ~ this.conversations:', this.conversations);
});
}

Expand All @@ -27,5 +50,8 @@ export class TchatComponent implements OnInit {

onSelectConversation(conversation: any) {
this.selectedConversation = conversation;
if (window.innerWidth < 640) {
this.menuVisible = false;
}
}
}
}
1 change: 1 addition & 0 deletions src/app/interfaces/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export interface Utilisateur {
role: Role;
favoris: Favori[];
association?: Association;
isAssociation?: boolean;
}

export interface Association {
Expand Down

0 comments on commit eb6475b

Please sign in to comment.