chore: Bb 317 update loading nmp files in bb (#319)

* add some placeholder arrays to facilitate BB-NMP conversion * Update Nutrients access address * Fix conditional rendering It was removed for the transition animation but it render the bool array before fields was populated * Update function to use correct path for saving fertilizers * Update CalcNut initialValues type to include FieldName * Should have been stashed for the upcoming next button fix * Added some null checks to avoid crashes * Cleanup * Fixed lost loaded data on refresh * Added a hifen to exported nmp file names * Hardcoded all dry ferts from nmp into bb This should be done using the backend, but will sufice for now Its modular enough that it should be easy to just fetch this data when moving it to the db * Lint * Fixed missing custom values * Add getFertOption utiliy * LiquidFert label is loaded :)
bcgov · Aug 3, 2024 · 96f0164 · 96f0164
1 parent 11792ba
commit 96f0164
Show file tree

Hide file tree

Showing 18 changed files with 348 additions and 134 deletions.
diff --git a/frontend/src/Commons/Forms/FormModule/FormModule.tsx b/frontend/src/Commons/Forms/FormModule/FormModule.tsx
@@ -55,16 +55,18 @@ const FormModule: FC<FormModuleProps> = ({
         inputModule={InputModule}
         handleFormState={handleFormState}
       />
-      <StyledFormContent isVisible={InputModule.enable}>
-        <InputModuleComponent
-          fertilizersDetails={fertilizersDetails || []}
-          updateFarmDetails={updateFarmDetails}
-          updateFertDetails={updateFertDetails}
-          farmDetails={farmDetails}
-          toggleEnabled={toggleEnabled}
-          handleFormState={handleFormState}
-        />
-      </StyledFormContent>
+      {InputModule.enable && (
+        <StyledFormContent isVisible={InputModule.enable}>
+          <InputModuleComponent
+            fertilizersDetails={fertilizersDetails || []}
+            updateFarmDetails={updateFarmDetails}
+            updateFertDetails={updateFertDetails}
+            farmDetails={farmDetails}
+            toggleEnabled={toggleEnabled}
+            handleFormState={handleFormState}
+          />
+        </StyledFormContent>
+      )}
     </StyledFormContainer>
   );
 };

diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.styles.ts b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.styles.ts
@@ -38,6 +38,7 @@ const StyledRightView = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   h3 {
     font: ${tokens.typographyBoldSmallBody};
   }

diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx
@@ -27,6 +27,7 @@ import {
 } from '@Constants/FertilizersOptions';
 import CustomField from '@Commons/Input/Field/CustomField';
 import FieldDetailInterface from '@Interface/FieldDetailsInterface';
+import getFertilizerOption from '@Utils/getFertID';
 import {
   StyledFieldContainer,
   StyledFieldSelect,
@@ -54,6 +55,11 @@ const initialBalance: MainBalanceInterface[] = [
   },
 ];
 
