updated deliverer page for edit and add deliverer

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

@@ -1,9 +1,10 @@
-import { Component } 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";
 import {NzInputDirective} from "ng-zorro-antd/input";
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {GetDelivererDto} from "../../services/api";
 
 @Component({
   selector: 'app-deliverer-form',
@@ -24,4 +25,15 @@ export class DelivererForm {
     delivererForm: FormGroup = new FormGroup({
         transporter: new FormControl<string>(null, [Validators.required])
     })
+
+    deliverer= input<GetDelivererDto>();
+    constructor() {
+        effect(() => {
+            if (this.deliverer()) {
+                this.delivererForm.patchValue({
+                    transporter: this.deliverer().transporter
+                });
+            }
+        });
+    }
 }

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

@@ -41,16 +41,18 @@
                 </td>
                 <td>
                     <div style="justify-content: center; display: flex">
-                        <app-modal-nav nameIcon="edit" name="Modification du transporteur" class="cursor-pointer">
+                        <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer" (click)="openEditModal(deliverer)"></nz-icon>
-                            <app-deliverer-form></app-deliverer-form>
-                        </app-modal-nav>
                         <nz-divider nzType="vertical"></nz-divider>
-                        <div>
+                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliverer.id)" class="text-red-600 cursor-pointer"></nz-icon>
-                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700" (click)="delete(deliverer.id)"/>
-                        </div>
                     </div>
                 </td>
             </tr>
         }
     </tbody>
 </nz-table>
+
+<div class="hidden">
+    <app-modal-nav #modalNav nameIcon="edit" [name]="'Modifier'" (ok)="onModalOk(selectedDeliverer.id, delivererForm, modalNav)" (cancel)="onModalCancel(modalNav)">
+        <app-deliverer-form #delivererForm [deliverer]="selectedDeliverer"></app-deliverer-form>
+    </app-modal-nav>
+</div>

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

@@ -1,4 +1,4 @@
-import {Component, inject, OnInit, signal} 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";
@@ -6,9 +6,10 @@ import {NzTableComponent} from "ng-zorro-antd/table";
 import {ModalButton} from "../modal-button/modal-button";
 import {DatePipe} from "@angular/common";
 import {DelivererForm} from "../deliverer-form/deliverer-form";
-import {DeliverersService, GetDelivererDto} from "../../services/api";
+import {DeliverersService, GetDelivererDto, GetSupplierDto} from "../../services/api";
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
+import {SupplierForm} from "../supplier-form/supplier-form";
 
 @Component({
   selector: 'app-deliverer-table',
@@ -19,7 +20,7 @@ import {firstValueFrom} from "rxjs";
         NzTableComponent,
         ModalButton,
         DatePipe,
-        DelivererForm
+        DelivererForm,
     ],
   templateUrl: './deliverer-table.html',
   styleUrl: './deliverer-table.css',
@@ -30,6 +31,8 @@ export class DelivererTable implements OnInit {
     private notificationService = inject(NzNotificationService)
     deliverers = signal<GetDelivererDto[]>([]);
     deliverersLoading = signal<boolean>(false);
+    updateDeliverer = viewChild.required<DelivererForm>('delivererForm');
+    modal = viewChild.required<ModalNav>('modalNav');
 
     async ngOnInit() {
         await this.fetchDeliverers();
@@ -92,4 +95,23 @@ export class DelivererTable implements OnInit {
             )
         }
     }
+
+    selectedDeliverer: GetDelivererDto | null = null;
+    openEditModal(supplier: GetSupplierDto) {
+        this.selectedDeliverer = { ...supplier };
+        this.modal().showModal();
+    }
+
+    async onModalOk(supplierId: number, updateDelivererComponent: DelivererForm, modal: ModalNav) {
+        if (!this.selectedDeliverer) return;
+
+        await this.edit(supplierId, updateDelivererComponent);
+        updateDelivererComponent.delivererForm.reset();
+        modal.isVisible = false;
+        await this.fetchDeliverers();
+    }
+
+    onModalCancel(modal: ModalNav) {
+        modal.isVisible = false;
+    }
 }

src/app/pages/deliverer/deliverer.html

@@ -1,6 +1,11 @@
 <div class="flex mt-2">
-    <app-modal-button type="primary" name="Ajouter un transporteur">
+    <app-modal-button #modalButton
-        <app-deliverer-form></app-deliverer-form>
+                      type="primary"
+                      name="Ajouter un transporteur"
+                      (ok)="onModalOk()"
+                      (cancel)="onModalCancel()">
+
+        <app-deliverer-form #delivererForm></app-deliverer-form>
     </app-modal-button>
 
     <div class="ml-95 w-150">
@@ -9,5 +14,5 @@
 </div>
 
 <div class="mt-1">
-    <app-deliverer-table></app-deliverer-table>
+    <app-deliverer-table #delivererTable></app-deliverer-table>
 </div>

src/app/pages/deliverer/deliverer.ts

@@ -1,8 +1,11 @@
-import { Component } from '@angular/core';
+import {Component, inject, viewChild} from '@angular/core';
 import {ModalButton} from "../../components/modal-button/modal-button";
 import {DelivererTable} from "../../components/deliverer-table/deliverer-table";
 import {DelivererForm} from "../../components/deliverer-form/deliverer-form";
 import {Search} from "../../components/search/search";
+import {DeliverersService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
 
 @Component({
   selector: 'app-deliverer',
@@ -16,5 +19,44 @@ import {Search} from "../../components/search/search";
   styleUrl: './deliverer.css',
 })
 export class Deliverer {
+    modal = viewChild.required<ModalButton>('modalButton');
+    createDeliverer = viewChild.required<DelivererForm>('delivererForm');
+    delivererTable = viewChild.required<DelivererTable>('delivererTable');
+    private deliverersService = inject(DeliverersService);
+    private notificationService = inject(NzNotificationService)
 
-}
+    async onModalOk() {
+        await this.addDeliverer()
+        this.createDeliverer().delivererForm.reset();
+        this.modal().isVisible = false;
+        await this.delivererTable().fetchDeliverers()
+    }
+
+    onModalCancel() {
+        this.modal().isVisible = false;
+    }
+
+    async addDeliverer() {
+        if (this.createDeliverer().delivererForm.invalid)
+        {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'écriture dans le formulaire'
+            )
+        }
+        try {
+            const deliverers = this.createDeliverer().delivererForm.getRawValue();
+            await firstValueFrom(this.deliverersService.createDelivererEndpoint(deliverers))
+
+            this.notificationService.success(
+                'Success',
+                'Transporteur enregistré'
+            )
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur d\'enregistrement'
+            )
+        }
+    }
+}