diff --git a/src/app/components/generic-user-info/generic-user-info.component.html b/src/app/components/generic-user-info/generic-user-info.component.html index f2a6307..935defa 100644 --- a/src/app/components/generic-user-info/generic-user-info.component.html +++ b/src/app/components/generic-user-info/generic-user-info.component.html @@ -37,6 +37,6 @@

{{ userInfo().getUserStatsDto.totalLikes }}

-

Score global

+

Total de likes

\ No newline at end of file diff --git a/src/app/components/group-form/group-form.component.html b/src/app/components/group-form/group-form.component.html new file mode 100644 index 0000000..f076faa --- /dev/null +++ b/src/app/components/group-form/group-form.component.html @@ -0,0 +1,38 @@ +
+
+ + Nom du groupe + * + + + + + + +
+ + Ajouter des amis dans le groupe + + + @for (friend of friends(); track friend.friendId) { + + + {{ friend.username }} + + + } +
+ + + Créer un groupe + +
+
\ No newline at end of file diff --git a/src/app/components/group-form/group-form.component.scss b/src/app/components/group-form/group-form.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/group-form/group-form.component.ts b/src/app/components/group-form/group-form.component.ts new file mode 100644 index 0000000..c40e5dd --- /dev/null +++ b/src/app/components/group-form/group-form.component.ts @@ -0,0 +1,112 @@ +import {Component, inject, input, OnInit, output, signal} from '@angular/core'; +import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms"; +import {IonicModule, LoadingController, ToastController} from "@ionic/angular"; +import { + CreateGroupDto, + CreateUserGroupDto, + FriendsService, + GetFriendDto, + GetGroupDto, + GroupsService +} from "../../services/api"; +import {firstValueFrom} from "rxjs"; + +@Component({ + selector: 'app-group-form', + templateUrl: './group-form.component.html', + styleUrls: ['./group-form.component.scss'], + imports: [ + FormsModule, + ReactiveFormsModule, + IonicModule + ] +}) +export class GroupFormComponent implements OnInit { + private friendsServices = inject(FriendsService); + private groupsServices = inject(GroupsService); + private loadCtrl = inject(LoadingController); + private toastCtrl = inject(ToastController); + + friends = signal([]); + newGroup = output(); + + groupForm: FormGroup = new FormGroup({ + label: new FormControl(null, [Validators.required]), + userGroups: new FormControl(null, [Validators.required]), + }); + + async ngOnInit() { + const loading = await this.loadCtrl.create({ + message: 'Chargement...', + spinner: 'lines-sharp-small' + }); + await loading.present(); + + try { + const friends = await firstValueFrom(this.friendsServices.getAllFriendsEndpoint()); + this.friends.set(friends); + } catch { + const toast = await this.toastCtrl.create({ + message: 'Impossible d\'afficher les amis du joueur', + duration: 2000, + color: 'danger' + }); + await toast.present(); + } + await loading.dismiss(); + } + + selectFriends(event: any, friendId: number) { + const current = this.groupForm.value.userGroups || []; + + if (event.detail.checked) { + this.groupForm.patchValue({ + userGroups: [...current, friendId] + }); + } else { + this.groupForm.patchValue({ + userGroups: current.filter((x: number) => x != friendId) + }); + } + } + + async createGroup() { + if (this.groupForm.invalid) { + this.groupForm.reset(); + + const toast = await this.toastCtrl.create({ + message: 'Tous les champs doivent être saisis', + duration: 2000, + color: 'danger' + }); + await toast.present(); + + return; + } + + const createGroupDto: CreateGroupDto = { + label: this.groupForm.value.label, + userGroups: this.groupForm.value.userGroups.map((x: number) => ({ + userId: x + })) + }; + + try { + await firstValueFrom(this.groupsServices.createGroupEndpoint(createGroupDto)); + this.newGroup.emit(createGroupDto); + const toast = await this.toastCtrl.create({ + message: 'Le groupe a été crée', + duration: 2000, + color: 'success' + }); + await toast.present(); + } catch (e) { + const toast = await this.toastCtrl.create({ + message: 'Impossible de créer le groupe', + duration: 2000, + color: 'danger' + }); + await toast.present(); + } + } +} diff --git a/src/app/components/groups/groups.component.ts b/src/app/components/groups/groups.component.ts index 0032fac..742bdc1 100644 --- a/src/app/components/groups/groups.component.ts +++ b/src/app/components/groups/groups.component.ts @@ -1,7 +1,6 @@ -import {Component, inject, OnInit, signal} from '@angular/core'; -import {IonicModule, LoadingController, ToastController} from "@ionic/angular"; -import {GetGroupDto, GroupsService} from "../../services/api"; -import {firstValueFrom} from "rxjs"; +import {Component, input} from '@angular/core'; +import {IonicModule} from "@ionic/angular"; +import {GetGroupDto} from "../../services/api"; import {addIcons} from "ionicons"; import {chatbubblesOutline, chevronForwardOutline} from "ionicons/icons"; @@ -18,36 +17,6 @@ addIcons({ IonicModule ] }) -export class GroupsComponent implements OnInit { - private groupsService = inject(GroupsService); - private toastCtrl = inject(ToastController); - private loadCtrl = inject(LoadingController); - - groups = signal([]); - - async ngOnInit() { - await this.fetchGroups(); - } - - async fetchGroups() { - const loading = await this.loadCtrl.create({ - message: 'Chargement...', - spinner: 'lines-sharp-small' - }); - await loading.present(); - - try { - const groups = await firstValueFrom(this.groupsService.getAllGroupsEndpoint()); - this.groups.set(groups); - } - catch { - const toast = await this.toastCtrl.create({ - message: 'Impossible de charger les groupes du joueur', - duration: 2000, - color: 'danger' - }); - await toast.present(); - } - await loading.dismiss(); - } +export class GroupsComponent { + groups = input.required(); } diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 5d5084b..4382b49 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -3,13 +3,14 @@ + (click)="setOpen(true, true)"> + class="border border-gray-300 rounded-lg overflow-hidden" + (click)="setOpen(true, false)"> @@ -25,7 +26,7 @@
- +
@@ -34,26 +35,30 @@ - + - @switch (view) { - @case ('profile') { - Modifier mon profil - } - @case ('password') { - Mot de passe - } - @case ('designation') { - Changer mon titre - } - @case ('gallery') { - Ma Galerie - } - @default { - Profil + @if (isGroupModal){ + Créer un groupe + } @else { + @switch (view) { + @case ('profile') { + Modifier mon profil + } + @case ('password') { + Mot de passe + } + @case ('designation') { + Changer mon titre + } + @case ('gallery') { + Ma Galerie + } + @default { + Profil + } } } @@ -61,52 +66,56 @@ - @switch (view) { - @case ('menu') { - -
- - -
+ @if (isGroupModal) { + + } @else { + @switch (view) { + @case ('menu') { + +
+ + +
-
- - -
+
+ + +
-
- - -
- } - @case ('profile') { - -
- +
+ +
- - } - @case ('password') { - -
- -
- - } - @case ('designation') { - -
- - -
- - } - @case ('gallery') { - - - + } + @case ('profile') { + +
+ +
+ + } + @case ('password') { + +
+ +
+ + } + @case ('designation') { + +
+ + +
+ + } + @case ('gallery') { + + + + } } } diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 08d83d5..5b94641 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -1,15 +1,15 @@ import {Component, inject, OnInit, signal} from '@angular/core'; -import {IonicModule, LoadingController, ToastController} from "@ionic/angular"; +import {IonicModule, LoadingController, ModalController, ToastController} from "@ionic/angular"; import {addIcons} from "ionicons"; import {personOutline, addOutline, settingsOutline} from "ionicons/icons"; import {TitlePartComponent} from "../../components/title-part/title-part.component"; import {ChallengeCardComponent} from "../../components/challenge-card/challenge-card.component"; import { - AchievementsService, - GetAchievementDto, + AchievementsService, CreateGroupDto, + GetAchievementDto, GetGroupDto, GetRandomChallengeDto, GetUserChallengeDto, - GetUserDetailsDto, + GetUserDetailsDto, GroupsService, RandomchallengesService, UsersService } from "../../services/api"; @@ -26,6 +26,7 @@ import {PasswordFormComponent} from "../../components/password-form/password-for import {DesignationFormComponent} from "../../components/designation-form/designation-form.component"; import {GalleryComponent} from "../../components/gallery/gallery.component"; import {GroupsComponent} from "../../components/groups/groups.component"; +import {GroupFormComponent} from "../../components/group-form/group-form.component"; addIcons({ 'profile': personOutline, @@ -54,6 +55,7 @@ type View = 'menu' | 'profile' | 'password' | 'designation' | 'gallery'; DesignationFormComponent, GalleryComponent, GroupsComponent, + GroupFormComponent, ] }) export class HomeComponent implements OnInit { @@ -62,13 +64,16 @@ export class HomeComponent implements OnInit { private usersService = inject(UsersService); private loadCtrl = inject(LoadingController); private achievementsService = inject(AchievementsService); + private groupsService = inject(GroupsService); randomChallenge = signal({}); user = signal({}) userChallenge = signal([]); userAchievement = signal([]) + groups = signal([]) isModalOpen = false; + isGroupModal = false; view: View = 'menu'; setView(choice: View) { @@ -82,7 +87,9 @@ export class HomeComponent implements OnInit { async ngOnInit() { try { const randomChallenge = await firstValueFrom(this.randomChallengeService.generateRandomChallengeEndpoint()); + const groups = await firstValueFrom(this.groupsService.getAllGroupsEndpoint()); this.randomChallenge.set(randomChallenge); + this.groups.set(groups); } catch { const toast = await this.toastCtrl.create({ message: 'Impossible de générer un défi aléatoire', @@ -93,31 +100,42 @@ export class HomeComponent implements OnInit { } } - async setOpen(isOpen: boolean) { + async setOpen(isOpen: boolean, profil: boolean) { if (isOpen) { const loading = await this.loadCtrl.create({ message: 'Chargement...', spinner: 'lines-sharp-small' }); await loading.present(); - try { - const userInfo = await firstValueFrom(this.usersService.getUserDetailsEndpoint()); - const userChallenge = await firstValueFrom(this.usersService.getAllUserChallengesEndpoint()); - const userAchievement = await firstValueFrom((this.achievementsService.getUserAchievementsEndpoint())); - this.user.set(userInfo); - this.userChallenge.set(userChallenge); - this.userAchievement.set(userAchievement); - } catch { - const toast = await this.toastCtrl.create({ - message: 'Impossible de charger les données du joueur', - duration: 2000, - color: 'danger' - }); - await toast.present(); + if (profil) { + this.isGroupModal = !profil; + try { + const userInfo = await firstValueFrom(this.usersService.getUserDetailsEndpoint()); + const userChallenge = await firstValueFrom(this.usersService.getAllUserChallengesEndpoint()); + const userAchievement = await firstValueFrom((this.achievementsService.getUserAchievementsEndpoint())); + + this.user.set(userInfo); + this.userChallenge.set(userChallenge); + this.userAchievement.set(userAchievement); + } catch { + const toast = await this.toastCtrl.create({ + message: 'Impossible de charger les données du joueur', + duration: 2000, + color: 'danger' + }); + await toast.present(); + } + } else { + this.isGroupModal = !profil; } await loading.dismiss(); } this.isModalOpen = isOpen; } + + async updateGroup(newGroup: CreateGroupDto) { + this.groups.update(x => [...x, newGroup]) + await this.setOpen(false, true); + } } \ No newline at end of file