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

Merge branch 'feature/ConnectingApiToStockPage' into develop

Browse Source
This commit is contained in:
sanchezvem
2025-11-30 12:35:35 +01:00
parent 23c737893f 5c1403e934
commit bed4350e12
9 changed files with 256 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/stock-form/stock-form.html
View File

@@ -1,12 +1,12 @@
<form nz-form nzLayout="horizontal" [formGroup]="stockForm" (ngSubmit)="submitForm()">
<form nz-form nzLayout="horizontal" [formGroup]="stockForm">
<nz-form-item nz-flex>
<nz-form-label nzSpan="15" nzRequired>
Quantité minimale du produit
</nz-form-label>
<nz-form-control nzSpan="4" nzErrorTip="Ce champ est requis">
<input nz-input placeholder="12345" formControlName="minQuantity">
<nz-form-control nzSpan="4" nzErrorTip="Requis">
<input nz-input type="number" placeholder="12345" formControlName="minimalQuantity">
</nz-form-control>
</nz-form-item>
</form>

25
src/app/components/stock-form/stock-form.ts
View File

@@ -1,9 +1,10 @@
import { Component } from '@angular/core';
import {Component, effect, input} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {GetProductDto} from "../../services/api";
@Component({
selector: 'app-stock-form',
@@ -22,17 +23,19 @@ import {NzFlexDirective} from "ng-zorro-antd/flex";
})
export class StockForm {
stockForm = new FormGroup({
minQuantity: new FormControl<number>(null, [Validators.required])
id: new FormControl<number>(null),
minimalQuantity: new FormControl<number>(null, [Validators.required])
})
submitForm() {
// Pour annuler si le formulaire est invalide
if (this.stockForm.invalid) return;
// Pour obtenir la valeur du formulaire
console.log(this.stockForm.getRawValue())
// Pour vider le formulaire
this.stockForm.reset()
product= input<GetProductDto>();
constructor() {
effect(() => {
if (this.product()) {
this.stockForm.patchValue({
id: this.product().id,
minimalQuantity: this.product().minimalQuantity,
});
}
});
}
}

40
src/app/components/stock-table/stock-table.html
View File

@@ -1,6 +1,7 @@
<nz-table
#rowSelectionTable
[nzData]="listOfData"
[nzData]="products()"
[nzFrontPagination]="false"
[nzLoading]="productsLoading()"
(nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
>
<thead>
@@ -26,36 +27,39 @@
</thead>
<tbody class="text-center">
@for (data of rowSelectionTable.data; track data.id) {
@for (product of products(); track product.id) {
<tr>
<td nzWidth="40px">
<label
nz-checkbox
[ngModel]="setOfCheckedId.has(data.id)"
(ngModelChange)="onItemChecked(data.id, $event)"
[ngModel]="setOfCheckedId.has(product.id)"
(ngModelChange)="onItemChecked(product.id, $event)"
></label>
</td>
<td>{{ data.product.name }}</td>
<td>{{ data.product.reference }}</td>
<td>{{ data.product.nec }}</td>
<td>{{ data.product.caliber }}</td>
<td>{{ data.product.weight }}</td>
<td>{{ data.product.duration }}</td>
<td>{{ data.quantity }}</td>
<td>{{ data.product.minimalQuantity }}</td>
<td>{{ product.name }}</td>
<td>{{ product.references }}</td>
<td>{{ product.nec }}</td>
<td>{{ product.caliber }}</td>
<td>{{ product.weight }}</td>
<td>{{ product.duration }}</td>
<td> Quantité totale ??? </td>
<td>{{ product.minimalQuantity }}</td>
<td>
<div style="justify-content: center; display: flex">
<app-modal-nav nameIcon="edit" name="Modification de la quantité minimale">
<app-stock-form></app-stock-form>
</app-modal-nav>
<nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(product)"></nz-icon>
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" (click)="delete()" nzTheme="outline"
class="cursor-pointer text-red-700"/>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(product.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(selectedProduct.id, stockForm, modalNav)" (cancel)="onModalCancel(modalNav)">
<app-stock-form #stockForm [product]="selectedProduct"></app-stock-form>
</app-modal-nav>
</div>

141
src/app/components/stock-table/stock-table.ts
View File

@@ -1,13 +1,14 @@
import {Component, output} from '@angular/core';
import {StockInfo} from "../../interfaces/stock.interface";
import {NzTableComponent} from "ng-zorro-antd/table";
import {Component, inject, OnInit, output, signal, viewChild} from '@angular/core';
import {NzTableComponent, NzThMeasureDirective} from "ng-zorro-antd/table";
import {ModalNav} from "../modal-nav/modal-nav";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {StockForm} from "../stock-form/stock-form";
import {NzDividerComponent} from "ng-zorro-antd/divider";
import {ProductTable} from "../product-table/product-table";
import {FormsModule} from "@angular/forms";
import {NzCheckboxComponent} from "ng-zorro-antd/checkbox";
import {GetProductDto, ProductsService} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
@Component({
selector: 'app-stock-table',
@@ -19,38 +20,30 @@ import {NzCheckboxComponent} from "ng-zorro-antd/checkbox";
NzDividerComponent,
FormsModule,
NzCheckboxComponent,
NzThMeasureDirective,
],
templateUrl: './stock-table.html',
styleUrl: './stock-table.css',
})
export class StockTable {
listOfData: StockInfo[] = [
{ id: 1, product: ProductTable.listOfProducts[0], quantity: 10 },
{ id: 2, product: ProductTable.listOfProducts[1], quantity: 5 },
{ id: 3, product: ProductTable.listOfProducts[2], quantity: 8 },
{ id: 4, product: ProductTable.listOfProducts[3], quantity: 12 },
{ id: 5, product: ProductTable.listOfProducts[4], quantity: 7 },
{ id: 6, product: ProductTable.listOfProducts[5], quantity: 15 },
{ id: 7, product: ProductTable.listOfProducts[6], quantity: 9 },
{ id: 8, product: ProductTable.listOfProducts[7], quantity: 6 },
{ id: 9, product: ProductTable.listOfProducts[8], quantity: 11 },
{ id: 10, product: ProductTable.listOfProducts[9], quantity: 14 },
{ id: 11, product: ProductTable.listOfProducts[10], quantity: 7 },
{ id: 12, product: ProductTable.listOfProducts[11], quantity: 13 },
{ id: 13, product: ProductTable.listOfProducts[12], quantity: 10 },
{ id: 14, product: ProductTable.listOfProducts[13], quantity: 5 },
];
export class StockTable implements OnInit {
private productsService = inject(ProductsService);
private notificationService = inject(NzNotificationService)
products = signal<GetProductDto[]>([]);
productsLoading = signal<boolean>(false);
updateProduct = viewChild.required<StockForm>('stockForm');
modal = viewChild.required<ModalNav>('modalNav');
checked = false;
indeterminate = false;
setOfCheckedId = new Set<number>();
selectionChange = output<boolean>()
currentPageData: GetProductDto[] = [];
get hasSelection(): boolean {
return this.setOfCheckedId.size > 0;
}
updateCheckedSet(id: number, checked: boolean): void {
if (checked) this.setOfCheckedId.add(id);
else this.setOfCheckedId.delete(id);
@@ -62,31 +55,109 @@ export class StockTable {
}
onAllChecked(checked: boolean): void {
this.listOfData.forEach(item => this.updateCheckedSet(item.id, checked));
this.currentPageData.forEach(item =>
this.updateCheckedSet(item.id, checked)
);
this.refreshCheckedStatus();
}
onCurrentPageDataChange($event: GetProductDto[]): void {
this.currentPageData = $event;
this.refreshCheckedStatus();
}
refreshCheckedStatus(): void {
const total = this.listOfData.length;
const checkedCount = this.setOfCheckedId.size;
const total = this.currentPageData.length;
const checkedCount = this.currentPageData.filter(p => this.setOfCheckedId.has(p.id)).length;
this.checked = checkedCount === total;
this.indeterminate = checkedCount > 0 && checkedCount < total;
// 🔥 Émission asynchrone -> corrige le retard d’affichage
setTimeout(() => {
this.selectionChange.emit(this.hasSelection);
});
setTimeout(() => this.selectionChange.emit(this.hasSelection));
}
onCurrentPageDataChange($event: StockInfo[]): void {
this.listOfData = $event;
this.refreshCheckedStatus();
get selectedIds() {
return Array.from(this.setOfCheckedId);
}
delete() {
async ngOnInit() {
await this.fetchProducts();
}
async fetchProducts() {
this.productsLoading.set(true)
try {
const products = await firstValueFrom(this.productsService.getAllProductsEndpoint())
this.products.set(products);
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur de communication avec l\'API'
)
}
this.productsLoading.set(false)
}
async delete(productId:number) {
try {
await firstValueFrom(this.productsService.deleteProductEndpoint(productId))
this.notificationService.success(
'Success',
'Suppression effectuée'
)
} catch (e) {
this.notificationService.error(
'Erreur',
'Impossible de supprimer la ligne'
)
}
await this.fetchProducts();
}
async edit(id: number, updateProductComponent: StockForm) {
if (updateProductComponent.stockForm.invalid) {
this.notificationService.error(
'Erreur',
'Erreur d\'écriture dans le formulaire'
)
return;
}
selectionChange = output<boolean>()
try {
const products = updateProductComponent.stockForm.getRawValue();
await firstValueFrom(this.productsService.patchProductMinimalStockEndpoint(id, products))
this.notificationService.success(
'Success',
'Limite de stock modifiée'
)
} catch (e) {
console.error(e);
this.notificationService.error(
'Erreur',
'Erreur lors de la modification'
)
}
}
selectedProduct: GetProductDto | null = null;
openEditModal(product: GetProductDto) {
this.selectedProduct = { ...product};
this.modal().showModal();
}
async onModalOk(productId: number, updateProductComponent: StockForm, modal: ModalNav) {
if (!this.selectedProduct) return;
await this.edit(productId, updateProductComponent);
updateProductComponent.stockForm.reset();
modal.isVisible = false;
await this.fetchProducts();
}
onModalCancel(modal: ModalNav) {
modal.isVisible = false;
}
}

6
src/app/pages/quotation/quotation.ts
View File

@@ -1,17 +1,11 @@
import { Component } from '@angular/core';
import {Search} from "../../components/search/search";
import {DelivereryNoteTable} from "../../components/deliverery-note-table/deliverery-note-table";
import {ModalButton} from "../../components/modal-button/modal-button";
import {DelivereryNoteForm} from "../../components/deliverery-note-form/deliverery-note-form";
import {QuotationForm} from "../../components/quotation-form/quotation-form";
import {QuotationTable} from "../../components/quotation-table/quotation-table";
@Component({
selector: 'app-quotation',
imports: [
ModalButton,
Search,
QuotationForm,
QuotationTable
],
templateUrl: './quotation.html',

12
src/app/pages/stock/stock.html
View File

@@ -1,11 +1,11 @@
<div class="flex mt-2">
@if (hasSelection) {
<app-modal-button type="default" name="Créer un bon de commande" class="ml-4">
<app-purchase-order-form></app-purchase-order-form>
<app-modal-button #modalButton type="default" name="Créer un bon de commande" class="ml-4">
<app-purchase-order-form #purchaseOrderForm></app-purchase-order-form>
</app-modal-button>
<app-modal-button type="default" name="Créer un devis" class="ml-4">
<app-quotation-form></app-quotation-form>
<app-modal-button #modalButton type="default" name="Créer un devis" class="ml-4" (click)="test()">
<app-quotation-form #quotationForm></app-quotation-form>
</app-modal-button>
}
@@ -15,7 +15,5 @@
</div>
<div class="mt-1">
<app-stock-table
(selectionChange)="onSelectionChange($event)"
></app-stock-table>
<app-stock-table #stockTable (selectionChange)="onSelectionChange($event)"></app-stock-table>
</div>

51
src/app/pages/stock/stock.ts
View File

@@ -1,9 +1,12 @@
import { Component } from '@angular/core';
import {Component, inject, viewChild} from '@angular/core';
import {StockTable} from "../../components/stock-table/stock-table";
import {Search} from "../../components/search/search";
import {ModalButton} from "../../components/modal-button/modal-button";
import {PurchaseOrderForm} from "../../components/purchase-order-form/purchase-order-form";
import {QuotationForm} from "../../components/quotation-form/quotation-form";
import {ProductsService} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
@Component({
selector: 'app-stock',
@@ -19,10 +22,56 @@ import {QuotationForm} from "../../components/quotation-form/quotation-form";
})
export class Stock {
modal = viewChild.required<ModalButton>('modalButton');
createQuotation = viewChild.required<QuotationForm>('quotationForm');
createPurchaseOrder = viewChild.required<PurchaseOrderForm>('purchaseOrderForm');
productTable = viewChild.required<StockTable>('stockTable');
private productsService = inject(ProductsService);
private notificationService = inject(NzNotificationService)
// async onModalOk() {
// await this.addSupplier()
// this.createSupplier().supplierForm.reset();
// this.modal().isVisible = false;
// await this.supplierTable().fetchSuppliers()
// }
//
// onModalCancel() {
// this.modal().isVisible = false;
// }
//
// async addSupplier() {
// if (this.createSupplier().supplierForm.invalid)
// {
// this.notificationService.error(
// 'Erreur',
// 'Erreur d\'écriture dans le formulaire'
// )
// }
// try {
// const suppliers = this.createSupplier().supplierForm.getRawValue();
// await firstValueFrom(this.usersService.createSupplierEndpoint(suppliers))
//
// this.notificationService.success(
// 'Success',
// 'Fournisseur enregistré'
// )
// } catch (e) {
// this.notificationService.error(
// 'Erreur',
// 'Erreur d\'enregistrement'
// )
// }
// }
hasSelection = false;
onSelectionChange(value: boolean) {
this.hasSelection = value;
}
test(){
console.log(this.productTable().selectedIds);
}
}

4
src/app/pages/supplier/supplier.ts
View File

@@ -22,7 +22,7 @@ export class Supplier {
modal = viewChild.required<ModalButton>('modalButton');
createSupplier = viewChild.required<SupplierForm>('supplierForm');
supplierTable = viewChild.required<SupplierTable>('supplierTable');
private usersService = inject(SuppliersService);
private suppliersService = inject(SuppliersService);
private notificationService = inject(NzNotificationService)
async onModalOk() {
@@ -46,7 +46,7 @@ export class Supplier {
}
try {
const suppliers = this.createSupplier().supplierForm.getRawValue();
await firstValueFrom(this.usersService.createSupplierEndpoint(suppliers))
await firstValueFrom(this.suppliersService.createSupplierEndpoint(suppliers))
this.notificationService.success(
'Success',

53
src/app/services/api/api/products.service.ts
View File

@@ -39,6 +39,59 @@ export class ProductsService extends BaseService {
super(basePath, configuration);
}
/**
* @endpoint delete /API/products/{productId}
* @param productId
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
*/
public deleteProductEndpoint(productId: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any>;
public deleteProductEndpoint(productId: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<any>>;
public deleteProductEndpoint(productId: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<any>>;
public deleteProductEndpoint(productId: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any> {
if (productId === null || productId === undefined) {
throw new Error('Required parameter productId was null or undefined when calling deleteProductEndpoint.');
}
let localVarHeaders = this.defaultHeaders;
const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
]);
if (localVarHttpHeaderAcceptSelected !== undefined) {
localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
}
const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
const localVarTransferCache: boolean = options?.transferCache ?? true;
let responseType_: 'text' | 'json' | 'blob' = 'json';
if (localVarHttpHeaderAcceptSelected) {
if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
responseType_ = 'text';
} else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
responseType_ = 'json';
} else {
responseType_ = 'blob';
}
}
let localVarPath = `/API/products/${this.configuration.encodeParam({name: "productId", value: productId, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int32"})}`;
const { basePath, withCredentials } = this.configuration;
return this.httpClient.request<any>('delete', `${basePath}${localVarPath}`,
{
context: localVarHttpContext,
responseType: <any>responseType_,
...(withCredentials ? { withCredentials } : {}),
headers: localVarHeaders,
observe: observe,
...(localVarTransferCache !== undefined ? { transferCache: localVarTransferCache } : {}),
reportProgress: reportProgress
}
);
}
/**
* @endpoint get /API/products
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.