created user form for edit user

src/app/components/modal-icon/modal-icon.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-icon/modal-icon.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import {Component, input, output} from '@angular/core';
 import {NzModalComponent} from "ng-zorro-antd/modal";
 import {NzIconDirective} from "ng-zorro-antd/icon";
 
@@ -12,12 +12,15 @@ import {NzIconDirective} from "ng-zorro-antd/icon";
   styleUrl: './modal-icon.css',
 })
 export class ModalIcon {
-    @Input() nameIcon: string = '';
-    @Input() name: string = '';
+    nameIcon = input.required<string>()
+    name = input.required<string>();
 
     isVisible = false;
     isOkLoading = false;
 
+    ok = output<void>();
+    cancel = output<void>();
+
     showModal(): void {
         this.isVisible = true;
     }
@@ -25,12 +28,13 @@ export class ModalIcon {
     handleOk(): void {
         this.isOkLoading = true;
         setTimeout(() => {
-            this.isVisible = false;
+            this.ok.emit();
             this.isOkLoading = false;
         }, 1000);
     }
 
     handleCancel(): void {
+        this.cancel.emit();
         this.isVisible = false;
     }
 }

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

@@ -1,4 +1,4 @@
-<form nz-form nzLayout="horizontal" [formGroup]="updateUserForm" (ngSubmit)="submitForm()">
+<form nz-form nzLayout="horizontal" [formGroup]="updateUserForm">
     <nz-form-item>
         <nz-form-label nzSpan="8" nzRequired>
             Nom
@@ -30,12 +30,12 @@
     </nz-form-item>
 
     <nz-form-item>
-        <nz-form-label nzSpan="8" nzRequired>
+        <nz-form-label nzSpan="8">
             Anniversaire
         </nz-form-label>
 
-        <nz-form-control nzSpan="40" nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="JJ/MM/AAAA" formControlName="birthDate">
+        <nz-form-control nzSpan="12">
+            <nz-date-picker formControlName="birthDate"></nz-date-picker>
         </nz-form-control>
     </nz-form-item>
 </form>

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

@@ -1,8 +1,12 @@
-import { Component } from '@angular/core';
+import {Component, input} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
 import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
 import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
 import {NzInputDirective} from "ng-zorro-antd/input";
+import {NzDatePickerComponent} from "ng-zorro-antd/date-picker";
+import {format} from "date-fns";
+import {firstValueFrom} from "rxjs";
+import {GetUserDto} from "../../services/api";
 
 @Component({
   selector: 'app-update-user',
@@ -15,7 +19,8 @@ import {NzInputDirective} from "ng-zorro-antd/input";
         NzFormLabelComponent,
         NzInputDirective,
         NzRowDirective,
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        NzDatePickerComponent
     ],
   templateUrl: './update-user.html',
   styleUrl: './update-user.css',
@@ -28,14 +33,15 @@ export class UpdateUser {
         birthDate: new FormControl(null, [Validators.required]),
     })
 
-    submitForm() {
-        // Pour annuler si le formulaire est invalide
-        if (this.updateUserForm.invalid) return;
-
-        // Pour obtenir la valeur du formulaire
-        console.log(this.updateUserForm.getRawValue())
-
-        // Pour vider le formulaire
-        this.updateUserForm.reset()
+    user = input.required<GetUserDto>()
+    ngOnChanges() {
+        if (this.user) {
+            this.updateUserForm.patchValue({
+                name: this.user().name,
+                firstName: this.user().firstName,
+                email: this.user().email,
+                birthDate: new Date(this.user().birthDate)
+            });
+        }
     }
 }

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

@@ -45,8 +45,13 @@
                 <td>
                     <div style="display: flex; align-items: center;">
                         <div class="cursor-pointer">
-                            <app-modal-icon nameIcon="edit" [name]="'Modifier'">
-                                <app-update-user></app-update-user>
+                            <app-modal-icon #modalIcon
+                                            nameIcon="edit"
+                                            [name]="'Modifier'"
+                                            (ok)="onModalOk(selectedUser?.id)"
+                                            (cancel)="onModalCancel()"
+                                            (click)="openEditModal(user)">
+                                <app-update-user #updateUser [user]="selectedUser"></app-update-user>
                             </app-modal-icon>
                         </div>
 

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

@@ -1,4 +1,4 @@
-import {Component, inject, OnInit, signal} from '@angular/core';
+import {Component, inject, input, OnInit, signal, viewChild} from '@angular/core';
 import {NzTableComponent} from "ng-zorro-antd/table";
 import {Modal} from "../modal/modal";
 import {DatePipe} from "@angular/common";
@@ -9,6 +9,8 @@ import {firstValueFrom} from "rxjs";
 import {NzDividerComponent} from "ng-zorro-antd/divider";
 import {ModalIcon} from "../modal-icon/modal-icon";
 import {NzIconDirective} from "ng-zorro-antd/icon";
+import {format} from "date-fns";
+import {CreateUser} from "../create-user/create-user";
 
 @Component({
   selector: 'app-user-table',
@@ -29,6 +31,8 @@ export class UserTable implements OnInit {
     private notificationService = inject(NzNotificationService)
     users = signal<GetUserDto[]>([]);
     usersLoading = signal<boolean>(false);
+    updateUser = viewChild.required<UpdateUser>('updateUser');
+    modal = viewChild.required<ModalIcon>('modalIcon');
 
     async ngOnInit() {
         await this.fetchUsers();
@@ -63,7 +67,52 @@ export class UserTable implements OnInit {
                 'Impossible de supprimer la ligne'
             )
         }
-
         await this.fetchUsers();
     }
+
+    selectedUser: GetUserDto | null = null;
+    openEditModal(user: GetUserDto) {
+        this.selectedUser = user;
+        this.modal().showModal();
+    }
+
+    async onModalOk(userId:number) {
+        await this.edit(userId)
+        this.updateUser().updateUserForm.reset();
+        this.modal().isVisible = false;
+        await this.fetchUsers()
+    }
+
+    onModalCancel() {
+        this.modal().isVisible = false;
+    }
+
+    async edit(id :number) {
+        if (this.updateUser().updateUserForm.invalid)
+        {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
+        }
+        try {
+            const rawDate = this.updateUser().updateUserForm.get('birthDate')?.value;
+            const birthDate = format(rawDate, 'yyyy-MM-dd');
+
+            const users = this.updateUser().updateUserForm.getRawValue();
+            users.birthDate = birthDate;
+
+            await firstValueFrom(this.usersService.updateUserEndpoint(id, users))
+
+            this.notificationService.success(
+                'Success',
+                'Utilisateur modifié'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur lors de la modification'
+            )
+        }
+    }
 }