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

uptading Supplier Page

Browse Source
This commit is contained in:
Enzo
2025-11-27 18:52:30 +01:00
parent 8aef9f628b
commit b55bdedc20
8 changed files with 148 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/components/supplier-form/supplier-form.html
View File

@@ -1,4 +1,4 @@
<form nz-form nzLayout="horizontal" [formGroup]="supplierForm" (ngSubmit)="submitForm()">
<form nz-form nzLayout="horizontal" [formGroup]="supplierForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
@@ -54,13 +54,4 @@
</nz-form-control>
</nz-form-item>
<nz-form-item nz-flex>
<nz-form-label nzSpan="9" nzRequired>
Produits
</nz-form-label>
<nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="Produits" formControlName="product">
</nz-form-control>
</nz-form-item>
</form>

15
src/app/components/supplier-form/supplier-form.ts
View File

@@ -1,9 +1,10 @@
import { Component } from '@angular/core';
import {Component, input} from '@angular/core';
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 {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {GetSupplierDto} from "../../services/api";
@Component({
selector: 'app-supplier-form',
@@ -28,18 +29,8 @@ export class SupplierForm {
address: new FormControl<string>(null, [Validators.required]),
city: new FormControl<string>(null, [Validators.required]),
deliveryDelay: new FormControl<string>(null, [Validators.required]),
product: new FormControl<string>(null, [Validators.required]),
})
supplier= input.required<GetSupplierDto>()
submitForm() {
// Pour annuler si le formulaire est invalide
if (this.supplierForm.invalid) return;
// Pour obtenir la valeur du formulaire
console.log(this.supplierForm.getRawValue())
// Pour vider le formulaire
this.supplierForm.reset()
}
}

92
src/app/components/supplier-table/supplier-table.html
View File

@@ -1,61 +1,63 @@
<nz-table #basicTable [nzData]="listOfSupplier">
<nz-table [nzData]="suppliers()"
[nzLoading]="suppliersLoading()"
[nzFrontPagination]="false">
<thead>
<tr class="text-center">
<tr style="text-align: center">
<th>Nom</th>
<th>email</th>
<th>Téléphone</th>
<th>Adresse</th>
<th>Ville</th>
<th>Délai Moyen</th>
<th>Produits</th>
<th>Action</th>
<th>Prénom</th>
<th>Email</th>
<th>Anniversaire</th>
<th>Emprunt</th>
<th style="display: flex; align-items: center;">Action</th>
</tr>
</thead>
<tbody class="text-center">
@for (data of basicTable.data; track data) {
<tbody style="text-align: center">
@for (supplier of suppliers(); track supplier.id) {
<tr>
<td>{{data.name}}</td>
<td>{{data.email}}</td>
<td>{{data.phone}}</td>
<td>{{data.address}}, {{data.zipCode}}</td>
<td>{{data.city}}</td>
<td>{{data.deliveryDelay}}</td>
<td>{{ supplier.name }}</td>
<td>{{ supplier.phone }}</td>
<td>{{ supplier.email }}</td>
<td>{{ supplier.address}}</td>
<td>{{ supplier.zipCode}}</td>
<td>{{ supplier.city}}</td>
<td>{{ supplier.deliveryDelay}}</td>
<td>
<app-modal-button type="link" name="Voir les produits">
<div style="max-height: 400px; overflow-y: auto;">
<nz-table [nzData]="data.products">
<thead>
<tr class="text-center">
<th>Nom</th>
<th>Référence</th>
<th>Prix</th>
</tr>
</thead>
<tbody class="text-center">
@for (product of data.products; track product) {
<tr>
<td>{{product.name}}</td>
<td>{{product.reference}}</td>
<td>xx.x€</td>
</tr>
}
</tbody>
</nz-table>
</div>
<app-modal-button type="link" [name]="'Voir les produits'">
<nz-table [nzData]="supplier.products" [nzFrontPagination]="false">
<thead>
<tr style="text-align: center">
<th>Produits</th>
<th>Nom</th>
<th>Référence</th>
<th>Prix</th>
</tr>
</thead>
<tbody style="text-align: center">
@for (product of supplier.products; track product.id) {
<tr>
<td>{{ product.name }}</td>
<td>{{ product.references }}</td>
<td>Price ???</td>
</tr>
}
</tbody>
</nz-table>
</app-modal-button>
</td>
<td>
<div style="justify-content: center; display: flex">
<app-modal-nav nameIcon="edit" name="Modification du fournisseur" class="cursor-pointer">
<app-supplier-form></app-supplier-form>
</app-modal-nav>
<div style="display: flex; align-items: center;">
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(supplier)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<div>
<nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
</div>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(supplier.id)" class="text-red-600 cursor-pointer"></nz-icon>
</div>
</td>
</tr>
}
</tbody>
</nz-table>
<div class="hidden">
<app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedSupplier.id, supplierForm, modalNav)" (cancel)="onModalCancel(modalNav)">
<app-supplier-form #supplierForm [supplier]="selectedSupplier"></app-supplier-form>
</app-modal-nav>
</div>

199
src/app/components/supplier-table/supplier-table.ts
View File

@@ -1,13 +1,14 @@
import { Component } from '@angular/core';
import {Component, inject, signal, viewChild} from '@angular/core';
import {ModalNav} from "../modal-nav/modal-nav";
import {NzDividerComponent} from "ng-zorro-antd/divider";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzTableComponent} from "ng-zorro-antd/table";
import {ModalButton} from "../modal-button/modal-button";
import {DatePipe} from "@angular/common";
import {SupplierForm} from "../supplier-form/supplier-form";
import {SupplierInfo} from "../../interfaces/supplier.interface";
import {DelivererForm} from "../deliverer-form/deliverer-form";
import {GetSupplierDto, SuppliersService} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
import {format} from "date-fns";
@Component({
selector: 'app-supplier-table',
@@ -24,111 +25,91 @@ import {DelivererForm} from "../deliverer-form/deliverer-form";
})
export class SupplierTable {
listOfSupplier: SupplierInfo[] = [
{
name: "PyroNova",
email: "contact@pyronova.com",
phone: "+33 1 45 23 67 89",
address: "12 Rue des Artisans",
zipCode: "69003",
city: "Lyon",
deliveryDelay: 4,
products: []
},
{
name: "FX Industries",
email: "sales@fxindus.com",
phone: "+33 2 41 22 90 10",
address: "118 Avenue Lumière",
zipCode: "49000",
city: "Angers",
deliveryDelay: 6,
products: []
},
{
name: "EuroFire",
email: "info@eurofire.eu",
phone: "+33 1 80 22 11 77",
address: "2 Avenue de l’Europe",
zipCode: "75012",
city: "Paris",
deliveryDelay: 3,
products: []
},
{
name: "FlashEffect",
email: "contact@flasheffect.fr",
phone: "+33 4 72 81 91 22",
address: "44 Rue Centrale",
zipCode: "69007",
city: "Lyon",
deliveryDelay: 5,
products: []
},
{
name: "StageLight FX",
email: "support@stagelightfx.com",
phone: "+33 5 55 74 99 31",
address: "99 Boulevard du Progrès",
zipCode: "31000",
city: "Toulouse",
deliveryDelay: 7,
products: []
},
{
name: "NovaSpark",
email: "hello@novaspark.fr",
phone: "+33 3 29 55 11 88",
address: "7 Rue de la Source",
zipCode: "54000",
city: "Nancy",
deliveryDelay: 4,
products: []
},
{
name: "FXWare",
email: "contact@fxware.eu",
phone: "+33 4 75 55 66 44",
address: "123 Route du Nord",
zipCode: "38000",
city: "Grenoble",
deliveryDelay: 6,
products: []
},
{
name: "PyroSet",
email: "info@pyroset.com",
phone: "+33 1 61 73 55 00",
address: "5 Chemin des Prés",
zipCode: "95000",
city: "Cergy",
deliveryDelay: 2,
products: []
},
{
name: "SkyFX",
email: "support@skyfx.fr",
phone: "+33 6 55 88 22 11",
address: "1 Rue du Ciel",
zipCode: "33000",
city: "Bordeaux",
deliveryDelay: 5,
products: []
},
{
name: "SparkLab",
email: "sales@sparklab.eu",
phone: "+33 2 33 55 77 12",
address: "33 Rue du Port",
zipCode: "14000",
city: "Caen",
deliveryDelay: 4,
products: []
}
];
private suppliersService = inject(SuppliersService);
private notificationService = inject(NzNotificationService)
suppliers = signal<GetSupplierDto[]>([]);
suppliersLoading = signal<boolean>(false);
updateSupplier = viewChild.required<SupplierForm>('supplierForm');
modal = viewChild.required<ModalNav>('modalNav');
delete() {
return
async ngOnInit() {
await this.fetchSuppliers();
}
}
async fetchSuppliers() {
this.suppliersLoading.set(true)
try {
const suppliers = await firstValueFrom(this.suppliersService.getAllSuppliersEndpoint())
this.suppliers.set(suppliers);
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur de communication avec l\'API'
)
}
this.suppliersLoading.set(false)
}
async delete(supplier:number) {
try {
await firstValueFrom(this.suppliersService.deleteSupplierEndpoint(supplier))
this.notificationService.success(
'Success',
'Suppression effectuée'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Impossible de supprimer la ligne'
)
}
await this.fetchSuppliers();
}
async edit(id: number, updateSupplierComponent: SupplierForm) {
if (updateSupplierComponent.supplierForm.invalid) {
this.notificationService.error(
'Erreur',
'Erreur d\'écriture dans le formulaire'
)
return;
}
try {
const suppliers = updateSupplierComponent.supplierForm.getRawValue();
await firstValueFrom(this.suppliersService.updateSupplierEndpoint(id, suppliers))
this.notificationService.success(
'Success',
'Fournisseur modifié'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur lors de la modification'
)
}
}
selectedSupplier: GetSupplierDto | null = null;
openEditModal(supplier: GetSupplierDto) {
this.selectedSupplier = { ...supplier };
this.modal().showModal();
}
async onModalOk(supplierId: number, updateSupplierComponent: SupplierForm, modal: ModalNav) {
if (!this.selectedSupplier) return;
await this.edit(supplierId, updateSupplierComponent);
updateSupplierComponent.supplierForm.reset();
modal.isVisible = false;
await this.fetchSuppliers();
}
onModalCancel(modal: ModalNav) {
modal.isVisible = false;
}
}

1
src/app/services/api/.openapi-generator/FILES
View File

@@ -1,4 +1,5 @@
.gitignore
.openapi-generator-ignore
README.md
api.base.service.ts
api.module.ts

2
src/app/services/api/api.base.service.ts
View File

@@ -12,7 +12,7 @@ import { CustomHttpParameterCodec } from './encoder';
import { Configuration } from './configuration';
export class BaseService {
protected basePath = 'https://localhost:44379';
protected basePath = 'http://localhost:5298';
public defaultHeaders = new HttpHeaders();
public configuration: Configuration;
public encoder: HttpParameterCodec;

2
src/app/services/api/model/get-supplier-dto.ts
View File

@@ -7,6 +7,7 @@
* https://openapi-generator.tech
* Do not edit the class manually.
*/
import { GetProductDto } from './get-product-dto';
export interface GetSupplierDto {
@@ -18,5 +19,6 @@ export interface GetSupplierDto {
zipCode?: string | null;
city?: string | null;
deliveryDelay?: number;
products?: Array<GetProductDto> | null;
}