Added modal to choice deliverer before creation of delivery note

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

@@ -0,0 +1,15 @@
+<form [formGroup]="choiceDelivererForm">
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="12" nzRequired>
+            Transporteur
+        </nz-form-label>
+
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <nz-select formControlName="delivererId" nzPlaceHolder="Choisir un transporteur" nzShowSearch>
+                @for (deliverer of deliverers(); track deliverer.id) {
+                    <nz-option [nzLabel]="deliverer.transporter" [nzValue]="deliverer.id"></nz-option>
+                }
+            </nz-select>
+        </nz-form-control>
+    </nz-form-item>
+</form>

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

@@ -0,0 +1,45 @@
+import {Component, inject, OnInit, output, signal} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
+import {DeliverersService, GetDelivererDto} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+
+@Component({
+  selector: 'app-deliverer-choice',
+  imports: [
+    FormsModule,
+    NzColDirective,
+    NzFlexDirective,
+    NzFormControlComponent,
+    NzFormLabelComponent,
+    NzOptionComponent,
+    NzRowDirective,
+    NzSelectComponent,
+    ReactiveFormsModule
+  ],
+  templateUrl: './deliverer-choice.html',
+  styleUrl: './deliverer-choice.css',
+})
+export class DelivererChoice implements OnInit {
+  private deliverersService = inject(DeliverersService);
+  private notificationService = inject(NzNotificationService);
+
+  choiceDelivererForm: FormGroup = new FormGroup({
+    delivererId: new FormControl<number>(null, Validators.required),
+  });
+
+  deliverers = signal<GetDelivererDto[]>([]);
+
+  async ngOnInit() {
+    try {
+      const deliverers = await firstValueFrom(this.deliverersService.getAllDelivererEndpoint());
+      this.deliverers.set(deliverers);
+    } catch {
+      this.notificationService.error('Erreur', 'Erreur lors de l\'affichage des livreurs');
+    }
+  }
+}

src/app/components/purchase-order-table/purchase-order-table.html

@@ -66,7 +66,7 @@
                         <nz-icon nzType="export" nzTheme="outline" (click)="export(purchaseOrder.id)"
                                  class="cursor-pointer text-green-700"/>
                         <nz-divider nzType="vertical"></nz-divider>
-                        <nz-icon nzType="interaction" nzTheme="outline" (click)="transfer(purchaseOrder)"
+                        <nz-icon nzType="interaction" nzTheme="outline" (click)="openDelivererModal(purchaseOrder)"
                                  class="cursor-pointer text-blue-700"/>
                     </div>
                 </td>
@@ -76,7 +76,7 @@
 </nz-table>
 
 <div class="hidden">
-    <app-modal-nav #modalNav nameIcon="edit" [name]="'Modification des conditions de vente'"
+    <app-modal-nav #modalNav nameIcon="edit" name="Modification des conditions de vente"
                    (ok)="onModalOk(selectedPurchaseOrder.id, purchaseOrderForm, modalNav)"
                    (cancel)="onModalCancel(modalNav)">
         <app-purchase-order-form #purchaseOrderForm [purchaseOrder]="selectedPurchaseOrder"></app-purchase-order-form>
@@ -84,9 +84,17 @@
 </div>
 
 <div class="hidden">
-    <app-modal-nav #modalQuantity nameIcon="edit" [name]="'Modification de la quantité'"
+    <app-modal-nav #modalQuantity nameIcon="edit" name="Modification de la quantité"
                    (ok)="onModalQuantityOk(selectedQuantity.productId, selectedQuantity.purchaseOrderId, quantityForm, modalQuantity)"
                    (cancel)="onModalCancel(modalQuantity)">
         <app-quantity-form #quantityForm [quantity]="selectedQuantity"></app-quantity-form>
     </app-modal-nav>
+</div>
+
+<div class="hidden">
+    <app-modal-nav #modalDeliverer nameIcon="edit" name="Choix du transporteur"
+                   (ok)="transfer(selectedPurchaseOrder, delivererChoice)"
+                   (cancel)="onModalCancel(modalDeliverer)">
+        <app-deliverer-choice #delivererChoice></app-deliverer-choice>
+    </app-modal-nav>
 </div>

