Created social page

2026-03-28 15:45:09 +01:00
parent 8dc66363ce
commit fdb4cf119b
73 changed files with 1097 additions and 1748 deletions
@@ -0,0 +1,45 @@
+@if (friendsRequest().length > 0) {
+    <div class="rounded-3xl px-5 m-3 bg-white overflow-auto font-mono border-1 border-gray-300">
+        <ion-list>
+            @for (request of friendsRequest(); track request.userId; let i = $index) {
+                @if (i == friendsRequest().length - 1) {
+                    <ion-item lines="none">
+                        <ion-avatar slot="start" class="w-5 h-5">
+                            <img alt="Silhouette of a person's head"
+                                 src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
+                        </ion-avatar>
+                        <ion-label class="text-xs font-mono">{{ request.username }}</ion-label>
+                        <ion-button fill="clear" (touchstart)="acceptRequest(request)">
+                            <ion-icon slot="icon-only" name="check" class="text-green-600 m-0"></ion-icon>
+                        </ion-button>
+                        <app-pipe></app-pipe>
+                        <ion-button fill="clear" (touchstart)="rejectRequest(request.userId)">
+                            <ion-icon slot="icon-only" name="close" class="text-red-600 m-0"></ion-icon>
+                        </ion-button>
+                    </ion-item>
+                } @else {
+                    <ion-item lines="full">
+                        <ion-avatar slot="start" class="w-5 h-5">
+                            <img alt="Silhouette of a person's head"
+                                 src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
+                        </ion-avatar>
+                        <ion-label class="text-xs font-mono">{{ request.username }}</ion-label>
+                        <ion-button fill="clear" (touchstart)="acceptRequest(request)">
+                            <ion-icon slot="icon-only" name="check" class="text-green-600 m-0"></ion-icon>
+                        </ion-button>
+                        <app-pipe></app-pipe>
+                        <ion-button fill="clear" (touchstart)="rejectRequest(request.userId)">
+                            <ion-icon slot="icon-only" name="close" class="text-red-600 m-0"></ion-icon>
+                        </ion-button>
+                    </ion-item>
+                }
+            }
+        </ion-list>
+    </div>
+} @else {
+    <div class="flex justify-center items-center p-4">
+        <p class="text-center text-sm italic text-gray-500 font-serif">
+            Vous n'avez aucune demande d'ami
+        </p>
+    </div>
+}
@@ -0,0 +1,89 @@
+import {Component, inject, OnInit, signal} from '@angular/core';
+import {IonicModule, ToastController} from "@ionic/angular";
+import {checkmarkCircleOutline, closeCircleOutline} from 'ionicons/icons';
+import {addIcons} from "ionicons";
+import {PipeComponent} from "../pipe/pipe.component";
+import {FriendsService, GetFriendDto, GetFriendRequestDto} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+import {FriendsStateService} from "../../services/friends-state";
+
+addIcons({
+    'check': checkmarkCircleOutline,
+    'close': closeCircleOutline
+});
+
+@Component({
+    selector: 'app-friend-request',
+    templateUrl: './friend-request.component.html',
+    styleUrls: ['./friend-request.component.scss'],
+    imports: [
+        IonicModule,
+        PipeComponent
+    ]
+})
+export class FriendRequestComponent implements OnInit {
+    private friendsService = inject(FriendsService);
+    private toastCtrl = inject(ToastController);
+    private friendsState = inject(FriendsStateService);
+
+    friendsRequest = this.friendsState.requests;
+
+    async ngOnInit() {
+        await this.fetchFriendsRequest();
+    }
+
+    async fetchFriendsRequest() {
+        try {
+            const requests = await firstValueFrom(this.friendsService.getAllFriendRequestsEndpoint());
+            this.friendsState.setRequests(requests);
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Erreur lors du chargement des demandes d\'amis',
+                duration: 2000,
+                color: 'primary'
+            });
+            await toast.present();
+        }
+        console.log(this.friendsState.requests());
+    }
+
+    async acceptRequest(request: GetFriendRequestDto) {
+        try {
+            await firstValueFrom(this.friendsService.acceptFriendRequestEndpoint(request.userId));
+            this.friendsState.acceptRequest(request);
+            const toast = await this.toastCtrl.create({
+                message: 'Demande d\'ami acceptée',
+                duration: 1000,
+                color: 'success'
+            });
+            await toast.present();
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Echec de l\'acceptation',
+                duration: 1000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+    }
+
+    async rejectRequest(id: number) {
+        try {
+            await firstValueFrom(this.friendsService.rejectFriendRequestEndpoint(id));
+            this.friendsState.removeRequest(id);
+            const toast = await this.toastCtrl.create({
+                message: 'Demande d\'ami refusée',
+                duration: 1000,
+                color: 'success'
+            });
+            await toast.present();
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Echec du refus',
+                duration: 1000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+    }
+}