+interface FormValues extends FertilizerInterface {
+  FieldName: string;
+}
+const initialValues: FormValues = initialFarmDetails.Fields[0].Nutrients[0];
+
 const CalculateNutrientsComponent: FC<InputModuleProps> = ({
   farmDetails,
   fertilizersDetails,
@@ -67,15 +73,14 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
   const [fertBalance, setFertBalance] = useState<AgronomicBalanceInterface>(
     initialBalance[0].agronomic,
   );
-  const initialValues: FertilizerInterface = initialFarmDetails.Fields[0].Nutrients[0];
   const fieldsOption: OptionInterface[] = farmDetails.Fields.map((field) => ({
     value: field.FieldName,
     label: field.FieldName,
   }));
 
   const fertilizerOption: OptionInterface[] = fertilizersDetails.map((fertilizer) => ({
     value: fertilizer.fertilizerId,
-    label: fertilizer.fertilizerId,
+    label: getFertilizerOption(fertilizer.fertilizerId)?.label ?? fertilizer.fertilizerId,
   }));
 
   const isLiquid = fertilizersDetails[selectedIndex]?.fertilizerTypeId.includes('Liquid');
@@ -124,8 +129,8 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
       let fertP = 0;
       let fertK = 0;
 
-      if (field.Nutrients.length > 0) {
-        field.Nutrients.forEach((fertilizer) => {
+      if (field.Nutrients?.nutrientFertilizers?.length > 0) {
+        field.Nutrients.nutrientFertilizers.forEach((fertilizer) => {
           fertN += fertilizer.fertN;
           fertP += fertilizer.fertP2o5;
           fertK += fertilizer.fertK2o;
@@ -160,10 +165,16 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFieldIndex, farmDetails]);
 
-  const submitCalculationData = (values: FertilizerInterface): void => {
+  const submitCalculationData = (values: FertilizerInterface & { FieldName: string }): void => {
     setTimeout(() => {
+      // Destructure to exclude FieldName
+      // I want to remove FieldName from values, which is needed in initialValues
+      // for form validation
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { FieldName, ...fertValues } = values;
+
       const newFertilizer: FertilizerInterface = {
-        ...values,
+        ...fertValues,
         id: fertilizersDetails[selectedIndex].id,
         fertilizerTypeId: fertilizersDetails[selectedIndex].fertilizerTypeId,
         fertilizerId: fertilizersDetails[selectedIndex].fertilizerId,
@@ -176,10 +187,16 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
       };
 
       const newFarmDetails = { ...farmDetails };
-      newFarmDetails.Fields[selectedFieldIndex].Nutrients.push(newFertilizer);
 
-      calcFieldBalances(farmDetails.Fields[selectedFieldIndex]);
-      updateFarmDetails(farmDetails);
+      // Check is ferts array is null and initilize it if it is
+      const emptyFertsArr: FertilizerInterface[] = [];
+      newFarmDetails.Fields[selectedFieldIndex].Nutrients.nutrientFertilizers =
+        newFarmDetails.Fields[selectedFieldIndex].Nutrients?.nutrientFertilizers ?? emptyFertsArr;
+
+      newFarmDetails.Fields[selectedFieldIndex].Nutrients?.nutrientFertilizers?.push(newFertilizer);
+
+      calcFieldBalances(newFarmDetails.Fields[selectedFieldIndex]);
+      updateFarmDetails(newFarmDetails);
     });
   };
 
@@ -284,7 +301,6 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
         onSubmit={submitCalculationData}
         validate={(values) => {
           StatusValidate(validationSchema, values, handleFormState, CALCULATION_INFORMATION);
-          // calcFieldBalances(farmDetails.Fields[selectedFieldIndex]);
           setFertBalance(
             calcFertBalance(
               fertilizersDetails[selectedIndex],

diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
@@ -5,6 +5,7 @@ import { faCircleCheck, faTriangleExclamation } from '@fortawesome/free-solid-sv
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import MainBalanceInterface from '@Interface/MainBalanceInterface';
 import FieldDetailInterface from '@Interface/FieldDetailsInterface';
+import getFertilizerOption from '@Utils/getFertID';
 import {
   StyledH3HeaderContainer,
   StyledH3HeaderItem,
@@ -31,7 +32,6 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
     nutrient >= 0 ? faCircleCheck : faTriangleExclamation;
 
   const getResultIconColor = (nutrient: number) => (nutrient >= 0 ? '#42814A' : '#F8BB47');
-
   return (
     <DesktopView>
       <StyledH3HeaderContainer>
@@ -68,56 +68,62 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
       </StyledH4HeaderContainer>
 
       {field.Crops.map((crop: CropsDetailsInterface, index: number) => (
-        <StyledPContainer key={`${crop}`}>
+        // eslint-disable-next-line react/no-array-index-key
+        <StyledPContainer key={`${crop}-${index}`}>
           <StyledPItem width="30%">
             <p>{crop.cropId === '75' ? 'Blueberry' : 'Raspberry'}</p>
           </StyledPItem>
           <StyledPItem width="30%">
             <StyledPItemList>
-              <p>{cropBalances[index].agronomic.N}</p>
-              <p>{cropBalances[index].agronomic.P}</p>
-              <p>{cropBalances[index].agronomic.K}</p>
+              <p>{cropBalances[index]?.agronomic?.N ?? zeroConstant}</p>
+              <p>{cropBalances[index]?.agronomic?.P ?? zeroConstant}</p>
+              <p>{cropBalances[index]?.agronomic?.K ?? zeroConstant}</p>
             </StyledPItemList>
           </StyledPItem>
           <StyledPItem width="30%">
             <StyledPItemList>
-              <p>{cropBalances[index].cropRemoval.N || zeroConstant}</p>
-              <p>{cropBalances[index].cropRemoval.P}</p>
-              <p>{cropBalances[index].cropRemoval.K}</p>
+              <p>{cropBalances[index]?.cropRemoval?.N ?? zeroConstant}</p>
+              <p>{cropBalances[index]?.cropRemoval?.P ?? zeroConstant}</p>
+              <p>{cropBalances[index]?.cropRemoval?.K ?? zeroConstant}</p>
             </StyledPItemList>
           </StyledPItem>
         </StyledPContainer>
       ))}
 
-      {field.Nutrients.length > 0 && (
+      {field.Nutrients?.nutrientFertilizers?.length > 0 && (
         <>
           <StyledH4HeaderItem width="30%">
             <h4>Fertilizer</h4>
           </StyledH4HeaderItem>
-          {field.Nutrients.map((fertilizer: FertilizerInterface, idx: number) => (
-            // Couldn't fix this ESLint rule since we allow for more then one of the same fert to be added
-            // Order is probably never changing without a rerender, which is the problem this rule tries to avoid
-            // eslint-disable-next-line react/no-array-index-key
-            <StyledPContainer key={`${fertilizer.fertilizerId}-${idx}`}>
-              <StyledPItem width="30%">
-                <p>{fertilizer.fertilizerId}</p>
-              </StyledPItem>
-              <StyledPItem width="30%">
-                <StyledPItemList>
-                  <p>{fertilizer.fertN}</p>
-                  <p>{fertilizer.fertP2o5}</p>
-                  <p>{fertilizer.fertK2o}</p>
-                </StyledPItemList>
-              </StyledPItem>
-              <StyledPItem width="30%">
-                <StyledPItemList>
-                  <p>{fertilizer.fertN}</p>
-                  <p>{fertilizer.fertP2o5}</p>
-                  <p>{fertilizer.fertK2o}</p>
-                </StyledPItemList>
-              </StyledPItem>
-            </StyledPContainer>
-          ))}
+          {field.Nutrients?.nutrientFertilizers.map(
+            (fertilizer: FertilizerInterface, idx: number) => (
+              // Couldn't fix this ESLint rule since we allow for more then one of the same fert to be added
+              // Order is probably never changing without a rerender, which is the problem this rule tries to avoid
+              // eslint-disable-next-line react/no-array-index-key
+              <StyledPContainer key={`${fertilizer.fertilizerId}-${idx}`}>
+                <StyledPItem width="30%">
+                  <p>
+                    {getFertilizerOption(fertilizer.fertilizerId.toString())?.label ??
+                      fertilizer.fertilizerId}
+                  </p>
+                </StyledPItem>
+                <StyledPItem width="30%">
+                  <StyledPItemList>
+                    <p>{fertilizer.fertN}</p>
+                    <p>{fertilizer.fertP2o5}</p>
+                    <p>{fertilizer.fertK2o}</p>
+                  </StyledPItemList>
+                </StyledPItem>
+                <StyledPItem width="30%">
+                  <StyledPItemList>
+                    <p>{fertilizer.fertN}</p>
+                    <p>{fertilizer.fertP2o5}</p>
+                    <p>{fertilizer.fertK2o}</p>
+                  </StyledPItemList>
+                </StyledPItem>
+              </StyledPContainer>
+            ),
+          )}
         </>
       )}
       <StyledDivider />

diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
@@ -20,14 +20,14 @@ const CropsList: FC<CropsListComponentProps> = ({ field }) => (
         <p key={field.FieldName}>{field.FieldName}</p>
       </StyledListItem>
       <StyledCropsGroup>
-        {field.Crops.map((crop: CropsDetailsInterface) => (
+        {field.Crops.map((crop: CropsDetailsInterface, idx: number) => (
           <StyledListItem
             width="50%"
             key={crop.id}
           >
             <div className="CropsList">
               <h2>Crop</h2>
-              <h2>{crop.id + 1}</h2>
+              <h2>{idx + 1}</h2>
             </div>
             <p key={crop.cropId}>{crop.cropId === '75' ? 'Blueberry' : 'Raspberry'}</p>
           </StyledListItem>

diff --git a/frontend/src/Commons/Forms/InputModules/FarmInformation/FarmInformation.tsx b/frontend/src/Commons/Forms/InputModules/FarmInformation/FarmInformation.tsx
@@ -39,7 +39,7 @@ const FarmInfoComponent: FC<InputModuleProps> = ({
 }) => {
   const initialValues = {
     FarmName: farmDetails.FarmName,
-    Year: farmDetails.Year,
+    Year: new Date().getFullYear().toString(),
     FarmRegion: farmDetails.FarmRegion,
   };
 

diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
@@ -22,6 +22,7 @@ import ComponentText from '@Constants/ComponentText';
 import CustomField from '@Commons/Input/Field/CustomField';
 import FertilizerInterface from '@Interface/FertilizerInterface';
 import handleChange from '@Utils/handleChange';
+import dryFertilizerValues from '@Constants/FertilizerValues';
 import FertilizersButtonComponent from './FertilizersButtonComponent';
 import StyledCustomNumberField from './Fertilizers.styles';
 import FertilizersListComponent from './FertilizersListComponent';
@@ -75,28 +76,13 @@ const FertilizersInfo: FC<InputModuleProps> = ({
       tempFertilizerId = `Liquid Fertilizer Custom (${values.customN}-${values.customP2o5}-${values.customK2o})`;
     }
 
-    switch (values.fertilizerId) {
-      case 'Urea (46-0-0)':
-        fertNValue = 46;
-        break;
-      case '15-15-17':
-        fertNValue = 15;
-        fertP2o5Value = 15;
-        fertK20Value = 17;
-        break;
-      case 'Ammonium polyphosphate (10-34-0)':
-        fertNValue = 10;
-        fertP2o5Value = 34;
-        break;
-      case 'Liquid urea (23-0-0)':
-        fertNValue = 23;
-        break;
-      default:
-        fertNValue = values.customN ? values.customN : 0;
-        fertP2o5Value = values.customP2o5 ? values.customP2o5 : 0;
-        fertK20Value = values.customK2o ? values.customK2o : 0;
-        break;
-    }
+    const defaultValues = { N: 0, P: 0, K: 0 };
+    const customValues = { N: values.customN, P: values.customP2o5, K: values.customK2o };
+    const fertValues = dryFertilizerValues[values.fertilizerId] || customValues || defaultValues;
+
+    fertNValue = fertValues.N;
+    fertP2o5Value = fertValues.P;
+    fertK20Value = fertValues.K;
 
     const newFertilizer: FertilizerInterface = {
       id: fertilizersDetails.length,

diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { faPencil, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import FertilizerInterface from '@Interface/FertilizerInterface';
+import getFertilizerOption from '@Utils/getFertID';
 import {
   StyledFieldInfoList,
   StyledListContainer,
@@ -19,33 +20,33 @@ const FertilizersListComponent: FC<FertilizerProps> = ({ fertilizerDetails }) =>
   const fieldCount = fertilizerDetails.length;
   return (
     <StyledFieldInfoList>
-      {fertilizerDetails.map((nutrient: FertilizerInterface) => (
-        <div key={nutrient.id}>
+      {fertilizerDetails.map((fertilizer: FertilizerInterface) => (
+        <div key={fertilizer.id}>
           <StyledListContainer formNutrients>
             <StyledListItem width="240px">
               <h2>Fertilizer Type</h2>
-              <p>{nutrient.fertilizerTypeId}</p>
+              <p>{fertilizer.fertilizerTypeId}</p>
             </StyledListItem>
-            {nutrient.fertilizerTypeId === 'Dry Fertilizer (Custom)' ||
-            nutrient.fertilizerTypeId === 'Liquid Fertilizer (Custom)' ? (
+            {fertilizer.fertilizerTypeId === 'Dry Fertilizer (Custom)' ||
+            fertilizer.fertilizerTypeId === 'Liquid Fertilizer (Custom)' ? (
               <StyledCustomFertilizerGroup>
                 <StyledListItem width="40%">
                   <h2>N (%)</h2>
-                  <p>{nutrient.customN}</p>
+                  <p>{fertilizer.customN}</p>
                 </StyledListItem>
                 <StyledListItem width="40%">
                   <h2>P2o5 (%)</h2>
-                  <p>{nutrient.customP2o5}</p>
+                  <p>{fertilizer.customP2o5}</p>
                 </StyledListItem>
                 <StyledListItem width="40%">
                   <h2>K2o (%)</h2>
-                  <p>{nutrient.customK2o}</p>
+                  <p>{fertilizer.customK2o}</p>
                 </StyledListItem>
               </StyledCustomFertilizerGroup>
             ) : (
               <StyledListItem width="300px">
                 <h2> Fertilizer Name</h2>
-                <p> {nutrient.fertilizerId}</p>
+                <p>{getFertilizerOption(fertilizer.fertilizerId)?.label}</p>
               </StyledListItem>
             )}
             <StyledFontAwesomeContainer>