added edit fonction

src/app/components/modal-nav/modal-nav.html

@@ -1,5 +1,5 @@
 <div (click)="showModal()">
-    <nz-icon [nzType]="nameIcon" nzTheme="outline"></nz-icon>
+    <nz-icon [nzType]="nameIcon()" nzTheme="outline"></nz-icon>
 </div>
 
 <ng-template #modalContent>
@@ -8,7 +8,7 @@
 
 <nz-modal
         [(nzVisible)]="isVisible"
-        [nzTitle]="name"
+        [nzTitle]="name()"
         (nzOnCancel)="handleCancel()"
         (nzOnOk)="handleOk()"
         [nzOkLoading]="isOkLoading"

src/app/components/modal-nav/modal-nav.ts

@@ -1,4 +1,4 @@
-import {Component, Input, input} from '@angular/core';
+import {Component, Input, input, output} from '@angular/core';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzModalModule } from 'ng-zorro-antd/modal';
 import {NzIconDirective} from "ng-zorro-antd/icon";
@@ -10,9 +10,10 @@ import {NzIconDirective} from "ng-zorro-antd/icon";
     styleUrls: ['./modal-nav.css'],
 })
 export class ModalNav {
-    @Input() nameIcon: string = '';
+    nameIcon = input.required<string>()
-    @Input() name: string = '';
+    name = input.required<string>()
-
+    ok = output<void>();
+    cancel = output<void>();
     isVisible = false;
     isOkLoading = false;
 
@@ -23,12 +24,14 @@ export class ModalNav {
     handleOk(): void {
         this.isOkLoading = true;
         setTimeout(() => {
-            this.isVisible = false;
+            this.ok.emit();
             this.isOkLoading = false;
         }, 1000);
     }
 
     handleCancel(): void {
         this.isVisible = false;
+        this.cancel.emit();
+
     }
 }

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

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import {Component, effect, input} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
 import {NzColDirective} from "ng-zorro-antd/grid";
 import {NzFlexDirective} from "ng-zorro-antd/flex";
 import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
 import {NzInputDirective} from "ng-zorro-antd/input";
 import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
+import {GetUserDto} from "../../services/api";
 
 @Component({
   selector: 'app-profil-form',
@@ -31,4 +32,18 @@ export class ProfilForm {
         fonction: new FormControl<string>(null, [Validators.required]),
         password: new FormControl<string>(null, [Validators.required])
     })
+
+    user = input<GetUserDto | null>(null);
+    constructor() {
+        effect(() => {
+            if (this.user()) {
+                this.profilForm.patchValue({
+                    name: this.user().name,
+                    email: this.user().email,
+                    fonction: this.user().fonction,
+                    password: this.user().password
+                });
+            }
+        });
+    }
 }

src/app/components/profil/profil.html

@@ -1,6 +1,6 @@
 <div class="ml-110 cursor-pointer">
     <app-modal-nav nameIcon="edit" name="Modification du profil">
-        <app-profil-form></app-profil-form>
+        <app-profil-form [user]=""></app-profil-form>
     </app-modal-nav>
 </div>
 

src/app/components/user-table/user-table.html

@@ -18,9 +18,7 @@
                 <td>{{user.fonction}}</td>
                 <td>
                     <div style="justify-content: center; display: flex">
-                        <app-modal-nav nameIcon="edit" name="Modification de l'utilisateur" class="cursor-pointer">
+                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(user)"></nz-icon>
-                            <app-profil-form></app-profil-form>
-                        </app-modal-nav>
                         <nz-divider nzType="vertical"></nz-divider>
                         <div>
                             <nz-icon nzType="delete" nzTheme="outline" (click)="delete(user.id)" class="cursor-pointer text-red-700"/>
@@ -31,3 +29,9 @@
         }
     </tbody>
 </nz-table>
+
+<div class="hidden">
+    <app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedUser.id, updateUser, modalNav)" (cancel)="onModalCancel(modalNav)">
+        <app-profil-form #updateUser [user]="selectedUser"></app-profil-form>
+    </app-modal-nav>
+</div>

src/app/components/user-table/user-table.ts

@@ -65,4 +65,46 @@ export class UserTable implements OnInit {
         await this.fetchUsers();
     }
 
+    async edit(id: number, updateUserComponent: ProfilForm) {
+        if (updateUserComponent.profilForm.invalid) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
+            return;
+        }
+
+        try {
+            const users = updateUserComponent.profilForm.getRawValue();
+            await firstValueFrom(this.usersService.updateUserEndpoint(id, users))
+
+            this.notificationService.success(
+                'Success',
+                'Utilisateur modifié'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur lors de la modification'
+            )
+        }
+    }
+
+    selectedUser: GetUserDto | null = null;
+    openEditModal(user: GetUserDto) {
+        this.selectedUser = { ...user };
+        this.modal().showModal();
+    }
+
+    async onModalOk(userId: number, updateUserComponent: ProfilForm, modal: ModalNav) {
+        if (!this.selectedUser) return;
+
+        await this.edit(userId, updateUserComponent);
+        updateUserComponent.profilForm.reset();
+        modal.isVisible = false;
+        await this.fetchUsers();
+    }
+    onModalCancel(modal: ModalNav) {
+        modal.isVisible = false;
+    }
 }

src/app/pages/user/user.html

@@ -5,7 +5,7 @@
                       (ok)="onModalOk()"
                       (cancel)="onModalCancel()">
 
-    <app-profil-form #profilForm></app-profil-form>
+        <app-profil-form #profilForm [user]=""></app-profil-form>
     </app-modal-button>
 
     <div class="ml-95 w-150">

src/app/pages/user/user.ts

@@ -48,8 +48,6 @@ export class User {
             const users = this.createUser().profilForm.getRawValue();
             await firstValueFrom(this.usersService.createUserEndpoint(users))
 
-            console.log(users)
-
             this.notificationService.success(
                 'Success',
                 'Utilisateur crée'