@@ -14,9 +13,11 @@ export const ButtonType1 = (props) => {
export const ButtonType2 = (props) => {
return (
-
-
-
+ {props.showDownloadIcon && (
+
+
+
+ )}
{props.text}
);
@@ -24,10 +25,8 @@ export const ButtonType2 = (props) => {
export const ModalHeading = (props) => {
return (
-
+
{props.label}
);
};
-
-
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/MicroplanningCard.js b/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/MicroplanningCard.js
index ed86f7c5e70..3a04615bbf2 100644
--- a/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/MicroplanningCard.js
+++ b/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/MicroplanningCard.js
@@ -38,7 +38,7 @@ const MicroplanningCard = () => {
},
];
-
+
links = links.filter((link) => (link?.roles && link?.roles?.length > 0 ? Digit.Utils.didEmployeeHasAtleastOneRole(link?.roles) : true));
const propsForModuleCard = {
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/Nagivator.js b/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/Nagivator.js
new file mode 100644
index 00000000000..0d8dace9f80
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/Nagivator.js
@@ -0,0 +1,157 @@
+import { ActionBar, Stepper, Toast } from "@egovernments/digit-ui-components";
+import PropTypes from 'prop-types';
+import React, { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@egovernments/digit-ui-react-components";
+import { ArrowBack, ArrowForward } from "@egovernments/digit-ui-svg-components";
+
+/**
+ *
+ * @param { config: Object, checkDataCompleteness: boolean, components: Object, childProps: Object, stepNavigationActive: boolean } props
+ * @returns
+ *
+ */
+// Main component for creating a microplan
+const Navigator = (props) => {
+ // States
+ const [currentPage, setCurrentPage] = useState();
+ const [toast, setToast] = useState();
+ const [navigationEvent, setNavigationEvent] = useState();
+ /**
+ * checkDataCompletion
+ * "true": check for data completeness
+ * "false": do nothing
+ * "valid": data is present move to the respective step
+ * "invalid": whole or a part of the data is missing
+ */
+ const [checkDataCompletion, setCheckDataCompletion] = useState("false");
+
+ const { t } = useTranslation();
+
+ // Effect to set initial current page when timeline options change
+ useEffect(() => {
+ if (!props.config || props.config.length === 0) return;
+ setCurrentPage(props.config[0]);
+ }, [props.config]);
+
+ // Effect to handle data completion validation and show toast
+ useEffect(() => {
+ if (checkDataCompletion === "false" || checkDataCompletion === "true" || checkDataCompletion === "valid") return;
+ if (checkDataCompletion === "invalid") setToast(t("COMMON_PLEASE_FILL_ALL_THE_FIELDS"));
+ setCheckDataCompletion("false");
+ }, [checkDataCompletion]);
+
+ // Effect to handle navigation events and transition between steps
+ useEffect(() => {
+ if (checkDataCompletion !== "valid" || navigationEvent === undefined) return;
+ if (navigationEvent && navigationEvent.name === "next") nextStep();
+ else if (navigationEvent && navigationEvent.name === "step" && navigationEvent.step) onStepClick(navigationEvent.step);
+ setCheckDataCompletion("false");
+ setNavigationEvent(undefined);
+ }, [navigationEvent, checkDataCompletion]);
+
+ // Function to navigate to the next step
+ const nextStep = useCallback(() => {
+ if (!currentPage) return;
+ if (currentPage?.id + 1 > props.config.length - 1) return;
+ setCurrentPage((previous) => props.config[previous?.id + 1]);
+ }, [currentPage]);
+
+ // Function to navigate to the previous step
+ const previousStep = useCallback(() => {
+ setCurrentPage((previous) => props.config[previous?.id - 1]);
+ }, []);
+
+ // Function to handle step click and navigate to the selected step
+ const onStepClick = useCallback((index) => {
+ const newCurrentPage = props.config.find((item) => item.id === index);
+ setCurrentPage(newCurrentPage);
+ });
+
+ // Function to handle next button click
+ const nextbuttonClickHandler = useCallback(() => {
+ if (props.checkDataCompleteness && LoadCustomComponent({component:props.components[currentPage?.component]}) !== null) {
+ setCheckDataCompletion("true");
+ setNavigationEvent({ name: "next" });
+ } else nextStep();
+ }, [props.checkDataCompleteness,nextStep]);
+
+ // Function to handle step click
+ const stepClickHandler = useCallback(
+ (index) => {
+ if(!props.stepNavigationActive) return;
+ if (props.checkDataCompleteness && LoadCustomComponent({component:props.components[currentPage?.component]}) !== null) {
+ setCheckDataCompletion("true");
+ setNavigationEvent({ name: "step", step: index });
+ } else {
+ onStepClick(index);
+ }
+ },
+ [props.checkDataCompleteness,props.stepNavigationActive,onStepClick]
+ );
+
+ return (
+
+ {/* Stepper component */}
+
t(item.name))}
+ direction="horizontal"
+ onStepClick={stepClickHandler}
+ />
+
+ {/* Load custom component based on current page */}
+ {LoadCustomComponent({component:props.components[currentPage?.component]}) !== null ? (
+
+ ) : (
+ {t("COMMON_DATA_NOT_PRESENT")}
+ )}
+
+ {/* Action bar */}
+
+ {/* Back button */}
+ {currentPage?.id > 0 && (
+ }
+ />
+ )}
+ {/* Next/Submit button */}
+
+
+
+ {/* Toast notification */}
+ {toast && setToast(undefined)} />}
+
+ );
+};
+
+// Component to load custom component based on current page
+const LoadCustomComponent = (props) => {
+ if (props && !props.component) return null;
+ const secondaryProps = props.secondaryProps;
+ return
;
+};
+LoadCustomComponent.propTypes = {
+ component: PropTypes.elementType.isRequired,
+ secondaryProps: PropTypes.object,
+ };
+export default Navigator;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/TimelineMicroplan.js b/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/TimelineMicroplan.js
deleted file mode 100644
index a5a140cde70..00000000000
--- a/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/TimelineMicroplan.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { TickMark } from "@egovernments/digit-ui-react-components";
-import { timeLineOptions } from "../configs/timeLineOptions.json";
-
-let actions = timeLineOptions;
-const TimelineMicroplan = ({ currentStep = 0, onStepClick }) => {
- const { t } = useTranslation();
- const isMobile = window.Digit.Utils.browser.isMobile();
- return (
-
- {actions.map((data) => (
-
onStepClick(data?.id)}>
-
- {data?.id < currentStep ? : data?.id + 1}
- {t(data?.name)}
-
- {data?.id < actions.length - 1 &&
}
-
- ))}
-
- );
-};
-
-export default TimelineMicroplan;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/pages/employee/CreateMicroplan.js b/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/pages/employee/CreateMicroplan.js
index f7ae6ea793f..496d1ef2d21 100644
--- a/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/pages/employee/CreateMicroplan.js
+++ b/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/pages/employee/CreateMicroplan.js
@@ -1,11 +1,16 @@
-import { FormComposerV2 } from "@egovernments/digit-ui-react-components";
+// import { ActionBar, FormComposerV2 } from "@egovernments/digit-ui-react-components";
+// import { ActionBar, Button, Stepper} from "@egovernments/digit-ui-components";
+import { ActionBar, Stepper, Toast } from "@egovernments/digit-ui-components";
+
import React, { useState, useEffect, useCallback } from "react";
import { useTranslation } from "react-i18next";
-import TimelineMicroplan from "../../components/TimelineMicroplan";
import { timeLineOptions } from "../../configs/timeLineOptions.json";
import Upload from "./Upload";
import Hypothesis from "./Hypothesis";
import RuleEngine from "./RuleEngine";
+import { Button } from "@egovernments/digit-ui-react-components";
+import { ArrowBack, ArrowForward } from "@egovernments/digit-ui-svg-components";
+import Navigator from "../../components/Nagivator";
export const components = {
Upload,
@@ -13,40 +18,30 @@ export const components = {
RuleEngine,
};
+// Main component for creating a microplan
const CreateMicroplan = () => {
- const [currentPage, setCurrentPage] = useState();
- useEffect(() => {
- if (!timeLineOptions || timeLineOptions.length === 0) return;
- setCurrentPage(timeLineOptions[0]);
- }, [timeLineOptions]);
+ // States
+ const [microplanData, setMicroplanData] = useState();
- const nextStep = useCallback(() => {
- setCurrentPage((previous) => timeLineOptions[previous?.id + 1]);
- }, []);
+ const { t } = useTranslation();
- const previousStep = useCallback(() => {
- setCurrentPage((previous) => timeLineOptions[previous?.id - 1]);
+ // useEffect to store data in session storage
+ useEffect(() => {
+ if (!microplanData) return;
+ Digit.SessionStorage.set("microplanData", microplanData);
+ }, [microplanData]);
+
+ // useEffect to store data in session storage
+ useEffect(() => {
+ const data = Digit.SessionStorage.get("microplanData");
+ setMicroplanData(data);
}, []);
return (
-
-
""} />
-
- 0 ? true : false}
- secondaryLabel={"PREVIOUS"}
- onSecondayActionClick={previousStep}
- label={currentPage?.id < timeLineOptions.length - 1 ? "NEXT" : "SUBMIT"}
- />
+
+
);
};
-const LoadCustomComponent = (props) => {
- if (!props.component) return null;
- return ;
-};
export default CreateMicroplan;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/pages/employee/Guidelines.js b/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/pages/employee/Guidelines.js
index 312a1df37ff..d5d0b070afd 100644
--- a/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/pages/employee/Guidelines.js
+++ b/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/pages/employee/Guidelines.js
@@ -1,20 +1,30 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-const Guidelines = () => {
- const {t} = useTranslation()
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+const Guidelines = ({ path }) => {
+ const { t } = useTranslation();
+ // const newPath = String(window.contextPath).split("/")
+ // console.log(newPath)
// Keeping inline style for now because design for this screen is not given yet
return (
- {t("CREATE_MICROPLAN_GUIDELINES")}
- )
-}
+
+
+ {t("CREATE_MICROPLAN_GUIDELINES")}
+
+
+ );
+};
-export default Guidelines
\ No newline at end of file
+export default Guidelines;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/pages/employee/Hypothesis.js b/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/pages/employee/Hypothesis.js
index eed559ff8f0..f547668c565 100644
--- a/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/pages/employee/Hypothesis.js
+++ b/micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/pages/employee/Hypothesis.js
@@ -17,7 +17,7 @@ const initialAssumptions = [
},
];
-const Hypothesis = ({ campaignType = "SMC" }) => {
+const Hypothesis = ({ campaignType = "SMC", microplanData, setMicroplanData, checkDataCompletion, setCheckDataCompletion }) => {
const { t } = useTranslation();
// States
@@ -27,14 +27,33 @@ const Hypothesis = ({ campaignType = "SMC" }) => {
const [itemForDeletion, setItemForDeletion] = useState();
const [exampleOption, setExampleOption] = useState("");
- // Fetching data using custom MDMS hook
- const { isLoading, data } = Digit.Hooks.useCustomMDMS("mz", "hcm-microplanning", [
- { name: "hypothesisAssumptions" },
- ]);
+ // UseEffect to extract data on first render
+ useEffect(() => {
+ if (!microplanData || !microplanData.hypothesis) return;
+ setAssumptions(microplanData.hypothesis);
+ }, []);
+
+ // UseEffect for checking completeness of data before moveing to next section
+ useEffect(() => {
+ if (!assumptions || checkDataCompletion !== "true" || !setCheckDataCompletion) return;
+ let check = assumptions.every((item) => Object.values(item).every((data) => data !== ""));
+ check = check && assumptions.length !== 0;
+ if (check) setCheckDataCompletion("valid");
+ else setCheckDataCompletion("invalid");
+ }, [checkDataCompletion]);
+
+ // UseEffect to store current data
+ useEffect(() => {
+ if (!assumptions || !setMicroplanData) return;
+ setMicroplanData((previous) => ({ ...previous, hypothesis: assumptions }));
+ }, [assumptions]);
+
+ // Fetching data using custom MDMS hook
+ const { isLoading, data } = Digit.Hooks.useCustomMDMS("mz", "hcm-microplanning", [{ name: "hypothesisAssumptions" }]);
// useEffect to initialise the data from MDMS
useEffect(() => {
- if(!data || !data["hcm-microplanning"]) return;
+ if (!data || !data["hcm-microplanning"]) return;
let hypothesisAssumptions = data["hcm-microplanning"]["hypothesisAssumptions"];
if (!hypothesisAssumptions) return;
@@ -71,7 +90,9 @@ const Hypothesis = ({ campaignType = "SMC" }) => {
t={t}
/>
{/* delete conformation */}
@@ -81,7 +102,7 @@ const Hypothesis = ({ campaignType = "SMC" }) => {
LeftButtonHandler={deleteAssumptionHandlerCallback}
RightButtonHandler={closeModal}
footerLeftButtonBody={}
- footerRightButtonBody={}
+ footerRightButtonBody={}
header={}
bodyText={t("HYPOTHESIS_INSTRUCTIONS_DELETE_ENTRY_CONFIRMATION")}
/>
@@ -130,7 +151,7 @@ const InterractableSection = React.memo(
-
{t("KEY")}
+
{t("KEY")}
{t("VALUE")}
@@ -142,8 +163,8 @@ const InterractableSection = React.memo(
- {assumptions.map((item,index) => (
-
+ {assumptions.map((item, index) => (
+
@@ -215,7 +236,7 @@ const InterractableSection = React.memo(
{rules.map((item, index) => (
-
+