Merge branch 'feature/creatingPurchaseOrderPage' into develop

src/app/components/deliverery-note-table/deliverery-note-table.html

@@ -49,11 +49,11 @@
                         </app-modal-nav>
                         <nz-divider nzType="vertical"></nz-divider>
                         <div>
-                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
+                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete()" class="cursor-pointer text-red-700"/>
                         </div>
                         <nz-divider nzType="vertical"></nz-divider>
                         <div>
-                            <nz-icon nzType="export" nzTheme="outline" class="cursor-pointer text-green-700"/>
+                            <nz-icon nzType="export" nzTheme="outline" (click)="export()" class="cursor-pointer text-green-700"/>
                         </div>
                     </div>
                 </td>

src/app/components/deliverery-note-table/deliverery-note-table.ts

@@ -146,4 +146,12 @@ export class DelivereryNoteTable {
             ],
         },
     ];
+
+    delete() {
+        return
+    }
+
+    export() {
+        return
+    }
 }

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

@@ -0,0 +1,21 @@
+<form nz-form nzLayout="horizontal" [formGroup]="productForm" (ngSubmit)="submitForm()">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Prix
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Prix" formControlName="price">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Quantité
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Quantité" formControlName="quantity">
+        </nz-form-control>
+    </nz-form-item>
+</form>

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

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

src/app/components/purchase-order-form/purchase-order-form.html

@@ -0,0 +1,11 @@
+<form nz-form nzLayout="horizontal" [formGroup]="purchaseOrderForm" (ngSubmit)="submitForm()">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="12" nzRequired>
+            Conditions générales de vente
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Conditions générales de vente" formControlName="purchaseCondition">
+        </nz-form-control>
+    </nz-form-item>
+</form>

src/app/components/purchase-order-form/purchase-order-form.ts

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

src/app/components/purchase-order-table/purchase-order-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/purchase-order-table/purchase-order-table.html

