added search-customer component

Author: suxrobGM

src/Client/Logistics.OfficeApp/angular.json

@@ -28,13 +28,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles/global.scss",
-              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
-              "node_modules/primeng/resources/primeng.min.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/mapbox-gl/dist/mapbox-gl.css"
+              "node_modules/mapbox-gl/dist/mapbox-gl.css",
+              "src/styles/global.scss"
             ],
             "scripts": [
               "node_modules/chart.js/dist/chart.js"
@@ -109,16 +104,11 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles/global.scss",
-              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
-              "node_modules/primeng/resources/primeng.min.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/mapbox-gl/dist/mapbox-gl.css"
+              "node_modules/mapbox-gl/dist/mapbox-gl.css",
+              "src/styles/global.scss"
             ],
             "scripts": [
-              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+              "node_modules/chart.js/dist/chart.js"
             ]
           }
         },

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

@@ -10,4 +10,5 @@ export interface CreateLoad {
   distance: number;
   assignedDispatcherId: string;
   assignedTruckId: string;
+  customerId: string;
 }

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

@@ -13,5 +13,6 @@ export interface UpdateLoad {
   distance: number;
   assignedDispatcherId: string;
   assignedTruckId: string;
+  customerId?: string;
   status?: LoadStatus;
 }

src/Client/Logistics.OfficeApp/src/app/core/services/api.service.ts

