From e269848f82d4b4e503ac7114249641989eb105ee Mon Sep 17 00:00:00 2001 From: ikuzenkuna Date: Thu, 20 Nov 2025 15:10:43 +0100 Subject: [PATCH 1/3] first of many --- .../quotation-form/quotation-form.css | 0 .../quotation-form/quotation-form.html | 152 ++++++++++++++++++ .../quotation-form/quotation-form.ts | 54 +++++++ .../quotation-table/quotation-table.css | 85 ++++++++++ .../quotation-table/quotation-table.html | 60 +++++++ .../quotation-table/quotation-table.ts | 96 +++++++++++ src/app/pages/quotation/quotation.html | 8 +- src/app/pages/quotation/quotation.ts | 16 +- 8 files changed, 466 insertions(+), 5 deletions(-) create mode 100644 src/app/components/quotation-form/quotation-form.css create mode 100644 src/app/components/quotation-form/quotation-form.html create mode 100644 src/app/components/quotation-form/quotation-form.ts create mode 100644 src/app/components/quotation-table/quotation-table.css create mode 100644 src/app/components/quotation-table/quotation-table.html create mode 100644 src/app/components/quotation-table/quotation-table.ts diff --git a/src/app/components/quotation-form/quotation-form.css b/src/app/components/quotation-form/quotation-form.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/quotation-form/quotation-form.html b/src/app/components/quotation-form/quotation-form.html new file mode 100644 index 0000000..f491c1d --- /dev/null +++ b/src/app/components/quotation-form/quotation-form.html @@ -0,0 +1,152 @@ +
+ + + Quantité + + + + + + + + + + ID Devis + + + + + + + + + + Message du devis + + + + + + + + + + Conditions de vente + + + + + + + + + + ID Produit + + + + + + + + + + Référence produit + + + + + + + + + + Nom du produit + + + + + + + + + + Durée produit + + + + + + + + + + Calibre produit + + + + + + + + + + Numéro d'approbation + + + + + + + + + + Poids produit + + + + + + + + + + NEC Produit + + + + + + + + + + Image produit + + + + + + + + + + Lien produit + + + + + + + + + + Quantité minimale + + + + + + +
+ diff --git a/src/app/components/quotation-form/quotation-form.ts b/src/app/components/quotation-form/quotation-form.ts new file mode 100644 index 0000000..234c0e3 --- /dev/null +++ b/src/app/components/quotation-form/quotation-form.ts @@ -0,0 +1,54 @@ +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-quotation-form', + imports: [ + NzFormItemComponent, + NzFormLabelComponent, + NzFormControlComponent, + NzInputDirective, + NzColDirective, + NzFlexDirective, + NzFormDirective, + ReactiveFormsModule, + NzDatePickerComponent + ], + templateUrl: './quotation-form.html', + styleUrl: './quotation-form.css', +}) +export class QuotationForm { + QuotationForm: FormGroup = new FormGroup({ + quantity: new FormControl(null, [Validators.required]), + quotationId: new FormControl(null), + quotationMessage: new FormControl(null), + quotationConditionsSale: new FormControl(null), + productId: new FormControl(null), + productReferences: new FormControl(null), + productName: new FormControl(null), + productDuration: new FormControl(null), + productCaliber: new FormControl(null), + productApprovalNumber: new FormControl(null), + productWeight: new FormControl(null), + productNec: new FormControl(null), + productImage: new FormControl(null), + productLink: new FormControl(null), + productMinimalQuantity: new FormControl(null) + }) + + submitForm() { + // Pour annuler si le formulaire est invalide + if (this.QuotationForm.invalid) return; + + // Pour obtenir la valeur du formulaire + console.log(this.QuotationForm.getRawValue()) + + // Pour vider le formulaire + this.QuotationForm.reset() + } +} diff --git a/src/app/components/quotation-table/quotation-table.css b/src/app/components/quotation-table/quotation-table.css new file mode 100644 index 0000000..7ae664f --- /dev/null +++ b/src/app/components/quotation-table/quotation-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/quotation-table/quotation-table.html b/src/app/components/quotation-table/quotation-table.html new file mode 100644 index 0000000..e6c4ef3 --- /dev/null +++ b/src/app/components/quotation-table/quotation-table.html @@ -0,0 +1,60 @@ + + + + ID Devis + Nom du produit + Quantité + Message + Conditions de vente + Détails produit + Action + + + + @for (data of basicTable.data; track data) { + + {{data.quotationId}} + {{data.productName}} + {{data.quantity}} + {{data.quotationMessage}} + {{data.quotationConditionsSale}} + + +
+ + + + + + + + + + + + + +
ID Produit:{{data.productId}}
Référence:{{data.productReferences}}
Durée:{{data.productDuration}}
Calibre:{{data.productCaliber}}
Numéro d'approbation:{{data.productApprovalNumber}}
Poids:{{data.productWeight}}
NEC:{{data.productNec}}
Quantité min:{{data.productMinimalQuantity}}
Image:{{data.productImage}}
Lien:{{data.productLink}}
+
+ + + +
+ + + + +
+ +
+ +
+ +
+
+ + + } + + + diff --git a/src/app/components/quotation-table/quotation-table.ts b/src/app/components/quotation-table/quotation-table.ts new file mode 100644 index 0000000..73f4ef3 --- /dev/null +++ b/src/app/components/quotation-table/quotation-table.ts @@ -0,0 +1,96 @@ +import { Component } from '@angular/core'; +import {NzTableComponent} from "ng-zorro-antd/table"; +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 {QuotationForm} from "../quotation-form/quotation-form"; + +interface QuotationInfo { + quantity: number; + quotationId: number; + quotationMessage?: string; + quotationConditionsSale?: string; + productId: number; + productReferences: number; + productName?: string; + productDuration: number; + productCaliber: number; + productApprovalNumber: number; + productWeight: number; + productNec: number; + productImage?: string; + productLink?: string; + productMinimalQuantity: number; +} + +@Component({ + selector: 'app-quotation-table', + imports: [ + ModalButton, + ModalNav, + NzDividerComponent, + NzIconDirective, + NzTableComponent, + QuotationForm + ], + templateUrl: './quotation-table.html', + styleUrl: './quotation-table.css', +}) + +export class QuotationTable { + quotations: QuotationInfo[] = [ + { + quantity: 10, + quotationId: 101, + quotationMessage: 'Livraison urgente demandée', + quotationConditionsSale: 'Paiement à 30 jours', + productId: 5001, + productReferences: 123456, + productName: 'Feu d\'artifice A', + productDuration: 45.5, + productCaliber: 30, + productApprovalNumber: 998877, + productWeight: 1.5, + productNec: 0.5, + productImage: 'url_to_image_a', + productLink: 'http://example.com/product/a', + productMinimalQuantity: 5 + }, + { + quantity: 20, + quotationId: 102, + quotationMessage: 'Livraison standard', + quotationConditionsSale: 'Payé d\'avance', + productId: 5002, + productReferences: 654321, + productName: 'Feu d\'artifice B', + productDuration: 60.0, + productCaliber: 50, + productApprovalNumber: 112233, + productWeight: 2.0, + productNec: 0.8, + productImage: 'url_to_image_b', + productLink: 'http://example.com/product/b', + productMinimalQuantity: 10 + }, + { + quantity: 5, + quotationId: 103, + quotationMessage: null, + quotationConditionsSale: 'Paiement à 15 jours', + productId: 5003, + productReferences: 789012, + productName: 'Feu d\'artifice C', + productDuration: 30.0, + productCaliber: 25, + productApprovalNumber: 445566, + productWeight: 1.0, + productNec: 0.3, + productImage: null, + productLink: null, + productMinimalQuantity: 1 + } + ]; +} + diff --git a/src/app/pages/quotation/quotation.html b/src/app/pages/quotation/quotation.html index a2444b7..2edf3b6 100644 --- a/src/app/pages/quotation/quotation.html +++ b/src/app/pages/quotation/quotation.html @@ -1,9 +1,13 @@
+ + + +
- +
-

