implemented typed forms in the edit load page

src/Client/Logistics.OfficeApp/src/app/core/enums/enumLike.ts

@@ -4,8 +4,8 @@ export interface EnumValue {
 }
 
 export interface EnumLike {
-  getDescription: GetEnumDescFunction;
-  [key: string]: EnumValue | GetEnumDescFunction;
+  getDescription: GetDescriptionFn;
+  [key: string]: EnumValue | GetDescriptionFn;
 }
 
 export function convertEnumToArray(enumLike: EnumLike): EnumValue[] {
@@ -36,4 +36,5 @@ export function getEnumDescription(enumLike: EnumLike, enumValue: string | numbe
   return 'Description not found';
 }
 
-type GetEnumDescFunction = (enumValue: string | number) => string;
+type GetDescriptionFn = (enumValue: string | number) => string;
+type ToArrayFn = (enumLike: EnumLike) => EnumValue[];

src/Client/Logistics.OfficeApp/src/app/core/models/load/createLoad.ts

@@ -1,9 +1,11 @@
+import {Address} from '../address';
+
 export interface CreateLoad {
   name?: string;
-  originAddress: string;
+  originAddress: Address;
   originAddressLat: number;
   originAddressLong: number;
-  destinationAddress: string;
+  destinationAddress: Address;
   destinationAddressLat: number;
   destinationAddressLong: number;
   deliveryCost: number;

src/Client/Logistics.OfficeApp/src/app/core/models/load/updateLoad.ts

@@ -1,12 +1,13 @@
 import {LoadStatus} from '@core/enums';
+import {Address} from '../address';
 
 export interface UpdateLoad {
   id: string;
   name?: string;
-  originAddress: string;
+  originAddress: Address;
   originAddressLat: number;
   originAddressLong: number;
-  destinationAddress: string;
+  destinationAddress: Address;
   destinationAddressLat: number;
   destinationAddressLong: number;
   deliveryCost: number;

src/Client/Logistics.OfficeApp/src/app/pages/load/add-load/add-load.component.html

@@ -10,13 +10,14 @@ <h1>Add a new load</h1>
         <p-progressSpinner></p-progressSpinner>
       }
       <form [formGroup]="form" (ngSubmit)="createLoad()">
+        <app-validation-summary [form]="form"></app-validation-summary>
         <div class="mb-3">
           <label for="name" class="form-label">Name</label>
           <input id="name" formControlName="name" type="text" class="form-control" placeholder="Load name" />
         </div>
         <div class="mb-3">
           <label for="customer" class="form-label">Customer</label>
-          <app-search-customer [(selectedCustomer)]="selectedCustomer"></app-search-customer>
+          <app-search-customer formControlName="customer"></app-search-customer>
         </div>
         <div class="mb-3">
           <label for="orgAddress" class="form-label">Origin Address</label>
@@ -56,18 +57,18 @@ <h1>Add a new load</h1>
         </div>
         <div class="mb-3">
           <label for="dispatcherName" class="form-label">Assigned Dispatcher</label>
-          <input id="dispatcherName" formControlName="dispatcherName" type="text" class="form-control" readonly />
+          <input id="dispatcherName" formControlName="assignedDispatcherName" type="text" class="form-control" readonly />
         </div>
         <div class="mb-3">
           <label for="assignedTruck" class="form-label">Assigned Truck</label>
-          <app-search-truck [(selectedTruck)]="selectedTruck"></app-search-truck>
+          <app-search-truck formControlName="assignedTruck"></app-search-truck>
         </div>
         <div>
           <p-button type="submit"
             class="mt-3"
             icon="bi bi-pencil-square"
             label="Add"
-            [disabled]="isLoading">
+            [disabled]="isLoading || !form.valid">
           </p-button>
           <p-button type="button"
             class="mt-3 ms-0 ms-md-2"

src/Client/Logistics.OfficeApp/src/app/pages/load/add-load/add-load.component.ts

@@ -11,16 +11,18 @@ import {AutoCompleteModule} from 'primeng/autocomplete';
 import {ProgressSpinnerModule} from 'primeng/progressspinner';
 import {AppConfig} from '@configs';
 import {AuthService} from '@core/auth';
-import {CreateLoad, Customer} from '@core/models';
+import {Address, CreateLoad, Customer} from '@core/models';
 import {ApiService, ToastService} from '@core/services';
 import {Converters} from '@shared/utils';
 import {
   AddressAutocompleteComponent,
   DirectionsMapComponent,
   RouteChangedEvent,
   SelectedAddressEvent,
+  ValidationSummaryComponent,
 } from '@shared/components';
-import {SearchCustomerComponent, SearchTruckComponent, TruckData} from '../components';
+import {SearchCustomerComponent, SearchTruckComponent} from '../components';
+import {TruckData} from '../shared';
 
 
 @Component({
@@ -43,44 +45,36 @@ import {SearchCustomerComponent, SearchTruckComponent, TruckData} from '../compo
     DirectionsMapComponent,
     SearchCustomerComponent,
     SearchTruckComponent,
+    ValidationSummaryComponent,
   ],
 })
 export class AddLoadComponent implements OnInit {
-  public readonly accessToken: string;
-  private distanceMeters: number;
-
-  public isLoading: boolean;
-  public form: FormGroup;
-  public selectedTruck: TruckData | null;
-  public selectedCustomer: Customer | null;
-  public suggestedCustomers: Customer[];
-  public originCoords?: [number, number] | null;
-  public destinationCoords?: [number, number] | null;
+  public readonly accessToken = AppConfig.mapboxToken;
+  private distanceMeters = 0;
+  public isLoading = false;
+  public form: FormGroup<AddLoadForm>;
+  public originCoords: [number, number] | null = null;
+  public destinationCoords: [number, number] | null = null;
 
   constructor(
     private readonly authService: AuthService,
     private readonly apiService: ApiService,
     private readonly toastService: ToastService,
     private readonly router: Router)
   {
-    this.accessToken = AppConfig.mapboxToken;
-    this.isLoading = false;
-    this.selectedTruck = null;
-    this.selectedCustomer = null;
-    this.suggestedCustomers = [];
-    this.distanceMeters = 0;
-
-    this.form = new FormGroup({
+    this.form = new FormGroup<AddLoadForm>({
       name: new FormControl(''),
-      orgAddress: new FormControl('', Validators.required),
-      orgCoords: new FormControl([], Validators.required),
-      dstAddress: new FormControl('', Validators.required),
-      dstCoords: new FormControl([], Validators.required),
-      dispatchedDate: new FormControl(new Date().toLocaleDateString(), Validators.required),
-      deliveryCost: new FormControl(0, Validators.required),
-      distance: new FormControl(0, Validators.required),
-      dispatcherName: new FormControl('', Validators.required),
-      dispatcherId: new FormControl('', Validators.required),
+      customer: new FormControl(null, {validators: Validators.required}),
+      orgAddress: new FormControl(null, {validators: Validators.required, nonNullable: true}),
+      orgCoords: new FormControl([0,0], {validators: Validators.required, nonNullable: true}),
+      dstAddress: new FormControl(null, {validators: Validators.required, nonNullable: true}),
+      dstCoords: new FormControl([0,0], {validators: Validators.required, nonNullable: true}),
+      dispatchedDate: new FormControl(new Date().toLocaleDateString(), {validators: Validators.required, nonNullable: true}),
+      deliveryCost: new FormControl(0, {validators: Validators.required, nonNullable: true}),
+      distance: new FormControl(0, {validators: Validators.required, nonNullable: true}),
+      assignedTruck: new FormControl(null, {validators: Validators.required}),
+      assignedDispatcherId: new FormControl('', {validators: Validators.required, nonNullable: true}),
+      assignedDispatcherName: new FormControl('', {validators: Validators.required, nonNullable: true}),
     });
   }
 
@@ -109,24 +103,24 @@ export class AddLoadComponent implements OnInit {
   }
 
   createLoad() {
-    if (!this.isValid()) {
+    if (!this.form.valid) {
       return;
     }
 
     this.isLoading = true;
     const command: CreateLoad = {
-      name: this.form.value.name,
-      originAddress: this.form.value.orgAddress,
-      originAddressLong: this.form.value.orgCoords[0],
-      originAddressLat: this.form.value.orgCoords[1],
-      destinationAddress: this.form.value.dstAddress,
-      destinationAddressLong: this.form.value.dstCoords[0],
-      destinationAddressLat: this.form.value.dstCoords[1],
-      deliveryCost: this.form.value.deliveryCost,
+      name: this.form.value.name!,
+      originAddress: this.form.value.orgAddress!,
+      originAddressLong: this.form.value.orgCoords![0],
+      originAddressLat: this.form.value.orgCoords![1],
+      destinationAddress: this.form.value.dstAddress!,
+      destinationAddressLong: this.form.value.dstCoords![0],
+      destinationAddressLat: this.form.value.dstCoords![1],
+      deliveryCost: this.form.value.deliveryCost!,
       distance: this.distanceMeters,
-      assignedDispatcherId: this.form.value.dispatcherId,
-      assignedTruckId: this.selectedTruck!.truckId,
-      customerId: this.selectedCustomer!.id
+      assignedDispatcherId: this.form.value.assignedDispatcherId!,
+      assignedTruckId: this.form.value.assignedTruck!.truckId,
+      customerId: this.form.value.customer!.id,
     };
 
     this.apiService.createLoad(command)
@@ -140,35 +134,29 @@ export class AddLoadComponent implements OnInit {
       });
   }
 
-  private isValid(): boolean {
-    if (!this.selectedTruck) {
-      this.toastService.showError('Please select a truck');
-      return false;
-    }
-
-    if (!this.selectedCustomer) {
-      this.toastService.showError('Please select a customer');
-      return false;
-    }
-
-    if (!this.form.value.orgAddress) {
-      this.toastService.showError('Please select the origin address');
-      return false;
-    }
+  private fetchCurrentDispatcher() {
+    const userData = this.authService.getUserData();
 
-    if (!this.form.value.dstAddress) {
-      this.toastService.showError('Please select the destination address');
-      return false;
+    if (userData) {
+      this.form.patchValue({
+        assignedDispatcherId: userData.id,
+        assignedDispatcherName: userData.getFullName(),
+      });
     }
-
-    return true;
   }
+}
 
-  private fetchCurrentDispatcher() {
-    const userData = this.authService.getUserData();
-    this.form.patchValue({
-      dispatcherName: userData?.name,
-      dispatcherId: userData?.id,
-    });
-  }
+interface AddLoadForm {
+  name: FormControl<string | null>;
+  customer: FormControl<Customer | null>;
+  orgAddress: FormControl<Address | null>;
+  orgCoords: FormControl<[number, number]>;
+  dstAddress: FormControl<Address | null>;
+  dstCoords: FormControl<[number, number]>;
+  dispatchedDate: FormControl<string>;
+  deliveryCost: FormControl<number>;
+  distance: FormControl<number>;
+  assignedTruck: FormControl<TruckData | null>;
+  assignedDispatcherId: FormControl<string>;
+  assignedDispatcherName: FormControl<string>;
 }

src/Client/Logistics.OfficeApp/src/app/pages/load/components/search-customer/search-customer.component.html

@@ -6,6 +6,7 @@
   [minLength]="2"
   [forceSelection]="true"
   field="name"
+  [(ngModel)]="selectedCustomer"
   (completeMethod)="searchCustomer($event)"
   (onSelect)="changeSelectedCustomer($event)">
 </p-autoComplete>

src/Client/Logistics.OfficeApp/src/app/pages/load/components/search-customer/search-customer.component.ts

@@ -1,6 +1,6 @@
 import {Component, EventEmitter, Input, Output, forwardRef} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {AutoCompleteModule, AutoCompleteOnSelectEvent} from 'primeng/autocomplete';
 import {ApiService} from '@core/services';
 import {Customer} from '@core/models';
@@ -13,6 +13,7 @@ import {Customer} from '@core/models';
   imports: [
     CommonModule,
     AutoCompleteModule,
+    FormsModule,
   ],
   providers: [
     {
@@ -24,7 +25,6 @@ import {Customer} from '@core/models';
 })
 export class SearchCustomerComponent implements ControlValueAccessor {
   private isDisabled = false;
-  private customer: Customer | null = null;
   public suggestedCustomers: Customer[] = [];
 
   @Input() selectedCustomer: Customer | null = null;
@@ -41,9 +41,8 @@ export class SearchCustomerComponent implements ControlValueAccessor {
   }
 
   changeSelectedCustomer(event: AutoCompleteOnSelectEvent) {
-    this.customer = event.value;
-    this.selectedCustomerChange.emit(this.customer);
-    this.onChange(this.customer);
+    this.selectedCustomerChange.emit(event.value);
+    this.onChange(event.value);
   }
 
   //#region Implementation Reactive forms
@@ -52,8 +51,8 @@ export class SearchCustomerComponent implements ControlValueAccessor {
   private onChange(value: Customer | null): void {}
   private onTouched(): void {}
 
-  writeValue(obj: Customer | null): void {
-    this.customer = obj;
+  writeValue(value: Customer | null): void {
+    this.selectedCustomer = value;
   }
 
   registerOnChange(fn: () => void): void {

src/Client/Logistics.OfficeApp/src/app/pages/load/components/search-truck/search-truck.component.html

@@ -1,10 +1,12 @@
-<p-autoComplete [(ngModel)]="selectedTruck"
-  styleClass="w-100" inputStyleClass="form-control"
+<p-autoComplete 
+  styleClass="w-100" 
+  inputStyleClass="form-control"
   placeholder="Type a driver name or truck number"
   field="driversName"
   [minLength]="2"
   [suggestions]="suggestedTrucks"
   [forceSelection]="true"
+  [(ngModel)]="selectedTruck"
   (completeMethod)="searchTruck($event)"
   (onSelect)="changeSelectedTruck($event)">
 </p-autoComplete>