updated stock table

src/app/components/stock-table/stock-table.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+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";
@@ -6,54 +6,89 @@ 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',
+    selector: 'app-stock-table',
     imports: [
         NzTableComponent,
         ModalNav,
         NzIconDirective,
         StockForm,
-        NzDividerComponent
+        NzDividerComponent,
+        FormsModule,
+        NzCheckboxComponent,
+        NzButtonComponent,
     ],
-  templateUrl: './stock-table.html',
-  styleUrl: './stock-table.css',
+    templateUrl: './stock-table.html',
+    styleUrl: './stock-table.css',
 })
+
 export class StockTable {
     listOfData: StockInfo[] = [
-        { product: ProductTable.listOfProducts[0], quantity: 10 },
-        { product: ProductTable.listOfProducts[1], quantity: 5 },
-        { product: ProductTable.listOfProducts[2], quantity: 8 },
-        { product: ProductTable.listOfProducts[3], quantity: 12 },
-        { product: ProductTable.listOfProducts[4], quantity: 7 },
-        { product: ProductTable.listOfProducts[5], quantity: 15 },
-        { product: ProductTable.listOfProducts[6], quantity: 9 },
-        { product: ProductTable.listOfProducts[7], quantity: 6 },
-        { product: ProductTable.listOfProducts[8], quantity: 11 },
-        { product: ProductTable.listOfProducts[9], quantity: 14 },
-        { product: ProductTable.listOfProducts[10], quantity: 7 },
-        { product: ProductTable.listOfProducts[11], quantity: 13 },
-        { product: ProductTable.listOfProducts[12], quantity: 10 },
-        { product: ProductTable.listOfProducts[13], quantity: 5 },
-        { product: ProductTable.listOfProducts[14], quantity: 8 },
-        { product: ProductTable.listOfProducts[15], quantity: 12 },
-        { product: ProductTable.listOfProducts[16], quantity: 9 },
-        { product: ProductTable.listOfProducts[17], quantity: 6 },
-        { product: ProductTable.listOfProducts[18], quantity: 11 },
-        { product: ProductTable.listOfProducts[19], quantity: 14 },
-        { product: ProductTable.listOfProducts[20], quantity: 7 },
-        { product: ProductTable.listOfProducts[21], quantity: 13 },
-        { product: ProductTable.listOfProducts[22], quantity: 10 },
-        { product: ProductTable.listOfProducts[23], quantity: 5 },
-        { product: ProductTable.listOfProducts[24], quantity: 8 },
-        { product: ProductTable.listOfProducts[25], quantity: 12 },
-        { product: ProductTable.listOfProducts[26], quantity: 9 },
-        { product: ProductTable.listOfProducts[27], quantity: 6 },
-        { product: ProductTable.listOfProducts[28], quantity: 11 },
-        { product: ProductTable.listOfProducts[29], quantity: 14 },
+        { 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 },
     ];
 
-    delete(){
-        return
+    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>()
+}