Staff terminé

This commit is contained in:
2026-06-08 14:31:52 +02:00
parent 9885e4ee85
commit a4ae624777
9 changed files with 166 additions and 51 deletions
@@ -5,13 +5,7 @@ import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzInputDirective} from "ng-zorro-antd/input";
import {
CustomersService,
GetCustomerDto, GetProviderDto,
ServiceprovidersService,
UpdateCustomerDto,
UpdateProviderDto
} from "../../../services/api";
import {GetProviderDto, ServiceprovidersService, UpdateProviderDto} from "../../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
@@ -1,5 +1,5 @@
import {Component, output} from '@angular/core';
import {StaffAddForm} from "../staff-add-form/staff-add-form";
import StaffAddForm from "../staff-add-form/staff-add-form";
import {NzMessageService} from "ng-zorro-antd/message";
import {NzModalComponent} from "ng-zorro-antd/modal";
import {NzButtonComponent} from "ng-zorro-antd/button";
@@ -2,25 +2,21 @@
<nz-form-item>
<nz-form-label nzSpan="5" nzRequired>Nom</nz-form-label>
<nz-form-control nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Nom de Famille" formControlName="lastname">
<input nz-input placeholder="Nom de Famille" formControlName="lastName">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="5" nzRequired>Prénom</nz-form-label>
<nz-form-control nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Prénom" formControlName="firstname">
<input nz-input placeholder="Prénom" formControlName="firstName">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="5" nzRequired> Profession </nz-form-label>
<nz-form-label nzSpan="5" nzRequired>Profession</nz-form-label>
<nz-form-control nzErrorTip="Ce champ est requis">
<nz-select placeholder="Type de client" formControlName="profession">
@for (staffprofession of staff(); track staff.id) {
<nz-option nzValue="{{staff.id}}" nzLabel="{{ providertype.label }}"></nz-option>
}
</nz-select>
<input nz-input placeholder="Profession" formControlName="profession">
</nz-form-control>
</nz-form-item>
@@ -31,6 +27,20 @@
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="5" nzRequired>Numéro F4T2</nz-form-label>
<nz-form-control nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Numéro F4T2" formControlName="f4T2NumberApproval">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="5" nzRequired>Exp. F4T2</nz-form-label>
<nz-form-control nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Date d'expiration F4T2" formControlName="f4T2ExpirationDate">
</nz-form-control>
</nz-form-item>
<nz-flex nzJustify="end">
<button nz-button nzType="primary" (click)="submitForm()">Valider</button>
</nz-flex>
@@ -5,34 +5,29 @@ import {NzColDirective, NzRowDirective} 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 {
CreateProviderDto, CreateStaffDto,
GetProviderTypeDto,
ProvidertypesService, StaffsService
} from "../../../services/api";
import {CreateStaffDto, GetProviderTypeDto, ProvidertypesService, StaffsService} from "../../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
@Component({
selector: 'app-staff-add-form',
imports: [FormsModule, NzButtonComponent, NzColDirective, NzFlexDirective, NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzInputDirective, NzOptionComponent, NzRowDirective, NzSelectComponent, ReactiveFormsModule],
imports: [FormsModule, NzButtonComponent, NzColDirective, NzFlexDirective, NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzInputDirective, NzRowDirective, ReactiveFormsModule],
templateUrl: './staff-add-form.html',
styleUrl: './staff-add-form.css',
})
export class StaffAddForm {
class StaffAddForm {
private staffsService = inject(StaffsService);
private serviceprovidertypesService = inject(ProvidertypesService);
private notificationService = inject(NzNotificationService)
staffForm = new FormGroup({
lastname: new FormControl<string>(null, [Validators.required]),
firstname: new FormControl<string>(null, [Validators.required]),
lastName: new FormControl<string>(null, [Validators.required]),
firstName: new FormControl<string>(null, [Validators.required]),
profession: new FormControl<string>(null, [Validators.required]),
email: new FormControl<string>(null, [Validators.required]),
f4t2number: new FormControl<string>(null, [Validators.required]),
f4t2expiration: new FormControl<dateFns>(null, [Validators.required])
f4T2NumberApproval: new FormControl<string>(null, [Validators.required]),
f4T2ExpirationDate: new FormControl<Date>(null, [Validators.required])
})
staffPost = signal<CreateStaffDto>(this.staffForm.value);
@@ -46,31 +41,30 @@ export class StaffAddForm {
console.log(this.staffForm.getRawValue())
this.staffPost.set(this.staffForm.getRawValue())
await this.createProviders(this.staffPost().lastName, this.staffPost().firstName, this.staffPost().profession, this.staffPost().email, this.staffPost().f4T2NumberApproval, this.staffPost().f4T2ExpirationDate)
await this.createStaff(this.staffPost().lastName, this.staffPost().firstName, this.staffPost().profession, this.staffPost().email, this.staffPost().f4T2NumberApproval, this.staffPost().f4T2ExpirationDate)
// Pour vider le formulaire
this.staffForm.reset()
}
async createProviders(lastname: string, firstname: string, profession: string, email: string, f4t2number: string, f4t2expiration: dateFns)
async createStaff(lastname: string, firstname: string, profession: string, email: string, f4t2number: string, f4t2expiration: Date)
{
this.staffsLoading.set(true);
const staffValue = {
lastname: lastname,
firstname: firstname,
const staffValue: CreateStaffDto = {
lastName: lastname,
firstName: firstname,
profession: profession,
email: email,
f4t2number: f4t2number,
f4t2expiration: f4t2expiration
f4T2NumberApproval: f4t2number,
f4T2ExpirationDate: f4t2expiration
}
try {
const staff = await firstValueFrom(this.staffsService.createStaffEndpoint(staffValue));
this.staffPost.set(staff);
this.staffPost.set(staff as unknown as CreateStaffDto);
console.log(staff);
} catch (e)
{
this.notificationService.error('Erreur de recherche', "L\'auteur n\'existe pas !");
this.notificationService.error('Erreur', ' (ou Erreur de communication avec l\'API)');
}
@@ -96,3 +90,5 @@ export class StaffAddForm {
this.staffsLoading.set(false);
}
}
export default StaffAddForm
+39 -1
View File
@@ -1 +1,39 @@
<p>staff-card works!</p>
@if (edit() == false) {
<nz-card style="width:400px;" [nzActions]="[edit, delete]">
<h2 style="text-align: center; font-weight: bold">Staff n°{{ staff().id }}</h2>
<p>Nom : {{ staff().lastName }} {{ staff().firstName }}</p>
<p>Profession : {{ staff().profession }}</p>
<p>Email : {{ staff().email }}</p>
<p>N° F4T2 : {{ staff().f4T2NumberApproval }}</p>
<p>Expiration F4T2 : {{ staff().f4T2ExpirationDate }}</p>
</nz-card>
<ng-template #edit>
<nz-icon (click)="Edit()" nzType="edit" nzTheme="fill" />
</ng-template>
<ng-template #delete>
<nz-icon (click)="Delete()" nzType="delete" nzTheme="fill" />
</ng-template>
} @else {
<nz-card style="width:400px;" [nzActions]="[back, check]">
<form nz-form nzLayout="horizontal" [formGroup]="staffForm">
<nz-form-item>
<nz-form-label nzSpan="5" nzRequired> N° F4T2 </nz-form-label>
<nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
<input nz-input placeholder="N° F4T2" formControlName="f4T2NumberApproval">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="5" nzRequired> Exp. F4T2 </nz-form-label>
<nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
<input nz-input placeholder="Expiration F4T2" formControlName="f4T2ExpirationDate">
</nz-form-control>
</nz-form-item>
</form>
</nz-card>
<ng-template #back>
<nz-icon (click)="Back()" nzType="backward" nzTheme="fill" />
</ng-template>
<ng-template #check>
<nz-icon (click)="submitForm()" nzType="check" nzTheme="outline" />
</ng-template>
}
+80 -2
View File
@@ -1,11 +1,89 @@
import { Component } from '@angular/core';
import {Component, inject, input, output, signal} from '@angular/core';
import {NzCardComponent} from "ng-zorro-antd/card";
import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzInputDirective} from "ng-zorro-antd/input";
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {GetStaffDto, StaffsService, UpdateStaffDto} from "../../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
@Component({
selector: 'app-staff-card',
imports: [],
imports: [
NzCardComponent,
NzColDirective,
NzFormControlComponent,
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzIconDirective,
NzInputDirective,
NzRowDirective,
ReactiveFormsModule
],
templateUrl: './staff-card.html',
styleUrl: './staff-card.css',
})
export class StaffCard {
private staffsService = inject(StaffsService);
private notificationService = inject(NzNotificationService)
staffEdit = signal<UpdateStaffDto>(null);
staffsLoading = signal<boolean>(false);
staffForm = new FormGroup({
f4T2NumberApproval: new FormControl<string>(null, [Validators.required]),
f4T2ExpirationDate: new FormControl<string>(null, [Validators.required]),
})
async submitForm() {
this.staffsLoading.set(true);
const staffValue: UpdateStaffDto = {
f4T2NumberApproval: this.staffForm.value.f4T2NumberApproval,
f4T2ExpirationDate: this.staffForm.value.f4T2ExpirationDate,
}
try {
const staff = await firstValueFrom(this.staffsService.updateStaffRequest(this.staff().id, staffValue));
this.staffEdit.set(staff as unknown as UpdateStaffDto);
console.log(staff);
this.staffForm.reset();
this.edit.set(false);
this.triggerEdited.emit();
} catch (e) {
this.notificationService.error('Erreur', '(ou Erreur de communication avec l\'API)');
}
this.staffsLoading.set(false);
}
staff = input<GetStaffDto>(null);
edit = signal(false)
triggerEdited = output<void>();
protected Edit() {
this.edit.set(true)
}
protected Back() {
this.edit.set(false)
this.staffForm.reset();
}
async Delete() {
this.staffsLoading.set(true);
try {
await firstValueFrom(this.staffsService.deleteStaffEndpoint(this.staff().id));
this.staffForm.reset();
this.triggerEdited.emit();
} catch (e) {
this.notificationService.error('Erreur', '(ou Erreur de communication avec l\'API)');
}
this.staffsLoading.set(false);
}
}
+4 -4
View File
@@ -1,15 +1,15 @@
import {Component, inject, signal} from '@angular/core';
import {StaffCardForm} from "./staff-card-form/staff-card-form";
import {StaffGetAll} from "./staff-get-all/staff-get-all";
import {NzRowDirective} from "ng-zorro-antd/grid";
import {GetProviderDto, GetStaffDto, ServiceprovidersService, StaffsService} from "../../services/api";
import {GetStaffDto, StaffsService} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {Router} from "@angular/router";
import {firstValueFrom} from "rxjs";
import {CreateStaffModal} from "./create-staff-modal/create-staff-modal";
import {StaffCard} from "./staff-card/staff-card";
@Component({
selector: 'app-staff',
imports: [StaffCardForm, StaffGetAll, NzRowDirective,],
imports: [NzRowDirective, CreateStaffModal, StaffCard,],
templateUrl: './staff.html',
styleUrl: './staff.css',
})
@@ -15,6 +15,6 @@ export interface CreateStaffDto {
profession?: string | null;
email?: string | null;
f4T2NumberApproval?: string | null;
f4T2ExpirationDate?: dateFns;
f4T2ExpirationDate?: Date | null;
}
@@ -23,7 +23,6 @@ export const MethodImplAttributes = {
NUMBER_42: 4,
NUMBER_8: 8,
NUMBER_16: 16,
NUMBER_32: 32,
NUMBER_64: 64,
NUMBER_128: 128,
NUMBER_256: 256,