Added component to change designation

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

@@ -0,0 +1,25 @@
+<div class="bg-white rounded-xl p-5 shadow-sm border border-gray-200">
+    <form [formGroup]="designationForm" class="space-y-5">
+        <div class="space-y-3  max-h-[70vh] overflow-y-auto">
+            <ion-label class="text-sm text-gray-500 block">
+                Choisis ton titre de préstige
+            </ion-label>
+
+            <ion-radio-group formControlName="designationId">
+                @for (designation of designations(); track designation.id) {
+                    <ion-item lines="none" class="rounded-lg border border-gray-100">
+                        <ion-radio [value]="designation.id" class="text-sm text-gray-700">{{ designation.label }}
+                        </ion-radio>
+                    </ion-item>
+                }
+            </ion-radio-group>
+        </div>
+
+        <ion-button expand="block"
+                    class="mt-6 rounded-xl font-medium"
+                    style="--background: #1f2937;"
+                    (click)="updateDesignation()">
+            Modifier
+        </ion-button>
+    </form>
+</div>

src/app/components/designation-form/designation-form.component.ts

@@ -0,0 +1,101 @@
+import {Component, inject, input, OnInit, output, signal} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import {DesignationsService, GetDesignationDto, GetUserDetailsDto, UsersService} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+
+@Component({
+    selector: 'app-designation-form',
+    templateUrl: './designation-form.component.html',
+    styleUrls: ['./designation-form.component.scss'],
+    imports: [
+        IonicModule,
+        ReactiveFormsModule
+    ]
+})
+export class DesignationFormComponent implements OnInit {
+    private designationsService = inject(DesignationsService);
+    private usersService = inject(UsersService);
+    private loadCtrl = inject(LoadingController);
+    private toastCtrl = inject(ToastController);
+
+    designationForm: FormGroup = new FormGroup({
+        designationId: new FormControl<string>(null)
+    });
+
+    designations = signal<GetDesignationDto[]>([]);
+    user = input.required<GetUserDetailsDto>();
+    userDesignation = output<GetUserDetailsDto>();
+
+    async ngOnInit() {
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        this.designationForm.patchValue({
+            designationId: this.user().designationId,
+        });
+
+        try {
+            const designation = await firstValueFrom(this.designationsService.getAllDesignationsEndpoint());
+            this.designations.set(designation);
+
+            await loading.dismiss();
+        } catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible de récupérer les titres',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+            await loading.dismiss();
+        }
+    }
+
+    async updateDesignation() {
+        const loading = await this.loadCtrl.create({
+            message: 'Modification...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        try {
+            const form = this.designationForm.getRawValue();
+            const label = this.designations().find(x => x.id == form.designationId).label;
+
+            await firstValueFrom(this.usersService.patchUserDesignationEndpoint(form));
+            const userEdited = {
+                id: this.user().id,
+                firstName: this.user().firstName,
+                name: this.user().name,
+                username: this.user().username,
+                email: this.user().email,
+                designationId: form.designationId,
+                designationName: label,
+                creationDate: this.user().creationDate,
+                getUserStatsDto: this.user().getUserStatsDto
+            }
+
+            this.userDesignation.emit(userEdited);
+
+            const toast = await this.toastCtrl.create({
+                message: 'Modification réussie',
+                duration: 2000,
+                color: 'success'
+            });
+
+            await loading.dismiss();
+            await toast.present();
+        } catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Modification impossible',
+                duration: 2000,
+                color: 'danger'
+            });
+            await loading.dismiss();
+            await toast.present();
+        }
+    }
+}

src/app/components/profil-form/profil-form.component.ts

@@ -1,7 +1,7 @@
 import {Component, inject, input, OnInit, output} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
 import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
-import {GetUserDetailsDto, GetUserStatsDto, UsersService} from "../../services/api";
+import {GetUserDetailsDto, UsersService} from "../../services/api";
 import {firstValueFrom} from "rxjs";
 
 @Component({
@@ -74,6 +74,7 @@ export class ProfilFormComponent implements OnInit {
                 name: form.name,
                 username: form.username,
                 email: form.email,
+                designationId: this.user().designationId,
                 designationName: this.user().designationName,
                 creationDate: this.user().creationDate,
                 getUserStatsDto: this.user().getUserStatsDto

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

@@ -102,7 +102,8 @@
                 @case ('designation') {
                     <app-modal>
                         <div class="p-4">
-                            <p>Formulaire designation</p>
+                            <app-designation-form [user]="user()"
+                                                  (userDesignation)="user.set($event)"></app-designation-form>
                         </div>
                     </app-modal>
                 }

src/app/pages/home/home.component.ts

@@ -23,6 +23,7 @@ import {UserAchievementsComponent} from "../../components/user-achievements/user
 import {ModalComponent} from "../../components/modal/modal.component";
 import {ProfilFormComponent} from "../../components/profil-form/profil-form.component";
 import {PasswordFormComponent} from "../../components/password-form/password-form.component";
+import {DesignationFormComponent} from "../../components/designation-form/designation-form.component";
 
 addIcons({
     'profile': personOutline,
@@ -47,7 +48,8 @@ type View = 'menu' | 'profile' | 'password' | 'designation' | 'gallery';
         ModalComponent,
         ProfilFormComponent,
         PasswordFormComponent,
-        PasswordFormComponent
+        PasswordFormComponent,
+        DesignationFormComponent
     ]
 })
 export class HomeComponent implements OnInit {

src/app/services/api/model/get-user-details-dto.ts

@@ -16,6 +16,7 @@ export interface GetUserDetailsDto {
     name?: string | null;
     username?: string | null;
     email?: string | null;
+    designationId?: number | null;
     designationName?: string | null;
     creationDate?: string;
     getUserStatsDto?: GetUserStatsDto | null;

src/app/services/api/model/get-user-dto.ts

@@ -15,6 +15,7 @@ export interface GetUserDto {
     firstName?: string | null;
     name?: string | null;
     username?: string | null;
+    designationId?: number | null;
     designationName?: string | null;
     getUserStatsDto?: GetUserStatsDto | null;
 }