Merge branch 'feature/UpdateUserTable' into develop

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/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.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

@@ -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',
@@ -32,14 +33,17 @@ export class ProfilForm {
         password: new FormControl<string>(null, [Validators.required])
     })
 
-    submitForm() {
+    user = input<GetUserDto | null>(null);
-        // Pour annuler si le formulaire est invalide
+    constructor() {
-        if (this.profilForm.invalid) return;
+        effect(() => {
-
+            if (this.user()) {
-        // Pour obtenir la valeur du formulaire
+                this.profilForm.patchValue({
-        console.log(this.profilForm.getRawValue())
+                    name: this.user().name,
-
+                    email: this.user().email,
-        // Pour vider le formulaire
+                    fonction: this.user().fonction,
-        this.profilForm.reset()
+                    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

@@ -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,19 +11,17 @@
     </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">
+                        <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" 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>
@@ -28,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

@@ -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,89 @@ 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();
+    }
+
+    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

@@ -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 [user]=""></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,45 @@ 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))
+
+            this.notificationService.success(
+                'Success',
+                'Utilisateur crée'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'enregistrement'
+            )
+        }
+    }
+}
+