quotation works!

+
diff --git a/src/app/pages/quotation/quotation.ts b/src/app/pages/quotation/quotation.ts index 586f94b..938dc1b 100644 --- a/src/app/pages/quotation/quotation.ts +++ b/src/app/pages/quotation/quotation.ts @@ -1,11 +1,21 @@ import { Component } from '@angular/core'; import {Search} from "../../components/search/search"; +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"; +import {QuotationForm} from "../../components/quotation-form/quotation-form"; +import {QuotationTable} from "../../components/quotation-table/quotation-table"; @Component({ selector: 'app-quotation', - imports: [ - Search - ], + imports: [ + DelivereryNoteTable, + ModalButton, + DelivereryNoteForm, + Search, + QuotationForm, + QuotationTable + ], templateUrl: './quotation.html', styleUrl: './quotation.css', }) From 49dea174c38deb743f786087374297dc6de3adb2 Mon Sep 17 00:00:00 2001 From: ikuzenkuna Date: Thu, 20 Nov 2025 16:41:38 +0100 Subject: [PATCH 2/3] removed some unnecessary data --- .../quotation-form/quotation-form.html | 118 +----------------- .../quotation-form/quotation-form.ts | 15 +-- .../quotation-table/quotation-table.html | 43 ++++--- .../quotation-table/quotation-table.ts | 66 +++------- src/app/pages/quotation/quotation.ts | 2 - 5 files changed, 45 insertions(+), 199 deletions(-) diff --git a/src/app/components/quotation-form/quotation-form.html b/src/app/components/quotation-form/quotation-form.html index f491c1d..0aab894 100644 --- a/src/app/components/quotation-form/quotation-form.html +++ b/src/app/components/quotation-form/quotation-form.html @@ -1,16 +1,6 @@
- Quantité - - - - - - - - - ID Devis @@ -30,7 +20,7 @@ - + Conditions de vente @@ -40,112 +30,12 @@ - - ID Produit + + Fournisseur - - - - - - - Référence produit - - - - - - - - - - Nom du produit - - - - - - - - - - Durée produit - - - - - - - - - - Calibre produit - - - - - - - - - - Numéro d'approbation - - - - - - - - - - Poids produit - - - - - - - - - - NEC Produit - - - - - - - - - - Image produit - - - - - - - - - - Lien produit - - - - - - - - - - Quantité minimale - - - - +
diff --git a/src/app/components/quotation-form/quotation-form.ts b/src/app/components/quotation-form/quotation-form.ts index 234c0e3..b62a3fe 100644 --- a/src/app/components/quotation-form/quotation-form.ts +++ b/src/app/components/quotation-form/quotation-form.ts @@ -16,29 +16,16 @@ import {NzDatePickerComponent} from "ng-zorro-antd/date-picker"; NzColDirective, NzFlexDirective, NzFormDirective, - ReactiveFormsModule, - NzDatePickerComponent + ReactiveFormsModule ], templateUrl: './quotation-form.html', styleUrl: './quotation-form.css', }) export class QuotationForm { QuotationForm: FormGroup = new FormGroup({ - quantity: new FormControl(null, [Validators.required]), quotationId: new FormControl(null), quotationMessage: new FormControl(null), quotationConditionsSale: new FormControl(null), - productId: new FormControl(null), - productReferences: new FormControl(null), - productName: new FormControl(null), - productDuration: new FormControl(null), - productCaliber: new FormControl(null), - productApprovalNumber: new FormControl(null), - productWeight: new FormControl(null), - productNec: new FormControl(null), - productImage: new FormControl(null), - productLink: new FormControl(null), - productMinimalQuantity: new FormControl(null) }) submitForm() { diff --git a/src/app/components/quotation-table/quotation-table.html b/src/app/components/quotation-table/quotation-table.html index e6c4ef3..17ff897 100644 --- a/src/app/components/quotation-table/quotation-table.html +++ b/src/app/components/quotation-table/quotation-table.html @@ -1,12 +1,11 @@ - ID Devis - Nom du produit - Quantité + Numéro de Devis Message Conditions de vente - Détails produit + Fournisseur + Produit Action @@ -14,27 +13,31 @@ @for (data of basicTable.data; track data) { {{data.quotationId}} - {{data.productName}} - {{data.quantity}} {{data.quotationMessage}} {{data.quotationConditionsSale}} + {{data.Supplier}} + + - +
- - - - - - - - - - - - + + + + + + + + + + + + + + + -
ID Produit:{{data.productId}}
Référence:{{data.productReferences}}
Durée:{{data.productDuration}}
Calibre:{{data.productCaliber}}
Numéro d'approbation:{{data.productApprovalNumber}}
Poids:{{data.productWeight}}
NEC:{{data.productNec}}
Quantité min:{{data.productMinimalQuantity}}
Image:{{data.productImage}}
Lien:{{data.productLink}}
RéferenceNomQuantité
{{data.quotationProductReference}}{{data.quotationProductName}}{{data.quotationProductQuantity}}
+
diff --git a/src/app/components/quotation-table/quotation-table.ts b/src/app/components/quotation-table/quotation-table.ts index 73f4ef3..1e9a96e 100644 --- a/src/app/components/quotation-table/quotation-table.ts +++ b/src/app/components/quotation-table/quotation-table.ts @@ -7,21 +7,13 @@ import {NzIconDirective} from "ng-zorro-antd/icon"; import {QuotationForm} from "../quotation-form/quotation-form"; interface QuotationInfo { - quantity: number; quotationId: number; quotationMessage?: string; quotationConditionsSale?: string; - productId: number; - productReferences: number; - productName?: string; - productDuration: number; - productCaliber: number; - productApprovalNumber: number; - productWeight: number; - productNec: number; - productImage?: string; - productLink?: string; - productMinimalQuantity: number; + quotationProductReference: string; + quotationProductName: string; + quotationProductQuantity?: number; + Supplier?: string; } @Component({ @@ -41,55 +33,31 @@ interface QuotationInfo { export class QuotationTable { quotations: QuotationInfo[] = [ { - quantity: 10, quotationId: 101, quotationMessage: 'Livraison urgente demandée', quotationConditionsSale: 'Paiement à 30 jours', - productId: 5001, - productReferences: 123456, - productName: 'Feu d\'artifice A', - productDuration: 45.5, - productCaliber: 30, - productApprovalNumber: 998877, - productWeight: 1.5, - productNec: 0.5, - productImage: 'url_to_image_a', - productLink: 'http://example.com/product/a', - productMinimalQuantity: 5 + quotationProductReference: 'DLV-1000', + quotationProductName: 'Produit1', + quotationProductQuantity: 5, + Supplier: 'fireworkssupplier&Co' }, { - quantity: 20, quotationId: 102, quotationMessage: 'Livraison standard', quotationConditionsSale: 'Payé d\'avance', - productId: 5002, - productReferences: 654321, - productName: 'Feu d\'artifice B', - productDuration: 60.0, - productCaliber: 50, - productApprovalNumber: 112233, - productWeight: 2.0, - productNec: 0.8, - productImage: 'url_to_image_b', - productLink: 'http://example.com/product/b', - productMinimalQuantity: 10 + quotationProductReference: 'DLV-1001', + quotationProductName: 'Produit2', + quotationProductQuantity: 6, + Supplier: 'fireworkssupplier&Co' }, { - quantity: 5, quotationId: 103, - quotationMessage: null, + quotationMessage: 'Livraison rapide', quotationConditionsSale: 'Paiement à 15 jours', - productId: 5003, - productReferences: 789012, - productName: 'Feu d\'artifice C', - productDuration: 30.0, - productCaliber: 25, - productApprovalNumber: 445566, - productWeight: 1.0, - productNec: 0.3, - productImage: null, - productLink: null, - productMinimalQuantity: 1 + quotationProductReference: 'DLV-1002', + quotationProductName: 'Produit3', + quotationProductQuantity: 7, + Supplier: 'fireworkssupplier&Co' } ]; } diff --git a/src/app/pages/quotation/quotation.ts b/src/app/pages/quotation/quotation.ts index 938dc1b..c22b8c2 100644 --- a/src/app/pages/quotation/quotation.ts +++ b/src/app/pages/quotation/quotation.ts @@ -9,9 +9,7 @@ import {QuotationTable} from "../../components/quotation-table/quotation-table"; @Component({ selector: 'app-quotation', imports: [ - DelivereryNoteTable, ModalButton, - DelivereryNoteForm, Search, QuotationForm, QuotationTable From 0922bad1354cc4706ec5663941e0b141d832eb24 Mon Sep 17 00:00:00 2001 From: ikuzenkuna Date: Thu, 20 Nov 2025 17:10:10 +0100 Subject: [PATCH 3/3] created quotation page --- .../quotation-table/quotation-table.html | 24 ++++++++++++----- .../quotation-table/quotation-table.ts | 27 ++++++++++++++++--- src/app/pages/quotation/quotation.html | 2 +- 3 files changed, 43 insertions(+), 10 deletions(-) diff --git a/src/app/components/quotation-table/quotation-table.html b/src/app/components/quotation-table/quotation-table.html index 17ff897..3ddfe1e 100644 --- a/src/app/components/quotation-table/quotation-table.html +++ b/src/app/components/quotation-table/quotation-table.html @@ -17,7 +17,6 @@ {{data.quotationConditionsSale}} {{data.Supplier}} -
@@ -27,14 +26,27 @@ Réference Nom Quantité + Action - - {{data.quotationProductReference}} - {{data.quotationProductName}} - {{data.quotationProductQuantity}} - + + + {{data.quotationProductReference}} + {{data.quotationProductName}} + {{data.quotationProductQuantity}} + +
+ + + + +
+ +
+
+ + diff --git a/src/app/components/quotation-table/quotation-table.ts b/src/app/components/quotation-table/quotation-table.ts index 1e9a96e..6dcbfca 100644 --- a/src/app/components/quotation-table/quotation-table.ts +++ b/src/app/components/quotation-table/quotation-table.ts @@ -5,11 +5,17 @@ import {ModalNav} from "../modal-nav/modal-nav"; import {NzDividerComponent} from "ng-zorro-antd/divider"; import {NzIconDirective} from "ng-zorro-antd/icon"; import {QuotationForm} from "../quotation-form/quotation-form"; +import {ProductTable} from "../product-table/product-table"; interface QuotationInfo { quotationId: number; quotationMessage?: string; quotationConditionsSale?: string; + quotationProduct: [ + { quotationProductReference: string; }, + { quotationProductName: string; }, + { quotationProductQuantity?: number; }, + ], quotationProductReference: string; quotationProductName: string; quotationProductQuantity?: number; @@ -36,28 +42,43 @@ export class QuotationTable { quotationId: 101, quotationMessage: 'Livraison urgente demandée', quotationConditionsSale: 'Paiement à 30 jours', + quotationProduct: [ + { quotationProductReference: 'DLV-1000' }, + { quotationProductName: 'Produit1'}, + { quotationProductQuantity: 5 }, + ], quotationProductReference: 'DLV-1000', quotationProductName: 'Produit1', quotationProductQuantity: 5, - Supplier: 'fireworkssupplier&Co' + Supplier: 'Fireworkssupplier&Co' }, { quotationId: 102, quotationMessage: 'Livraison standard', quotationConditionsSale: 'Payé d\'avance', + quotationProduct: [ + { quotationProductReference: 'DLV-1001' }, + { quotationProductName: 'Produit2'}, + { quotationProductQuantity: 6 }, + ], quotationProductReference: 'DLV-1001', quotationProductName: 'Produit2', quotationProductQuantity: 6, - Supplier: 'fireworkssupplier&Co' + Supplier: 'Fireworkssupplier&Co' }, { quotationId: 103, quotationMessage: 'Livraison rapide', quotationConditionsSale: 'Paiement à 15 jours', + quotationProduct: [ + { quotationProductReference: 'DLV-1003' }, + { quotationProductName: 'Produit3'}, + { quotationProductQuantity: 7 }, + ], quotationProductReference: 'DLV-1002', quotationProductName: 'Produit3', quotationProductQuantity: 7, - Supplier: 'fireworkssupplier&Co' + Supplier: 'Fireworkssupplier&Co' } ]; } diff --git a/src/app/pages/quotation/quotation.html b/src/app/pages/quotation/quotation.html index 2edf3b6..307e87f 100644 --- a/src/app/pages/quotation/quotation.html +++ b/src/app/pages/quotation/quotation.html @@ -7,7 +7,7 @@
- +voir prix dans les produits + suppr id devis dans form et dans bon de livraison form