From a240f4268462cd0205756581d30eb3e0b122a789 Mon Sep 17 00:00:00 2001 From: sanchezvem Date: Thu, 20 Nov 2025 16:55:42 +0100 Subject: [PATCH] creating purchase order page --- .../deliverery-note-table.html | 4 +- .../deliverery-note-table.ts | 8 + .../components/product-form/product-form.css | 0 .../components/product-form/product-form.html | 21 ++ .../components/product-form/product-form.ts | 40 ++++ .../purchase-order-form.css | 0 .../purchase-order-form.html | 11 + .../purchase-order-form.ts | 41 ++++ .../purchase-order-table.css | 85 ++++++++ .../purchase-order-table.html | 75 +++++++ .../purchase-order-table.ts | 193 ++++++++++++++++++ .../pages/purchase-order/purchase-order.html | 4 +- .../pages/purchase-order/purchase-order.ts | 10 + src/app/pages/stock/stock.html | 1 + 14 files changed, 490 insertions(+), 3 deletions(-) create mode 100644 src/app/components/product-form/product-form.css create mode 100644 src/app/components/product-form/product-form.html create mode 100644 src/app/components/product-form/product-form.ts create mode 100644 src/app/components/purchase-order-form/purchase-order-form.css create mode 100644 src/app/components/purchase-order-form/purchase-order-form.html create mode 100644 src/app/components/purchase-order-form/purchase-order-form.ts create mode 100644 src/app/components/purchase-order-table/purchase-order-table.css create mode 100644 src/app/components/purchase-order-table/purchase-order-table.html create mode 100644 src/app/components/purchase-order-table/purchase-order-table.ts diff --git a/src/app/components/deliverery-note-table/deliverery-note-table.html b/src/app/components/deliverery-note-table/deliverery-note-table.html index ba7b371..72e73f9 100644 --- a/src/app/components/deliverery-note-table/deliverery-note-table.html +++ b/src/app/components/deliverery-note-table/deliverery-note-table.html @@ -49,11 +49,11 @@
- +
- +
diff --git a/src/app/components/deliverery-note-table/deliverery-note-table.ts b/src/app/components/deliverery-note-table/deliverery-note-table.ts index 08abecc..6a1df24 100644 --- a/src/app/components/deliverery-note-table/deliverery-note-table.ts +++ b/src/app/components/deliverery-note-table/deliverery-note-table.ts @@ -146,4 +146,12 @@ export class DelivereryNoteTable { ], }, ]; + + delete() { + return + } + + export() { + return + } } diff --git a/src/app/components/product-form/product-form.css b/src/app/components/product-form/product-form.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/product-form/product-form.html b/src/app/components/product-form/product-form.html new file mode 100644 index 0000000..aa6c53c --- /dev/null +++ b/src/app/components/product-form/product-form.html @@ -0,0 +1,21 @@ +
+ + + Prix + + + + + + + + + + Quantité + + + + + + +
\ No newline at end of file diff --git a/src/app/components/product-form/product-form.ts b/src/app/components/product-form/product-form.ts new file mode 100644 index 0000000..f3fca0a --- /dev/null +++ b/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(null, [Validators.required]), + quantity: new FormControl(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() + } +} diff --git a/src/app/components/purchase-order-form/purchase-order-form.css b/src/app/components/purchase-order-form/purchase-order-form.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/purchase-order-form/purchase-order-form.html b/src/app/components/purchase-order-form/purchase-order-form.html new file mode 100644 index 0000000..9e8e9e4 --- /dev/null +++ b/src/app/components/purchase-order-form/purchase-order-form.html @@ -0,0 +1,11 @@ +
+ + + Conditions générales de vente + + + + + + +
\ No newline at end of file diff --git a/src/app/components/purchase-order-form/purchase-order-form.ts b/src/app/components/purchase-order-form/purchase-order-form.ts new file mode 100644 index 0000000..32d16c8 --- /dev/null +++ b/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(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() + } +} diff --git a/src/app/components/purchase-order-table/purchase-order-table.css b/src/app/components/purchase-order-table/purchase-order-table.css new file mode 100644 index 0000000..7ae664f --- /dev/null +++ b/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; + } +} diff --git a/src/app/components/purchase-order-table/purchase-order-table.html b/src/app/components/purchase-order-table/purchase-order-table.html new file mode 100644 index 0000000..27b75c5 --- /dev/null +++ b/src/app/components/purchase-order-table/purchase-order-table.html @@ -0,0 +1,75 @@ + + + + Numéro + Conditions de vente + Fournisseur + Produits + Action + + + + @for (data of basicTable.data; track data) { + + + + + + +
+ + + + Nom + Prix + Quantité + Action + + + + @for (product of data.productOrder; track product) { + + {{product.product.name}} + {{product.price}}€ + {{product.quantity}} + +
+ + + + +
+ +
+
+ + + } + + +
+ + + +
+ + + + +
+ +
+ +
+ +
+ +
+ +
+
+ + + } + + diff --git a/src/app/components/purchase-order-table/purchase-order-table.ts b/src/app/components/purchase-order-table/purchase-order-table.ts new file mode 100644 index 0000000..ee9c5a3 --- /dev/null +++ b/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 + } +} diff --git a/src/app/pages/purchase-order/purchase-order.html b/src/app/pages/purchase-order/purchase-order.html index 90c59af..9e67c89 100644 --- a/src/app/pages/purchase-order/purchase-order.html +++ b/src/app/pages/purchase-order/purchase-order.html @@ -3,6 +3,8 @@ +
-

purchase-order works!

+
+ diff --git a/src/app/pages/purchase-order/purchase-order.ts b/src/app/pages/purchase-order/purchase-order.ts index 1bc1ac7..fb3fd77 100644 --- a/src/app/pages/purchase-order/purchase-order.ts +++ b/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', diff --git a/src/app/pages/stock/stock.html b/src/app/pages/stock/stock.html index 3bb6f5f..e1edf81 100644 --- a/src/app/pages/stock/stock.html +++ b/src/app/pages/stock/stock.html @@ -1,6 +1,7 @@
+faire ici la creation de bon de commande avec case a cocher