@@ -0,0 +1,75 @@
+<nz-table #basicTable [nzData]="purchaseOrders" class="mr-7">
+    <thead>
+    <tr class="text-center">
+        <th>Numéro</th>
+        <th>Conditions de vente</th>
+        <th>Fournisseur</th>
+        <th>Produits</th>
+        <th>Action</th>
+    </tr>
+    </thead>
+    <tbody class="text-center">
+        @for (data of basicTable.data; track data) {
+            <tr>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td>
+                    <app-modal-button type="link" name="Voir les produits">
+                        <div style="max-height: 400px; overflow-y: auto;">
+                            <nz-table [nzData]="data.productOrder">
+                                <thead>
+                                <tr class="text-center">
+                                    <th>Nom</th>
+                                    <th>Prix</th>
+                                    <th>Quantité</th>
+                                    <th>Action</th>
+                                </tr>
+                                </thead>
+                                <tbody class="text-center">
+                                    @for (product of data.productOrder; track product) {
+                                        <tr>
+                                            <td>{{product.product.name}}</td>
+                                            <td>{{product.price}}€</td>
+                                            <td>{{product.quantity}}</td>
+                                            <td>
+                                                <div style="justify-content: center; display: flex">
+                                                    <app-modal-nav nameIcon="edit" name="Modification des conditions de vente" class="cursor-pointer">
+                                                        <app-product-form></app-product-form>
+                                                    </app-modal-nav>
+                                                    <nz-divider nzType="vertical"></nz-divider>
+                                                    <div>
+                                                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete()" class="cursor-pointer text-red-700"/>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    }
+                                </tbody>
+                            </nz-table>
+                        </div>
+                    </app-modal-button>
+                </td>
+                <td>
+                    <div style="justify-content: center; display: flex">
+                        <app-modal-nav nameIcon="edit" name="Modification des conditions de vente" class="cursor-pointer">
+                            <app-purchase-order-form></app-purchase-order-form>
+                        </app-modal-nav>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <div>
+                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete()" class="cursor-pointer text-red-700"/>
+                        </div>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <div>
+                            <nz-icon nzType="export" nzTheme="outline" (click)="export()" class="cursor-pointer text-green-700"/>
+                        </div>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <div>
+                            <nz-icon nzType="interaction" nzTheme="outline" (click)="transfert()" class="cursor-pointer text-blue-700"/>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>

src/app/components/purchase-order-table/purchase-order-table.ts

@@ -0,0 +1,193 @@
+import { Component } from '@angular/core';
+import {ModalNav} from "../modal-nav/modal-nav";
+import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {NzTableComponent} from "ng-zorro-antd/table";
+import {PurchaseOrderInfo} from "../../interfaces/purchase-order.interface";
+import {PurchaseOrderForm} from "../purchase-order-form/purchase-order-form";
+import {ModalButton} from "../modal-button/modal-button";
+import {ProductForm} from "../product-form/product-form";
+
+@Component({
+  selector: 'app-purchase-order-table',
+    imports: [
+        ModalNav,
+        NzDividerComponent,
+        NzIconDirective,
+        NzTableComponent,
+        PurchaseOrderForm,
+        ModalButton,
+        ProductForm
+    ],
+  templateUrl: './purchase-order-table.html',
+  styleUrl: './purchase-order-table.css',
+})
+export class PurchaseOrderTable {
+    purchaseOrders: PurchaseOrderInfo[] = [
+        {
+            purchaseCondition: "Condition d'achat standard 1",
+            supplier: {
+                name: "Fournisseur 1",
+                email: "contact1@example.com",
+                phone: "0100000001",
+                address: "1 Rue de Paris",
+                zipCode: "75001",
+                city: "Paris",
+                deliveryDelay: 3,
+                products: [
+                    {
+                        reference: "F1-P1",
+                        name: "Produit 1A",
+                        supplier: [],
+                        duration: 0,
+                        caliber: "",
+                        approvalNumber: "",
+                        weight: 1,
+                        nec: 0,
+                        image: "",
+                        link: "",
+                        minimalQuantity: 1
+                    },
+                    {
+                        reference: "F1-P2",
+                        name: "Produit 1B",
+                        supplier: [],
+                        duration: 0,
+                        caliber: "",
+                        approvalNumber: "",
+                        weight: 2,
+                        nec: 0,
+                        image: "",
+                        link: "",
+                        minimalQuantity: 1
+                    }
+                ]
+            },
+            productOrder: [
+                {
+                    product: {
+                        reference: "F1-P1",
+                        name: "Produit 1A",
+                        supplier: [],
+                        duration: 0,
+                        caliber: "",
+                        approvalNumber: "",
+                        weight: 1,
+                        nec: 0,
+                        image: "",
+                        link: "",
+                        minimalQuantity: 1
+                    },
+                    quantity: 5,
+                    price: 10
+                },
+                {
+                    product: {
+                        reference: "F1-P2",
+                        name: "Produit 1B",
+                        supplier: [],
+                        duration: 0,
+                        caliber: "",
+                        approvalNumber: "",
+                        weight: 2,
+                        nec: 0,
+                        image: "",
+                        link: "",
+                        minimalQuantity: 1
+                    },
+                    quantity: 3,
+                    price: 15
+                }
+            ]
+        },
+
+        {
+            purchaseCondition: "Condition d'achat standard 2",
+            supplier: {
+                name: "Fournisseur 2",
+                email: "contact2@example.com",
+                phone: "0100000002",
+                address: "2 Rue de Lyon",
+                zipCode: "75002",
+                city: "Paris",
+                deliveryDelay: 4,
+                products: [
+                    {
+                        reference: "F2-P1",
+                        name: "Produit 2A",
+                        supplier: [],
+                        duration: 0,
+                        caliber: "",
+                        approvalNumber: "",
+                        weight: 1.5,
+                        nec: 0,
+                        image: "",
+                        link: "",
+                        minimalQuantity: 1
+                    },
+                    {
+                        reference: "F2-P2",
+                        name: "Produit 2B",
+                        supplier: [],
+                        duration: 0,
+                        caliber: "",
+                        approvalNumber: "",
+                        weight: 2.5,
+                        nec: 0,
+                        image: "",
+                        link: "",
+                        minimalQuantity: 1
+                    }
+                ]
+            },
+            productOrder: [
+                {
+                    product: {
+                        reference: "F2-P1",
+                        name: "Produit 2A",
+                        supplier: [],
+                        duration: 0,
+                        caliber: "",
+                        approvalNumber: "",
+                        weight: 1.5,
+                        nec: 0,
+                        image: "",
+                        link: "",
+                        minimalQuantity: 1
+                    },
+                    quantity: 6,
+                    price: 11
+                },
+                {
+                    product: {
+                        reference: "F2-P2",
+                        name: "Produit 2B",
+                        supplier: [],
+                        duration: 0,
+                        caliber: "",
+                        approvalNumber: "",
+                        weight: 2.5,
+                        nec: 0,
+                        image: "",
+                        link: "",
+                        minimalQuantity: 1
+                    },
+                    quantity: 4,
+                    price: 16
+                }
+            ]
+        },
+    ];
+
+    delete() {
+        return
+    }
+
+    export(){
+        return
+    }
+
+    transfert() {
+        return
+    }
+}

src/app/pages/purchase-order/purchase-order.html

@@ -3,6 +3,8 @@
         <app-search></app-search>
     </div>
 </div>
+
 <div class="mt-1">
-    <p>purchase-order works!</p>
+    <app-purchase-order-table></app-purchase-order-table>
 </div>
+

src/app/pages/purchase-order/purchase-order.ts

@@ -1,10 +1,20 @@
 import { Component } from '@angular/core';
 import {Search} from "../../components/search/search";
+import {DelivereryNoteForm} from "../../components/deliverery-note-form/deliverery-note-form";
+import {DelivereryNoteTable} from "../../components/deliverery-note-table/deliverery-note-table";
+import {ModalButton} from "../../components/modal-button/modal-button";
+import {PurchaseOrderTable} from "../../components/purchase-order-table/purchase-order-table";
+import {PurchaseOrderForm} from "../../components/purchase-order-form/purchase-order-form";
 
 @Component({
   selector: 'app-purchase-order',
     imports: [
         Search,
+        DelivereryNoteForm,
+        DelivereryNoteTable,
+        ModalButton,
+        PurchaseOrderTable,
+        PurchaseOrderForm,
     ],
   templateUrl: './purchase-order.html',
   styleUrl: './purchase-order.css',

src/app/pages/stock/stock.html

@@ -1,6 +1,7 @@
 <div class="ml-130 w-170 mt-2">
     <app-search></app-search>
 </div>
+faire ici la creation de bon de commande avec case a cocher
 
 <div class="mt-1">
     <app-stock-table></app-stock-table>