Added all setting's group (except add user to group)

src/app/components/groups/groups.component.html

@@ -3,12 +3,16 @@
         @if (groups().length) {
             @for (group of groups(); track group.id; let i = $index) {
                 @if (i == groups().length - 1) {
-                    <ion-item lines="none" class="transition-all duration-200 active:[--background:#DBD8D7]">
+                    <ion-item lines="none"
+                              class="transition-all duration-200 active:[--background:#DBD8D7]"
+                              (click)="selectedGroup(group.id)">
                         <p class="text-sm text-gray-600">{{ group.label }}</p>
                         <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
                     </ion-item>
                 } @else {
-                    <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]">
+                    <ion-item lines="full"
+                              class="transition-all duration-200 active:[--background:#DBD8D7]"
+                              (click)="selectedGroup(group.id)">
                         <p class="text-sm text-gray-600">{{ group.label }}</p>
                         <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
                     </ion-item>

src/app/components/groups/groups.component.ts

@@ -1,8 +1,9 @@
-import {Component, input} from '@angular/core';
-import {IonicModule} from "@ionic/angular";
-import {GetGroupDto} from "../../services/api";
+import {Component, inject, input, output} from '@angular/core';
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import {GetGroupDetailsDto, GetGroupDto, GroupsService} from "../../services/api";
 import {addIcons} from "ionicons";
 import {chatbubblesOutline, chevronForwardOutline} from "ionicons/icons";
+import {firstValueFrom} from "rxjs";
 
 addIcons({
     'group': chatbubblesOutline,
@@ -18,5 +19,32 @@ addIcons({
     ]
 })
 export class GroupsComponent {
+    private groupsService = inject(GroupsService);
+    private toastCtrl = inject(ToastController);
+    private loadCtrl = inject(LoadingController);
+
     groups = input.required<GetGroupDto[]>();
+
+    group = output<GetGroupDetailsDto>();
+
+    async selectedGroup(id: number) {
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        try {
+            const group = await firstValueFrom(this.groupsService.getGroupDetailsEndpoint(id));
+            this.group.emit(group);
+        } catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible de charger le groupe',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+        await loading.dismiss();
+    }
 }

src/app/components/settings-options/settings-options.component.html

@@ -37,6 +37,13 @@
                             <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
                         </ion-item>
                     }
+                    @case (5) {
+                        <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]"
+                                  (click)="deleteUser()">
+                            <p class="text-sm text-red-800">Supprimer mon compte</p>
+                            <ion-icon slot="end" class="text-xl text-red-800" name="chevron"></ion-icon>
+                        </ion-item>
+                    }
                 }
             }
         }

src/app/components/settings-options/settings-options.component.ts

@@ -1,8 +1,11 @@
 import {Component, inject, output} from '@angular/core';
-import {IonicModule, LoadingController, NavController} from "@ionic/angular";
+import {IonicModule, LoadingController, NavController, ToastController} from "@ionic/angular";
 import {logOutOutline, chevronForwardOutline, chevronBack} from "ionicons/icons";
 import {addIcons} from "ionicons";
 import {AuthManageService} from "../../services/auth-manage";
+import {createFixResponseForZoneTests} from "@angular/cli/src/commands/mcp/tools/onpush-zoneless-migration/prompts";
+import {firstValueFrom} from "rxjs";
+import {UsersService} from "../../services/api";
 
 addIcons({
     'logout': logOutOutline,
@@ -22,8 +25,10 @@ export class SettingsOptionsComponent {
     private authManageService = inject(AuthManageService);
     private loadCtrl = inject(LoadingController);
     private navCtrl = inject(NavController);
+    private toastCtrl = inject(ToastController);
+    private usersService = inject(UsersService);
 
-    options = [1, 2, 3, 4, 5];
+    options = [1, 2, 3, 4, 5, 6];
 
     navigate = output<'profile' | 'password' | 'designation' | 'gallery'>();
 
@@ -39,4 +44,35 @@ export class SettingsOptionsComponent {
 
         await loading.dismiss();
     }
+
+    async deleteUser(){
+        const loading = await this.loadCtrl.create({
+            message: 'Déconnexion en cours...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        try {
+            await firstValueFrom(this.usersService.deleteUserEndpoint());
+
+            this.authManageService.logout();
+            await this.navCtrl.navigateRoot('/');
+
+            const toast = await this.toastCtrl.create({
+                message: 'Compte supprimé',
+                duration: 2000,
+                color: 'success'
+            });
+            await toast.present();
+        } catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Suppression impossible',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+
+        await loading.dismiss();
+    }
 }