created user form for create all user

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

@@ -1,4 +1,4 @@
-<form nz-form nzLayout="horizontal" [formGroup]="createUserForm" (ngSubmit)="submitForm()">
+<form nz-form nzLayout="horizontal" [formGroup]="createUserForm">
     <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/create-user/create-user.ts

@@ -3,6 +3,7 @@ import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} fr
 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";
 
 @Component({
   selector: 'app-create-user',
@@ -15,7 +16,8 @@ import {NzInputDirective} from "ng-zorro-antd/input";
         NzFormLabelComponent,
         NzInputDirective,
         NzRowDirective,
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        NzDatePickerComponent
     ],
   templateUrl: './create-user.html',
   styleUrl: './create-user.css',
@@ -25,17 +27,6 @@ export class CreateUser {
         name: new FormControl<string>(null, [Validators.required]),
         firstName: new FormControl<string>(null, [Validators.required]),
         email: new FormControl(null, [Validators.required]),
-        birthDate: new FormControl(null, [Validators.required]),
+        birthDate: new FormControl(null),
     })
-
-    submitForm() {
-        // Pour annuler si le formulaire est invalide
-        if (this.createUserForm.invalid) return;
-
-        // Pour obtenir la valeur du formulaire
-        console.log(this.createUserForm.getRawValue())
-
-        // Pour vider le formulaire
-        this.createUserForm.reset()
-    }
 }

src/app/components/modal/modal.ts

@@ -1,4 +1,4 @@
-import {Component, input} from '@angular/core';
+import {Component, input, output} from '@angular/core';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzModalModule } from 'ng-zorro-antd/modal';
 
@@ -14,6 +14,9 @@ export class Modal {
     isVisible = false;
     isOkLoading = false;
 
+    ok = output<void>();
+    cancel = output<void>();
+
     showModal(): void {
         this.isVisible = true;
     }
@@ -21,12 +24,13 @@ export class Modal {
     handleOk(): void {
         this.isOkLoading = true;
         setTimeout(() => {
-            this.isVisible = false;
+            this.ok.emit();
             this.isOkLoading = false;
-        }, 1000); // 1 secondes
+        }, 1000);
     }
 
     handleCancel(): void {
+        this.cancel.emit();
         this.isVisible = false;
     }
 }

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

@@ -9,7 +9,7 @@
         <th>Email</th>
         <th>Anniversaire</th>
         <th>Emprunt</th>
-        <th>Action</th>
+        <th  style="display: flex; align-items: center;">Action</th>
     </tr>
     </thead>
     <tbody style="text-align: center">
@@ -43,20 +43,15 @@
                     </app-modal>
                 </td>
                 <td>
-                    <div style="justify-content: center; display: flex">
-                        <td>
-                            <app-modal-icon nameIcon="edit" [name]="'Modifier'">
-                                <app-update-user></app-update-user>
-                            </app-modal-icon>
+                    <div style="display: flex; align-items: center;">
+                        <app-modal-icon nameIcon="edit" [name]="'Modifier'">
+                            <app-update-user></app-update-user>
+                        </app-modal-icon>
 
-                            <nz-divider nzType="vertical"></nz-divider>
+                        <nz-divider nzType="vertical"></nz-divider>
 
-                            <div>
-                                <div>
-                                    <nz-icon nzType="delete" nzTheme="outline" (click)="delete()" class="text-red-600"></nz-icon>
-                                </div>
-                            </div>
-                        </td>
+                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete()" class="text-red-600">
+                        </nz-icon>
                     </div>
                 </td>
             </tr>

src/app/pages/user/user.html

@@ -1,7 +1,13 @@
-<app-modal type="primary" [name]="'Ajouter un utilisateur'">
-    <app-create-user></app-create-user>
+<app-modal
+    #modal
+    type="primary"
+    name="Ajouter un utilisateur"
+    (ok)="onModalOk()"
+    (cancel)="onModalCancel()">
+    <app-create-user #createUser></app-create-user>
 </app-modal>
 
+
 <div class="mt-5">
-    <app-user-table></app-user-table>
+    <app-user-table #userTable></app-user-table>
 </div>

src/app/pages/user/user.ts

@@ -1,7 +1,11 @@
-import { Component } from '@angular/core';
+import {Component, inject, OnInit, viewChild} from '@angular/core';
 import {Modal} from "../../components/modal/modal";
 import {CreateUser} from "../../components/create-user/create-user";
 import {UserTable} from "../../components/user-table/user-table";
+import {CreateUserDto, UsersService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
+import { format } from 'date-fns';
 
 @Component({
   selector: 'app-user',
@@ -13,6 +17,47 @@ import {UserTable} from "../../components/user-table/user-table";
   templateUrl: './user.html',
   styleUrl: './user.css',
 })
-export class User {
+export class User implements OnInit {
+    modal = viewChild.required<Modal>('modal');
+    createUser = viewChild.required<CreateUser>('createUser');
+    usersTable = viewChild.required<UserTable>('userTable');
 
+    private usersService = inject(UsersService);
+    private notificationService = inject(NzNotificationService)
+
+    async ngOnInit() {
+        await this.addUser();
+    }
+
+    async onModalOk() {
+        await this.addUser()
+        this.createUser().createUserForm.reset();
+        this.modal().isVisible = false;
+        await this.usersTable().fetchUsers()
+    }
+
+    onModalCancel() {
+        this.modal().isVisible = false;
+    }
+
+    async addUser() {
+        if (this.createUser().createUserForm.invalid)
+        {
+            return
+        }
+        try {
+            const rawDate = this.createUser().createUserForm.get('birthDate')?.value;
+            const birthDate = format(rawDate, 'yyyy-MM-dd');
+
+            const users = this.createUser().createUserForm.getRawValue();
+            users.birthDate = birthDate;
+
+            await firstValueFrom(this.usersService.createUserEndpoint(users))
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'enregistrement'
+            )
+        }
+    }
 }