updated stock table

src/app/components/quotation-table/quotation-table.html

@@ -25,6 +25,7 @@
                                 <tr class="text-center">
                                     <th>Réference</th>
                                     <th>Nom</th>
+                                    <th>Prix</th>
                                     <th>Quantité</th>
                                     <th>Action</th>
                                 </tr>
@@ -34,6 +35,7 @@
                                         <tr>
                                             <td>{{data.quotationProductReference}}</td>
                                             <td>{{data.quotationProductName}}</td>
+                                            <td>XX.XX€</td>
                                             <td>{{data.quotationProductQuantity}}</td>
                                             <td>
                                                 <div style="justify-content: center; display: flex">

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

@@ -1,37 +1,58 @@
-<nz-table #basicTable [nzData]="listOfData" class="mr-7">
+<nz-table
+    #rowSelectionTable
+    [nzData]="listOfData"
+    (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
+>
     <thead>
-        <tr class="text-center">
+    <tr class="text-center">
-            <th>Nom</th>
+        <th nzWidth="40px">
-            <th>Réference</th>
+            <label
-            <th>Nec</th>
+                    nz-checkbox
-            <th>Calibre</th>
+                    [(ngModel)]="checked"
-            <th>Poid</th>
+                    [nzIndeterminate]="indeterminate"
-            <th>Durée</th>
+                    (ngModelChange)="onAllChecked($event)"
-            <th>Quantité</th>
+            ></label>
-            <th>Limite</th>
+        </th>
-            <th>Action</th>
+        <th>Nom</th>
-        </tr>
+        <th>Référence</th>
+        <th>Nec</th>
+        <th>Calibre</th>
+        <th>Poids</th>
+        <th>Durée</th>
+        <th>Quantité</th>
+        <th>Limite</th>
+        <th>Action</th>
+    </tr>
     </thead>
+
     <tbody class="text-center">
-        @for (data of basicTable.data; track data) {
+        @for (data of rowSelectionTable.data; track data.id) {
             <tr>
-                <td>{{data.product.name}}</td>
+                <td nzWidth="40px">
-                <td>{{data.product.reference}}</td>
+                    <label
-                <td>{{data.product.nec}}</td>
+                            nz-checkbox
-                <td>{{data.product.caliber}}</td>
+                            [ngModel]="setOfCheckedId.has(data.id)"
-                <td>{{data.product.weight}}</td>
+                            (ngModelChange)="onItemChecked(data.id, $event)"
-                <td>{{data.product.duration}}</td>
+                    ></label>
-                <td>{{data.quantity}}</td>
+                </td>
-                <td>{{data.product.minimalQuantity}}</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>
                     <div style="justify-content: center; display: flex">
-                        <app-modal-nav nameIcon="edit" name="Modification de la quantité minimale" class="cursor-pointer">
+                        <app-modal-nav nameIcon="edit" name="Modification de la quantité minimale">
                             <app-stock-form></app-stock-form>
                         </app-modal-nav>
                         <nz-divider nzType="vertical"></nz-divider>
-                        <div>
+                        <nz-icon nzType="delete" (click)="delete()" nzTheme="outline"
-                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
+                                 class="cursor-pointer text-red-700"/>
-                        </div>
                     </div>
                 </td>
             </tr>

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',
+    templateUrl: './stock-table.html',
-  styleUrl: './stock-table.css',
+    styleUrl: './stock-table.css',
 })
+
 export class StockTable {
     listOfData: StockInfo[] = [
-        { product: ProductTable.listOfProducts[0], quantity: 10 },
+        { id: 1,  product: ProductTable.listOfProducts[0],  quantity: 10 },
-        { product: ProductTable.listOfProducts[1], quantity: 5 },
+        { id: 2,  product: ProductTable.listOfProducts[1],  quantity: 5 },
-        { product: ProductTable.listOfProducts[2], quantity: 8 },
+        { id: 3,  product: ProductTable.listOfProducts[2],  quantity: 8 },
-        { product: ProductTable.listOfProducts[3], quantity: 12 },
+        { id: 4,  product: ProductTable.listOfProducts[3],  quantity: 12 },
-        { product: ProductTable.listOfProducts[4], quantity: 7 },
+        { id: 5,  product: ProductTable.listOfProducts[4],  quantity: 7 },
-        { product: ProductTable.listOfProducts[5], quantity: 15 },
+        { id: 6,  product: ProductTable.listOfProducts[5],  quantity: 15 },
-        { product: ProductTable.listOfProducts[6], quantity: 9 },
+        { id: 7,  product: ProductTable.listOfProducts[6],  quantity: 9 },
-        { product: ProductTable.listOfProducts[7], quantity: 6 },
+        { id: 8,  product: ProductTable.listOfProducts[7],  quantity: 6 },
-        { product: ProductTable.listOfProducts[8], quantity: 11 },
+        { id: 9,  product: ProductTable.listOfProducts[8],  quantity: 11 },
-        { product: ProductTable.listOfProducts[9], quantity: 14 },
+        { id: 10, product: ProductTable.listOfProducts[9],  quantity: 14 },
-        { product: ProductTable.listOfProducts[10], quantity: 7 },
+        { id: 11, product: ProductTable.listOfProducts[10], quantity: 7 },
-        { product: ProductTable.listOfProducts[11], quantity: 13 },
+        { id: 12, product: ProductTable.listOfProducts[11], quantity: 13 },
-        { product: ProductTable.listOfProducts[12], quantity: 10 },
+        { id: 13, product: ProductTable.listOfProducts[12], quantity: 10 },
-        { product: ProductTable.listOfProducts[13], quantity: 5 },
+        { id: 14, 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 },
     ];
 
-    delete(){
+    checked = false;
-        return
+    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>()
+}

src/app/components/supplier-table/supplier-table.html

@@ -28,6 +28,7 @@
                                 <tr class="text-center">
                                     <th>Nom</th>
                                     <th>Référence</th>
+                                    <th>Prix</th>
                                 </tr>
                                 </thead>
                                 <tbody class="text-center">
@@ -35,6 +36,7 @@
                                         <tr>
                                             <td>{{product.name}}</td>
                                             <td>{{product.reference}}</td>
+                                            <td>xx.x€</td>
                                         </tr>
                                     }
                                 </tbody>

src/app/interfaces/stock.interface.ts

@@ -1,6 +1,7 @@
 import {ProductInfo} from "./product.interface";
 
 export interface StockInfo {
+    id: number;
     product: ProductInfo;
     quantity: number;
 }

src/app/pages/quotation/quotation.html

@@ -7,7 +7,7 @@
         <app-search></app-search>
     </div>
 </div>
-voir prix dans les produits
+
 <div class="mt-1">
     <app-quotation-table></app-quotation-table>
 </div>

src/app/pages/stock/stock.html

@@ -1,8 +1,21 @@
-<div class="ml-130 w-170 mt-2">
+<div class="flex mt-2">
-    <app-search></app-search>
+    @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>
+
+        <app-modal-button type="default" name="Créer un devis" class="ml-4">
+            <app-quotation-form></app-quotation-form>
+        </app-modal-button>
+    }
+
+    <div class="ml-95 w-150">
+        <app-search class="w-full"></app-search>
+    </div>
 </div>
-faire ici la creation de bon de commande avec case a cocher
 
 <div class="mt-1">
-    <app-stock-table></app-stock-table>
+    <app-stock-table
+            (selectionChange)="onSelectionChange($event)"
+    ></app-stock-table>
 </div>

src/app/pages/stock/stock.ts

@@ -1,17 +1,28 @@
 import { Component } 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";
 
 @Component({
   selector: 'app-stock',
     imports: [
         StockTable,
         Search,
+        ModalButton,
+        PurchaseOrderForm,
+        QuotationForm,
     ],
   templateUrl: './stock.html',
   styleUrl: './stock.css',
 })
 
 export class Stock {
+    hasSelection = false;
+
+    onSelectionChange(value: boolean) {
+        this.hasSelection = value;
+    }
 
 }

src/app/pages/supplier/supplier.html

@@ -7,7 +7,7 @@
         <app-search class="w-full"></app-search>
     </div>
 </div>
-voir pour le prix dans le sous tableau produit
+
 <div class="mt-1">
     <app-supplier-table></app-supplier-table>
 </div>