feat: Bb 254 implement edit and delete fields and crops buttons (#350)

* Delete button works * Remove button styles * Edit button kind of works * Delete button for crops * Fertilizers can be deleted * Calculate Nutrients delete button works * Add button type and aria label * Fix Region wrong value * Dont remove data on field edit * Lint * Update to allow optional crops * Minor NExt button fix * Fixed some Fertilizer deletion bug * Calc Table styling * calculate nutrients styling fix --------- Co-authored-by: Kent Caparas <[email protected]>
bcgov · Aug 14, 2024 · ffe3d6c · ffe3d6c
1 parent b85db6c
commit ffe3d6c
Show file tree

Hide file tree

Showing 16 changed files with 257 additions and 90 deletions.
diff --git a/frontend/src/Commons/Forms/FormModule/FormModule.tsx b/frontend/src/Commons/Forms/FormModule/FormModule.tsx
@@ -35,7 +35,7 @@ interface FormModuleProps {
   fertilizersDetails?: FertilizerInterface[];
   toggleEnabled?: boolean;
   updateFarmDetails(farmDetails: FarmDetailsInterface, inputModuleID: string): void;
-  updateFertDetails(nutrientDetails: FertilizerInterface[]): void;
+  updateFertDetails(nutrientDetails: FertilizerInterface[], moveNext?: boolean): void;
   handleFormState(cmd: string, toggle?: boolean, status?: string): void;
 }
 

diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx
@@ -294,6 +294,21 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
     return [];
   };
 
+  const removeFertFromField = (field: FieldDetailInterface, fertilizer: FertilizerInterface) => {
+    const updatedFarmDetails = { ...farmDetails };
+
+    const fieldIdx = updatedFarmDetails.Fields.findIndex(
+      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
+    );
+
+    const fertIdx = updatedFarmDetails.Fields[fieldIdx].Nutrients.nutrientFertilizers.findIndex(
+      (f) => f === fertilizer,
+    );
+
+    updatedFarmDetails.Fields[fieldIdx].Nutrients.nutrientFertilizers.splice(fertIdx, 1);
+    updateFarmDetails(updatedFarmDetails, CALCULATE_NUTRIENTS);
+  };
+
   return (
     <>
       <Formik
@@ -443,6 +458,7 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
                     field={farmDetails.Fields[selectedFieldIndex]}
                     cropBalances={cropBalances}
                     resultBalance={resultBalance}
+                    removeFert={removeFertFromField}
                   />
                 )}
             </StyledFieldContainer>

diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts
@@ -12,6 +12,8 @@ const StyledH3Container = styled.div`
   align-items: center;
   justify-content: center;
   width: 70%;
+  margin: 0;
+  padding: 0;
 
   .blankSpace {
     display: none;
@@ -67,11 +69,18 @@ const StyledAgronomic = styled.div`
   width: 100%;
   justify-content: center;
   align-items: center;
-    margin: 28px auto 48px auto;
+  margin: 28px auto 48px auto;
+
+  td {
+    text-align: center;
+  }
 
   @media (min-width: ${screenSizes.desktop}) {
     width: 90%;
-
+    button {
+      display: none;
+    }
+  }
 `;
 
 const StyledRemoval = styled.div`
@@ -80,7 +89,7 @@ const StyledRemoval = styled.div`
   width: 100%;
   justify-content: center;
   align-items: center;
-  margin: 28px auto 48px auto;
+  margin: 18px auto 48px auto;
 
 
   @media (min-width: ${screenSizes.desktop}) {
@@ -103,6 +112,10 @@ const StyledTable = styled.table<TableProps>`
     text-align: center;
   }
 
+  .th-crop {
+    width: 50%;
+  }
+
   tbody tr:nth-of-type(${(props) => (props.twoCrops ? 'even' : 'odd')}) {
     background-color: ${tokens.themeGray30};
   }
@@ -122,6 +135,8 @@ const StyledTable = styled.table<TableProps>`
 
   h4 {
     font: ${tokens.typographyBoldBody};
+    margin: 0;
+    padding: 0;
   }
 
   @media (min-width: ${screenSizes.desktop}) {
@@ -136,14 +151,17 @@ const StyledTable = styled.table<TableProps>`
     .cropRemovalCol1 {
       display: none;
     }
