diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx index 474af434..fce0e0ac 100644 --- a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx +++ b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx @@ -450,7 +450,7 @@ const CalculateNutrientsComponent: FC = ({ const CalculateNutrients: InputModuleInterface = { InputModuleComponent: CalculateNutrientsComponent, id: CALCULATE_NUTRIENTS, - name: { long: 'Calculation', short: 'Calculation' }, + name: { long: 'Calculate Nutrients', short: 'Calculation' }, faIcon: faCalculator, status: 'inactive', enable: false, diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsButtonGroup.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsButtonGroup.tsx index 67a1d5d2..10abdeee 100644 --- a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsButtonGroup.tsx +++ b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsButtonGroup.tsx @@ -8,9 +8,10 @@ import { StyledButtonContainer, StyledAddCancelButtonContainer, } from '@Commons/Button/FieldButtonGroup.styles'; +import { CALCULATE_NUTRIENTS } from '@Constants/ModuleIDs'; type ButtonComponentProps = { - handleFormState(cmd: string, toggle?: boolean, status?: string): void; + handleFormState(cmd: string, toggle?: boolean, status?: string, moveBackModuleID?: string): void; }; const CalculationButtonGroup: FC = ({ handleFormState }) => ( @@ -23,7 +24,9 @@ const CalculationButtonGroup: FC = ({ handleFormState }) = disabled={false} actions="secondary" text={ComponentText.BACK} - handleClick={() => handleFormState(CmdOptions.BACKWARDS)} + handleClick={() => + handleFormState(CmdOptions.BACKWARDS, undefined, undefined, CALCULATE_NUTRIENTS) + } /> diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsButtonGroup.tsx b/frontend/src/Commons/Forms/InputModules/Crops/CropsButtonGroup.tsx index ec0f18dc..276e93ee 100644 --- a/frontend/src/Commons/Forms/InputModules/Crops/CropsButtonGroup.tsx +++ b/frontend/src/Commons/Forms/InputModules/Crops/CropsButtonGroup.tsx @@ -6,10 +6,11 @@ import { StyledButtonContainer, StyledAddCancelButtonContainer, } from '@Commons/Button/FieldButtonGroup.styles'; +import { CROPS_INFORMATION } from '@Constants/ModuleIDs'; type CropsButtonGroupProps = { submitFarmInfo: () => void; - handleFormState: (cmd: string, toggle?: boolean, status?: string) => void; + handleFormState(cmd: string, toggle?: boolean, status?: string, moveBackModuleID?: string): void; buttonText: { back: string; next: string; @@ -32,7 +33,9 @@ const CropsButtonGroup: React.FC = ({ disabled={!disabled} actions="secondary" text={buttonText.back} - handleClick={() => handleFormState(CmdOptions.BACKWARDS)} + handleClick={() => + handleFormState(CmdOptions.BACKWARDS, undefined, undefined, CROPS_INFORMATION) + } /> diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx index 3253fbdc..3fd17f33 100644 --- a/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx +++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx @@ -1,7 +1,7 @@ import { FC, useState } from 'react'; import { faCow } from '@fortawesome/free-solid-svg-icons'; import InputModuleInterface from '@Interface/InputModuleinterface'; -import { FERTILIZERS_INFORMATION } from '@Constants/ModuleIDs'; +import { FERTILIZERS } from '@Constants/ModuleIDs'; import InputModuleProps from '@Interface/InputModuleProps'; import initialFarmDetails from '@Constants/InitialFarmDetails'; import * as Yup from 'yup'; @@ -216,7 +216,7 @@ const FertilizersInfo: FC = ({ const FertilizersInfoForm: InputModuleInterface = { InputModuleComponent: FertilizersInfo, - id: FERTILIZERS_INFORMATION, + id: FERTILIZERS, name: { long: 'Fertilizer', short: 'Fertilizer' }, faIcon: faCow, status: 'inactive', diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx index 896bb5cc..e7fae345 100644 --- a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx +++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx @@ -12,10 +12,11 @@ import { StyledNewFieldButtonContainer, StyledNewFieldButtonController, } from '@Commons/Button/FieldButtonGroup.styles'; +import { FERTILIZERS } from '@Constants/ModuleIDs'; type ButtonComponentProps = { addNewFertilizer: () => void; - handleFormState(cmd: string, toggle?: boolean, status?: string): void; + handleFormState(cmd: string, toggle?: boolean, status?: string, moveBackModuleID?: string): void; }; const FertilizersButtonComponent: FC = ({ @@ -46,7 +47,9 @@ const FertilizersButtonComponent: FC = ({ disabled={false} actions="secondary" text={ComponentText.BACK} - handleClick={() => handleFormState(CmdOptions.BACKWARDS)} + handleClick={() => + handleFormState(CmdOptions.BACKWARDS, undefined, undefined, FERTILIZERS) + } /> diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsButtonComponent.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsButtonComponent.tsx index 29a6c656..a49ce7a4 100644 --- a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsButtonComponent.tsx +++ b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsButtonComponent.tsx @@ -12,11 +12,12 @@ import { StyledNewFieldButtonContainer, StyledNewFieldButtonController, } from '@Commons/Button/FieldButtonGroup.styles'; +import { FIELDS_AND_SOIL } from '@Constants/ModuleIDs'; type ButtonComponentProps = { addNewField: () => void; updateFarmDetails: (newFarmDetails: FarmDetailsInterface) => void; - handleFormState(cmd: string, toggle?: boolean, status?: string): void; + handleFormState(cmd: string, toggle?: boolean, status?: string, moveBackModuleID?: string): void; farmDetails: FarmDetailsInterface; }; @@ -50,7 +51,9 @@ const FieldsButtonComponent: FC = ({ disabled={false} actions="secondary" text={ComponentText.BACK} - handleClick={() => handleFormState(CmdOptions.BACKWARDS)} + handleClick={() => + handleFormState(CmdOptions.BACKWARDS, undefined, undefined, FIELDS_AND_SOIL) + } /> diff --git a/frontend/src/Constants/Names.ts b/frontend/src/Constants/LocalStorageNames.ts similarity index 68% rename from frontend/src/Constants/Names.ts rename to frontend/src/Constants/LocalStorageNames.ts index 5ec5e976..b2fc0b93 100644 --- a/frontend/src/Constants/Names.ts +++ b/frontend/src/Constants/LocalStorageNames.ts @@ -1,8 +1,8 @@ -const Names = { +const LocalStorageNames = { FARM_DETAILS: 'farmDetails', FERTILIZER_DETAILS: 'fertilizersDetails', FORM_STATES: 'formStates', CURRENT_FORM: 'currForm', }; -export default Names; +export default LocalStorageNames; diff --git a/frontend/src/Constants/ModuleIDs.ts b/frontend/src/Constants/ModuleIDs.ts index bb2f54eb..e5ccc012 100644 --- a/frontend/src/Constants/ModuleIDs.ts +++ b/frontend/src/Constants/ModuleIDs.ts @@ -1,5 +1,5 @@ export const FARM_INFORMATION = 'FarmInformation'; export const FIELDS_AND_SOIL = 'FieldsAndSoil'; export const CROPS_INFORMATION = 'Crops'; -export const FERTILIZERS_INFORMATION = 'Fertilizers'; +export const FERTILIZERS = 'Fertilizers'; export const CALCULATE_NUTRIENTS = 'CalculateNutrients'; diff --git a/frontend/src/Utils/getLocalDetails.ts b/frontend/src/Utils/getLocalDetails.ts index d3c79fdd..44f1e8de 100644 --- a/frontend/src/Utils/getLocalDetails.ts +++ b/frontend/src/Utils/getLocalDetails.ts @@ -1,9 +1,9 @@ -import Names from '@Constants/Names'; +import LoacalStorageNames from '@Constants/LocalStorageNames'; import FarmDetailsInterface from '@Interface/FarmDetailsInterface'; import FieldDetailInterface from '@Interface/FieldDetailsInterface'; const getLocalDetails = () => { - const nmpString = localStorage.getItem(Names.FARM_DETAILS); + const nmpString = localStorage.getItem(LoacalStorageNames.FARM_DETAILS); try { if (nmpString) return JSON.parse(nmpString); } catch (err) { diff --git a/frontend/src/Utils/getLocalFertilizers.ts b/frontend/src/Utils/getLocalFertilizers.ts index ab0ab1d0..63340d9b 100644 --- a/frontend/src/Utils/getLocalFertilizers.ts +++ b/frontend/src/Utils/getLocalFertilizers.ts @@ -1,8 +1,8 @@ -import Names from '@Constants/Names'; +import LoacalStorageNames from '@Constants/LocalStorageNames'; import FertilizerInterface from '@Interface/FertilizerInterface'; const getLocalFertilizers = () => { - const fertString = localStorage.getItem(Names.FERTILIZER_DETAILS); + const fertString = localStorage.getItem(LoacalStorageNames.FERTILIZER_DETAILS); try { if (fertString) { const parsedFertString = JSON.parse(fertString); diff --git a/frontend/src/Utils/getLocalFormStates.ts b/frontend/src/Utils/getLocalFormStates.ts index 70f77bad..53cdf34d 100644 --- a/frontend/src/Utils/getLocalFormStates.ts +++ b/frontend/src/Utils/getLocalFormStates.ts @@ -1,8 +1,8 @@ -import Names from '@Constants/Names'; +import LoacalStorageNames from '@Constants/LocalStorageNames'; import InputModuleInterface from '@Interface/InputModuleinterface'; const getLocalFormStates = () => { - const stateStr = localStorage.getItem(Names.FORM_STATES); + const stateStr = localStorage.getItem(LoacalStorageNames.FORM_STATES); try { if (stateStr) return JSON.parse(stateStr); } catch (err) { diff --git a/frontend/src/Views/Export/ExportPage.tsx b/frontend/src/Views/Export/ExportPage.tsx index 94c61035..4776f542 100644 --- a/frontend/src/Views/Export/ExportPage.tsx +++ b/frontend/src/Views/Export/ExportPage.tsx @@ -8,12 +8,12 @@ import MainPageHeader from '@Commons/MainPageHeader/MainPageHeader.tsx'; import MainPageFooter from '@Commons/MainPageFooter/MainPageFooter.tsx'; import { FC } from 'react'; import CustomLink from '@Commons/CustomLink/CustomLink.tsx'; -import Names from '@Constants/Names.ts'; +import LoacalStorageNames from '@Constants/LocalStorageNames.ts'; import { StyledContent, StyledLandingContainer } from './ExportPage.styles.ts'; const ExportPage: FC = () => { const downloadFile = () => { - const nmpString = localStorage.getItem(Names.FARM_DETAILS); + const nmpString = localStorage.getItem(LoacalStorageNames.FARM_DETAILS); const nmpJSON = nmpString && JSON.parse(nmpString); const nmpBlob = nmpString && new Blob([nmpString], { type: 'application/json' }); const nmpUrl = nmpBlob && URL.createObjectURL(nmpBlob); diff --git a/frontend/src/Views/LandingPage/LandingPage.tsx b/frontend/src/Views/LandingPage/LandingPage.tsx index f571b02c..7b5849e0 100644 --- a/frontend/src/Views/LandingPage/LandingPage.tsx +++ b/frontend/src/Views/LandingPage/LandingPage.tsx @@ -1,6 +1,7 @@ import Button from '@Commons/Button/Button.tsx'; import { templateNMP } from '@Constants/templateNMP.ts'; -import Names from '@Constants/Names.ts'; + +import LoacalStorageNames from '@Constants/LocalStorageNames.ts'; import { StyledContent, StyledButtonGroup, @@ -31,7 +32,7 @@ const LandingPage = () => { fr.onload = () => { const data = fr.result; // data is not a JSON yet at this point. It's still .nmp - if (data) localStorage.setItem(Names.FARM_DETAILS, data.toString()); + if (data) localStorage.setItem(LoacalStorageNames.FARM_DETAILS, data.toString()); }; window.location.href = '/main'; }; @@ -39,7 +40,7 @@ const LandingPage = () => { const newCalcHandler = () => { localStorage.clear(); // Our template is a JSON .nmp compatible object - localStorage.setItem(Names.FARM_DETAILS, JSON.stringify(templateNMP)); + localStorage.setItem(LoacalStorageNames.FARM_DETAILS, JSON.stringify(templateNMP)); window.location.href = '/main'; }; diff --git a/frontend/src/Views/MainPage/MainPage.tsx b/frontend/src/Views/MainPage/MainPage.tsx index f5eccc20..9e82621b 100644 --- a/frontend/src/Views/MainPage/MainPage.tsx +++ b/frontend/src/Views/MainPage/MainPage.tsx @@ -11,7 +11,6 @@ import NmpInterface from '@Interface/NmpInterface'; import initialFarmDetails from '@Constants/InitialFarmDetails'; import { ACTIVE, COMPLETED, WARNING } from '@Constants/ModuleStatus'; import CmdOptions from '@Constants/CmdOptions'; -import Names from '@Constants/Names'; import convertToNMP from '@Utils/convertToNMP'; import FertilizerInterface from '@Interface/FertilizerInterface'; import { getLocalDetails, loadFarmDetails } from '@Utils/getLocalDetails'; @@ -20,6 +19,7 @@ import InputModuleInterface from '@Interface/InputModuleinterface'; import FormModule from '@Commons/Forms/FormModule/FormModule'; import { loadFertDetails } from '@Utils/getLocalFertilizers'; import * as InputModules from '@Commons/Forms/InputModules/index'; +import LocalStorageNames from '@Constants/LocalStorageNames'; import { StyledMain, StyledMainContainer } from './MainPage.styles'; const initialFertilizersDetails: FertilizerInterface[] = loadFertDetails(); @@ -44,7 +44,7 @@ const MainPage: FC = () => { loadLocalFormStates(mockBerriesWorkflow), ); const [currForm, setCurrForm] = useState( - parseInt(localStorage.getItem(Names.CURRENT_FORM) ?? '0', 10), + parseInt(localStorage.getItem(LocalStorageNames.CURRENT_FORM) ?? '0', 10), ); const [toggleEnabled, setToggleEnabled] = useState(true); const [isHeaderVisible, setIsHeaderVisible] = useState(true); @@ -68,10 +68,13 @@ const MainPage: FC = () => { useEffect(() => { try { - if (localDetails) localStorage.setItem(Names.FARM_DETAILS, JSON.stringify(localDetails)); - if (fertDetails) localStorage.setItem(Names.FERTILIZER_DETAILS, JSON.stringify(fertDetails)); - if (formStates) localStorage.setItem(Names.FORM_STATES, JSON.stringify(formStates)); - if (currForm) localStorage.setItem(Names.CURRENT_FORM, JSON.stringify(currForm)); + if (localDetails) + localStorage.setItem(LocalStorageNames.FARM_DETAILS, JSON.stringify(localDetails)); + if (fertDetails) + localStorage.setItem(LocalStorageNames.FERTILIZER_DETAILS, JSON.stringify(fertDetails)); + if (formStates) + localStorage.setItem(LocalStorageNames.FORM_STATES, JSON.stringify(formStates)); + if (currForm) localStorage.setItem(LocalStorageNames.CURRENT_FORM, JSON.stringify(currForm)); } catch (err) { console.error(err); } @@ -87,7 +90,12 @@ const MainPage: FC = () => { * @param status: string => Passed if a module status should be updated. * ('active', warning', 'completed') */ - const handleFormState = (cmd: string, toggle?: boolean, status?: string) => { + const handleFormState = ( + cmd: string, + toggle?: boolean, + status?: string, + moveBackModuleID?: string, + ) => { // currModuleID can be any InputModule that's passed to this handler let currModuleID = formStates[currForm].id; // nextModuleID is the last activated InputModule, they are activated through the Next button @@ -98,11 +106,11 @@ const MainPage: FC = () => { switch (cmd) { case CmdOptions.BACKWARDS: - if (currForm >= 0) { + if (currForm > 0 && formStates[currForm].id === moveBackModuleID) { nextModuleID = formStates[currForm - 1].id; setCurrForm((prevForm) => prevForm - 1); - tgl = true; - } + } else if (moveBackModuleID) currModuleID = moveBackModuleID; + tgl = true; break; case CmdOptions.FORWARDS: if (formStates[currForm + 1]) { @@ -136,7 +144,7 @@ const MainPage: FC = () => { // For cmds that go forwards or backward if (newState.id === nextModuleID) { newState.enable = true; - newState.status = ACTIVE; + if (moveBackModuleID === undefined) newState.status = ACTIVE; } return newState; });