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

connect api to stock page for get, patch and delete

Browse Source
This commit is contained in:
sanchezvem
2025-11-29 23:14:04 +01:00
parent a76b184dc1
commit 0189fb0440
8 changed files with 255 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/stock-table/stock-table.html
+21 -18
View File
@@ -1,6 +1,6 @@
<nz-table
#rowSelectionTable
[nzData]="listOfData"
[nzData]="products()"
[nzFrontPagination]="false"
(nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
>
<thead>
@@ -26,36 +26,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>
src/app/components/stock-table/stock-table.ts
+107 -36
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() {
return;
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;
}
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;
}
selectionChange = output<boolean>()
}