diff --git a/src/app/components/search-friend/search-friend.component.html b/src/app/components/search-friend/search-friend.component.html new file mode 100644 index 0000000..48d29d4 --- /dev/null +++ b/src/app/components/search-friend/search-friend.component.html @@ -0,0 +1,55 @@ + + + +@if (isActive()) { +
+ @if (results().length > 0) { + + @for (result of results(); track result; let i = $index) { + @if (i == results().length - 1) { + + + Silhouette of a person's head + + {{ result.username }} + {{ result.getUserStatsDto.score }} + pts + + + + + + } @else { + + + Silhouette of a person's head + + {{ result.username }} + {{ result.getUserStatsDto.score }} + pts + + + + + + } + } + + } @else { +
+

+ Aucun résultat +

+
+ } +
+} diff --git a/src/app/components/search-friend/search-friend.component.scss b/src/app/components/search-friend/search-friend.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/search-friend/search-friend.component.ts b/src/app/components/search-friend/search-friend.component.ts new file mode 100644 index 0000000..8ea4471 --- /dev/null +++ b/src/app/components/search-friend/search-friend.component.ts @@ -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([]); + results = signal([]); + isActive = signal(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(); + } + } +} \ No newline at end of file