added reactive forms support in search-customer component

Author: suxrobGM

src/Client/Logistics.OfficeApp/src/app/pages/dashboard/components/company-stats/company-stats.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {CommonModule, CurrencyPipe} from '@angular/common';
 import {CompanyStats} from '@core/models';
 import {ApiService} from '@core/services';
-import {DistanceConverter} from '@shared/utils';
+import {Converters} from '@shared/utils';
 import {DistanceUnitPipe} from '@shared/pipes';
 import {SharedModule} from 'primeng/api';
 import {CardModule} from 'primeng/card';
@@ -45,7 +45,7 @@ export class CompanyStatsComponent implements OnInit {
       return 0;
     }
 
-    return gross / DistanceConverter.metersTo(distance, 'mi');
+    return gross / Converters.metersTo(distance, 'mi');
   }
 
   private fetchCompanyStats() {
@@ -55,7 +55,7 @@ export class CompanyStatsComponent implements OnInit {
       if (result.isSuccess && result.data) {
         const stats = result.data;
         this.companyStats = result.data;
-        this.rpm = stats.totalGross / DistanceConverter.metersTo(stats.totalDistance, 'mi');
+        this.rpm = stats.totalGross / Converters.metersTo(stats.totalDistance, 'mi');
       }
 
       this.isLoading = false;

src/Client/Logistics.OfficeApp/src/app/pages/home/home.component.ts

@@ -13,7 +13,7 @@ import {DailyGrosses, Load} from '@core/models';
 import {ApiService} from '@core/services';
 import {TrucksMapComponent} from '@shared/components';
 import {AddressPipe, DistanceUnitPipe} from '@shared/pipes';
-import {DateUtils, DistanceConverter} from '@shared/utils';
+import {DateUtils, Converters} from '@shared/utils';
 import {NotificationsPanelComponent} from './components';
 
 
@@ -98,7 +98,7 @@ export class HomeComponent implements OnInit {
 
         this.weeklyGross = grosses.totalGross;
         this.weeklyDistance = grosses.totalDistance;
-        this.weeklyRpm = this.weeklyGross / DistanceConverter.metersTo(this.weeklyDistance, 'mi');
+        this.weeklyRpm = this.weeklyGross / Converters.metersTo(this.weeklyDistance, 'mi');
         this.drawChart(grosses);
         this.calcTodayGross(grosses);
       }

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

@@ -13,7 +13,7 @@ import {AppConfig} from '@configs';
 import {AuthService} from '@core/auth';
 import {CreateLoad, Customer} from '@core/models';
 import {ApiService, ToastService} from '@core/services';
-import {DistanceConverter} from '@shared/utils';
+import {Converters} from '@shared/utils';
 import {
   AddressAutocompleteComponent,
   DirectionsMapComponent,
@@ -104,7 +104,7 @@ export class AddLoadComponent implements OnInit {
 
   updateDistance(eventData: RouteChangedEvent) {
     this.distanceMeters = eventData.distance;
-    const distanceMiles = DistanceConverter.metersTo(this.distanceMeters, 'mi');
+    const distanceMiles = Converters.metersTo(this.distanceMeters, 'mi');
     this.form.patchValue({distance: distanceMiles});
   }
 

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

@@ -1,10 +1,11 @@
-<p-autoComplete #autoCompleteInput
+<p-autoComplete
   [suggestions]="suggestedCustomers"
-  styleClass="w-100" inputStyleClass="form-control"
+  styleClass="w-100" 
+  inputStyleClass="form-control"
   placeholder="Type a customer name"
-  (completeMethod)="searchCustomer($event)"
   [minLength]="2"
   [forceSelection]="true"
   field="name"
+  (completeMethod)="searchCustomer($event)"
   (onSelect)="changeSelectedCustomer($event)">
 </p-autoComplete>

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

@@ -1,5 +1,6 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output, forwardRef} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {AutoCompleteModule, AutoCompleteOnSelectEvent} from 'primeng/autocomplete';
 import {ApiService} from '@core/services';
 import {Customer} from '@core/models';
@@ -9,20 +10,27 @@ import {Customer} from '@core/models';
   selector: 'app-search-customer',
   standalone: true,
   templateUrl: './search-customer.component.html',
-  styleUrls: [],
   imports: [
     CommonModule,
     AutoCompleteModule,
   ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SearchCustomerComponent),
+      multi: true,
+    },
+  ],
 })
