sanchezvem/pyrofetes-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/UpdateUserTable' into develop

Browse Source
This commit is contained in:
sanchezvem
2025-11-27 17:16:05 +01:00
parent 265d70bbc4 40b1c2620a
commit 8263a58ea7
10 changed files with 188 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/components/modal-button/modal-button.ts
View File

@@ -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;
}
}

4
src/app/components/modal-nav/modal-nav.html
View File

@@ -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"

13
src/app/components/modal-nav/modal-nav.ts
View File

@@ -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 = '';
@Input() name: string = '';
nameIcon = input.required<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();
}
}

2
src/app/components/profil-form/profil-form.html
View File

@@ -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

24
src/app/components/profil-form/profil-form.ts
View File

@@ -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() {
// 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()
user = input<GetUserDto | null>(null);
constructor() {
effect(() => {
if (this.user()) {
this.profilForm.patchValue({
name: this.user().name,
email: this.user().email,
fonction: this.user().fonction,
password: this.user().password
});
}
});
}
}

2
src/app/components/profil/profil.html
View File

@@ -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>

27
src/app/components/user-table/user-table.html
View File

@@ -1,5 +1,8 @@
<nz-table #basicTable [nzData]="listOfData" class="mr-7">
<thead>
<nz-table [nzData]="users()"
[nzLoading]="usersLoading()"
[nzFrontPagination]="false"
class="mr-7">
<thead>
<tr class="text-center">
<th>Nom</th>
<th>Email</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>{{data.email}}</td>
<td>{{data.fonction}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</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">
<app-profil-form></app-profil-form>
</app-modal-nav>
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(user)"></nz-icon>
<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>

123
src/app/components/user-table/user-table.ts
View File

@@ -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 {
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<GetUserDto[]>([]);
usersLoading = signal<boolean>(false);
updateUser = viewChild.required<ProfilForm>('profilForm');
modal = viewChild.required<ModalNav>('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();
}
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;
}
}

11
src/app/pages/user/user.html
View File

@@ -1,6 +1,11 @@
<div class="flex mt-2">
<app-modal-button type="primary" name="Ajouter un utilisateur">
<app-profil-form></app-profil-form>
<app-modal-button #modalButton
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>

45
src/app/pages/user/user.ts
View File

@@ -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'
)
}
}
}