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