Merge remote-tracking branch 'refs/remotes/origin/ORV2-3259' into ORV…

…2-3259
bcgov · Jan 24, 2025 · d2181ea · d2181ea
2 parents 2cd4654 + dbc5bc5
commit d2181ea
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 30 deletions.
diff --git a/frontend/src/common/components/form/subFormComponents/NumberInput.tsx b/frontend/src/common/components/form/subFormComponents/NumberInput.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   OutlinedInput,
   OutlinedInputProps,
@@ -50,14 +50,23 @@ export const NumberInput = (props: NumberInputProps) => {
 
   const { maskFn, onChange, onBlur, ...inputProps } = props.inputProps;
   const inputSlotProps = inputProps.slotProps?.input;
+  const inputValue = inputProps.value;
   const initialValueDisplay = applyWhenNotNullable(
     (num) => (maskFn ? maskFn(num) : `${num}`),
-    inputProps.value,
+    inputValue,
     "",
   );
 
   const [valueDisplay, setValueDisplay] = useState<string>(initialValueDisplay);
 
+  useEffect(() => {
+    setValueDisplay(applyWhenNotNullable(
+      (num) => (maskFn ? maskFn(num) : `${num}`),
+      inputValue,
+      "",
+    ));
+  }, [inputValue]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const updatedVal = e.target.value;
 

diff --git a/...end/src/features/bridgeFormulaCalculationTool/components/BridgeFormulaCalculationTool.tsx b/...end/src/features/bridgeFormulaCalculationTool/components/BridgeFormulaCalculationTool.tsx
@@ -1,15 +1,14 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useState } from "react";
+import { Button, IconButton, Tooltip } from "@mui/material";
+import { faMinus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
+
 import "./BridgeFormulaCalculationTool.scss";
 import { NumberInput } from "../../../common/components/form/subFormComponents/NumberInput";
 import { RequiredOrNull } from "../../../common/types/common";
 import { getDefaultRequiredVal } from "../../../common/helpers/util";
 import { convertToNumberIfValid } from "../../../common/helpers/numeric/convertToNumberIfValid";
-import { requiredMessage } from "../../../common/helpers/validationMessages";
-import { useEffect, useState } from "react";
-import { Button, IconButton, Tooltip } from "@mui/material";
-import { faMinus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { RemoveAxleUnitModal } from "./RemoveAxleUnitModal";
 
 interface AxleUnit {
@@ -22,17 +21,7 @@ interface AxleUnit {
 }
 
 export const BridgeFormulaCalculationTool = () => {
-  const {
-    control,
-    register,
-    handleSubmit,
-    watch,
-    getValues,
-    setValue,
-    formState,
-    resetField,
-    reset,
-  } = useForm<{
+  const { control, handleSubmit, watch, setValue, reset } = useForm<{
     axleUnits: AxleUnit[];
   }>({
     defaultValues: {
@@ -59,6 +48,8 @@ export const BridgeFormulaCalculationTool = () => {
     name: "axleUnits",
   });
 
+  const axleUnits = watch("axleUnits");
+
   const handleAddAxleUnit = () => {
     append({
       interaxleSpacing: null,
@@ -153,6 +144,9 @@ export const BridgeFormulaCalculationTool = () => {
               <td className="row__label">Number of Axles</td>
               {fields.map((field, index) => {
                 const fieldName = `axleUnits.${index}.numberOfAxles` as const;
+                const axleSpreadFieldName =
+                  `axleUnits.${index}.axleSpread` as const;
+                const numberOfAxles = axleUnits[index].numberOfAxles;
                 return (
                   <td key={field.id} className="table__cell">
                     {index % 2 === 0 && (
@@ -168,15 +162,19 @@ export const BridgeFormulaCalculationTool = () => {
                             classes={{ root: "table__input-container" }}
                             inputProps={{
                               className: "table__input",
-                              value: watch(fieldName) as number,
+                              value: getDefaultRequiredVal(null, numberOfAxles),
                               onBlur: ({ target: { value } }) => {
-                                setValue(
-                                  fieldName,
+                                const updatedNumberOfAxles =
                                   getDefaultRequiredVal(
                                     null,
                                     convertToNumberIfValid(value, null),
-                                  ),
-                                );
+                                  );
+
+                                setValue(fieldName, updatedNumberOfAxles);
+
+                                if (updatedNumberOfAxles === 1) {
+                                  setValue(axleSpreadFieldName, null);
+                                }
                               },
                               maskFn: (numericVal) => numericVal.toFixed(0),
                               error: invalid,
@@ -193,10 +191,9 @@ export const BridgeFormulaCalculationTool = () => {
               <td className="row__label">Axle Spread (m)</td>
               {fields.map((field, index) => {
                 const fieldName = `axleUnits.${index}.axleSpread` as const;
-                const numberOfAxles = watch(`axleUnits.${index}.numberOfAxles`);
+                const axleSpread = axleUnits[index].axleSpread;
+                const numberOfAxles = axleUnits[index].numberOfAxles;
                 const disabled = numberOfAxles === 1;
-                // TODO set axleSpread value to null when disabled is true
-                // disabled && setValue(fieldName, null);
                 return (
                   <td key={field.id} className="table__cell">
                     {index % 2 === 0 && (
@@ -215,7 +212,7 @@ export const BridgeFormulaCalculationTool = () => {
                         render={({ fieldState: { invalid } }) => (
                           <NumberInput
                             inputProps={{
-                              value: watch(fieldName) as number,
+                              value: getDefaultRequiredVal(null, axleSpread),
                               onBlur: ({ target: { value } }) =>
                                 setValue(
                                   fieldName,
@@ -226,6 +223,7 @@ export const BridgeFormulaCalculationTool = () => {
                                 ),
                               maskFn: (numericVal) => numericVal.toFixed(2),
                               error: invalid,
+                              readOnly: disabled,
                               disabled,
                             }}
                           />
@@ -241,6 +239,7 @@ export const BridgeFormulaCalculationTool = () => {
               {fields.map((field, index) => {
                 const fieldName =
                   `axleUnits.${index}.interaxleSpacing` as const;
+                const interaxleSpacing = axleUnits[index].interaxleSpacing;
                 return (
                   <td key={field.id} className="table__cell">
                     {index % 2 !== 0 && (
@@ -254,7 +253,10 @@ export const BridgeFormulaCalculationTool = () => {
                         render={({ fieldState: { invalid } }) => (
                           <NumberInput
                             inputProps={{
-                              value: watch(fieldName) as number,
+                              value: getDefaultRequiredVal(
+                                null,
+                                interaxleSpacing,
+                              ),
                               onBlur: ({ target: { value } }) =>
                                 setValue(
                                   fieldName,
@@ -278,6 +280,7 @@ export const BridgeFormulaCalculationTool = () => {
               <td className="row__label">Axle Unit Weight (kg)</td>
               {fields.map((field, index) => {
                 const fieldName = `axleUnits.${index}.axleUnitWeight` as const;
+                const axleUnitWeight = axleUnits[index].axleUnitWeight;
                 return (
                   <td key={field.id} className="table__cell">
                     {index % 2 === 0 && (
@@ -291,7 +294,10 @@ export const BridgeFormulaCalculationTool = () => {
                         render={({ fieldState: { invalid } }) => (
                           <NumberInput
                             inputProps={{
-                              value: watch(fieldName) as number,
+                              value: getDefaultRequiredVal(
+                                null,
+                                axleUnitWeight,
+                              ),
                               onBlur: ({ target: { value } }) =>
                                 setValue(
                                   fieldName,