@@ -323,6 +323,7 @@ export class ApiService {
     return `search=${search}&orderBy=${orderBy}&page=${page}&pageSize=${pageSize}`;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private handleError(responseData: any): Observable<any> {
     const errorMessage = responseData.error?.error ?? responseData.error;
 

src/Client/Logistics.OfficeApp/src/app/pages/dashboard/components/truck-stats-table/truck-stats-table.component.html

@@ -67,7 +67,7 @@ <h4 class="ps-3 py-2">Truck statistics for
             <button pButton 
               class="p-button-raised"
               label="View details"
-              [routerLink]="['/truck/details', truckStats.truckId]">
+              [routerLink]="['/trucks/details', truckStats.truckId]">
             </button>
             <button pButton 
               class="p-button-raised ms-2"

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

@@ -6,12 +6,16 @@ <h1>Add a new load</h1>
 <p-card>
   <div class="row">
     <div class="col-12 col-md-6">
-      <p-progressSpinner *ngIf="isBusy"></p-progressSpinner>
-      <form [formGroup]="form" (ngSubmit)="submit()">
+      <p-progressSpinner *ngIf="isLoading"></p-progressSpinner>
+      <form [formGroup]="form" (ngSubmit)="createLoad()">
         <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>
+        </div>
         <div class="mb-3">
           <label for="orgAddress" class="form-label">Origin Address</label>
           <app-address-autocomplete field="orgAddress"
@@ -52,17 +56,14 @@ <h1>Add a new load</h1>
         </div>
         <div class="mb-3">
           <label for="assignedTruck" class="form-label">Assigned Truck</label>
-          <p-autoComplete formControlName="assignedTruck" styleClass="w-100" inputStyleClass="form-control"
-            placeholder="Type a driver name or truck number" field="driversName" [minLength]="2" [suggestions]="suggestedDrivers"
-            (completeMethod)="searchTruck($event)">
-          </p-autoComplete>
+          <app-search-truck [(selectedTruck)]="selectedTruck"></app-search-truck>
         </div>
         <div>
           <button pButton 
             type="submit"
             class="p-button-raised mt-3"
             icon="bi bi-pencil-square"
-            [disabled]="isBusy">
+            [disabled]="isLoading">
             Add
           </button>
           <button pButton 

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import {Component, OnInit, ViewEncapsulation} from '@angular/core';
 import {NgIf} from '@angular/common';
 import {FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
@@ -11,7 +12,7 @@ import {ProgressSpinnerModule} from 'primeng/progressspinner';
 import {AppConfig} from '@configs';
 import {AuthService} from '@core/auth';
 import {LoadStatus} from '@core/enums';
-import {CreateLoad} from '@core/models';
+import {CreateLoad, Customer} from '@core/models';
 import {ApiService, ToastService} from '@core/services';
 import {DistanceConverter} from '@shared/utils';
 import {
@@ -20,7 +21,7 @@ import {
   RouteChangedEvent,
   SelectedAddressEvent,
 } from '@shared/components';
-import {TruckData, TruckHelper} from '../shared';
+import {SearchCustomerComponent, SearchTruckComponent, TruckData} from '../components';
 
 
 @Component({
@@ -42,27 +43,33 @@ import {TruckData, TruckHelper} from '../shared';
     RouterLink,
     AddressAutocompleteComponent,
     DirectionsMapComponent,
+    SearchCustomerComponent,
+    SearchTruckComponent,
   ],
 })
 export class AddLoadComponent implements OnInit {
   public readonly accessToken: string;
   private distanceMeters: number;
 
-  public isBusy: boolean;
+  public isLoading: boolean;
   public form: FormGroup;
-  public suggestedDrivers: TruckData[];
+  public selectedTruck: TruckData | null;
+  public selectedCustomer: Customer | null;
+  public suggestedCustomers: Customer[];
   public originCoords?: [number, number] | null;
   public destinationCoords?: [number, number] | null;
 
   constructor(
-    private authService: AuthService,
-    private apiService: ApiService,
-    private toastService: ToastService,
-    private router: Router)
+    private readonly authService: AuthService,
+    private readonly apiService: ApiService,
+    private readonly toastService: ToastService,
+    private readonly router: Router)
   {
     this.accessToken = AppConfig.mapboxToken;
-    this.isBusy = false;
-    this.suggestedDrivers = [];
+    this.isLoading = false;
+    this.selectedTruck = null;
+    this.selectedCustomer = null;
+    this.suggestedCustomers = [];
     this.distanceMeters = 0;
 
     this.form = new FormGroup({
@@ -76,7 +83,6 @@ export class AddLoadComponent implements OnInit {
       distance: new FormControl(0, Validators.required),
       dispatcherName: new FormControl('', Validators.required),
       dispatcherId: new FormControl('', Validators.required),
-      assignedTruck: new FormControl('', Validators.required),
       status: new FormControl(LoadStatus.Dispatched, Validators.required),
     });
   }
@@ -85,21 +91,6 @@ export class AddLoadComponent implements OnInit {
     this.fetchCurrentDispatcher();
   }
 
-  searchTruck(event: any) {
-    TruckHelper.findTruckDrivers(this.apiService, event.query).subscribe((drivers) => this.suggestedDrivers = drivers);
-  }
-
-  submit() {
-    const assignedTruck = this.form.value.assignedTruck;
-
-    if (!assignedTruck) {
-      this.toastService.showError('Select a truck');
-      return;
-    }
-
-    this.createLoad();
-  }
-
   updateOrigin(eventData: SelectedAddressEvent) {
     this.originCoords = eventData.center;
     this.form.patchValue({
@@ -120,9 +111,12 @@ export class AddLoadComponent implements OnInit {
     this.form.patchValue({distance: distanceMiles});
   }
 
-  private createLoad() {
-    this.isBusy = true;
+  createLoad() {
+    if (!this.isValid()) {
+      return;
+    }
 
+    this.isLoading = true;
     const command: CreateLoad = {
       name: this.form.value.name,
       originAddress: this.form.value.orgAddress,
@@ -134,18 +128,44 @@ export class AddLoadComponent implements OnInit {
       deliveryCost: this.form.value.deliveryCost,
       distance: this.distanceMeters,
       assignedDispatcherId: this.form.value.dispatcherId,
-      assignedTruckId: this.form.value.assignedTruck.truckId,
+      assignedTruckId: this.selectedTruck!.truckId,
+      customerId: this.form.value.customer.id
     };
+    
 
     this.apiService.createLoad(command)
-        .subscribe((result) => {
-          if (result.isSuccess) {
-            this.toastService.showSuccess('A new load has been created successfully');
-            this.router.navigateByUrl('/load/list');
-          }
-
-          this.isBusy = false;
-        });
+      .subscribe((result) => {
+        if (result.isSuccess) {
+          this.toastService.showSuccess('A new load has been created successfully');
+          this.router.navigateByUrl('/loads');
+        }
+
+        this.isLoading = false;
+      });
+  }
+
+  private isValid(): boolean {
+    if (!this.selectedTruck) {
+      this.toastService.showError('Please select the truck');
+      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;
+    }
+
+    if (!this.form.value.dstAddress) {
+      this.toastService.showError('Please select the destination address');
+      return false;
+    }
+
+    return true;
   }
 
   private fetchCurrentDispatcher() {

src/Client/Logistics.OfficeApp/src/app/pages/load/components/index.ts

@@ -0,0 +1,2 @@
+export * from './search-customer/search-customer.component';
+export * from './search-truck/search-truck.component';

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

@@ -0,0 +1,16 @@
+<p-autoComplete #autoCompleteInput 
+  [suggestions]="suggestedCustomers"
+  styleClass="w-100" inputStyleClass="form-control"
+  (completeMethod)="searchCustomer($event)"
+  [minLength]="2"
+  [forceSelection]="true"
+  field="name"
+  (onSelect)="changeSelectedCustomer">
+</p-autoComplete>
+
+<!-- <p-overlayPanel #emptyResultsPanel [showCloseIcon]="true" [appendTo]="autoCompleteInput">
+  <div>
+    No results found. Would you like to add a new customer with name "<span>{{searchQuery}}</span>" ?
+    <button pButton class="p-button-text" (click)="addCustomer()">Add</button>
+  </div>
+</p-overlayPanel> -->

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

@@ -0,0 +1,38 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {AutoCompleteModule} from 'primeng/autocomplete';
+import {ApiService} from '@core/services';
+import {Customer} from '@core/models';
+
+
+@Component({
+  selector: 'app-search-customer',
+  standalone: true,
+  templateUrl: './search-customer.component.html',
+  styleUrls: [],
+  imports: [
+    CommonModule,
+    AutoCompleteModule,
+  ],
+})
+export class SearchCustomerComponent {
+  public suggestedCustomers: Customer[] = [];
+
+  @Input() selectedCustomer: Customer | null = null;
+  @Output() selectedCustomerChange = new EventEmitter<Customer>();
+
+  constructor(private readonly apiService: ApiService){
+  }
+
+  searchCustomer(event: {query: string}) {
+    this.apiService.getCustomers({search: event.query}).subscribe((result) => {
+      if (result.data && result.data.length) {
+        this.suggestedCustomers = result.data;
+      }
+    });
+  }
+
+  changeSelectedCustomer(event: Customer) {
+    this.selectedCustomerChange.emit(event);
+  }
+}

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

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

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

@@ -0,0 +1,49 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {AutoCompleteModule} from 'primeng/autocomplete';
+import {ApiService} from '@core/services';
+import {TruckHelper} from '@pages/load/shared';
+
+
+@Component({
+  selector: 'app-search-truck',
+  standalone: true,
+  templateUrl: './search-truck.component.html',
+  styleUrls: [],
+  imports: [
+    CommonModule,
+    AutoCompleteModule,
+    FormsModule,
+  ],
+})
+export class SearchTruckComponent {
+  public suggestedTrucks: TruckData[] = [];
+  @Input() selectedTruck: TruckData | null = null;
+  @Output() selectedTruckChange = new EventEmitter<TruckData>();
+
+  constructor(private readonly apiService: ApiService) {
+  }
+
+  searchTruck(event: {query: string}) {
+    this.apiService.getTruckDrivers({search: event.query}).subscribe((result) => {
+      if (!result.data) {
+        return;
+      }
+
+      this.suggestedTrucks = result.data.map((truckDriver) => ({
+        truckId: truckDriver.truck.id,
+        driversName: TruckHelper.formatDriversName(truckDriver.truck.truckNumber, truckDriver.drivers.map((i) => i.fullName)),
+      }));
+    });
+  }
+
+  changeSelectedTruck(event: TruckData) {
+    this.selectedTruckChange.emit(event);
+  }
+}
+
+export interface TruckData {
+  driversName: string,
+  truckId: string;
+}