-export class SearchCustomerComponent {
+export class SearchCustomerComponent implements ControlValueAccessor {
+  private isDisabled = false;
+  private customer: Customer | null = null;
   public suggestedCustomers: Customer[] = [];
 
   @Input() selectedCustomer: Customer | null = null;
-  @Output() selectedCustomerChange = new EventEmitter<Customer>();
+  @Output() selectedCustomerChange = new EventEmitter<Customer | null>();
 
-  constructor(private readonly apiService: ApiService){
-  }
+  constructor(private readonly apiService: ApiService) {}
 
   searchCustomer(event: {query: string}) {
     this.apiService.getCustomers({search: event.query}).subscribe((result) => {
@@ -33,6 +41,32 @@ export class SearchCustomerComponent {
   }
 
   changeSelectedCustomer(event: AutoCompleteOnSelectEvent) {
-    this.selectedCustomerChange.emit(event.value);
+    this.customer = event.value;
+    this.selectedCustomerChange.emit(this.customer);
+    this.onChange(this.customer);
+  }
+  
+  //#region Implementation Reactive forms
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  private onChange(value: Customer | null): void {}
+  private onTouched(): void {}
+
+  writeValue(obj: Customer | null): void {
+    this.customer = obj;
+  }
+
+  registerOnChange(fn: () => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
   }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+
+  //#endregion
 }

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

@@ -11,13 +11,14 @@ <h1>Edit a load #{{loadRefId}}</h1>
         <p-progressSpinner></p-progressSpinner>
       }
       <form [formGroup]="form" (ngSubmit)="updateLoad()">
+        <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>

src/Client/Logistics.OfficeApp/src/app/pages/load/edit-load/edit-load.component.scss

@@ -2,4 +2,3 @@
   width: 50px !important;
   height: 50px !important;
 }
-

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import {Component, OnInit} from '@angular/core';
-import {NgIf} from '@angular/common';
+import {CommonModule} from '@angular/common';
 import {FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {ActivatedRoute, Router, RouterLink} from '@angular/router';
 import {ConfirmationService} from 'primeng/api';
@@ -15,12 +15,13 @@ import {AppConfig} from '@configs';
 import {EnumValue, LoadStatus, LoadStatusEnum, convertEnumToArray} from '@core/enums';
 import {Customer, UpdateLoad} from '@core/models';
 import {ApiService, ToastService} from '@core/services';
-import {DistanceConverter} from '@shared/utils';
+import {Converters} from '@shared/utils';
 import {
   AddressAutocompleteComponent,
   DirectionsMapComponent,
   RouteChangedEvent,
   SelectedAddressEvent,
+  ValidationSummaryComponent,
 } from '@shared/components';
 import {TruckData, TruckHelper} from '../shared';
 import {SearchCustomerComponent, SearchTruckComponent} from '../components';
@@ -33,10 +34,10 @@ import {SearchCustomerComponent, SearchTruckComponent} from '../components';
   styleUrls: ['./edit-load.component.scss'],
   standalone: true,
   imports: [
+    CommonModule,
     ToastModule,
     ConfirmDialogModule,
     CardModule,
-    NgIf,
     ProgressSpinnerModule,
     FormsModule,
     ReactiveFormsModule,
@@ -47,7 +48,8 @@ import {SearchCustomerComponent, SearchTruckComponent} from '../components';
     AddressAutocompleteComponent,
     DirectionsMapComponent,
     SearchCustomerComponent,
-    SearchTruckComponent
+    SearchTruckComponent,
+    ValidationSummaryComponent,
   ],
   providers: [
     ConfirmationService,
@@ -62,7 +64,6 @@ export class EditLoadComponent implements OnInit {
   public isLoading: boolean;
   public form: FormGroup;
   public selectedTruck: TruckData | null;
-  public selectedCustomer: Customer | null;
   public loadStatuses: EnumValue[];
   public originCoords?: [number, number] | null;
   public destinationCoords?: [number, number] | null;
@@ -77,12 +78,12 @@ export class EditLoadComponent implements OnInit {
     this.accessToken = AppConfig.mapboxToken;
     this.isLoading = false;
     this.selectedTruck = null;
-    this.selectedCustomer = null;
     this.loadStatuses = convertEnumToArray(LoadStatusEnum);
     this.distanceMeters = 0;
 
     this.form = new FormGroup({
       name: new FormControl(''),
+      customer: new FormControl('', Validators.required),
       orgAddress: new FormControl('', Validators.required),
       orgCoords: new FormControl([], Validators.required),
       dstAddress: new FormControl('', Validators.required),
@@ -132,7 +133,7 @@ export class EditLoadComponent implements OnInit {
 
   updateDistance(eventData: RouteChangedEvent) {
     this.distanceMeters = eventData.distance;
-    const distanceMiles = DistanceConverter.metersTo(this.distanceMeters, 'mi');
+    const distanceMiles = Converters.metersTo(this.distanceMeters, 'mi');
     this.form.patchValue({distance: distanceMiles});
   }
 
@@ -155,7 +156,7 @@ export class EditLoadComponent implements OnInit {
       distance: this.distanceMeters,
       assignedDispatcherId: this.form.value.dispatcherId,
       assignedTruckId: this.selectedTruck!.truckId,
-      customerId: this.selectedCustomer!.id,
+      customerId: this.form.value.customer.id,
       status: this.form.value.status,
     };
 
@@ -175,11 +176,6 @@ export class EditLoadComponent implements OnInit {
       return false;
     }
 
-    if (!this.selectedCustomer) {
-      this.toastService.showError('Please select the customer');
-      return false;
-    }
-
     if (!this.form.value.orgAddress) {
       this.toastService.showError('Please select the origin address');
       return false;
@@ -190,7 +186,7 @@ export class EditLoadComponent implements OnInit {
       return false;
     }
 
-    return true;
+    return this.form.valid;
   }
 
   private deleteLoad() {
@@ -217,13 +213,14 @@ export class EditLoadComponent implements OnInit {
 
       this.form.patchValue({
         name: load.name,
+        customer: load.customer,
         orgAddress: load.originAddress,
         orgCoords: [load.originAddressLong, load.originAddressLat],
         dstAddress: load.destinationAddress,
         dstCoords: [load.destinationAddressLong, load.destinationAddressLat],
         dispatchedDate: this.getLocaleDate(load.dispatchedDate),
         deliveryCost: load.deliveryCost,
-        distance: DistanceConverter.metersTo(load.distance, 'mi'),
+        distance: Converters.metersTo(load.distance, 'mi'),
         dispatcherName: load.assignedDispatcherName,
         dispatcherId: load.assignedDispatcherId,
         status: load.status,
@@ -247,3 +244,8 @@ export class EditLoadComponent implements OnInit {
     return '';
   }
 }
+
+// interface EditLoadForm {
+//   name: FormControl<string | null>;
+//   orgAddress: FormControl<string>;
+// }

src/Client/Logistics.OfficeApp/src/app/pages/truck/components/truck-grosses-linechart/truck-grosses-linechart.component.ts

@@ -4,7 +4,7 @@ import {CardModule} from 'primeng/card';
 import {SkeletonModule} from 'primeng/skeleton';
 import {ChartModule} from 'primeng/chart';
 import {DailyGrosses} from '@core/models';
-import {DateUtils, DistanceConverter} from '@shared/utils';
+import {DateUtils, Converters} from '@shared/utils';
 import {ApiService} from '@core/services';
 import {RangeCalendarComponent} from '@shared/components';
 
@@ -25,8 +25,8 @@ import {RangeCalendarComponent} from '@shared/components';
 export class TruckGrossesLinechartComponent implements OnInit {
   public isLoading: boolean;
   public dailyGrosses?: DailyGrosses;
-  public chartData: any;
-  public chartOptions: any;
+  public chartData: unknown;
+  public chartOptions: unknown;
   public startDate: Date;
   public endDate: Date;
 
@@ -67,7 +67,7 @@ export class TruckGrossesLinechartComponent implements OnInit {
     this.apiService.getDailyGrosses(this.startDate, this.endDate, this.truckId).subscribe((result) => {
       if (result.isSuccess && result.data) {
         this.dailyGrosses = result.data;
-        const rpm = this.dailyGrosses.totalGross / DistanceConverter.metersTo(this.dailyGrosses.totalDistance, 'mi');
+        const rpm = this.dailyGrosses.totalGross / Converters.metersTo(this.dailyGrosses.totalDistance, 'mi');
 
         this.drawChart(this.dailyGrosses);
         this.chartDrawn.emit({dailyGrosses: this.dailyGrosses, rpm: rpm});

src/Client/Logistics.OfficeApp/src/app/shared/components/address-autocomplete/address-autocomplete.component.html

@@ -4,15 +4,15 @@
     [name]="field" 
     class="form-control" 
     [placeholder]="placeholder" 
-    (input)="onAddressInputChange($event)"
-    (focusout)="onInputFocusOut($event)"
-    [(ngModel)]="address" />
+    (input)="handleAddressInputChange($event)"
+    (focusout)="handleInputFocusOut($event)"
+    [(ngModel)]="addressString" />
 
   @if (searchResults.length) {
     <div class="popup">
       @for (result of searchResults; track result.id) {
         <div class="popup-item" 
-          (click)="onClickAddress(result.place_name, result.center)"
+          (click)="handleClickAddress(result)"
           role="presentation">
           {{result.place_name}}
         </div>