fix: ORV2-1823 - Fix vehicle selection bug and refactor vehicle type/…

…subtype variable naming (#1081)
bcgov · Jan 12, 2024 · 89924f9 · 89924f9
1 parent feeac46
commit 89924f9
Show file tree

Hide file tree

Showing 49 changed files with 780 additions and 462 deletions.
diff --git a/frontend/src/common/components/form/CustomFormComponents.tsx b/frontend/src/common/components/form/CustomFormComponents.tsx
@@ -118,6 +118,8 @@ export const CustomFormComponent = <T extends ORBC_FormTypes>({
             name={name}
             rules={rules}
             menuOptions={menuOptions}
+            disabled={disabled}
+            readOnly={readOnly}
           />
         );
       case "phone":

diff --git a/frontend/src/common/components/form/subFormComponents/CustomSelect.scss b/frontend/src/common/components/form/subFormComponents/CustomSelect.scss
@@ -0,0 +1,22 @@
+@import "../../../../themes/orbcStyles";
+
+.custom-select {
+  &#{&}--disabled {
+    .custom-select {
+      &__input-container {
+        z-index: 1;
+        color: $bc-black;
+        -webkit-text-fill-color: $bc-black;
+      }
+    }
+
+    svg {
+      z-index: 1;
+    }
+
+    fieldset {
+      background-color: $bc-background-light-grey;
+      border: 2px solid $bc-text-box-border-grey;
+    }
+  }
+}
diff --git a/frontend/src/common/components/form/subFormComponents/CustomSelect.tsx b/frontend/src/common/components/form/subFormComponents/CustomSelect.tsx
@@ -5,6 +5,8 @@ import {
   RegisterOptions,
   useFormContext,
 } from "react-hook-form";
+
+import "./CustomSelect.scss";
 import { ORBC_FormTypes } from "../../../types/common";
 import { SELECT_FIELD_STYLE } from "../../../../themes/orbcStyles";
 import { CustomSelectDisplayProps } from "../../../types/formElements";
@@ -17,6 +19,8 @@ interface CustomSelectProps<T extends FieldValues> {
   name: FieldPath<T>;
   rules: RegisterOptions;
   menuOptions?: JSX.Element[];
+  disabled?: boolean;
+  readOnly?: boolean;
 }
 
 /**
@@ -28,6 +32,8 @@ export const CustomSelect = <T extends ORBC_FormTypes>({
   name,
   rules,
   menuOptions,
+  disabled,
+  readOnly,
 }: CustomSelectProps<T>): JSX.Element => {
   const {
     register,
@@ -40,6 +46,9 @@ export const CustomSelect = <T extends ORBC_FormTypes>({
   return (
     <Select
       aria-labelledby={`${feature}-${name}-label`}
+      className={`custom-select ${disabled ? "custom-select--disabled" : ""}`}
+      disabled={disabled}
+      readOnly={readOnly}
       inputProps={{
         "aria-label": name,
       }}
@@ -61,6 +70,7 @@ export const CustomSelect = <T extends ORBC_FormTypes>({
       SelectDisplayProps={
         {
           "data-testid": `select-${name}`,
+          className: "custom-select__input-container",
         } as CustomSelectDisplayProps
       }
     >

diff --git a/frontend/src/common/types/common.ts b/frontend/src/common/types/common.ts
@@ -11,7 +11,7 @@ import {
 import {
   PowerUnit,
   Trailer,
-} from "../../features/manageVehicles/types/managevehicles";
+} from "../../features/manageVehicles/types/Vehicle";
 
 export interface ApiErrorResponse {
   status: number;

diff --git a/frontend/src/features/manageVehicles/apiManager/hooks.ts b/frontend/src/features/manageVehicles/apiManager/hooks.ts
@@ -1,18 +1,18 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 
-import { Vehicle, VehicleTypesAsString } from "../types/managevehicles";
+import { BaseVehicle, VehicleType } from "../types/Vehicle";
+import { Nullable } from "../../../common/types/common";
 import {
   addPowerUnit,
   addTrailer,
   getAllVehicles,
-  getPowerUnitTypes,
-  getTrailerTypes,
+  getPowerUnitSubTypes,
+  getTrailerSubTypes,
   getVehicleById,
   updatePowerUnit,
   updateTrailer,
 } from "./vehiclesAPI";
-import { Nullable } from "../../../common/types/common";
 
 /**
  * Fetches all vehicles.
@@ -29,10 +29,10 @@ export const useVehiclesQuery = (companyId: string) => {
 
 export const useVehicleByIdQuery = (
   companyId: string,
-  vehicleType: VehicleTypesAsString,
+  vehicleType: VehicleType,
   vehicleId?: string,
 ) => {
-  const [vehicle, setVehicle] = useState<Nullable<Vehicle>>();
+  const [vehicle, setVehicle] = useState<Nullable<BaseVehicle>>();
 
   const query = useQuery({
     queryKey: ["vehicle", "vehicleId", "vehicleType"],
@@ -53,13 +53,13 @@ export const useVehicleByIdQuery = (
 };
 
 /**
- * Fetches a list of vehicle subtypes for PowerUnit vehicles.
- * @returns List of vehicle subtypes for PowerUnit vehicles
+ * Fetches a list of vehicle subtypes for Power Unit vehicles.
+ * @returns List of vehicle subtypes for Power Unit vehicles
  */
-export const usePowerUnitTypesQuery = () => {
+export const usePowerUnitSubTypesQuery = () => {
   return useQuery({
-    queryKey: ["powerUnitTypes"],
-    queryFn: getPowerUnitTypes,
+    queryKey: ["powerUnitSubTypes"],
+    queryFn: getPowerUnitSubTypes,
     retry: false,
     refetchOnWindowFocus: false, // prevents unnecessary queries
   });
@@ -105,12 +105,12 @@ export const useUpdatePowerUnitMutation = () => {
 
 /**
  * Fetches a list of vehicle subtypes for trailer vehicles.
- * @returns list of vehicle subtypes for trailer vehicles
+ * @returns List of vehicle subtypes for trailer vehicles.
  */
-export const useTrailerTypesQuery = () => {
+export const useTrailerSubTypesQuery = () => {
   return useQuery({
-    queryKey: ["trailerTypes"],
-    queryFn: getTrailerTypes,
+    queryKey: ["trailerSubTypes"],
+    queryFn: getTrailerSubTypes,
     retry: false,
     refetchOnWindowFocus: false, // prevents unnecessary queries
   });

diff --git a/frontend/src/features/manageVehicles/apiManager/vehiclesAPI.tsx b/frontend/src/features/manageVehicles/apiManager/vehiclesAPI.tsx
@@ -1,17 +1,18 @@
 import { VEHICLES_API } from "./endpoints/endpoints";
+import { replaceEmptyValuesWithNull } from "../../../common/helpers/util";
+import { VEHICLES_URL } from "../../../common/apiManager/endpoints/endpoints";
+import { RequiredOrNull } from "../../../common/types/common";
 import {
   PowerUnit,
   UpdatePowerUnit,
-  VehicleType,
+  VehicleSubType,
   Trailer,
   UpdateTrailer,
-  VehicleTypesAsString,
-  Vehicle,
-} from "../types/managevehicles";
+  VehicleType,
+  BaseVehicle,
+  VEHICLE_TYPES,
+} from "../types/Vehicle";
 
-import { replaceEmptyValuesWithNull } from "../../../common/helpers/util";
-import { VEHICLES_URL } from "../../../common/apiManager/endpoints/endpoints";
-import { RequiredOrNull } from "../../../common/types/common";
 import {
   httpPOSTRequest,
   httpPUTRequest,
@@ -30,11 +31,11 @@ export const getAllVehicles = async (
   const trailers = await getAllTrailers(companyId);
 
   powerUnits.forEach((p: PowerUnit) => {
-    p.vehicleType = "powerUnit";
+    p.vehicleType = VEHICLE_TYPES.POWER_UNIT;
   });
 
   trailers.forEach((t: Trailer) => {
-    t.vehicleType = "trailer";
+    t.vehicleType = VEHICLE_TYPES.TRAILER;
   });
 
   const allVehicles: (PowerUnit | Trailer)[] = [...powerUnits, ...trailers];
@@ -68,10 +69,10 @@ export const getPowerUnit = async (
 };
 
 /**
- * Gets the power unit types.
- * @returns Array<PowerUnitType>
+ * Gets the power unit vehicle subtypes.
+ * @returns List of vehicle subtypes for power units.
  */
-export const getPowerUnitTypes = async (): Promise<Array<VehicleType>> => {
+export const getPowerUnitSubTypes = async (): Promise<Array<VehicleSubType>> => {
   const url = new URL(VEHICLES_API.POWER_UNIT_TYPES);
   return httpGETRequest(url.toString()).then((response) => response.data);
 };
@@ -139,13 +140,13 @@ export const getTrailer = async (
  */
 export const getVehicleById = async (
   companyId: string,
-  vehicleType: VehicleTypesAsString,
+  vehicleType: VehicleType,
   vehicleId?: string,
-): Promise<RequiredOrNull<Vehicle>> => {
+): Promise<RequiredOrNull<BaseVehicle>> => {
   if (!vehicleId) return null;
 
   let url = `${VEHICLES_URL}/companies/${companyId}/vehicles`;
-  if (vehicleType === "powerUnit") {
+  if (vehicleType === VEHICLE_TYPES.POWER_UNIT) {
     url += `/powerUnits/${vehicleId}`;
   } else {
     url += `/trailers/${vehicleId}`;
@@ -161,10 +162,10 @@ export const getVehicleById = async (
 };
 
 /**
- * Gets the trailer types.
- * @returns Array<VehicleType>
+ * Gets the trailer vehicle subtypes.
+ * @returns List of vehicle subtypes for trailers.
  */
-export const getTrailerTypes = async (): Promise<Array<VehicleType>> => {
+export const getTrailerSubTypes = async (): Promise<Array<VehicleSubType>> => {
   const url = new URL(VEHICLES_API.TRAILER_TYPES);
   return httpGETRequest(url.toString()).then((response) => response.data);
 };
@@ -207,17 +208,17 @@ export const updateTrailer = async ({
 /**
  * Delete one or more vehicles.
  * @param vehicleIds Array of vehicle ids to be deleted.
- * @param vehicleType The {@link VehicleTypesAsString} to be deleted.
+ * @param vehicleType The type of the vehicle to be deleted.
  * @returns A Promise with the API response.
  */
 export const deleteVehicles = async (
   vehicleIds: Array<string>,
-  vehicleType: VehicleTypesAsString,
+  vehicleType: VehicleType,
   companyId: string,
 ) => {
   let url: RequiredOrNull<string> = null;
   let requestBody: { powerUnits: Array<string> } | { trailers: Array<string> };
-  if (vehicleType === "powerUnit") {
+  if (vehicleType === VEHICLE_TYPES.POWER_UNIT) {
     url = `${VEHICLES_URL}/companies/${companyId}/vehicles/powerUnits/delete-requests`;
     requestBody = { powerUnits: vehicleIds };
   } else {

diff --git a/frontend/src/features/manageVehicles/components/dashboard/AddVehicleButton.tsx b/frontend/src/features/manageVehicles/components/dashboard/AddVehicleButton.tsx
@@ -11,8 +11,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
 import { useNavigate } from "react-router-dom";
 
-import { VEHICLE_TYPES_ENUM } from "../form/constants";
 import { VEHICLES_ROUTES } from "../../../../routes/constants";
+import { VEHICLE_TYPES, VehicleType } from "../../types/Vehicle";
 
 /**
  *
@@ -27,11 +27,11 @@ export const AddVehicleButton = () => {
 
   const options = [
     {
-      vehicleMode: VEHICLE_TYPES_ENUM.POWER_UNIT,
+      vehicleMode: VEHICLE_TYPES.POWER_UNIT,
       labelValue: "Power Unit",
     },
     {
-      vehicleMode: VEHICLE_TYPES_ENUM.TRAILER,
+      vehicleMode: VEHICLE_TYPES.TRAILER,
       labelValue: "Trailer",
     },
   ];
@@ -52,11 +52,11 @@ export const AddVehicleButton = () => {
   const handleMenuItemClick = (
     _event: React.MouseEvent<HTMLLIElement, MouseEvent>,
     _index: number,
-    vehicleMode: VEHICLE_TYPES_ENUM,
+    vehicleMode: VehicleType,
   ) => {
-    if (vehicleMode === VEHICLE_TYPES_ENUM.POWER_UNIT) {
+    if (vehicleMode === VEHICLE_TYPES.POWER_UNIT) {
       navigate(VEHICLES_ROUTES.ADD_POWER_UNIT);
-    } else if (vehicleMode === VEHICLE_TYPES_ENUM.TRAILER) {
+    } else if (vehicleMode === VEHICLE_TYPES.TRAILER) {
       navigate(VEHICLES_ROUTES.ADD_TRAILER);
     }
 

diff --git a/frontend/src/features/manageVehicles/components/dashboard/AddVehicleDashboard.tsx b/frontend/src/features/manageVehicles/components/dashboard/AddVehicleDashboard.tsx
@@ -9,18 +9,18 @@ import { Banner } from "../../../../common/components/dashboard/Banner";
 import { InfoBcGovBanner } from "../../../../common/components/banners/InfoBcGovBanner";
 import { getCompanyIdFromSession } from "../../../../common/apiManager/httpRequestHandler";
 import { getDefaultRequiredVal } from "../../../../common/helpers/util";
-import { VEHICLE_TYPES_ENUM } from "../form/constants";
 import { PowerUnitForm } from "../form/PowerUnitForm";
 import { TrailerForm } from "../form/TrailerForm";
 import { VEHICLES_ROUTES } from "../../../../routes/constants";
 import { BANNER_MESSAGES } from "../../../../common/constants/bannerMessages";
+import { VEHICLE_TYPES, VehicleType } from "../../types/Vehicle";
 
 export const AddVehicleDashboard = React.memo(
-  ({ addVehicleMode }: { addVehicleMode: VEHICLE_TYPES_ENUM }) => {
+  ({ addVehicleMode }: { addVehicleMode: VehicleType }) => {
     const navigate = useNavigate();
 
     const backToVehicleInventory = () => {
-      if (addVehicleMode === VEHICLE_TYPES_ENUM.TRAILER) {
+      if (addVehicleMode === VEHICLE_TYPES.TRAILER) {
         navigate(VEHICLES_ROUTES.TRAILER_TAB);
       } else {
         navigate(VEHICLES_ROUTES.MANAGE);
@@ -32,10 +32,10 @@ export const AddVehicleDashboard = React.memo(
     return (
       <div className="dashboard-page">
         <Box className="dashboard-page__banner layout-box">
-          {addVehicleMode === VEHICLE_TYPES_ENUM.POWER_UNIT && (
+          {addVehicleMode === VEHICLE_TYPES.POWER_UNIT && (
             <Banner bannerText="Add Power Unit" />
           )}
-          {addVehicleMode === VEHICLE_TYPES_ENUM.TRAILER && (
+          {addVehicleMode === VEHICLE_TYPES.TRAILER && (
             <Banner bannerText="Add Trailer" />
           )}
         </Box>
@@ -54,16 +54,16 @@ export const AddVehicleDashboard = React.memo(
             className="breadcrumb-link breadcrumb-link--parent"
             onClick={backToVehicleInventory}
           >
-            {addVehicleMode === VEHICLE_TYPES_ENUM.POWER_UNIT && "Power Unit"}
-            {addVehicleMode === VEHICLE_TYPES_ENUM.TRAILER && "Trailer"}
+            {addVehicleMode === VEHICLE_TYPES.POWER_UNIT && "Power Unit"}
+            {addVehicleMode === VEHICLE_TYPES.TRAILER && "Trailer"}
           </Typography>
 
           <FontAwesomeIcon className="breadcrumb-icon" icon={faChevronRight} />
 
           <Typography>
-            {addVehicleMode === VEHICLE_TYPES_ENUM.POWER_UNIT &&
+            {addVehicleMode === VEHICLE_TYPES.POWER_UNIT &&
               "Add Power Unit"}
-            {addVehicleMode === VEHICLE_TYPES_ENUM.TRAILER && "Add Trailer"}
+            {addVehicleMode === VEHICLE_TYPES.TRAILER && "Add Trailer"}
           </Typography>
         </Box>
 
@@ -73,14 +73,14 @@ export const AddVehicleDashboard = React.memo(
 
         <Box className="dashboard-page__form layout-box">
           <Typography variant={"h2"}>
-            {addVehicleMode === VEHICLE_TYPES_ENUM.POWER_UNIT &&
+            {addVehicleMode === VEHICLE_TYPES.POWER_UNIT &&
               "Power Unit Details"}
-            {addVehicleMode === VEHICLE_TYPES_ENUM.TRAILER && "Trailer Details"}
+            {addVehicleMode === VEHICLE_TYPES.TRAILER && "Trailer Details"}
           </Typography>
-          {addVehicleMode === VEHICLE_TYPES_ENUM.POWER_UNIT && (
+          {addVehicleMode === VEHICLE_TYPES.POWER_UNIT && (
             <PowerUnitForm companyId={companyId} />
           )}
-          {addVehicleMode === VEHICLE_TYPES_ENUM.TRAILER && (
+          {addVehicleMode === VEHICLE_TYPES.TRAILER && (
             <TrailerForm companyId={companyId} />
           )}
         </Box>