Creating Supplier Page

src/app/components/supplier-form/supplier-form.html

@@ -0,0 +1,66 @@
+<form nz-form nzLayout="horizontal" [formGroup]="supplierForm" (ngSubmit)="submitForm()">
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Fournisseur
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Fournisseur" formControlName="name">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Email
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Email" formControlName="email">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Téléphone
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Téléphone" formControlName="phone">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Adresse
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Adresse" formControlName="address">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Ville
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Ville" formControlName="city">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Délai Moyen
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Délai Moyen" formControlName="deliveryDelay">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Produits
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Produits" formControlName="product">
+        </nz-form-control>
+    </nz-form-item>
+
+</form>

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<string>(null, [Validators.required]),
+        email: new FormControl<string>(null, [Validators.required]),
+        phone: new FormControl<string>(null, [Validators.required]),
+        address: new FormControl<string>(null, [Validators.required]),
+        city: new FormControl<string>(null, [Validators.required]),
+        deliveryDelay: new FormControl<string>(null, [Validators.required]),
+        product: new FormControl<string>(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()
+    }
+}

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;
+    }
+}

src/app/components/supplier-table/supplier-table.html

@@ -0,0 +1,59 @@
+<nz-table #basicTable [nzData]="listOfSupplier">
+    <thead>
+    <tr class="text-center">
+        <th>Nom</th>
+        <th>email</th>
+        <th>Téléphone</th>
+        <th>Adresse</th>
+        <th>Ville</th>
+        <th>Délai Moyen</th>
+        <th>Produits</th>
+        <th>Action</th>
+    </tr>
+    </thead>
+    <tbody class="text-center">
+        @for (data of basicTable.data; track data) {
+            <tr>
+                <td>{{data.name}}</td>
+                <td>{{data.email}}</td>
+                <td>{{data.phone}}</td>
+                <td>{{data.address}}, {{data.zipCode}}</td>
+                <td>{{data.city}}</td>
+                <td>{{data.deliveryDelay}}</td>
+                <td>
+                    <app-modal-button type="link" name="Voir les produits">
+                        <div style="max-height: 400px; overflow-y: auto;">
+                            <nz-table [nzData]="data.products">
+                                <thead>
+                                <tr class="text-center">
+                                    <th>Nom</th>
+                                    <th>Référence</th>
+                                </tr>
+                                </thead>
+                                <tbody class="text-center">
+                                    @for (product of data.products; track product) {
+                                        <tr>
+                                            <td>{{product.name}}</td>
+                                            <td>{{product.reference}}</td>
+                                        </tr>
+                                    }
+                                </tbody>
+                            </nz-table>
+                        </div>
+                    </app-modal-button>
+                </td>
+                <td>
+                    <div style="justify-content: center; display: flex">
+                        <app-modal-nav nameIcon="edit" name="Modification du fournisseur" class="cursor-pointer">
+                            <app-supplier-form></app-supplier-form>
+                        </app-modal-nav>
+                        <nz-divider nzType="vertical"></nz-divider>
+                        <div>
+                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"/>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>

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
+    }
+}
+

src/app/pages/supplier/supplier.html

@@ -1,9 +1,13 @@
 <div class="flex mt-2">
+    <app-modal-button type="primary" name="Ajouter un fournisseur">
+        <app-supplier-form></app-supplier-form>
+    </app-modal-button>
+
     <div class="ml-95 w-150">
-        <app-search></app-search>
+        <app-search class="w-full"></app-search>
     </div>
 </div>
 
 <div class="mt-1">
-    <p>supplier works!</p>
+    <app-supplier-table></app-supplier-table>
 </div>

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