Added creation of groups

src/app/components/generic-user-info/generic-user-info.component.html

@@ -37,6 +37,6 @@
 <div class="px-1">
     <div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
         <p class="text-2xl font-black font-mono mb-0.5">{{ userInfo().getUserStatsDto.totalLikes }}</p>
-        <p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Score global</p>
+        <p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Total de likes</p>
     </div>
 </div>

src/app/components/group-form/group-form.component.html

@@ -0,0 +1,38 @@
+<div class="bg-white rounded-xl p-5 shadow-sm border border-gray-200">
+    <form [formGroup]="groupForm">
+        <ion-label class="text-xs text-gray-500 mb-1 block">
+            Nom du groupe
+            <ion-text color="danger">*</ion-text>
+        </ion-label>
+        <ion-item lines="none" class="rounded-xl border border-gray-200">
+            <ion-input placeholder="Nom de ton groupe"
+                       [clearInput]="true"
+                       formControlName="label"
+                       class="text-gray-800">
+            </ion-input>
+        </ion-item>
+
+        <div class="space-y-3 mt-4 max-h-[50vh] overflow-y-auto">
+            <ion-label class="text-sm text-gray-500 block">
+                Ajouter des amis dans le groupe
+            </ion-label>
+
+            @for (friend of friends(); track friend.friendId) {
+                <ion-item lines="none" class="rounded-lg border border-gray-100">
+                    <ion-checkbox class="text-sm text-gray-700"
+                                  [checked]="groupForm.value.userGroups?.includes(friend.friendId)"
+                                  (ionChange)="selectFriends($event, friend.friendId)">
+                        {{ friend.username }}
+                    </ion-checkbox>
+                </ion-item>
+            }
+        </div>
+
+        <ion-button expand="block"
+                    class="mt-6 rounded-xl font-medium"
+                    style="--background: #1f2937;"
+                    (click)="createGroup()">
+            Créer un groupe
+        </ion-button>
+    </form>
+</div>

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<GetFriendDto[]>([]);
+    newGroup = output<CreateGroupDto>();
+
+    groupForm: FormGroup = new FormGroup({
+        label: new FormControl<string>(null, [Validators.required]),
+        userGroups: new FormControl<CreateUserGroupDto[]>(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();
+        }
+    }
+}

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<GetGroupDto[]>([]);
-
-    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<GetGroupDto[]>();
 }

src/app/pages/home/home.component.html

@@ -3,13 +3,14 @@
         <ion-buttons slot="secondary">
             <ion-button fill="solid" style="--background: #F0EFE9;"
                         class="border border-gray-300 rounded-lg overflow-hidden"
-                        (click)="setOpen(true)">
+                        (click)="setOpen(true, true)">
                 <ion-icon slot="icon-only" class="text-xl text-gray-500" name="profile"></ion-icon>
             </ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
             <ion-button fill="solid" style="--background: #F0EFE9;"
-                        class="border border-gray-300 rounded-lg overflow-hidden">
+                        class="border border-gray-300 rounded-lg overflow-hidden"
+                        (click)="setOpen(true, false)">
                 <ion-icon slot="icon-only" class="text-2xl text-gray-500" name="add"></ion-icon>
             </ion-button>
         </ion-buttons>
@@ -25,7 +26,7 @@
 
     <div class="mt-4">
         <app-title-part textInfo="Messages"></app-title-part>
-        <app-groups></app-groups>
+        <app-groups [groups]="groups()"></app-groups>
     </div>
 </ion-content>
 
@@ -34,26 +35,30 @@
         <ion-header>
             <ion-toolbar>
                 <ion-buttons slot="start">
-                    <ion-button fill="clear" (click)="view == 'menu' ? setOpen(false) : backToMenu()">
+                    <ion-button fill="clear" (click)="view == 'menu' ? setOpen(false, true) : backToMenu()">
                         <ion-icon name="chevron-back"></ion-icon>
                     </ion-button>
                 </ion-buttons>
                 <ion-title>
