Finished boundary selection screen UI (#1425)

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js

@@ -1,5 +1,5 @@
 import { Loader } from "@egovernments/digit-ui-react-components";
-import React from "react";
+import React,{useState} from "react";
 import { useRouteMatch } from "react-router-dom";
 import { default as EmployeeApp } from "./pages/employee";
 import MicroplanCard from "./components/MicroplanCard";
@@ -13,10 +13,13 @@ import HypothesisWrapper from "./components/HypothesisWrapper";
 export const MicroplanModule = ({ stateCode, userType, tenants }) => {
  const { path, url } = useRouteMatch();
  const tenantId = Digit.ULBService.getCurrentTenantId();
+ const [lowestHierarchy,setLowestHierarchy] = useState("") 
  const { data: BOUNDARY_HIERARCHY_TYPE } = Digit.Hooks.useCustomMDMS(tenantId, "HCM-ADMIN-CONSOLE", [{ name: "hierarchyConfig" }], {
  select: (data) => {
- return data?.["HCM-ADMIN-CONSOLE"]?.hierarchyConfig?.find((item) => item.isActive)?.hierarchy;
- },
+ const item = data?.["HCM-ADMIN-CONSOLE"]?.hierarchyConfig?.find((item) => item.isActive)
+ setLowestHierarchy(item.lowestHierarchy)
+ return item?.hierarchy
+ },
  });
 
  const hierarchyData = Digit.Hooks.campaign.useBoundaryRelationshipSearch({BOUNDARY_HIERARCHY_TYPE,tenantId});
@@ -34,7 +37,7 @@ export const MicroplanModule = ({ stateCode, userType, tenants }) => {
  }
  return (
  <ProviderContext>
- <EmployeeApp path={path} stateCode={stateCode} userType={userType} tenants={tenants} hierarchyData={hierarchyData} BOUNDARY_HIERARCHY_TYPE={BOUNDARY_HIERARCHY_TYPE} />
+ <EmployeeApp path={path} stateCode={stateCode} userType={userType} tenants={tenants} hierarchyData={hierarchyData} BOUNDARY_HIERARCHY_TYPE={BOUNDARY_HIERARCHY_TYPE} lowestHierarchy={lowestHierarchy}/>
  </ProviderContext>
  );
 };

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/BoundarySelection.js

@@ -6,17 +6,16 @@ import BoundaryKpi from "./BoundaryKpi";
 import { useMyContext } from "../utils/context";
 
 const BoundarySelection = ({ onSelect, props: customProps, ...props }) => {
- const {state:{boundaryHierarchy}} = useMyContext()
+ const {state:{boundaryHierarchy,hierarchyType,lowestHierarchy}} = useMyContext()
  const { t } = useTranslation();
- const {state} = useMyContext();
  const tenantId = Digit.ULBService.getStateId();
  const BoundaryWrapper = Digit.ComponentRegistryService.getComponent("Wrapper");
- const [selectedData, setSelectedData] = useState(customProps?.sessionData?.HCM_CAMPAIGN_SELECTING_BOUNDARY_DATA?.boundaryType?.selectedData || []);
+ const [selectedData, setSelectedData] = useState(customProps?.sessionData?.BOUNDARY?.boundarySelection?.selectedData || []);
  const [boundaryOptions, setBoundaryOptions] = useState(
- props?.props?.sessionData?.HCM_CAMPAIGN_SELECTING_BOUNDARY_DATA?.boundaryType?.boundaryData || {}
+ props?.props?.sessionData?.BOUNDARY?.boundarySelection?.boundaryData || {}
  );
  const [statusMap, setStatusMap] = useState({});
-
+ const [executionCount, setExecutionCount] = useState(0);
  const [updateBoundary, setUpdateBoundary] = useState(true);
  const handleBoundaryChange = (value) => {
  setBoundaryOptions(value?.boundaryOptions);
@@ -31,15 +30,39 @@ const BoundarySelection = ({ onSelect, props: customProps, ...props }) => {
  }, [selectedData,boundaryHierarchy])
 
 
+ useEffect(() => {
+ onSelect(customProps.name, { selectedData: selectedData, boundaryData: boundaryOptions });
+ }, [selectedData, boundaryOptions]);
+
+ useEffect(() => {
+ if (executionCount < 5) {
+ onSelect(customProps.name, { selectedData: selectedData, boundaryData: boundaryOptions });
+ setExecutionCount((prevCount) => prevCount + 1);
+ }
+ });
+
+ useEffect(() => {
+ setSelectedData(
+ customProps?.sessionData?.BOUNDARY?.boundarySelection?.selectedData
+ ? customProps?.sessionData?.BOUNDARY?.boundarySelection?.selectedData
+ : []
+ );
+ setBoundaryOptions(
+ customProps?.sessionData?.BOUNDARY?.boundarySelection?.boundaryData
+ ? customProps?.sessionData?.BOUNDARY?.boundarySelection?.boundaryData
+ : {}
+ );
+ }, [customProps?.sessionData?.BOUNDARY?.boundarySelection]);
+
  return (
  <>
  <BoundaryKpi data={statusMap} />
  <Card>
  <Header>{t(`CAMPAIGN_SELECT_BOUNDARY`)}</Header>
  <p className="description-type">{t(`CAMPAIGN_SELECT_BOUNDARIES_DESCRIPTION`)}</p>
  <BoundaryWrapper
- hierarchyType={"MICROPLAN"}
- lowest={"Village"}
+ hierarchyType={hierarchyType}
+ lowest={lowestHierarchy}
  selectedData={selectedData}
  boundaryOptions={boundaryOptions}
  updateBoundary={updateBoundary}

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js

@@ -24,7 +24,7 @@ const ProjectBreadCrumb = ({ location }) => {
  return <BreadCrumb crumbs={crumbs} spanStyle={bredCrumbStyle} />;
 };
 
-const App = ({ path, stateCode, userType, tenants,BOUNDARY_HIERARCHY_TYPE, hierarchyData }) => {
+const App = ({ path, stateCode, userType, tenants,BOUNDARY_HIERARCHY_TYPE, hierarchyData ,lowestHierarchy }) => {
  const { dispatch } = useMyContext();
  const location = useLocation();
  const tenantId = Digit.ULBService.getCurrentTenantId();
@@ -126,7 +126,8 @@ const App = ({ path, stateCode, userType, tenants,BOUNDARY_HIERARCHY_TYPE, hiera
  type: "MASTER_DATA",
  state: {
  boundaryHierarchy:data?.BoundaryHierarchy?.[0]?.boundaryHierarchy,
- hierarchyType: BOUNDARY_HIERARCHY_TYPE
+ hierarchyType: BOUNDARY_HIERARCHY_TYPE,
+ lowestHierarchy
  },
  });
  return data?.BoundaryHierarchy?.[0];

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/utils/utilities.js

@@ -15,7 +15,7 @@ function createStatusMap(data, boundaryHierarchy) {
 
  if (data.length === 0) return statusMap;
  // Iterate over each object in the array
- data.forEach((item) => {
+ data?.forEach((item) => {
  // If the type already exists in the map, increment the count
  if (statusMap[item.type]) {
  statusMap[item.type]++;