added deliverery note page with deliverery-note-form and deliverert-note-table

2025-11-15 16:25:22 +01:00
parent d43f46b906
commit 5ab1ce4d5b
14 changed files with 431 additions and 27 deletions
--- a/src/app/components/deliverer-form/deliverer-form.html
+++ b/src/app/components/deliverer-form/deliverer-form.html
@@ -5,7 +5,7 @@
        </nz-form-label>

        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="Chronopost" formControlName="transporter">
+            <input nz-input placeholder="Transporteur" formControlName="transporter">
        </nz-form-control>
    </nz-form-item>
 </form>
--- a/src/app/components/deliverer-table/deliverer-table.html
+++ b/src/app/components/deliverer-table/deliverer-table.html
@@ -1,12 +1,12 @@
-<nz-table #basicTable [nzData]="listOfDeliverers" class="mr-7">
+<nz-table #basicTable [nzData]="listOfDeliverers">
    <thead>
-    <tr>
+    <tr class="text-center">
        <th>Transporteur</th>
        <th>Bon de livraison</th>
-        <th style="text-align: center;">Action</th>
+        <th>Action</th>
    </tr>
    </thead>
-    <tbody>
+    <tbody class="text-center">
        @for (data of basicTable.data; track data) {
            <tr>
                <td>{{data.transporter}}</td>
@@ -15,14 +15,14 @@
                        <div style="max-height: 400px; overflow-y: auto;">
                            <nz-table [nzData]="data.deliveryNote">
                                <thead>
-                                <tr>
+                                <tr class="text-center">
                                    <th>Numéro de livraison</th>
                                    <th>Date d'expédition</th>
                                    <th>Date de livraison estimée</th>
-                                    <th>Date de livraison finale</th>
+                                    <th>Date de livraison réelle</th>
                                </tr>
                                </thead>
-                                <tbody>
+                                <tbody class="text-center">
                                    @for (deliveryInfo of data.deliveryNote; track deliveryInfo) {
                                        <tr>
                                            <td>{{deliveryInfo.trackingNumber}}</td>
@@ -38,7 +38,7 @@
                </td>
                <td>
                    <div style="justify-content: center; display: flex">
-                        <app-modal-nav nameIcon="edit" name="Modification de l'utilisateur" class="cursor-pointer">
+                        <app-modal-nav nameIcon="edit" name="Modification du transporteur" class="cursor-pointer">
                            <app-deliverer-form></app-deliverer-form>
                        </app-modal-nav>
                        <nz-divider nzType="vertical"></nz-divider>
--- a/src/app/components/deliverer-table/deliverer-table.ts
+++ b/src/app/components/deliverer-table/deliverer-table.ts
@@ -25,6 +25,7 @@ import {DelivererForm} from "../deliverer-form/deliverer-form";
  templateUrl: './deliverer-table.html',
  styleUrl: './deliverer-table.css',
 })