-                    @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
+                            }
                         }
                     }
                 </ion-title>
@@ -61,52 +66,56 @@
         </ion-header>
 
         <ion-content class="ion-padding" style="--background: #f7f6f2;">
-            @switch (view) {
-                @case ('menu') {
-                    <app-generic-user-info [userInfo]="user()"></app-generic-user-info>
-                    <div class="mt-4">
-                        <app-title-part textInfo="Mes participations"></app-title-part>
-                        <app-challenges-accomplished
-                                [userChallenges]="userChallenge()"></app-challenges-accomplished>
-                    </div>
+            @if (isGroupModal) {
+                <app-group-form (newGroup)="updateGroup($event)"></app-group-form>
+            } @else {
+                @switch (view) {
+                    @case ('menu') {
+                        <app-generic-user-info [userInfo]="user()"></app-generic-user-info>
+                        <div class="mt-4">
+                            <app-title-part textInfo="Mes participations"></app-title-part>
+                            <app-challenges-accomplished
+                                    [userChallenges]="userChallenge()"></app-challenges-accomplished>
+                        </div>
 
-                    <div class="mt-4">
-                        <app-title-part textInfo="Succès"></app-title-part>
-                        <app-user-achievements [achievements]="userAchievement()"></app-user-achievements>
-                    </div>
+                        <div class="mt-4">
+                            <app-title-part textInfo="Succès"></app-title-part>
+                            <app-user-achievements [achievements]="userAchievement()"></app-user-achievements>
+                        </div>
 
-                    <div class="mt-4">
-                        <app-title-part textInfo="Paramètres de compte"></app-title-part>
-                        <app-settings-options (navigate)="setView($event)"></app-settings-options>
-                    </div>
-                }
-                @case ('profile') {
-                    <app-modal>
-                        <div class="p-4">
-                            <app-profil-form [user]="user()" (userEdited)="user.set($event)"></app-profil-form>
+                        <div class="mt-4">
+                            <app-title-part textInfo="Paramètres de compte"></app-title-part>
+                            <app-settings-options (navigate)="setView($event)"></app-settings-options>
                         </div>
-                    </app-modal>
-                }
-                @case ('password') {
-                    <app-modal>
-                        <div class="p-4">
-                            <app-password-form></app-password-form>
-                        </div>
-                    </app-modal>
-                }
-                @case ('designation') {
-                    <app-modal>
-                        <div class="p-4">
-                            <app-designation-form [user]="user()"
-                                                  (userDesignation)="user.set($event)">
-                            </app-designation-form>
-                        </div>
-                    </app-modal>
-                }
-                @case ('gallery') {
-                    <app-modal>
-                        <app-gallery></app-gallery>
-                    </app-modal>
+                    }
+                    @case ('profile') {
+                        <app-modal>
+                            <div class="p-4">
+                                <app-profil-form [user]="user()" (userEdited)="user.set($event)"></app-profil-form>
+                            </div>
+                        </app-modal>
+                    }
+                    @case ('password') {
+                        <app-modal>
+                            <div class="p-4">
+                                <app-password-form></app-password-form>
+                            </div>
+                        </app-modal>
+                    }
+                    @case ('designation') {
+                        <app-modal>
+                            <div class="p-4">
+                                <app-designation-form [user]="user()"
+                                                      (userDesignation)="user.set($event)">
+                                </app-designation-form>
+                            </div>
+                        </app-modal>
+                    }
+                    @case ('gallery') {
+                        <app-modal>
+                            <app-gallery></app-gallery>
+                        </app-modal>
+                    }
                 }
             }
         </ion-content>

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<GetRandomChallengeDto>({});
     user = signal<GetUserDetailsDto>({})
     userChallenge = signal<GetUserChallengeDto[]>([]);
     userAchievement = signal<GetAchievementDto[]>([])
+    groups = signal<GetGroupDto[]>([])
 
     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);
+    }
 }