diff --git a/src/app/components/modal-button/modal-button.ts b/src/app/components/modal-button/modal-button.ts index b1ed57a..386caf6 100644 --- a/src/app/components/modal-button/modal-button.ts +++ b/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() type = input<"primary" | "default" | "dashed" | "link" | "text">() + ok = output(); + cancel = output(); + 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; } } \ No newline at end of file diff --git a/src/app/components/profil-form/profil-form.html b/src/app/components/profil-form/profil-form.html index 84d52cc..4def138 100644 --- a/src/app/components/profil-form/profil-form.html +++ b/src/app/components/profil-form/profil-form.html @@ -1,4 +1,4 @@ -
+ Prénom diff --git a/src/app/components/profil-form/profil-form.ts b/src/app/components/profil-form/profil-form.ts index 469f6bf..7127e44 100644 --- a/src/app/components/profil-form/profil-form.ts +++ b/src/app/components/profil-form/profil-form.ts @@ -31,15 +31,4 @@ export class ProfilForm { fonction: new FormControl(null, [Validators.required]), password: new FormControl(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() - } } diff --git a/src/app/components/user-table/user-table.html b/src/app/components/user-table/user-table.html index fe895f1..0b5d2c8 100644 --- a/src/app/components/user-table/user-table.html +++ b/src/app/components/user-table/user-table.html @@ -1,5 +1,8 @@ - - + + Nom Email @@ -8,11 +11,11 @@ - @for (data of basicTable.data; track data) { + @for (user of users(); track user.id) { - {{data.name}} - {{data.email}} - {{data.fonction}} + {{user.name}} + {{user.email}} + {{user.fonction}}
@@ -20,7 +23,7 @@
- +
diff --git a/src/app/components/user-table/user-table.ts b/src/app/components/user-table/user-table.ts index a086c3f..92212d3 100644 --- a/src/app/components/user-table/user-table.ts +++ b/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 { - listOfData: UserInfo[] = [ - { name: 'Alice Martin', email: 'alice.martin@example.com', fonction: 'Responsable Stock' }, - { name: 'Bruno Lefevre', email: 'bruno.lefevre@example.com', fonction: 'Technicien' }, - { name: 'Claire Dupont', email: 'claire.dupont@example.com', fonction: 'Chef d’équipe' }, - { name: 'David Roux', email: 'david.roux@example.com', fonction: 'Opérateur' }, - { name: 'Emma Girard', email: 'emma.girard@example.com', fonction: 'Manager' }, - { 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' }, - ]; +export class UserTable implements OnInit { + private usersService = inject(UsersService); + private notificationService = inject(NzNotificationService) + users = signal([]); + usersLoading = signal(false); + updateUser = viewChild.required('profilForm'); + modal = viewChild.required('modalNav'); - delete(){ - return + async ngOnInit() { + 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(); + } + } diff --git a/src/app/pages/user/user.html b/src/app/pages/user/user.html index 81039bd..b10e9ec 100644 --- a/src/app/pages/user/user.html +++ b/src/app/pages/user/user.html @@ -1,6 +1,11 @@
- - + + +
@@ -9,5 +14,5 @@
- +
diff --git a/src/app/pages/user/user.ts b/src/app/pages/user/user.ts index ef69d5f..b5a0722 100644 --- a/src/app/pages/user/user.ts +++ b/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'); + createUser = viewChild.required('profilForm'); + usersTable = viewChild.required('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' + ) + } + } } +