+
 export class DelivererTable {
    listOfDeliverers: DelivererInfo[] = [
        {
--- a/src/app/components/deliverery-note-form/deliverery-note-form.css
+++ b/src/app/components/deliverery-note-form/deliverery-note-form.css
--- a/src/app/components/deliverery-note-form/deliverery-note-form.html
+++ b/src/app/components/deliverery-note-form/deliverery-note-form.html
@@ -0,0 +1,51 @@
+<form nz-form nzLayout="horizontal" [formGroup]="deliveryNoteForm" (ngSubmit)="submitForm()">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Numéro de livraison
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Numéro de livraison" formControlName="trackingNumber">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Transporteur
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Transporteur" formControlName="deliverer">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Date d'expédition
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <nz-date-picker formControlName="expeditionDate"></nz-date-picker>
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Date de livraison estimée
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <nz-date-picker formControlName="estimatedDate"></nz-date-picker>
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9">
+            Date de livraison réelle
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12">
+            <nz-date-picker formControlName="realDate"></nz-date-picker>
+        </nz-form-control>
+    </nz-form-item>
+</form>
--- a/src/app/components/deliverery-note-form/deliverery-note-form.ts
+++ b/src/app/components/deliverery-note-form/deliverery-note-form.ts
@@ -0,0 +1,44 @@
+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";
+import {NzDatePickerComponent} from "ng-zorro-antd/date-picker";
+
+@Component({
+  selector: 'app-deliverery-note-form',
+    imports: [
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzFormControlComponent,
+        NzInputDirective,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormDirective,
+        ReactiveFormsModule,
+        NzDatePickerComponent
+    ],
+  templateUrl: './deliverery-note-form.html',
+  styleUrl: './deliverery-note-form.css',
+})
+export class DelivereryNoteForm {
+    deliveryNoteForm: FormGroup = new FormGroup({
+        trackingNumber: new FormControl<string>(null,[Validators.required]),
+        deliverer: new FormControl<string>(null,[Validators.required]),
+        expeditionDate: new FormControl(null,[Validators.required]),
+        estimatedDate: new FormControl(null),
+        realDate: new FormControl(null)
+    })
+
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.deliveryNoteForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.deliveryNoteForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.deliveryNoteForm.reset()
+    }
+}
--- a/src/app/components/deliverery-note-table/deliverery-note-table.css
+++ b/src/app/components/deliverery-note-table/deliverery-note-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;
+    }
+}
--- a/src/app/components/deliverery-note-table/deliverery-note-table.html
+++ b/src/app/components/deliverery-note-table/deliverery-note-table.html
@@ -0,0 +1,59 @@
+<nz-table #basicTable [nzData]="deliveryNotes" class="mr-7">
+    <thead>
+        <tr class="text-center">
+            <th>Numéro de livraison</th>
+            <th>Transporteur</th>
+            <th>Date d'expédition</th>
+            <th>Date de livraison estimée</th>
+            <th>Date de livraison réelle</th>
+            <th>Produits</th>
+            <th>Action</th>
+        </tr>
+    </thead >
+    <tbody class="text-center">
+        @for (data of basicTable.data; track data) {
+            <tr>
+                <td>{{data.trackingNumber}}</td>
+                <td>{{data.deliverer}}</td>
+                <td>{{data.expeditionDate | date: 'dd/MM/yyyy'}}</td>
+                <td>{{data.estimateDeliveryDate | date: 'dd/MM/yyyy'}}</td>
+                <td>{{data.realDeliveryDate | date: 'dd/MM/yyyy'}}</td>
+                <td>
+                    <app-modal-button name="Voir les produits">
+                        <div style="max-height: 400px; overflow-y: auto;">
+                            <nz-table [nzData]="data.productDelivery">
+                                <thead>
+                                    <tr class="text-center">
+                                        <th>Réference</th>
+                                        <th>Nom</th>
+                                        <th>Quantité</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="text-center">
+                                    @for (product of data.productDelivery; track product) {
+                                        <tr>
+                                            <td>{{product.product.reference}}</td>
+                                            <td>{{product.product.name}}</td>
+                                            <td>{{product.quantity}}</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 du bon de livraison" class="cursor-pointer">
+                            <app-deliverery-note-form></app-deliverery-note-form>
+                        </app-modal-nav>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <div>
+                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>
--- a/src/app/components/deliverery-note-table/deliverery-note-table.ts
+++ b/src/app/components/deliverery-note-table/deliverery-note-table.ts
@@ -0,0 +1,149 @@
+import { Component } from '@angular/core';
+import {DeliveryNoteInfo} from "../../interfaces/delivery-note.interface";
+import {ProductTable} from "../product-table/product-table";
+import {DatePipe} from "@angular/common";
+import {ModalButton} from "../modal-button/modal-button";
+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 {DelivereryNoteForm} from "../deliverery-note-form/deliverery-note-form";
+
+@Component({
+  selector: 'app-deliverery-note-table',
+    imports: [
+        ModalButton,
+        ModalNav,
+        NzDividerComponent,
+        NzIconDirective,
+        NzTableComponent,
+        DelivereryNoteForm,
+        DatePipe,
+    ],
+  templateUrl: './deliverery-note-table.html',
+  styleUrl: './deliverery-note-table.css',
+})
+export class DelivereryNoteTable {
+    deliveryNotes: DeliveryNoteInfo[] = [
+        {
+            trackingNumber: 'DLV-1000',
+            deliverer: 'Transporteur 1',
+            estimateDeliveryDate: new Date('2025-11-20'),
+            expeditionDate: new Date('2025-11-15'),
+            realDeliveryDate: new Date('2025-11-19'),
+            productDelivery: [
+                { product: ProductTable.listOfProducts[0], quantity: 5 },
+                { product: ProductTable.listOfProducts[1], quantity: 3 },
+                { product: ProductTable.listOfProducts[2], quantity: 7 },
+            ],
+        },
+        {
+            trackingNumber: 'DLV-1001',
+            deliverer: 'Transporteur 1',
+            estimateDeliveryDate: new Date('2025-11-22'),
+            expeditionDate: new Date('2025-11-16'),
+            realDeliveryDate: new Date('2025-11-21'),
+            productDelivery: [
+                { product: ProductTable.listOfProducts[3], quantity: 2 },
+                { product: ProductTable.listOfProducts[4], quantity: 4 },
+                { product: ProductTable.listOfProducts[5], quantity: 6 },
+            ],
+        },
+        {
+            trackingNumber: 'DLV-1002',
+            deliverer: 'Transporteur 2',
+            estimateDeliveryDate: new Date('2025-11-23'),
+            expeditionDate: new Date('2025-11-17'),
+            realDeliveryDate: new Date('2025-11-22'),
+            productDelivery: [
+                { product: ProductTable.listOfProducts[6], quantity: 3 },
+                { product: ProductTable.listOfProducts[7], quantity: 8 },
+                { product: ProductTable.listOfProducts[8], quantity: 5 },
+            ],
+        },
+        {
+            trackingNumber: 'DLV-1003',
+            deliverer: 'Transporteur 2',
+            estimateDeliveryDate: new Date('2025-11-24'),
+            expeditionDate: new Date('2025-11-18'),
+            realDeliveryDate: new Date('2025-11-23'),
+            productDelivery: [
+                { product: ProductTable.listOfProducts[9], quantity: 4 },
+                { product: ProductTable.listOfProducts[10], quantity: 6 },
+                { product: ProductTable.listOfProducts[11], quantity: 7 },
+            ],
+        },
+        {
+            trackingNumber: 'DLV-1004',
+            deliverer: 'Transporteur 3',
+            estimateDeliveryDate: new Date('2025-11-25'),
+            expeditionDate: new Date('2025-11-19'),
+            realDeliveryDate: new Date('2025-11-24'),
+            productDelivery: [
+                { product: ProductTable.listOfProducts[12], quantity: 2 },
+                { product: ProductTable.listOfProducts[13], quantity: 5 },
+                { product: ProductTable.listOfProducts[14], quantity: 6 },
+            ],
+        },
+        {
+            trackingNumber: 'DLV-1005',
+            deliverer: 'Transporteur 3',
+            estimateDeliveryDate: new Date('2025-11-26'),
+            expeditionDate: new Date('2025-11-20'),
+            realDeliveryDate: new Date('2025-11-25'),
+            productDelivery: [
+                { product: ProductTable.listOfProducts[15], quantity: 3 },
+                { product: ProductTable.listOfProducts[16], quantity: 7 },
+                { product: ProductTable.listOfProducts[17], quantity: 4 },
+            ],
+        },
+        {
+            trackingNumber: 'DLV-1006',
+            deliverer: 'Transporteur 4',
+            estimateDeliveryDate: new Date('2025-11-27'),
+            expeditionDate: new Date('2025-11-21'),
+            realDeliveryDate: new Date('2025-11-26'),
+            productDelivery: [
+                { product: ProductTable.listOfProducts[18], quantity: 5 },
+                { product: ProductTable.listOfProducts[19], quantity: 6 },
+                { product: ProductTable.listOfProducts[20], quantity: 7 },
+            ],
+        },
+        {
+            trackingNumber: 'DLV-1007',
+            deliverer: 'Transporteur 4',
+            estimateDeliveryDate: new Date('2025-11-28'),
+            expeditionDate: new Date('2025-11-22'),
+            realDeliveryDate: new Date('2025-11-27'),
+            productDelivery: [
+                { product: ProductTable.listOfProducts[21], quantity: 3 },
+                { product: ProductTable.listOfProducts[22], quantity: 5 },
+                { product: ProductTable.listOfProducts[23], quantity: 4 },
+            ],
+        },
+        {
+            trackingNumber: 'DLV-1008',
+            deliverer: 'Transporteur 5',
+            estimateDeliveryDate: new Date('2025-11-29'),
+            expeditionDate: new Date('2025-11-23'),
+            realDeliveryDate: new Date('2025-11-28'),
+            productDelivery: [
+                { product: ProductTable.listOfProducts[24], quantity: 6 },
+                { product: ProductTable.listOfProducts[25], quantity: 7 },
+                { product: ProductTable.listOfProducts[26], quantity: 3 },
+            ],
+        },
+        {
+            trackingNumber: 'DLV-1009',
+            deliverer: 'Transporteur 5',
+            estimateDeliveryDate: new Date('2025-11-30'),
+            expeditionDate: new Date('2025-11-24'),
+            realDeliveryDate: new Date('2025-11-29'),
+            productDelivery: [
+                { product: ProductTable.listOfProducts[27], quantity: 5 },
+                { product: ProductTable.listOfProducts[28], quantity: 4 },
+                { product: ProductTable.listOfProducts[29], quantity: 6 },
+            ],
+        },
+    ];
+}
--- a/src/app/components/stock-table/stock-table.html
+++ b/src/app/components/stock-table/stock-table.html
@@ -1,18 +1,18 @@
 <nz-table #basicTable [nzData]="listOfData" class="mr-7">
    <thead>
-    <tr>
-        <th>Nom</th>
-        <th>Réference</th>
-        <th>Nec</th>
-        <th>Calibre</th>
-        <th>Poid</th>
-        <th>Durée</th>
-        <th>Quantité</th>
-        <th>Limite</th>
-        <th style="text-align: center;">Action</th>
-    </tr>
+        <tr class="text-center">
+            <th>Nom</th>
+            <th>Réference</th>
+            <th>Nec</th>
+            <th>Calibre</th>
+            <th>Poid</th>
+            <th>Durée</th>
+            <th>Quantité</th>
+            <th>Limite</th>
+            <th>Action</th>
+        </tr>
    </thead>
-    <tbody>
+    <tbody class="text-center">
        @for (data of basicTable.data; track data) {
            <tr>
                <td>{{data.product.name}}</td>
--- a/src/app/components/user-table/user-table.html
+++ b/src/app/components/user-table/user-table.html
@@ -1,13 +1,13 @@
 <nz-table #basicTable [nzData]="listOfData" class="mr-7">
    <thead>
-    <tr>
+    <tr class="text-center">
        <th>Nom</th>
        <th>Email</th>
        <th>Fonction</th>
-        <th style="text-align: center;">Action</th>
+        <th>Action</th>
    </tr>
    </thead>
-    <tbody>
+    <tbody class="text-center">
        @for (data of basicTable.data; track data) {
            <tr>
                <td>{{data.name}}</td>