updated supplier page

src/app/pages/supplier/supplier.html

@@ -1,13 +1,18 @@
 <div class="flex mt-2">
-    <app-modal-button type="primary" name="Ajouter un fournisseur">
-        <app-supplier-form></app-supplier-form>
+    <app-modal-button #modalButton
+                      type="primary"
+                      name="Ajouter un fournisseur"
+                      (ok)="onModalOk()"
+                      (cancel)="onModalCancel()">
+
+        <app-supplier-form #supplierForm [supplier]=""></app-supplier-form>
     </app-modal-button>
 
     <div class="ml-95 w-150">
-        <app-search class="w-full"></app-search>
+        <app-search></app-search>
     </div>
 </div>
 
 <div class="mt-1">
-    <app-supplier-table></app-supplier-table>
+    <app-supplier-table #supplierTable></app-supplier-table>
 </div>

src/app/pages/supplier/supplier.ts

@@ -1,8 +1,11 @@
-import { Component } from '@angular/core';
+import {Component, inject, viewChild} 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";
+import {SuppliersService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
 
 @Component({
   selector: 'app-supplier',
@@ -16,5 +19,44 @@ import {SupplierForm} from "../../components/supplier-form/supplier-form";
   styleUrl: './supplier.css',
 })
 export class Supplier {
+    modal = viewChild.required<ModalButton>('modalButton');
+    createSupplier = viewChild.required<SupplierForm>('supplierForm');
+    suppliersTable = viewChild.required<SupplierTable>('suppliersTable');
+    private usersService = inject(SuppliersService);
+    private notificationService = inject(NzNotificationService)
 
+    async onModalOk() {
+        await this.addSupplier()
+        this.createSupplier().supplierForm.reset();
+        this.modal().isVisible = false;
+        await this.suppliersTable().fetchSuppliers()
+    }
+
+    onModalCancel() {
+        this.modal().isVisible = false;
+    }
+
+    async addSupplier() {
+        if (this.createSupplier().supplierForm.invalid)
+        {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
+        }
+        try {
+            const suppliers = this.createSupplier().supplierForm.getRawValue();
+            await firstValueFrom(this.usersService.createSupplierEndpoint(suppliers))
+
+            this.notificationService.success(
+                'Success',
+                'Fournisseur enregistré'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'enregistrement'
+            )
+        }
+    }
 }