diff --git a/package-lock.json b/package-lock.json index a7ddbef..dd725ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@openapitools/openapi-generator-cli": "^2.30.2", "@tailwindcss/postcss": "^4.2.1", "browser-image-compression": "^2.0.2", + "jwt-decode": "^4.0.0", "moment": "^2.30.1", "postcss": "^8.5.8", "rimraf": "^6.1.3", @@ -7158,6 +7159,15 @@ ], "license": "MIT" }, + "node_modules/jwt-decode": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz", + "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/kleur": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz", diff --git a/package.json b/package.json index 21bd441..fdf4dc3 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@openapitools/openapi-generator-cli": "^2.30.2", "@tailwindcss/postcss": "^4.2.1", "browser-image-compression": "^2.0.2", + "jwt-decode": "^4.0.0", "moment": "^2.30.1", "postcss": "^8.5.8", "rimraf": "^6.1.3", diff --git a/src/app/components/group-chat/group-chat.component.html b/src/app/components/group-chat/group-chat.component.html deleted file mode 100644 index cb0cb0b..0000000 --- a/src/app/components/group-chat/group-chat.component.html +++ /dev/null @@ -1,3 +0,0 @@ -

- group-chat works! -

diff --git a/src/app/components/group-chat/group-chat.component.scss b/src/app/components/group-chat/group-chat.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/components/group-chat/group-chat.component.ts b/src/app/components/group-chat/group-chat.component.ts deleted file mode 100644 index 055b50f..0000000 --- a/src/app/components/group-chat/group-chat.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import {Component, OnInit} from '@angular/core'; - -@Component({ - selector: 'app-group-chat', - templateUrl: './group-chat.component.html', - styleUrls: ['./group-chat.component.scss'], -}) -export class GroupChatComponent implements OnInit { - - constructor() { - } - - ngOnInit() { - } - -} diff --git a/src/app/components/message/message.component.html b/src/app/components/message/message.component.html index 6159413..def7631 100644 --- a/src/app/components/message/message.component.html +++ b/src/app/components/message/message.component.html @@ -1,3 +1,51 @@ -

- message works! -

+@if (messages().length) { + @for (message of messages(); track message.id) { + @if (message.userId === currentUser) { +
+
+
+ {{ message.libelle }} +
+ + {{ message.sendDate | date:'HH:mm' }} + +
+
+ + } @else { +
+
+ {{ message.username.substring(0, 2) }} +
+
+ + {{ message.username }} + +
+ {{ message.libelle }} +
+ + {{ message.sendDate | date:'HH:mm' }} + +
+
+ } + } +} @else { + +
+
+
+ +
+
+ +
+
+
+

C'est bien calme par ici

+

Les messages du groupe apparaîtront ici

+
+
+ +} \ No newline at end of file diff --git a/src/app/components/message/message.component.ts b/src/app/components/message/message.component.ts index 69e685e..7d8ac2d 100644 --- a/src/app/components/message/message.component.ts +++ b/src/app/components/message/message.component.ts @@ -1,16 +1,58 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, inject, input, OnInit, signal} from '@angular/core'; +import {GetGroupDetailsDto, GetMessageDto, MessagesService} from "../../services/api"; +import {firstValueFrom} from "rxjs"; +import {IonicModule, LoadingController, ToastController} from "@ionic/angular"; +import {AuthManageService} from "../../services/auth-manage"; +import {jwtDecode} from "jwt-decode"; +import {DatePipe} from "@angular/common"; +import {addIcons} from "ionicons"; +import {chatbubbleEllipsesOutline, moonOutline} from 'ionicons/icons'; + +addIcons({ + "chatbubble-ellipses-outline" : chatbubbleEllipsesOutline, + "moon-outline" : moonOutline, +}) @Component({ selector: 'app-message', templateUrl: './message.component.html', styleUrls: ['./message.component.scss'], + imports: [ + DatePipe, + IonicModule + ] }) export class MessageComponent implements OnInit { + private messagesService = inject(MessagesService); + private authService = inject(AuthManageService); + private loadCtrl = inject(LoadingController); + private toastCtrl = inject(ToastController); - constructor() { + messages = signal([]); + groupId = input.required(); + + currentUser = 0; + + async ngOnInit() { + const loading = await this.loadCtrl.create({ + message: 'Chargement...', + spinner: 'lines-sharp-small' + }); + await loading.present(); + + try { + const messages = await firstValueFrom(this.messagesService.getMessagesEndpoint(this.groupId())); + this.messages.set(messages); + this.currentUser = Number(jwtDecode(this.authService.getToken()).UserId); + } + catch { + const toast = await this.toastCtrl.create({ + message: 'Impossible de charger les messages.', + duration: 2000, + color: 'danger' + }); + await toast.present(); + } + await loading.dismiss(); } - - ngOnInit() { - } - } diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 30050b2..5fbb719 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -49,7 +49,7 @@ @if (groupSelected()) { - test + } diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 0277898..eb656a7 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -28,6 +28,7 @@ import {GalleryComponent} from "../../components/gallery/gallery.component"; import {GroupsComponent} from "../../components/groups/groups.component"; import {GroupFormComponent} from "../../components/group-form/group-form.component"; import {GroupInfoComponent} from "../../components/group-info/group-info.component"; +import {MessageComponent} from "../../components/message/message.component"; addIcons({ 'profile': personOutline, @@ -59,6 +60,7 @@ type View = 'menu' | 'profile' | 'password' | 'designation' | 'gallery' | 'group GroupsComponent, GroupFormComponent, GroupInfoComponent, + MessageComponent, ] }) export class HomeComponent implements OnInit { diff --git a/src/app/pages/ranking/ranking.component.ts b/src/app/pages/ranking/ranking.component.ts index fe60906..735bc33 100644 --- a/src/app/pages/ranking/ranking.component.ts +++ b/src/app/pages/ranking/ranking.component.ts @@ -11,17 +11,13 @@ import {firstValueFrom} from "rxjs"; IonicModule ] }) -export class RankingComponent implements OnInit { +export class RankingComponent { private overallRankingService = inject(OverallrankingService); private loadCtrl = inject(LoadingController); private toastCtrl = inject(ToastController); users = signal([]); - async ngOnInit() { - await this.fetchUsers(); - } - async ionViewWillEnter() { await this.fetchUsers(); } diff --git a/src/app/pages/social/social.component.ts b/src/app/pages/social/social.component.ts index 22aa688..ec44c30 100644 --- a/src/app/pages/social/social.component.ts +++ b/src/app/pages/social/social.component.ts @@ -24,23 +24,10 @@ addIcons({ SearchFriendComponent ] }) -export class SocialComponent implements OnInit { +export class SocialComponent { private friendsState = inject(FriendsStateService); private loadCtrl = inject(LoadingController); - async ngOnInit() { - const loading = await this.loadCtrl.create({ - message: 'Chargement...', - spinner: 'lines-sharp-small' - }); - await loading.present(); - - await this.friendsState.fetchFriendsRequest(); - await this.friendsState.fetchFriends(); - - await loading.dismiss(); - } - async ionViewWillEnter() { const loading = await this.loadCtrl.create({ message: 'Chargement...',