added create fonction, fetch, and delete

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

@@ -1,4 +1,4 @@
-import {Component, input, Input} from '@angular/core';
+import {Component, input, Input, output} from '@angular/core';
 import {NzModalComponent} from "ng-zorro-antd/modal";
 import {NzButtonComponent} from "ng-zorro-antd/button";
 
@@ -16,6 +16,9 @@ export class ModalButton {
     name = input.required<string>()
     type = input<"primary" | "default" | "dashed" | "link" | "text">()
 
+    ok = output<void>();
+    cancel = output<void>();
+
     isVisible = false;
     isOkLoading = false;
 
@@ -26,12 +29,14 @@ export class ModalButton {
     handleOk(): void {
         this.isOkLoading = true;
         setTimeout(() => {
+            this.ok.emit();
             this.isVisible = false;
             this.isOkLoading = false;
         }, 1000);
     }
 
     handleCancel(): void {
+        this.cancel.emit();
         this.isVisible = false;
     }
 }

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

@@ -1,4 +1,4 @@
-<form nz-form nzLayout="horizontal" [formGroup]="profilForm" (ngSubmit)="submitForm()">
+<form nz-form nzLayout="horizontal" [formGroup]="profilForm">
     <nz-form-item nz-flex>
         <nz-form-label nzSpan="9" nzRequired>
             Prénom

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

@@ -31,15 +31,4 @@ export class ProfilForm {
         fonction: new FormControl<string>(null, [Validators.required]),
         password: new FormControl<string>(null, [Validators.required])
     })
-
-    submitForm() {
-        // Pour annuler si le formulaire est invalide
-        if (this.profilForm.invalid) return;
-
-        // Pour obtenir la valeur du formulaire
-        console.log(this.profilForm.getRawValue())
-
-        // Pour vider le formulaire
-        this.profilForm.reset()
-    }
 }

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

@@ -1,4 +1,7 @@
-<nz-table #basicTable [nzData]="listOfData" class="mr-7">
+<nz-table [nzData]="users()"
+          [nzLoading]="usersLoading()"
+          [nzFrontPagination]="false"
+          class="mr-7">
 <thead>
     <tr class="text-center">
         <th>Nom</th>
@@ -8,11 +11,11 @@
     </tr>
     </thead>
     <tbody class="text-center">
