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..0aab894 --- /dev/null +++ b/src/app/components/quotation-form/quotation-form.html @@ -0,0 +1,42 @@ +
+ + + ID Devis + + + + + + + + + + Message du devis + + + + + + + + + + Conditions de vente + + + + + + + + + + Fournisseur + + + + + + +
+ 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..b62a3fe --- /dev/null +++ b/src/app/components/quotation-form/quotation-form.ts @@ -0,0 +1,41 @@ +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 + ], + templateUrl: './quotation-form.html', + styleUrl: './quotation-form.css', +}) +export class QuotationForm { + QuotationForm: FormGroup = new FormGroup({ + quotationId: new FormControl(null), + quotationMessage: new FormControl(null), + quotationConditionsSale: 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..3ddfe1e --- /dev/null +++ b/src/app/components/quotation-table/quotation-table.html @@ -0,0 +1,75 @@ + + + + Numéro de Devis + Message + Conditions de vente + Fournisseur + Produit + Action + + + + @for (data of basicTable.data; track data) { + + {{data.quotationId}} + {{data.quotationMessage}} + {{data.quotationConditionsSale}} + {{data.Supplier}} + + + +
+ + + + Réference + Nom + Quantité + Action + + + + + + {{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 new file mode 100644 index 0000000..6dcbfca --- /dev/null +++ b/src/app/components/quotation-table/quotation-table.ts @@ -0,0 +1,85 @@ +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"; +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; + Supplier?: string; +} + +@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[] = [ + { + 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' + }, + { + 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' + }, + { + 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' + } + ]; +} + diff --git a/src/app/pages/quotation/quotation.html b/src/app/pages/quotation/quotation.html index a2444b7..307e87f 100644 --- a/src/app/pages/quotation/quotation.html +++ b/src/app/pages/quotation/quotation.html @@ -1,9 +1,13 @@
+ + + +
- +
- +voir prix dans les produits + suppr id devis dans form et dans bon de livraison form
-

quotation works!

+
diff --git a/src/app/pages/quotation/quotation.ts b/src/app/pages/quotation/quotation.ts index 586f94b..c22b8c2 100644 --- a/src/app/pages/quotation/quotation.ts +++ b/src/app/pages/quotation/quotation.ts @@ -1,11 +1,19 @@ 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: [ + ModalButton, + Search, + QuotationForm, + QuotationTable + ], templateUrl: './quotation.html', styleUrl: './quotation.css', })