updated supplier page

src/app/components/modal-button/modal-button.ts

@@ -1,21 +1,24 @@
-import {Component, input, Input} from '@angular/core';
+import {Component, input, Input, output} from '@angular/core';
 import {NzModalComponent} from "ng-zorro-antd/modal";
 import {NzButtonComponent} from "ng-zorro-antd/button";
 
 @Component({
-  selector: 'app-modal-button',
+    selector: 'app-modal-button',
     imports: [
         NzModalComponent,
         NzButtonComponent,
     ],
-  templateUrl: './modal-button.html',
-  styleUrl: './modal-button.css',
+    templateUrl: './modal-button.html',
+    styleUrl: './modal-button.css',
 })
 
 export class ModalButton {
     name = input.required<string>()
     type = input<"primary" | "default" | "dashed" | "link" | "text">()
 
+    ok = output<void>();
+    cancel = output<void>();
+
     isVisible = false;
     isOkLoading = false;
 
@@ -26,12 +29,14 @@ export class ModalButton {
     handleOk(): void {
         this.isOkLoading = true;
         setTimeout(() => {
+            this.ok.emit();
             this.isVisible = false;
             this.isOkLoading = false;
         }, 1000);
     }
 
     handleCancel(): void {
+        this.cancel.emit();
         this.isVisible = false;
     }
 }

src/app/components/modal-nav/modal-nav.html

@@ -1,5 +1,5 @@
 <div (click)="showModal()">
-    <nz-icon [nzType]="nameIcon" nzTheme="outline"></nz-icon>
+    <nz-icon [nzType]="nameIcon()" nzTheme="outline"></nz-icon>
 </div>
 
 <ng-template #modalContent>
@@ -8,7 +8,7 @@
 
 <nz-modal
         [(nzVisible)]="isVisible"
-        [nzTitle]="name"
+        [nzTitle]="name()"
         (nzOnCancel)="handleCancel()"
         (nzOnOk)="handleOk()"
         [nzOkLoading]="isOkLoading"

src/app/components/modal-nav/modal-nav.ts

@@ -1,4 +1,4 @@
-import {Component, Input, input} from '@angular/core';
+import {Component, Input, input, output} from '@angular/core';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzModalModule } from 'ng-zorro-antd/modal';
 import {NzIconDirective} from "ng-zorro-antd/icon";
@@ -10,9 +10,10 @@ import {NzIconDirective} from "ng-zorro-antd/icon";
     styleUrls: ['./modal-nav.css'],
 })
 export class ModalNav {
-    @Input() nameIcon: string = '';
-    @Input() name: string = '';
-
+    nameIcon = input.required<string>()
+    name = input.required<string>()
+    ok = output<void>();
+    cancel = output<void>();
     isVisible = false;
     isOkLoading = false;
 
@@ -23,12 +24,14 @@ export class ModalNav {
     handleOk(): void {
         this.isOkLoading = true;
         setTimeout(() => {
-            this.isVisible = false;
+            this.ok.emit();
             this.isOkLoading = false;
         }, 1000);
     }
 
     handleCancel(): void {
         this.isVisible = false;
+        this.cancel.emit();
+
     }
 }

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

@@ -1,4 +1,4 @@
-import {Component, input} from '@angular/core';
+import {Component, effect, input} 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";
@@ -31,6 +31,19 @@ export class SupplierForm {
         deliveryDelay: new FormControl<string>(null, [Validators.required]),
 
     })
-    supplier= input.required<GetSupplierDto>()
-
+    supplier= input.required<GetSupplierDto | null>();
+    constructor() {
+        effect(() => {
+            if (this.supplier()) {
+                this.supplierForm.patchValue({
+                    name: this.supplier().name,
+                    email: this.supplier().email,
+                    phone: this.supplier().phone,
+                    address: this.supplier().address,
+                    city: this.supplier().city,
+                    deliveryDelay: this.supplier().deliveryDelay,
+                });
+            }
+        });
+    }
 }

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

@@ -1,4 +1,4 @@
-import {Component, inject, signal, viewChild} from '@angular/core';
+import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
 import {ModalNav} from "../modal-nav/modal-nav";
 import {NzDividerComponent} from "ng-zorro-antd/divider";
 import {NzIconDirective} from "ng-zorro-antd/icon";
@@ -8,7 +8,6 @@ import {SupplierForm} from "../supplier-form/supplier-form";
 import {GetSupplierDto, SuppliersService} from "../../services/api";
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
-import {format} from "date-fns";
 
 @Component({
     selector: 'app-supplier-table',
@@ -24,7 +23,7 @@ import {format} from "date-fns";
     styleUrl: './supplier-table.css',
 })
 
-export class SupplierTable {
+export class SupplierTable implements OnInit {
     private suppliersService = inject(SuppliersService);
     private notificationService = inject(NzNotificationService)
     suppliers = signal<GetSupplierDto[]>([]);
@@ -87,6 +86,7 @@ export class SupplierTable {
                 'Fournisseur modifié'
             )
         } catch (e) {
+            console.error(e);
             this.notificationService.error(
                 'Erreur',
                 'Erreur lors de la modification'