chore: Update distance relationship to plants per acre (#329)

* Update crop options values and labels * Sub plants per acre select for a label/p tag with value * Basic styling * Lint and margin adjustment * Removed console log
bcgov · Aug 6, 2024 · 63cd5bb · 63cd5bb
1 parent 32ab4db
commit 63cd5bb
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 18 deletions.
diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.styles.ts b/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.styles.ts
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import screenSizes from '@Constants/ScreenSize';
+import * as tokens from '@bcgov/design-tokens/js';
 
 const StyledCropsSmallGroup = styled.div`
   display: flex;
@@ -10,6 +11,18 @@ const StyledCropsSmallGroup = styled.div`
     justify-content: flex-start;
     width: 50vw;
   }
+
+  #plantsPerHa {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    #plantsPerHaLabel {
+      font: ${tokens.typographyBoldLargeBody};
+    }
+    p {
+      margin: 9px 0 0 0;
+    }
+  }
 `;
 const StyledCropsLargeGroup = styled.div`
   display: flex;

diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx b/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
@@ -18,11 +18,11 @@ import handleChange from '@Utils/handleChange';
 import {
   CropIDOptions,
   PlantAgeOptions,
-  PlantsPerAcre,
   DistanceBtwnPlants,
   DistanceBtwnRows,
   YesOrNo,
   WherePruningsGo,
+  PlantsPerAcreOptions,
 } from '@Constants/CropOptions';
 import CustomField from '@Commons/Input/Field/CustomField';
 import {
@@ -64,7 +64,6 @@ const checkHasCrops = (Fields: FieldDetailInterface[]) => {
  *              but this is only for the submission of formik.
  * @author      @Kcaparas
  */
-
 interface SubmissionCropsInterface {
   id: number;
   cropId: string;
@@ -93,6 +92,8 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
   const [hasFieldBeenSelected, setFieldSelected] = useState<boolean[]>(
     Array(farmDetails.Fields.length).fill(false),
   );
+  const [plantsPerHa, setplantsPerHa] = useState<number>(0);
+
   const BlueberrySchemaNumber = (cropId: string, message: string = 'Required') =>
     Yup.number().when(cropId, (value, schema) =>
       value.toString() === 'Blueberry' ? schema.required(message) : schema.notRequired(),
@@ -115,28 +116,38 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
     willSawdustBeApplied: Yup.boolean().required('Required'),
   });
 
+  function getPlantsPerAcre(index: number) {
+    return parseInt(PlantsPerAcreOptions[index].value, 10);
+  }
+
   const appendDistanceBtwnPlants = (v1: string, v2: string): string => {
     const distanceCombination = `${v1}x${v2}`;
     let res = '';
 
     switch (distanceCombination) {
       case '0.6x2.7':
         res = '(2ft x 9ft)';
+        setplantsPerHa(getPlantsPerAcre(5));
         break;
       case '0.6x3.0':
         res = '(2ft x 10ft)';
+        setplantsPerHa(getPlantsPerAcre(4));
         break;
       case '0.75x2.7':
         res = '(2.5ft x 9ft)';
+        setplantsPerHa(getPlantsPerAcre(3));
         break;
       case '0.75x3.0':
         res = '(2.5ft x 10ft)';
+        setplantsPerHa(getPlantsPerAcre(2));
         break;
       case '0.9x2.7':
         res = '(3ft x 9ft)';
+        setplantsPerHa(getPlantsPerAcre(1));
         break;
       case '0.9x3.0':
         res = '(3ft x 10ft)';
+        setplantsPerHa(getPlantsPerAcre(0));
         break;
       default:
         break;
@@ -199,6 +210,7 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
             }}
             validate={(values) => {
               StatusValidate(validationSchema, values, handleFormState, CROPS_INFORMATION);
+              appendDistanceBtwnPlants(values.distanceBtwnPlants, values.distanceBtwnRows);
             }}
           >
             {({ values, setFieldValue }) =>
@@ -236,14 +248,10 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
                             desktopWidth="40%"
                             onChange={(e) => handleChange(e, setFieldValue)}
                           />
-                          <CustomSelect
-                            name="numberOfPlantsPerAcre"
-                            id="numberOfPlantsPerAcre"
-                            label="Plants per acre"
-                            options={PlantsPerAcre}
-                            desktopWidth="40%"
-                            onChange={(e) => handleChange(e, setFieldValue)}
-                          />
+                          <div id="plantsPerHa">
+                            <p id="plantsPerHaLabel">Plants per Acre</p>
+                            <p>{plantsPerHa}</p>
+                          </div>
                         </StyledCropsSmallGroup>
                         <StyledCropsLargeGroup>
                           <CustomSelect

diff --git a/frontend/src/Constants/CropOptions.ts b/frontend/src/Constants/CropOptions.ts
@@ -45,12 +45,12 @@ const PlantAgeOptions: OptionInterface[] = [
     label: '8',
   },
   {
-    value: '9 or more',
+    value: '9',
     label: '9 or more',
   },
 ];
 
-const PlantsPerAcre: OptionInterface[] = [
+const PlantsPerAcreOptions: OptionInterface[] = [
   {
     value: '2498',
     label: '2498',
@@ -80,26 +80,26 @@ const PlantsPerAcre: OptionInterface[] = [
 const DistanceBtwnPlants: OptionInterface[] = [
   {
     value: '0.6',
-    label: '0.6',
+    label: '0.6 m (2 ft)',
   },
   {
     value: '0.75',
-    label: '0.75',
+    label: '0.75 m (2.5 ft)',
   },
   {
     value: '0.9',
-    label: '0.9',
+    label: '0.9 m (3 ft)',
   },
 ];
 
 const DistanceBtwnRows: OptionInterface[] = [
   {
     value: '2.7',
-    label: '2.7',
+    label: '2.7 m (9 ft)',
   },
   {
     value: '3.0',
-    label: '3.0',
+    label: '3.0 m (10 ft)',
   },
 ];
 
@@ -135,7 +135,7 @@ const WherePruningsGo: OptionInterface[] = [
 export {
   CropIDOptions,
   PlantAgeOptions,
-  PlantsPerAcre,
+  PlantsPerAcreOptions,
   DistanceBtwnPlants,
   DistanceBtwnRows,
   YesOrNo,