94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
import {Component, output} from '@angular/core';
|
||
import {StockInfo} from "../../interfaces/stock.interface";
|
||
import {NzTableComponent} 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 {NzButtonComponent} from "ng-zorro-antd/button";
|
||
|
||
@Component({
|
||
selector: 'app-stock-table',
|
||
imports: [
|
||
NzTableComponent,
|
||
ModalNav,
|
||
NzIconDirective,
|
||
StockForm,
|
||
NzDividerComponent,
|
||
FormsModule,
|
||
NzCheckboxComponent,
|
||
NzButtonComponent,
|
||
],
|
||
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 },
|
||
];
|
||
|
||
checked = false;
|
||
indeterminate = false;
|
||
setOfCheckedId = new Set<number>();
|
||
|
||
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.listOfData.forEach(item => this.updateCheckedSet(item.id, checked));
|
||
this.refreshCheckedStatus();
|
||
}
|
||
|
||
refreshCheckedStatus(): void {
|
||
const total = this.listOfData.length;
|
||
const checkedCount = this.setOfCheckedId.size;
|
||
|
||
this.checked = checkedCount === total;
|
||
this.indeterminate = checkedCount > 0 && checkedCount < total;
|
||
|
||
// 🔥 Émission asynchrone -> corrige le retard d’affichage
|
||
setTimeout(() => {
|
||
this.selectionChange.emit(this.hasSelection);
|
||
});
|
||
}
|
||
|
||
|
||
onCurrentPageDataChange($event: StockInfo[]): void {
|
||
this.listOfData = $event;
|
||
this.refreshCheckedStatus();
|
||
}
|
||
|
||
delete() {
|
||
return;
|
||
}
|
||
selectionChange = output<boolean>()
|
||
} |