-        @for (data of basicTable.data; track data) {
+        @for (user of users(); track user.id) {
             <tr>
-                <td>{{data.name}}</td>
+                <td>{{user.name}}</td>
-                <td>{{data.email}}</td>
+                <td>{{user.email}}</td>
-                <td>{{data.fonction}}</td>
+                <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">
@@ -20,7 +23,7 @@
                         </app-modal-nav>
                         <nz-divider nzType="vertical"></nz-divider>
                         <div>
-                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
+                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete(user.id)" class="cursor-pointer text-red-700"/>
                         </div>
                     </div>
                 </td>

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
 import {ModalNav} from "../modal-nav/modal-nav";
 import {NzIconDirective} from "ng-zorro-antd/icon";
 import {NzTableComponent} from "ng-zorro-antd/table";
@@ -6,6 +6,9 @@ import {StockForm} from "../stock-form/stock-form";
 import {UserInfo} from "../../interfaces/user.interface";
 import {ProfilForm} from "../profil-form/profil-form";
 import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {GetUserDto, UsersService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
 
 @Component({
   selector: 'app-user-table',
@@ -19,41 +22,47 @@ import {NzDividerComponent} from "ng-zorro-antd/divider";
   templateUrl: './user-table.html',
   styleUrl: './user-table.css',
 })
-export class UserTable {
+export class UserTable implements OnInit {
-    listOfData: UserInfo[] = [
+    private usersService = inject(UsersService);
-        { name: 'Alice Martin', email: 'alice.martin@example.com', fonction: 'Responsable Stock' },
+    private notificationService = inject(NzNotificationService)
-        { name: 'Bruno Lefevre', email: 'bruno.lefevre@example.com', fonction: 'Technicien' },
+    users = signal<GetUserDto[]>([]);
-        { name: 'Claire Dupont', email: 'claire.dupont@example.com', fonction: 'Chef d’équipe' },
+    usersLoading = signal<boolean>(false);
-        { name: 'David Roux', email: 'david.roux@example.com', fonction: 'Opérateur' },
+    updateUser = viewChild.required<ProfilForm>('profilForm');
-        { name: 'Emma Girard', email: 'emma.girard@example.com', fonction: 'Manager' },
+    modal = viewChild.required<ModalNav>('modalNav');
-        { name: 'Florian Petit', email: 'florian.petit@example.com', fonction: 'Contrôleur' },
-        { name: 'Gabriel Fabre', email: 'gabriel.fabre@example.com', fonction: 'Technicien' },
-        { name: 'Hélène Blanchard', email: 'helene.blanchard@example.com', fonction: 'Responsable Qualité' },
-        { name: 'Idris Caron', email: 'idris.caron@example.com', fonction: 'Opérateur' },
-        { name: 'Julie Laurent', email: 'julie.laurent@example.com', fonction: 'RH' },
-        { name: 'Kevin Becker', email: 'kevin.becker@example.com', fonction: 'Chef d’équipe' },
-        { name: 'Laura Denis', email: 'laura.denis@example.com', fonction: 'Responsable Stock' },
-        { name: 'Maxime Robert', email: 'maxime.robert@example.com', fonction: 'Technicien' },
-        { name: 'Nina Lambert', email: 'nina.lambert@example.com', fonction: 'Opérateur' },
-        { name: 'Olivier Garnier', email: 'olivier.garnier@example.com', fonction: 'Manager' },
-        { name: 'Pauline Henry', email: 'pauline.henry@example.com', fonction: 'Chef de Projet' },
-        { name: 'Quentin Millet', email: 'quentin.millet@example.com', fonction: 'Technicien' },
-        { name: 'Raphaël Julien', email: 'raphael.julien@example.com', fonction: 'Opérateur' },
-        { name: 'Sophie Moreau', email: 'sophie.moreau@example.com', fonction: 'Responsable Qualité' },
-        { name: 'Théo Renaud', email: 'theo.renaud@example.com', fonction: 'Technicien' },
-        { name: 'Ulysse Berger', email: 'ulysse.berger@example.com', fonction: 'Opérateur' },
-        { name: 'Valentine Roche', email: 'valentine.roche@example.com', fonction: 'RH' },
-        { name: 'William Arnaud', email: 'william.arnaud@example.com', fonction: 'Chef d’équipe' },
-        { name: 'Xavier Colin', email: 'xavier.colin@example.com', fonction: 'Technicien' },
-        { name: 'Yasmine Perrot', email: 'yasmine.perrot@example.com', fonction: 'Manager' },
-        { name: 'Zack Morel', email: 'zack.morel@example.com', fonction: 'Opérateur' },
-        { name: 'Adèle Simon', email: 'adele.simon@example.com', fonction: 'Responsable Stock' },
-        { name: 'Bastien Renault', email: 'bastien.renault@example.com', fonction: 'Technicien' },
-        { name: 'Cindy Barret', email: 'cindy.barret@example.com', fonction: 'Assistante' },
-        { name: 'Dorian Lefort', email: 'dorian.lefort@example.com', fonction: 'Contrôleur' },
-    ];
 
-    delete(){
+    async ngOnInit() {
-        return
+        await this.fetchUsers();
     }
+
+    async fetchUsers() {
+        this.usersLoading.set(true)
+
+        try {
+            const users = await firstValueFrom(this.usersService.getAllUsersEndpoint())
+            this.users.set(users);
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
+        }
+        this.usersLoading.set(false)
+    }
+
+    async delete(user:number) {
+        try {
+            await firstValueFrom(this.usersService.deleteUserEndpoint(user))
+            this.notificationService.success(
+                'Success',
+                'Suppression effectuée'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Impossible de supprimer la ligne'
+            )
+        }
+        await this.fetchUsers();
+    }
+
 }

src/app/pages/user/user.html

@@ -1,6 +1,11 @@
 <div class="flex mt-2">
-    <app-modal-button type="primary" name="Ajouter un utilisateur">
+    <app-modal-button #modalButton
-        <app-profil-form></app-profil-form>
+                      type="primary"
+                      name="Ajouter un utilisateur"
+                      (ok)="onModalOk()"
+                      (cancel)="onModalCancel()">
+
+    <app-profil-form #profilForm></app-profil-form>
     </app-modal-button>
 
     <div class="ml-95 w-150">
@@ -9,5 +14,5 @@
 </div>
 
 <div class="mt-1">
-    <app-user-table></app-user-table>
+    <app-user-table #userTable></app-user-table>
 </div>

src/app/pages/user/user.ts

@@ -1,8 +1,11 @@
-import { Component } from '@angular/core';
+import {Component, inject, viewChild} from '@angular/core';
 import {UserTable} from "../../components/user-table/user-table";
 import {ModalButton} from "../../components/modal-button/modal-button";
 import {ProfilForm} from "../../components/profil-form/profil-form";
 import {Search} from "../../components/search/search";
+import {UsersService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
 
 @Component({
   selector: 'app-user',
@@ -16,5 +19,47 @@ import {Search} from "../../components/search/search";
   styleUrl: './user.css',
 })
 export class User {
+    modal = viewChild.required<ModalButton>('modalButton');
+    createUser = viewChild.required<ProfilForm>('profilForm');
+    usersTable = viewChild.required<UserTable>('userTable');
+    private usersService = inject(UsersService);
+    private notificationService = inject(NzNotificationService)
 
+    async onModalOk() {
+        await this.addUser()
+        this.createUser().profilForm.reset();
+        this.modal().isVisible = false;
+        await this.usersTable().fetchUsers()
     }
+
+    onModalCancel() {
+        this.modal().isVisible = false;
+    }
+
+    async addUser() {
+        if (this.createUser().profilForm.invalid)
+        {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
+        }
+        try {
+            const users = this.createUser().profilForm.getRawValue();
+            await firstValueFrom(this.usersService.createUserEndpoint(users))
+
+            console.log(users)
+
+            this.notificationService.success(
+                'Success',
+                'Utilisateur crée'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'enregistrement'
+            )
+        }
+    }
+}
+