From 5ab1ce4d5bbad210cc181c4658524a108bfce76f Mon Sep 17 00:00:00 2001 From: sanchezvem Date: Sat, 15 Nov 2025 16:25:22 +0100 Subject: [PATCH] added deliverery note page with deliverery-note-form and deliverert-note-table --- .../deliverer-form/deliverer-form.html | 2 +- .../deliverer-table/deliverer-table.html | 16 +- .../deliverer-table/deliverer-table.ts | 1 + .../deliverery-note-form.css | 0 .../deliverery-note-form.html | 51 ++++++ .../deliverery-note-form.ts | 44 ++++++ .../deliverery-note-table.css | 85 ++++++++++ .../deliverery-note-table.html | 59 +++++++ .../deliverery-note-table.ts | 149 ++++++++++++++++++ .../components/stock-table/stock-table.html | 24 +-- src/app/components/user-table/user-table.html | 6 +- .../pages/delivery-note/delivery-note.html | 7 +- src/app/pages/delivery-note/delivery-note.ts | 9 +- src/app/pages/welcome/welcome.html | 5 +- 14 files changed, 431 insertions(+), 27 deletions(-) create mode 100644 src/app/components/deliverery-note-form/deliverery-note-form.css create mode 100644 src/app/components/deliverery-note-form/deliverery-note-form.html create mode 100644 src/app/components/deliverery-note-form/deliverery-note-form.ts create mode 100644 src/app/components/deliverery-note-table/deliverery-note-table.css create mode 100644 src/app/components/deliverery-note-table/deliverery-note-table.html create mode 100644 src/app/components/deliverery-note-table/deliverery-note-table.ts diff --git a/src/app/components/deliverer-form/deliverer-form.html b/src/app/components/deliverer-form/deliverer-form.html index 52d1834..625096d 100644 --- a/src/app/components/deliverer-form/deliverer-form.html +++ b/src/app/components/deliverer-form/deliverer-form.html @@ -5,7 +5,7 @@ - + \ No newline at end of file diff --git a/src/app/components/deliverer-table/deliverer-table.html b/src/app/components/deliverer-table/deliverer-table.html index 0c3184d..2d19523 100644 --- a/src/app/components/deliverer-table/deliverer-table.html +++ b/src/app/components/deliverer-table/deliverer-table.html @@ -1,12 +1,12 @@ - + - + Transporteur Bon de livraison - Action + Action - + @for (data of basicTable.data; track data) { {{data.transporter}} @@ -15,14 +15,14 @@
- + Numéro de livraison Date d'expédition Date de livraison estimée - Date de livraison finale + Date de livraison réelle - + @for (deliveryInfo of data.deliveryNote; track deliveryInfo) { {{deliveryInfo.trackingNumber}} @@ -38,7 +38,7 @@
- + diff --git a/src/app/components/deliverer-table/deliverer-table.ts b/src/app/components/deliverer-table/deliverer-table.ts index 919c615..8100913 100644 --- 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[] = [ { diff --git a/src/app/components/deliverery-note-form/deliverery-note-form.css b/src/app/components/deliverery-note-form/deliverery-note-form.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/deliverery-note-form/deliverery-note-form.html b/src/app/components/deliverery-note-form/deliverery-note-form.html new file mode 100644 index 0000000..5e9e63d --- /dev/null +++ b/src/app/components/deliverery-note-form/deliverery-note-form.html @@ -0,0 +1,51 @@ +
+ + + Numéro de livraison + + + + + + + + + + Transporteur + + + + + + + + + + Date d'expédition + + + + + + + + + + Date de livraison estimée + + + + + + + + + + Date de livraison réelle + + + + + + +
\ No newline at end of file diff --git a/src/app/components/deliverery-note-form/deliverery-note-form.ts b/src/app/components/deliverery-note-form/deliverery-note-form.ts new file mode 100644 index 0000000..d265263 --- /dev/null +++ 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(null,[Validators.required]), + deliverer: new FormControl(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() + } +} diff --git a/src/app/components/deliverery-note-table/deliverery-note-table.css b/src/app/components/deliverery-note-table/deliverery-note-table.css new file mode 100644 index 0000000..7ae664f --- /dev/null +++ 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; + } +} diff --git a/src/app/components/deliverery-note-table/deliverery-note-table.html b/src/app/components/deliverery-note-table/deliverery-note-table.html new file mode 100644 index 0000000..e738aaf --- /dev/null +++ b/src/app/components/deliverery-note-table/deliverery-note-table.html @@ -0,0 +1,59 @@ + + + + Numéro de livraison + Transporteur + Date d'expédition + Date de livraison estimée + Date de livraison réelle + Produits + Action + + + + @for (data of basicTable.data; track data) { + + {{data.trackingNumber}} + {{data.deliverer}} + {{data.expeditionDate | date: 'dd/MM/yyyy'}} + {{data.estimateDeliveryDate | date: 'dd/MM/yyyy'}} + {{data.realDeliveryDate | date: 'dd/MM/yyyy'}} + + +
+ + + + Réference + Nom + Quantité + + + + @for (product of data.productDelivery; track product) { + + {{product.product.reference}} + {{product.product.name}} + {{product.quantity}} + + } + + +
+ + + +
+ + + + +
+ +
+
+ + + } + + diff --git a/src/app/components/deliverery-note-table/deliverery-note-table.ts b/src/app/components/deliverery-note-table/deliverery-note-table.ts new file mode 100644 index 0000000..08abecc --- /dev/null +++ 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 }, + ], + }, + ]; +} diff --git a/src/app/components/stock-table/stock-table.html b/src/app/components/stock-table/stock-table.html index 5fefbce..7c33279 100644 --- a/src/app/components/stock-table/stock-table.html +++ b/src/app/components/stock-table/stock-table.html @@ -1,18 +1,18 @@ - - Nom - Réference - Nec - Calibre - Poid - Durée - Quantité - Limite - Action - + + Nom + Réference + Nec + Calibre + Poid + Durée + Quantité + Limite + Action + - + @for (data of basicTable.data; track data) { {{data.product.name}} diff --git a/src/app/components/user-table/user-table.html b/src/app/components/user-table/user-table.html index f977771..fe895f1 100644 --- a/src/app/components/user-table/user-table.html +++ b/src/app/components/user-table/user-table.html @@ -1,13 +1,13 @@ - + Nom Email Fonction - Action + Action - + @for (data of basicTable.data; track data) { {{data.name}} diff --git a/src/app/pages/delivery-note/delivery-note.html b/src/app/pages/delivery-note/delivery-note.html index 736e266..0c90178 100644 --- a/src/app/pages/delivery-note/delivery-note.html +++ b/src/app/pages/delivery-note/delivery-note.html @@ -1 +1,6 @@ -

delivery-note works!

+ + + +
+ +
diff --git a/src/app/pages/delivery-note/delivery-note.ts b/src/app/pages/delivery-note/delivery-note.ts index cd3d99e..642b0fb 100644 --- a/src/app/pages/delivery-note/delivery-note.ts +++ b/src/app/pages/delivery-note/delivery-note.ts @@ -1,8 +1,15 @@ import { Component } from '@angular/core'; +import {DelivereryNoteTable} from "../../components/deliverery-note-table/deliverery-note-table"; +import {ModalButton} from "../../components/modal-button/modal-button"; +import {DelivereryNoteForm} from "../../components/deliverery-note-form/deliverery-note-form"; @Component({ selector: 'app-delivery-note', - imports: [], + imports: [ + DelivereryNoteTable, + ModalButton, + DelivereryNoteForm + ], templateUrl: './delivery-note.html', styleUrl: './delivery-note.css', }) diff --git a/src/app/pages/welcome/welcome.html b/src/app/pages/welcome/welcome.html index 12f389f..e62f14b 100644 --- a/src/app/pages/welcome/welcome.html +++ b/src/app/pages/welcome/welcome.html @@ -1 +1,4 @@ -

hello work

\ No newline at end of file +

+ faire dashboard ici + et faire la verif des livraisons ici aussi +

\ No newline at end of file