src/app/components/purchase-order-table/purchase-order-table.ts

@@ -16,6 +16,7 @@ import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
 import {FileService} from "../../services/file.service";
 import {QuantityForm} from "../quantity-form/quantity-form";
+import {DelivererChoice} from "../deliverer-choice/deliverer-choice";
 
 @Component({
     selector: 'app-purchase-order-table',
@@ -27,6 +28,7 @@ import {QuantityForm} from "../quantity-form/quantity-form";
         PurchaseOrderForm,
         ModalButton,
         QuantityForm,
+        DelivererChoice,
     ],
     templateUrl: './purchase-order-table.html',
     styleUrl: './purchase-order-table.css',
@@ -36,10 +38,13 @@ export class PurchaseOrderTable implements OnInit {
     private notificationService = inject(NzNotificationService);
     private fileService = inject(FileService);
     private deliveryNoteService = inject(DeliverynotesService);
+
     purchaseOrders = signal<GetPurchaseOrderDto[]>([]);
     purchaseOrdersLoading = signal<boolean>(false);
+
     modal = viewChild.required<ModalNav>('modalNav');
     modalQuantity = viewChild.required<ModalNav>('modalQuantity');
+    modalDeliverer = viewChild.required<ModalNav>('modalDeliverer');
 
     async ngOnInit() {
         await this.fetchPurchaseOrder();
@@ -94,9 +99,11 @@ export class PurchaseOrderTable implements OnInit {
         this.purchaseOrdersLoading.set(false)
     }
 
-    async transfer(purchaseOrder: GetPurchaseOrderDto) {
+    async transfer(purchaseOrder: GetPurchaseOrderDto, delivererForm: DelivererChoice) {
         this.purchaseOrdersLoading.set(true);
         try {
+            const deliverer = delivererForm.choiceDelivererForm.getRawValue();
+
             const today = new Date();
             const date = today.toISOString().split('T')[0]; // yyyy-mm-dd
 
@@ -124,15 +131,14 @@ export class PurchaseOrderTable implements OnInit {
                 trackingNumber: trackingValue,
                 expeditionDate: date,
                 estimateDeliveryDate: estimateDate,
-                delivererId: 1,
+                delivererId: deliverer.delivererId,
                 productQuantities: productQuantities,
                 supplierId: purchaseOrder.supplierId
             };
 
             await firstValueFrom(this.deliveryNoteService.createDeliveryNoteEndpoint(deliveryNoteDto));
             this.notificationService.success('Succès', 'Bon de livraison créé avec succès');
-        } catch (e) {
-            console.error(e);
+        } catch {
             this.notificationService.error('Erreur', 'Erreur lors du transfert');
         }
         this.purchaseOrdersLoading.set(false);
@@ -189,9 +195,9 @@ export class PurchaseOrderTable implements OnInit {
             const quantity = updateQuantityComponent.quantityForm.getRawValue();
             await firstValueFrom(this.purchaseOrdersService.patchPurchaseProductQuantityEndpoint(productId, purchaseOrderId, quantity))
 
-            this.notificationService.success('Success', 'Quantité modifiée')
-        } catch (e) {
-            this.notificationService.error('Erreur', 'Erreur lors de la modification')
+            this.notificationService.success('Success', 'Quantité modifiée');
+        } catch {
+            this.notificationService.error('Erreur', 'Erreur lors de la modification');
         }
     }
 
@@ -202,6 +208,11 @@ export class PurchaseOrderTable implements OnInit {
         this.modal().showModal();
     }
 
+    openDelivererModal(purchaseOrder: GetPurchaseOrderDto) {
+        this.selectedPurchaseOrder = {...purchaseOrder};
+        this.modalDeliverer().showModal();
+    }
+
     async onModalOk(id: number, updatePurchaseOrderComponent: PurchaseOrderForm, modal: ModalNav) {
         if (!this.selectedPurchaseOrder) return;