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

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