Added creation of groups

2026-04-25 18:14:10 +01:00
parent 3e6aae68d2
commit 99b4e0ea35
7 changed files with 264 additions and 118 deletions
@@ -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>
@@ -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>
@@ -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();
+        }
+    }
+}
@@ -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[]>();
 }