sanchezvem/BeReadyFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added messages

Browse Source
This commit is contained in:
sanchezvem
2026-05-13 19:52:25 +01:00
parent fb467d52d9
commit ff7039a80b
11 changed files with 115 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+10
View File
@@ -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",
package.json
+1
View File
@@ -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",
src/app/components/group-chat/group-chat.component.html
-3
View File
@@ -1,3 +0,0 @@
<p>
group-chat works!
</p>
src/app/components/group-chat/group-chat.component.scss
View File
src/app/components/group-chat/group-chat.component.ts
-16
View File
@@ -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() {
}
}
src/app/components/message/message.component.html
+51 -3
View File
@@ -1,3 +1,51 @@
<p>
message works!
</p>
@if (messages().length) {
@for (message of messages(); track message.id) {
@if (message.userId === currentUser) {
<div class="flex flex-row-reverse items-end">
<div class="flex flex-col items-end">
<div class="px-3.5 py-2 text-sm rounded-3xl rounded-br-sm bg-violet-700 text-white">
{{ message.libelle }}
</div>
<span class="text-[10px] mt-0.5 mr-1">
{{ message.sendDate | date:'HH:mm' }}
</span>
</div>
</div>
} @else {
<div class="flex items-end gap-2">
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs mb-2 bg-teal-100 text-teal-700">
{{ message.username.substring(0, 2) }}
</div>
<div class="flex flex-col">
<span class="text-[11px] mb-1 ml-1">
{{ message.username }}
</span>
<div class="px-3.5 py-2 text-sm rounded-3xl rounded-bl-sm border">
{{ message.libelle }}
</div>
<span class="text-[10px] mt-0.5 mx-1">
{{ message.sendDate | date:'HH:mm' }}
</span>
</div>
</div>
}
}
} @else {
<ion-item lines="none" class="mt-[60%]" style="--background: #F7F6F2;">
<div class="flex flex-col items-center w-full gap-3">
<div class="relative w-14 h-14">
<div class="w-14 h-14 rounded-full bg-white border border-stone-200 flex items-center justify-center">
<ion-icon name="chatbubble-ellipses-outline" class="text-2xl text-stone-400"></ion-icon>
</div>
<div class="absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full bg-white border border-stone-200 flex items-center justify-center">
<ion-icon name="moon-outline" class="text-[10px] text-stone-400"></ion-icon>
</div>
</div>
<div class="text-center flex flex-col gap-1">
<p class="m-0 text-sm font-medium text-stone-400">C'est bien calme par ici</p>
<p class="m-0 text-xs text-stone-300 leading-relaxed">Les messages du groupe apparaîtront ici</p>
</div>
</div>
</ion-item>
}
src/app/components/message/message.component.ts
+48 -6
View File
@@ -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<GetMessageDto[]>([]);
groupId = input.required<GetGroupDetailsDto["id"]>();
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<any>(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() {
}
}
src/app/pages/home/home.component.html
+1 -1
View File
@@ -49,7 +49,7 @@
@if (groupSelected()) {
<app-modal>
test
<app-message [groupId]="groupSelected().id"></app-message>
</app-modal>
}
</ion-content>
src/app/pages/home/home.component.ts
+2
View File
@@ -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 {
src/app/pages/ranking/ranking.component.ts
+1 -5
View File
@@ -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<GetUserDto[]>([]);
async ngOnInit() {
await this.fetchUsers();
}
async ionViewWillEnter() {
await this.fetchUsers();
}
src/app/pages/social/social.component.ts
+1 -14
View File
@@ -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...',