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', })