From 43362c8f771fe08e25e303c97f397c66a91d2538 Mon Sep 17 00:00:00 2001 From: Enzo Date: Thu, 20 Nov 2025 16:54:46 +0100 Subject: [PATCH] Creating Supplier Page --- .../supplier-form/supplier-form.css | 0 .../supplier-form/supplier-form.html | 66 +++++++++ .../components/supplier-form/supplier-form.ts | 45 ++++++ .../supplier-table/supplier-table.css | 85 +++++++++++ .../supplier-table/supplier-table.html | 59 ++++++++ .../supplier-table/supplier-table.ts | 134 ++++++++++++++++++ src/app/pages/supplier/supplier.html | 8 +- src/app/pages/supplier/supplier.ts | 8 +- 8 files changed, 402 insertions(+), 3 deletions(-) create mode 100644 src/app/components/supplier-form/supplier-form.css create mode 100644 src/app/components/supplier-form/supplier-form.html create mode 100644 src/app/components/supplier-form/supplier-form.ts create mode 100644 src/app/components/supplier-table/supplier-table.css create mode 100644 src/app/components/supplier-table/supplier-table.html create mode 100644 src/app/components/supplier-table/supplier-table.ts diff --git a/src/app/components/supplier-form/supplier-form.css b/src/app/components/supplier-form/supplier-form.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/supplier-form/supplier-form.html b/src/app/components/supplier-form/supplier-form.html new file mode 100644 index 0000000..1b7e80d --- /dev/null +++ b/src/app/components/supplier-form/supplier-form.html @@ -0,0 +1,66 @@ +
+ + + + Fournisseur + + + + + + + + + Email + + + + + + + + + Téléphone + + + + + + + + + Adresse + + + + + + + + + Ville + + + + + + + + + Délai Moyen + + + + + + + + + Produits + + + + + + +
diff --git a/src/app/components/supplier-form/supplier-form.ts b/src/app/components/supplier-form/supplier-form.ts new file mode 100644 index 0000000..87895f2 --- /dev/null +++ b/src/app/components/supplier-form/supplier-form.ts @@ -0,0 +1,45 @@ +import { Component } from '@angular/core'; +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"; +import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms"; + +@Component({ + selector: 'app-supplier-form', + imports: [ + NzColDirective, + NzFlexDirective, + NzFormControlComponent, + NzFormDirective, + NzFormItemComponent, + NzFormLabelComponent, + NzInputDirective, + ReactiveFormsModule + ], + templateUrl: './supplier-form.html', + styleUrl: './supplier-form.css', +}) +export class SupplierForm { + supplierForm: FormGroup = new FormGroup({ + name: new FormControl(null, [Validators.required]), + email: new FormControl(null, [Validators.required]), + phone: new FormControl(null, [Validators.required]), + address: new FormControl(null, [Validators.required]), + city: new FormControl(null, [Validators.required]), + deliveryDelay: new FormControl(null, [Validators.required]), + product: new FormControl(null, [Validators.required]), + + }) + + submitForm() { + // Pour annuler si le formulaire est invalide + if (this.supplierForm.invalid) return; + + // Pour obtenir la valeur du formulaire + console.log(this.supplierForm.getRawValue()) + + // Pour vider le formulaire + this.supplierForm.reset() + } +} diff --git a/src/app/components/supplier-table/supplier-table.css b/src/app/components/supplier-table/supplier-table.css new file mode 100644 index 0000000..7ae664f --- /dev/null +++ b/src/app/components/supplier-table/supplier-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/supplier-table/supplier-table.html b/src/app/components/supplier-table/supplier-table.html new file mode 100644 index 0000000..8724470 --- /dev/null +++ b/src/app/components/supplier-table/supplier-table.html @@ -0,0 +1,59 @@ + + + + Nom + email + Téléphone + Adresse + Ville + Délai Moyen + Produits + Action + + + + @for (data of basicTable.data; track data) { + + {{data.name}} + {{data.email}} + {{data.phone}} + {{data.address}}, {{data.zipCode}} + {{data.city}} + {{data.deliveryDelay}} + + +
+ + + + Nom + Référence + + + + @for (product of data.products; track product) { + + {{product.name}} + {{product.reference}} + + } + + +
+ + + +
+ + + + +
+ +
+
+ + + } + + diff --git a/src/app/components/supplier-table/supplier-table.ts b/src/app/components/supplier-table/supplier-table.ts new file mode 100644 index 0000000..e6f9d25 --- /dev/null +++ b/src/app/components/supplier-table/supplier-table.ts @@ -0,0 +1,134 @@ +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 {ModalButton} from "../modal-button/modal-button"; +import {DatePipe} from "@angular/common"; +import {SupplierForm} from "../supplier-form/supplier-form"; +import {SupplierInfo} from "../../interfaces/supplier.interface"; +import {DelivererForm} from "../deliverer-form/deliverer-form"; + +@Component({ + selector: 'app-supplier-table', + imports: [ + ModalNav, + NzDividerComponent, + NzIconDirective, + NzTableComponent, + ModalButton, + SupplierForm, + ], + templateUrl: './supplier-table.html', + styleUrl: './supplier-table.css', +}) + +export class SupplierTable { + listOfSupplier: SupplierInfo[] = [ + { + name: "PyroNova", + email: "contact@pyronova.com", + phone: "+33 1 45 23 67 89", + address: "12 Rue des Artisans", + zipCode: "69003", + city: "Lyon", + deliveryDelay: 4, + products: [] + }, + { + name: "FX Industries", + email: "sales@fxindus.com", + phone: "+33 2 41 22 90 10", + address: "118 Avenue Lumière", + zipCode: "49000", + city: "Angers", + deliveryDelay: 6, + products: [] + }, + { + name: "EuroFire", + email: "info@eurofire.eu", + phone: "+33 1 80 22 11 77", + address: "2 Avenue de l’Europe", + zipCode: "75012", + city: "Paris", + deliveryDelay: 3, + products: [] + }, + { + name: "FlashEffect", + email: "contact@flasheffect.fr", + phone: "+33 4 72 81 91 22", + address: "44 Rue Centrale", + zipCode: "69007", + city: "Lyon", + deliveryDelay: 5, + products: [] + }, + { + name: "StageLight FX", + email: "support@stagelightfx.com", + phone: "+33 5 55 74 99 31", + address: "99 Boulevard du Progrès", + zipCode: "31000", + city: "Toulouse", + deliveryDelay: 7, + products: [] + }, + { + name: "NovaSpark", + email: "hello@novaspark.fr", + phone: "+33 3 29 55 11 88", + address: "7 Rue de la Source", + zipCode: "54000", + city: "Nancy", + deliveryDelay: 4, + products: [] + }, + { + name: "FXWare", + email: "contact@fxware.eu", + phone: "+33 4 75 55 66 44", + address: "123 Route du Nord", + zipCode: "38000", + city: "Grenoble", + deliveryDelay: 6, + products: [] + }, + { + name: "PyroSet", + email: "info@pyroset.com", + phone: "+33 1 61 73 55 00", + address: "5 Chemin des Prés", + zipCode: "95000", + city: "Cergy", + deliveryDelay: 2, + products: [] + }, + { + name: "SkyFX", + email: "support@skyfx.fr", + phone: "+33 6 55 88 22 11", + address: "1 Rue du Ciel", + zipCode: "33000", + city: "Bordeaux", + deliveryDelay: 5, + products: [] + }, + { + name: "SparkLab", + email: "sales@sparklab.eu", + phone: "+33 2 33 55 77 12", + address: "33 Rue du Port", + zipCode: "14000", + city: "Caen", + deliveryDelay: 4, + products: [] + } + ]; + + delete() { + return + } +} + diff --git a/src/app/pages/supplier/supplier.html b/src/app/pages/supplier/supplier.html index 58666c3..08f4baa 100644 --- a/src/app/pages/supplier/supplier.html +++ b/src/app/pages/supplier/supplier.html @@ -1,9 +1,13 @@
+ + + +
- +
-

supplier works!

+
diff --git a/src/app/pages/supplier/supplier.ts b/src/app/pages/supplier/supplier.ts index 610e14d..7f5c1ee 100644 --- a/src/app/pages/supplier/supplier.ts +++ b/src/app/pages/supplier/supplier.ts @@ -1,10 +1,16 @@ import { Component } from '@angular/core'; import {Search} from "../../components/search/search"; +import {ModalButton} from "../../components/modal-button/modal-button"; +import {SupplierTable} from "../../components/supplier-table/supplier-table"; +import {SupplierForm} from "../../components/supplier-form/supplier-form"; @Component({ selector: 'app-supplier', imports: [ - Search + Search, + SupplierForm, + SupplierTable, + ModalButton ], templateUrl: './supplier.html', styleUrl: './supplier.css',