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

Added checkbox in stock page

Browse Source
This commit is contained in:
sanchezvem
2026-05-26 18:35:44 +01:00
parent 4dd1d7e81d
commit 961551e926
8 changed files with 310 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/stock-table/stock-table.html
+8 -11
View File
@@ -1,18 +1,16 @@
<nz-table
[nzData]="filteredProducts()"
[nzData]="products()"
[nzFrontPagination]="false"
[nzLoading]="productsLoading()"
(nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
>
<thead>
<tr class="text-center">
<th nzWidth="40px">
<label
nz-checkbox
[(ngModel)]="checked"
[nzIndeterminate]="indeterminate"
(ngModelChange)="onAllChecked($event)"
></label>
<label nz-checkbox
[(ngModel)]="checked"
[nzIndeterminate]="indeterminate"
(ngModelChange)="allCheck($event)">
</label>
</th>
<th>Nom</th>
<th>Référence</th>
@@ -27,16 +25,15 @@
</thead>
<tbody class="text-center">
@for (product of filteredProducts(); track product.id) {
@for (product of products(); track product.id) {
<tr>
<td nzWidth="40px">
<label
nz-checkbox
[ngModel]="setOfCheckedId.has(product.id)"
[ngModel]="selectedIds.includes(product.id)"
(ngModelChange)="onItemChecked(product.id, $event)"
></label>
</td>
<td>{{ product.name }}</td>
<td>{{ product.references }}</td>
<td>{{ product.nec }}</td>
src/app/components/stock-table/stock-table.ts
+70 -121
View File
@@ -1,14 +1,14 @@
import {Component, computed, inject, OnInit, output, signal, viewChild} from '@angular/core';
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 {FormsModule} from "@angular/forms";
import {NzCheckboxComponent} from "ng-zorro-antd/checkbox";
import {GetProductDto, ProductsService, WarehouseproductsService} from "../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
import {first, firstValueFrom} from "rxjs";
import {NzCheckboxComponent} from "ng-zorro-antd/checkbox";
interface ProductWithQuantity extends GetProductDto {
totalQuantity?: number;
@@ -23,8 +23,8 @@ interface ProductWithQuantity extends GetProductDto {
StockForm,
NzDividerComponent,
FormsModule,
NzCheckboxComponent,
NzThMeasureDirective,
NzCheckboxComponent,
],
templateUrl: './stock-table.html',
styleUrl: './stock-table.css',
@@ -34,109 +34,49 @@ export class StockTable implements OnInit {
private productsService = inject(ProductsService);
private wareHousseProductsService = inject(WarehouseproductsService)
private notificationService = inject(NzNotificationService)
products = signal<ProductWithQuantity[]>([]);
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[] = [];
selectionChange = output<number[]>();
productsTables = output<ProductWithQuantity[]>();
private searchQuery = signal<string>('');
filteredProducts = computed(() => {
const q = this.searchQuery().toLowerCase().trim();
if (!q) return this.products();
return this.products().filter(s => {
const name = (s.name ?? '').toLowerCase();
return name.includes(q);
});
});
applySearch(query: string) {
this.searchQuery.set(query);
}
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);
}
onItemChecked(id: number, checked: boolean): void {
this.updateCheckedSet(id, checked);
this.refreshCheckedStatus();
}
onAllChecked(checked: boolean): void {
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.currentPageData.length;
const checkedCount = this.currentPageData.filter(p => this.setOfCheckedId.has(p.id)).length;
this.checked = checkedCount === total;
this.indeterminate = checkedCount > 0 && checkedCount < total;
setTimeout(() => this.selectionChange.emit(this.hasSelection));
}
get selectedIds() {
return Array.from(this.setOfCheckedId);
}
selectedProduct: GetProductDto | null = null;
checked: boolean = false;
indeterminate: boolean = false;
selectedIds: number[] = [];
async ngOnInit() {
await this.fetchProducts();
}
async fetchTotalQuantity(product: ProductWithQuantity) {
try {
const res = await firstValueFrom(
this.wareHousseProductsService.getTotalQuantityEndpoint(product.id)
);
product.totalQuantity = res.totalQuantity;
} catch (e) {
product.totalQuantity = 0;
}
}
async fetchProducts() {
this.productsLoading.set(true);
try {
const products = await firstValueFrom(this.productsService.getAllProductsEndpoint());
// transforme chaque produit en ProductWithQuantity
const productsWithQuantity: ProductWithQuantity[] = products.map(p => ({...p}));
this.products.set(productsWithQuantity);
// récupérer la quantité pour chaque produit en parallèle
await Promise.all(productsWithQuantity.map(p => this.fetchTotalQuantity(p)));
// déclencher la mise à jour du signal
this.products.set([...productsWithQuantity]);
} catch (e) {
this.notificationService.error(
'Erreur',
'Erreur de communication avec l\'API'
const productsWithQuantity = await Promise.all(
products.map(async (x) => {
try {
const quantity = await firstValueFrom(this.wareHousseProductsService.getTotalQuantityEndpoint(x.id));
return {
...x,
totalQuantity: quantity.totalQuantity ?? 0
};
} catch {
return {
...x,
totalQuantity: 0
};
}
})
);
this.products.set(productsWithQuantity);
this.productsTables.emit(productsWithQuantity);
} catch {
this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
}
this.productsLoading.set(false);
}
@@ -144,48 +84,28 @@ export class StockTable implements OnInit {
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'
)
this.notificationService.success('Success', 'Suppression effectuée');
} catch {
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'
)
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'
)
await firstValueFrom(this.productsService.patchProductMinimalStockEndpoint(id, products));
await this.fetchProducts();
this.notificationService.success('Success', 'Limite de stock modifiée');
} catch {
this.notificationService.error('Erreur', 'Erreur lors de la modification');
}
}
selectedProduct: GetProductDto | null = null;
openEditModal(product: GetProductDto) {
this.selectedProduct = {...product};
this.modal().showModal();
@@ -193,7 +113,6 @@ export class StockTable implements OnInit {
async onModalOk(productId: number, updateProductComponent: StockForm, modal: ModalNav) {
if (!this.selectedProduct) return;
await this.edit(productId, updateProductComponent);
updateProductComponent.stockForm.reset();
modal.isVisible = false;
@@ -203,4 +122,34 @@ export class StockTable implements OnInit {
onModalCancel(modal: ModalNav) {
modal.isVisible = false;
}
updateCheck(id: number, checked: boolean) {
if (checked) {
if (!this.selectedIds.includes(id)) {
this.selectedIds.push(id);
}
} else this.selectedIds = this.selectedIds.filter(x => x !== id);
}
refreshCheckStatus() {
const total = this.products().length;
const checkedCount = this.selectedIds.length;
this.checked = checkedCount === total;
this.indeterminate = checkedCount > 0 && checkedCount < total;
this.selectionChange.emit(this.selectedIds);
}
allCheck(checked: boolean) {
this.products().forEach(x =>
this.updateCheck(x.id, checked)
);
this.refreshCheckStatus();
}
onItemChecked(id: number, checked: boolean): void {
this.updateCheck(id, checked);
this.refreshCheckStatus();
}
}