+    .delBtnSpacer {
+      display: none;
+    }
   }
 `;
 
 const StyledPBalance = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 11px;
+  gap: 5px;
   p {
     font: ${tokens.typographyRegularSmallBody};
     padding: 0;
@@ -159,7 +177,7 @@ const StyledPBalance = styled.div`
 
 const FontAwesomeContainer = styled.div`
   font-size: 16px;
-  margin-left: -28px;
+  margin-left: -20px;
 
   @media (min-width: ${screenSizes.desktop}) {
     font-size: 24px;

diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
@@ -1,7 +1,11 @@
 import { FC } from 'react';
 import CropsDetailsInterface from '@Interface/CropsDetailsInterface';
 import FertilizerInterface from '@Interface/FertilizerInterface';
-import { faCircleCheck, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import {
+  faCircleCheck,
+  faTrashCan,
+  faTriangleExclamation,
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import MainBalanceInterface from '@Interface/MainBalanceInterface';
 import FieldDetailInterface from '@Interface/FieldDetailsInterface';
@@ -22,11 +26,17 @@ interface CalculationListProps {
   field: FieldDetailInterface;
   cropBalances: MainBalanceInterface[];
   resultBalance: MainBalanceInterface;
+  removeFert(field: FieldDetailInterface, fertilizer: FertilizerInterface): void;
 }
 
 const zeroConstant: number = 0;
 
-const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, resultBalance }) => {
+const CalculationList: FC<CalculationListProps> = ({
+  field,
+  cropBalances,
+  resultBalance,
+  removeFert,
+}) => {
   const getResultsIcon = (nutrient: number) =>
     nutrient >= 0 ? faCircleCheck : faTriangleExclamation;
 
@@ -46,7 +56,7 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
         <StyledTable twoCrops={field.Crops.length > 1}>
           <thead>
             <tr>
-              <th>
+              <th className="th-crop">
                 <h4 className="col1">Crop</h4>
               </th>
               <th>
@@ -77,6 +87,9 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                 <td>
                   <p>{cropBalances[index]?.agronomic?.K ?? zeroConstant}</p>
                 </td>
+                <td aria-hidden="true">
+                  <h4 className="delBtnSpacer">&nbsp;</h4>
+                </td>
               </tr>
             ))}
 
@@ -97,7 +110,7 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                     <tr key={`${fertilizer.fertilizerId}-${idx}`}>
                       <td>
                         <p className="col1">
-                          {getFertilizerOption(fertilizer.fertilizerId.toString())?.label ??
+                          {getFertilizerOption(fertilizer.fertilizerId?.toString())?.label ??
                             fertilizer.fertilizerId}
                         </p>
                       </td>
@@ -110,6 +123,16 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                       <td>
                         <p>{fertilizer.fertK2o}</p>
                       </td>
+                      <td>
+                        <button
+                          type="button"
+                          onClick={() => removeFert(field, fertilizer)}
+                          style={{ border: 'none', background: 'none' }}
+                          aria-label="Delete button"
+                        >
+                          <FontAwesomeIcon icon={faTrashCan} />
+                        </button>
+                      </td>
                     </tr>
                   ),
                 )}
@@ -129,6 +152,9 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
               <td aria-hidden="true">
                 <StyledDivider />
               </td>
+              <td aria-hidden="true">
+                <StyledDivider />
+              </td>
             </tr>
           </tbody>
 
@@ -216,6 +242,9 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                 <td>
                   <p>{cropBalances[index]?.cropRemoval?.K ?? zeroConstant}</p>
                 </td>
+                <td aria-hidden="true">
+                  <h4>&nbsp;</h4>
+                </td>
               </tr>
             ))}
 
@@ -236,7 +265,7 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                     <tr key={`${fertilizer.fertilizerId}-${idx}`}>
                       <td>
                         <p className="cropRemovalCol1 col1">
-                          {getFertilizerOption(fertilizer.fertilizerId.toString())?.label ??
+                          {getFertilizerOption(fertilizer.fertilizerId?.toString())?.label ??
                             fertilizer.fertilizerId}
                         </p>
                       </td>
@@ -249,6 +278,16 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                       <td>
                         <p>{fertilizer.fertK2o}</p>
                       </td>
+                      <td>
+                        <button
+                          type="button"
+                          onClick={() => removeFert(field, fertilizer)}
+                          style={{ border: 'none', background: 'none' }}
+                          aria-label="Delete fertilizer from field"
+                        >
+                          <FontAwesomeIcon icon={faTrashCan} />
+                        </button>
+                      </td>
                     </tr>
                   ),
                 )}
@@ -268,6 +307,9 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
               <td aria-hidden="true">
                 <StyledDivider />
               </td>
+              <td aria-hidden="true">
+                <StyledDivider />
+              </td>
             </tr>
           </tbody>
 

diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx b/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
@@ -48,7 +48,7 @@ import CropsButtonGroup from './CropsButtonGroup';
 const checkHasCrops = (Fields: FieldDetailInterface[]) => {
   let hasCrop = false;
   Fields.forEach((field) => {
-    if (field.Crops.length > 0) {
+    if (field.Crops && field.Crops.length > 0) {
       hasCrop = true;
     }
   });
@@ -82,7 +82,7 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
   handleFormState,
   toggleEnabled,
 }) => {
-  const [, setCropsInfo] = useState(farmDetails);
+  const [, setFarmDetails] = useState(farmDetails);
   const [cropInitialValues, setInitialFieldValues] = useState(initialValues);
   // Only triggered once, it would show list and persists.
   const [fieldHasCrop, setFieldHasCrop] = useState<boolean>(checkHasCrops(farmDetails.Fields));
@@ -163,9 +163,9 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
     );
   };
 
-  const addCrop = (values: SubmissionCropsInterface, fieldIdx: number, cropIdx: number): void => {
+  const addCrop = (values: SubmissionCropsInterface, fieldIdx: number): void => {
     const newCrop: CropsDetailsInterface = {
-      id: cropIdx,
+      id: farmDetails.Fields[fieldIdx].Crops?.length ?? 0,
       cropId: values.cropId,
       yield: values.yield,
       plantAgeYears: values.plantAgeYears,
@@ -180,14 +180,27 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
     };
 
     setTimeout(() => {
-      farmDetails.Fields[fieldIdx].Crops.push(newCrop);
-      setCropsInfo(farmDetails);
+      farmDetails.Fields[fieldIdx].Crops?.push(newCrop);
+      setFarmDetails(farmDetails);
       showFormHandler(fieldIdx);
       setInitialFieldValues(initialValues);
       setFieldHasCrop(checkHasCrops(farmDetails.Fields));
     }, 400);
   };
 
+  const removeCrop = (field: FieldDetailInterface, crop: CropsDetailsInterface) => {
+    const updatedFarmDetails = { ...farmDetails };
+
+    const fieldIdx = updatedFarmDetails.Fields.findIndex(
+      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
+    );
+
+    const cropIdx = updatedFarmDetails.Fields[fieldIdx].Crops?.findIndex((c) => c === crop);
+
+    updatedFarmDetails.Fields[fieldIdx].Crops?.splice(cropIdx ?? 0, 1);
+    setFarmDetails(updatedFarmDetails);
+  };
+
   const submitFarmInfo = () => {
     updateFarmDetails(farmDetails, CROPS_INFORMATION);
   };
@@ -203,13 +216,14 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
           <CropsList
             field={field}
             farmDetails={farmDetails}
+            removeCrop={removeCrop}
           />
 
           <Formik
             initialValues={cropInitialValues}
             validationSchema={validationSchema}
             onSubmit={(values, { resetForm }) => {
-              addCrop(values, index, field.Crops.length);
+              addCrop(values, index);
               resetForm();
             }}
             validate={(values) => {
@@ -354,7 +368,7 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
             }
           </Formik>
 
-          {!hasFieldBeenSelected[index] && field.Crops.length < 2 && (
+          {!hasFieldBeenSelected[index] && (field.Crops?.length ?? 0) < 2 && (
             <StyledNewFieldButtonContainer formCrops>
               <StyledNewFieldButtonController>
                 <Button

diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.styles.ts b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.styles.ts
@@ -20,6 +20,13 @@ const StyledListContainer = styled.div`
   gap: 4px;
   align-items: flex-start;
 
+  .CropsList {
+    align-items: flex-start;
+    button {
+      margin-top: 1px;
+    }
+  }
+
   @media (min-width: ${screenSizes.desktop}) {
     flex-direction: row;
     gap: 110px;