Files
pyrofetes-frontend/src/app/components/user-table/user-table.ts

109 lines
3.3 KiB
TypeScript

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";
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',
imports: [
ModalNav,
NzIconDirective,
NzTableComponent,
ProfilForm,
NzDividerComponent
],
templateUrl: './user-table.html',
styleUrl: './user-table.css',
})
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');
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;
}
}