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

added create fonction, fetch, and delete

Browse Source
This commit is contained in:
sanchezvem
2025-11-27 16:14:30 +01:00
parent 265d70bbc4
commit 8d95127a46
7 changed files with 116 additions and 60 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;
}
}

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

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

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

17
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,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>{{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">
@@ -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>

81
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,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<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();
}
}

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

47
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,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'
)
}
}
}