Added searchbar to add friends in the application

2026-03-28 18:26:18 +01:00
parent d2742f095f
commit 75251601ae
3 changed files with 145 additions and 0 deletions
@@ -0,0 +1,55 @@
+<ion-searchbar
+        [(ngModel)]="query"
+        placeholder="Rechercher par pseudo..."
+        show-cancel-button="focus"
+        (ionInput)="filterUsers()"
+        (ionCancel)="resetSearch()"
+        (ionBlur)="onBlur()"
+        style="--ion-color-primary: #0054E9;">
+</ion-searchbar>
+
+@if (isActive()) {
+    <div class="rounded-3xl px-5 ml-3 mr-3 mb-4 bg-white font-mono border-1 border-gray-300 overflow-auto">
+        @if (results().length > 0) {
+            <ion-list>
+                @for (result of results(); track result; let i = $index) {
+                    @if (i == results().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 font-bold">{{ result.username }}</ion-label>
+                            <ion-label class="text-xs font-mono text-gray-400">{{ result.getUserStatsDto.score }}
+                                <em>pts</em>
+                            </ion-label>
+                            <ion-button fill="clear" (touchstart)="addFriend(result.id)">
+                                <ion-icon slot="icon-only" name="send" class="text-green-700 text-2xl"></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 font-bold">{{ result.username }}</ion-label>
+                            <ion-label class="text-xs font-mono text-gray-400">{{ result.getUserStatsDto.score }}
+                                <em>pts</em>
+                            </ion-label>
+                            <ion-button fill="clear" (touchstart)="addFriend(result.id)">
+                                <ion-icon slot="icon-only" name="send" class="text-green-700 text-2xl"></ion-icon>
+                            </ion-button>
+                        </ion-item>
+                    }
+                }
+            </ion-list>
+        } @else {
+            <div class="flex justify-center items-center">
+                <p class="text-center text-sm italic text-gray-500 font-serif">
+                    Aucun résultat
+                </p>
+            </div>
+        }
+    </div>
+}
@@ -0,0 +1,90 @@
+import { Component, inject, OnInit, signal } from '@angular/core';
+import { IonicModule, LoadingController, ToastController } from "@ionic/angular";
+import {FriendsService, GetUserDto, UsersService} from "../../services/api";
+import { firstValueFrom } from "rxjs";
+import { FormsModule } from "@angular/forms";
+
+@Component({
+    selector: 'app-search-friend',
+    templateUrl: './search-friend.component.html',
+    styleUrls: ['./search-friend.component.scss'],
+    imports: [
+        IonicModule,
+        FormsModule
+    ]
+})
+export class SearchFriendComponent implements OnInit {
+    private loadCtrl = inject(LoadingController);
+    private usersService = inject(UsersService);
+    private toastCtrl = inject(ToastController);
+    private friendsService = inject(FriendsService);
+
+    users = signal<GetUserDto[]>([]);
+    results = signal<GetUserDto[]>([]);
+    isActive = signal<boolean>(false);
+
+    query = ''; // ngModel binding
+
+    async ngOnInit() {
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            duration: 1000,
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+        await this.fetchUsers();
+    }
+
+    async fetchUsers() {
+        try {
+            const users = await firstValueFrom(this.usersService.getAllUsersEndpoint());
+            this.users.set(users);
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible de charger les joueurs',
+                duration: 2000,
+                color: 'primary'
+            });
+            await toast.present();
+        }
+    }
+
+    filterUsers() {
+        const q = this.query.toLowerCase();
+        this.isActive.set(!!q);
+        this.results.set(
+            this.users().filter(u => u.username.toLowerCase().includes(q))
+        );
+    }
+
+    resetSearch() {
+        this.query = '';
+        this.results.set([]);
+        this.isActive.set(false);
+    }
+
+    onBlur() {
+        if (!this.query) {
+            this.isActive.set(false);
+        }
+    }
+
+    async addFriend(id: number) {
+        try {
+            await firstValueFrom(this.friendsService.sendFriendRequestEndpoint(id));
+            const toast = await this.toastCtrl.create({
+                message: 'Demande d\'amis envoyée',
+                duration: 2000,
+                color: 'success'
+            });
+            await toast.present();
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Erreur lors de l\'ajout d\'amis',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+    }
+}