added stock-form for change minimale quantity

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

@@ -0,0 +1,12 @@
+<form nz-form nzLayout="horizontal" [formGroup]="stockForm" (ngSubmit)="submitForm()">
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="15" nzRequired>
+            Quantité minimale du produit
+        </nz-form-label>
+
+        <nz-form-control nzSpan="4" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="12345" formControlName="minQuantity">
+        </nz-form-control>
+    </nz-form-item>
+</form>

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

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+
+@Component({
+  selector: 'app-stock-form',
+    imports: [
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzFormControlComponent,
+        NzInputDirective,
+        NzColDirective,
+        NzFormDirective,
+        ReactiveFormsModule,
+        NzFlexDirective
+    ],
+  templateUrl: './stock-form.html',
+  styleUrl: './stock-form.css',
+})
+export class StockForm {
+    stockForm = new FormGroup({
+        minQuantity: new FormControl<number>(null, [Validators.required])
+    })
+
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.stockForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.stockForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.stockForm.reset()
+    }
+}

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

@@ -0,0 +1,85 @@
+/* Table globale */
+nz-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 8px; /* espace entre les lignes */
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* En-tête */
+nz-table thead tr {
+    background-color: #f5f5f5;
+    text-align: left;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+nz-table thead th {
+    padding: 12px 16px;
+}
+
+/* Lignes du tableau */
+nz-table tbody tr {
+    background-color: #fff;
+    transition: background 0.2s ease;
+}
+
+nz-table tbody tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+nz-table tbody tr:hover {
+    background-color: #e6f7ff; /* survol */
+}
+
+/* Cellules */
+nz-table tbody td {
+    padding: 12px 16px;
+    vertical-align: middle;
+    color: #444;
+}
+
+/* Boutons */
+nz-table button[nz-button] {
+    margin-right: 8px;
+}
+
+/* Modals dans le tableau */
+nz-table app-modal {
+    margin-right: 8px;
+}
+
+/* Dates (pour alignement et style) */
+nz-table tbody td p {
+    margin: 0;
+    font-size: 14px;
+    color: #555;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    nz-table thead {
+        display: none;
+    }
+    nz-table tbody tr {
+        display: block;
+        margin-bottom: 16px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        padding: 12px;
+    }
+    nz-table tbody td {
+        display: flex;
+        justify-content: space-between;
+        padding: 6px 12px;
+    }
+    nz-table tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+    }
+}

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

@@ -0,0 +1,37 @@
+<nz-table #basicTable [nzData]="listOfData">
+    <thead>
+    <tr>
+        <th>Nom</th>
+        <th>Duration</th>
+        <th>Caliber</th>
+        <th>quantity</th>
+        <th>Weight</th>
+        <th>Nec</th>
+        <th>MinimalQuantity</th>
+        <th>Action</th>
+    </tr>
+    </thead>
+    <tbody>
+        @for (data of basicTable.data; track data) {
+            <tr>
+                <td>{{data.name}}</td>
+                <td>{{data.duration}}</td>
+                <td>{{data.caliber}}</td>
+                <td>{{data.quantity}}</td>
+                <td>{{data.weight}}</td>
+                <td>{{data.nec}}</td>
+                <td>{{data.minimalQuantity}}</td>
+                <td>
+                    <div style="display: flex; gap: 10px;">
+                        <app-modalNav nameIcon="edit" name="Modification de la quantité minimale">
+                            <app-stock-form></app-stock-form>
+                        </app-modalNav>
+                        <div>
+                            <nz-icon nzType="delete" nzTheme="outline"/>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>

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

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import {StockInfo} from "../../interfaces/stock.interface";
+import {NzTableComponent} from "ng-zorro-antd/table";
+import {ModalNav} from "../modalNav/modalNav";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {StockForm} from "../stock-form/stock-form";
+
+@Component({
+  selector: 'app-stock-table',
+    imports: [
+        NzTableComponent,
+        ModalNav,
+        NzIconDirective,
+        StockForm
+    ],
+  templateUrl: './stock-table.html',
+  styleUrl: './stock-table.css',
+})
+export class StockTable {
+    listOfData: StockInfo[] = [
+        {
+            name: 'Stock 1',
+            duration: '10 days',
+            caliber: '100g',
+            quantity: 100,
+            weight: 1000,
+            nec: '5kg',
+            minimalQuantity: 5
+        },
+        {
+            name: 'Stock 2',
+            duration: '20 days',
+            caliber: '200g',
+            quantity: 200,
+            weight: 2000,
+            nec: '10kg',
+            minimalQuantity: 10
+        }
+    ];
+    delete(){
+        return
+    }
+}