updated supplier page

package-lock.json

@@ -500,6 +500,7 @@
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.11.tgz",
       "integrity": "sha512-zQ8xlyUBS+UDAUKk7z/hhWdTtQU2oc/Dwo7jXpyrYlz9y2X1A6sAZpUigdYpbrBkIaNs3MplJevgMiCm3kmN8g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -516,6 +517,7 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.11.tgz",
       "integrity": "sha512-3O0iMPttD8a4QQQrjVfIjboiZZ17ErkZuqK8BXJBTn2rplpkq1m3kVhgsmzN2OANRR05GF9Ed1dTf8ycTrO1yg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -529,6 +531,7 @@
       "integrity": "sha512-u6T8kxj7LzK3btEln6Vd8y7p+O1eNXrLiGwqPuRF/QoyjBrRkTYufZ1I4TvzUxdd0ot6mPDRfdmiD15q//Y+oQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "7.28.3",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -561,6 +564,7 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.11.tgz",
       "integrity": "sha512-tOXlxG0SI9Yy1b/ntGyBahfffDpFg7vAbAt+9riOb5ZZ8GYyyOzg78Lqa/lrdBVEG0PXdDjEa0MV93qCyqwYlg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -586,6 +590,7 @@
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.11.tgz",
       "integrity": "sha512-jXDvW6a9HUzmLmvgPE+hVoZzc6QJBtQ1kYNn/FZDhbtmjRThJtaMW9YfS0Vz/a9KT9cxBf+8O8Q+yspvgsh3fg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -604,6 +609,7 @@
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.11.tgz",
       "integrity": "sha512-hh+8O8m4QzYYlQr9WGew472P37GF1u64NF3HfHmUKJ0xSqqTOHfpni3utev8upJAFJXBKOUZETgeHu2JRcGavg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -626,6 +632,7 @@
       "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.11.tgz",
       "integrity": "sha512-kuv7Yso7GY3tfRtQN0kW4v2Or4NUEBdjxTz5C8YuAhGDpiKXxDNkXzFliYTVWpJkr3EkTuR9mt9IAc+wxof3Pw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -707,6 +714,7 @@
       "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -1648,6 +1656,7 @@
       "integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^4.2.1",
         "@inquirer/confirm": "^5.1.14",
@@ -2507,6 +2516,7 @@
       "resolved": "https://registry.npmjs.org/@nestjs/common/-/common-11.1.9.tgz",
       "integrity": "sha512-zDntUTReRbAThIfSp3dQZ9kKqI+LjgLp5YZN5c1bgNRDuoeLySAoZg46Bg1a+uV8TMgIRziHocglKGNzr6l+bQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "file-type": "21.1.0",
         "iterare": "1.2.1",
@@ -4270,6 +4280,7 @@
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
       "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.4",
@@ -4437,6 +4448,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -5635,6 +5647,7 @@
       "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.0",
@@ -6890,6 +6903,7 @@
       "integrity": "sha512-j1n1IuTX1VQjIy3tT7cyGbX7nvQOsFLoIqobZv4ttI5axP923gA44zUj6miiA6R5Aoms4sEGVIIcucXUbRI14g==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "copy-anything": "^2.0.1",
         "parse-node-version": "^1.0.1",
@@ -7177,6 +7191,7 @@
       "integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cli-truncate": "^4.0.0",
         "colorette": "^2.0.20",
@@ -8832,7 +8847,8 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
       "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
-      "license": "Apache-2.0"
+      "license": "Apache-2.0",
+      "peer": true
     },
     "node_modules/require-directory": {
       "version": "2.1.1",
@@ -8980,6 +8996,7 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -9016,6 +9033,7 @@
       "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -9764,7 +9782,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
+      "license": "0BSD",
+      "peer": true
     },
     "node_modules/tuf-js": {
       "version": "3.1.0",
@@ -9814,6 +9833,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9974,6 +9994,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.11.tgz",
       "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -10361,6 +10382,7 @@
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -10379,7 +10401,8 @@
       "version": "0.15.1",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
       "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     }
   }
 }

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

@@ -1,4 +1,4 @@
-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";
 
@@ -16,6 +16,9 @@ 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 = '';
+    nameIcon = input.required<string>()
-    @Input() name: 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'

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-modal-button #modalButton
-        <app-supplier-form></app-supplier-form>
+                      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'
+            )
+        }
+    }
 }

src/app/services/api/.openapi-generator/FILES

@@ -1,5 +1,4 @@
 .gitignore
-.openapi-generator-ignore
 README.md
 api.base.service.ts
 api.module.ts

src/app/services/api/api.base.service.ts

@@ -12,7 +12,7 @@ import { CustomHttpParameterCodec } from './encoder';
 import { Configuration } from './configuration';
 
 export class BaseService {
-    protected basePath = 'http://localhost:5298';
+    protected basePath = 'https://localhost:44379';
     public defaultHeaders = new HttpHeaders();
     public configuration: Configuration;
     public encoder: HttpParameterCodec;