diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/CampaignBoundary.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/CampaignBoundary.js index 80779374fba..033302c5b02 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/CampaignBoundary.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/CampaignBoundary.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useMemo } from "react"; +import React, { useState, useEffect, useMemo, Fragment } from "react"; import { useTranslation } from "react-i18next"; import { useMyContext } from "../utils/context"; import SubBoundaryView from "./subBoundaryView"; @@ -6,8 +6,7 @@ import HeaderComp from "./HeaderComp"; import { Card } from "@egovernments/digit-ui-components"; import BoundaryKpi from "./BoundaryKpi"; - -const CampaignBoundary = ({customProps}) => { +const CampaignBoundary = ({ customProps }) => { const { dispatch, state } = useMyContext(); const { t } = useTranslation(); @@ -25,13 +24,165 @@ const CampaignBoundary = ({customProps}) => { setBoundaryStatus(updatedBoundaryStatus); // Set showAllItems to true to show all items }; - + // const selectedData = [ + // { + // "code": "MICROPLAN_MO", + // "name": "MICROPLAN_MO", + // "type": "Country", + // "isRoot": true, + // "includeAllChildren": false + // }, + // { + // "code": "MICROPLAN_MO_05_SINOE", + // "name": "MICROPLAN_MO_05_SINOE", + // "type": "Province", + // "parent": "MICROPLAN_MO", + // "isRoot": false, + // "includeAllChildren": false + // }, + // { + // "code": "MICROPLAN_MO_05_07_JEDEPO", + // "name": "MICROPLAN_MO_05_07_JEDEPO", + // "type": "District", + // "parent": "MICROPLAN_MO_05_SINOE", + // "isRoot": false, + // "includeAllChildren": false + // }, + // { + // "code": "MICROPLAN_MO_05_07_03_JOKOKEN_CLINIC", + // "name": "MICROPLAN_MO_05_07_03_JOKOKEN_CLINIC", + // "type": "Locality", + // "parent": "MICROPLAN_MO_05_07_JEDEPO", + // "isRoot": false, + // "includeAllChildren": false + // }, + // { + // "code": "MICROPLAN_MO_05_07_03_15_POKPAKEN_TOWN_K1889", + // "name": "MICROPLAN_MO_05_07_03_15_POKPAKEN_TOWN_K1889", + // "type": "Village", + // "parent": "MICROPLAN_MO_05_07_03_JOKOKEN_CLINIC", + // "isRoot": false, + // "includeAllChildren": true + // }, + // { + // "code": "MICROPLAN_MO_05_07_03_14_POKPAKEN_TOWN_P1888", + // "name": "MICROPLAN_MO_05_07_03_14_POKPAKEN_TOWN_P1888", + // "type": "Village", + // "parent": "MICROPLAN_MO_05_07_03_JOKOKEN_CLINIC", + // "isRoot": false, + // "includeAllChildren": true + // }, + // { + // "code": "MICROPLAN_MO_05_06_JEADE", + // "name": "MICROPLAN_MO_05_06_JEADE", + // "type": "District", + // "parent": "MICROPLAN_MO_05_SINOE", + // "isRoot": false, + // "includeAllChildren": false + // }, + // { + // "code": "MICROPLAN_MO_05_06_03_DIYANKPO", + // "name": "MICROPLAN_MO_05_06_03_DIYANKPO", + // "type": "Locality", + // "parent": "MICROPLAN_MO_05_06_JEADE", + // "isRoot": false, + // "includeAllChildren": false + // }, + // { + // "code": "MICROPLAN_MO_05_06_03_09_DIYANKPO_MELINP1836", + // "name": "MICROPLAN_MO_05_06_03_09_DIYANKPO_MELINP1836", + // "type": "Village", + // "parent": "MICROPLAN_MO_05_06_03_DIYANKPO", + // "isRoot": false, + // "includeAllChildren": true + // }, + // { + // "code": "MICROPLAN_MO_05_05_GREENVILLE", + // "name": "MICROPLAN_MO_05_05_GREENVILLE", + // "type": "District", + // "parent": "MICROPLAN_MO_05_SINOE", + // "isRoot": false, + // "includeAllChildren": false + // }, + // { + // "code": "MICROPLAN_MO_05_05_04_F_J_GRANTE_HOSPITAL", + // "name": "MICROPLAN_MO_05_05_04_F_J_GRANTE_HOSPITAL", + // "type": "Locality", + // "parent": "MICROPLAN_MO_05_05_GREENVILLE", + // "isRoot": false, + // "includeAllChildren": false + // }, + // { + // "code": "MICROPLAN_MO_05_05_04_16_SEEBEH_NYENNUE", + // "name": "MICROPLAN_MO_05_05_04_16_SEEBEH_NYENNUE", + // "type": "Village", + // "parent": "MICROPLAN_MO_05_05_04_F_J_GRANTE_HOSPITAL", + // "isRoot": false, + // "includeAllChildren": true + // }, + // { + // "code": "MICROPLAN_MO_04_GBARPOLU", + // "name": "MICROPLAN_MO_04_GBARPOLU", + // "type": "Province", + // "parent": "MICROPLAN_MO", + // "isRoot": false, + // "includeAllChildren": false + // }, + // { + // "code": "MICROPLAN_MO_04_06_KUNGBOR", + // "name": "MICROPLAN_MO_04_06_KUNGBOR", + // "type": "District", + // "parent": "MICROPLAN_MO_04_GBARPOLU", + // "isRoot": false, + // "includeAllChildren": false + // }, + // { + // "code": "MICROPLAN_MO_04_06_02_KUNGBOR_CLINIC", + // "name": "MICROPLAN_MO_04_06_02_KUNGBOR_CLINIC", + // "type": "Locality", + // "parent": "MICROPLAN_MO_04_06_KUNGBOR", + // "isRoot": false, + // "includeAllChildren": false + // }, + // { + // "code": "MICROPLAN_MO_04_06_02_70_CAMP_ALPHA_TOWN1629", + // "name": "MICROPLAN_MO_04_06_02_70_CAMP_ALPHA_TOWN1629", + // "type": "Village", + // "parent": "MICROPLAN_MO_04_06_02_KUNGBOR_CLINIC", + // "isRoot": false, + // "includeAllChildren": true + // }, + // { + // "code": "MICROPLAN_MO_04_05_GBARMA", + // "name": "MICROPLAN_MO_04_05_GBARMA", + // "type": "District", + // "parent": "MICROPLAN_MO_04_GBARPOLU", + // "isRoot": false, + // "includeAllChildren": false + // }, + // { + // "code": "MICROPLAN_MO_04_05_05_YANGARYAH_CLINIC", + // "name": "MICROPLAN_MO_04_05_05_YANGARYAH_CLINIC", + // "type": "Locality", + // "parent": "MICROPLAN_MO_04_05_GBARMA", + // "isRoot": false, + // "includeAllChildren": false + // }, + // { + // "code": "MICROPLAN_MO_04_05_05_20_YANGARYAH_TOWN_1558", + // "name": "MICROPLAN_MO_04_05_05_20_YANGARYAH_TOWN_1558", + // "type": "Village", + // "parent": "MICROPLAN_MO_04_05_05_YANGARYAH_CLINIC", + // "isRoot": false, + // "includeAllChildren": true + // } + // ] const selectedData = customProps?.sessionData?.BOUNDARY?.boundarySelection?.selectedData; - - + + // Memoizing parents and parent_group to only compute once when selectedData changes - + const { parents, parent_group } = useMemo(() => { let parents = {}; let parent_group = {}; @@ -47,17 +198,28 @@ const CampaignBoundary = ({customProps}) => { } for (const ob of selectedData) { + const parentCodes = parents[ob['parent']]; // Get the array of codes for the parent + if (!parentCodes) { + continue; + } + + // If the type is not yet in parent_group, initialize it with the elements of parentCodes if (!(ob['type'] in parent_group)) { - parent_group[ob['type']] = [parentCodes]; // Initialize with the first unique array + parent_group[ob['type']] = [...parentCodes]; // Spread the elements of parentCodes directly } else { - const existingArrays = parent_group[ob['type']]; - if (!existingArrays.some(arr => JSON.stringify(arr) === JSON.stringify(parentCodes))) { - parent_group[ob['type']].push(parentCodes); // Add only if it's unique - } + const existingCodes = parent_group[ob['type']]; + + // Check if any element from parentCodes already exists in the parent_group[ob['type']] + parentCodes.forEach(code => { + if (!existingCodes.includes(code)) { + parent_group[ob['type']].push(code); // Add the code only if it's not already present + } + }); } } + return { parents, parent_group }; }, [selectedData]); @@ -112,12 +274,12 @@ const CampaignBoundary = ({customProps}) => { for (const ind in bHierarchy) { if (parent_group[bHierarchy[ind]] && parent_group[bHierarchy[ind]].length > 2) { - updatedBoundaryStatus[ind] = true; + updatedBoundaryStatus[ind] = true; } else { - updatedBoundaryStatus[ind] = false; + updatedBoundaryStatus[ind] = false; } } - + setBoundaryStatus(updatedBoundaryStatus); @@ -125,7 +287,7 @@ const CampaignBoundary = ({customProps}) => { }, [boundaryHierarchy]); // Only re-run when boundaryHierarchy changes - + return (
@@ -145,67 +307,55 @@ const CampaignBoundary = ({customProps}) => { - {bHierarchy.length > 1 && bHierarchy.slice(1, -1).map((item, ind) => { - //item-Country,Province,Locality,District,Village - if (parent_group[item] && Array.isArray(parent_group[item])) { - return parent_group[item].map((item1, idx) => { - //item1-Province-[Sinoe],District-[Jedepo,Jeade] - return Array.isArray(item1) && (!boundaryStatus[ind + 2]) ? ( - //make a super-comp that contains SubBoundary View - - - {item1.map((item2) => ( - //item2-parents name eg, sino etc + {bHierarchy.length > 1 && bHierarchy.slice(1, -1).map((item, ind) => ( + + {/* Wrap each bHierarchy item with Card */} + { + parent_group?.[item]?.map((item1, idx) => ( + Array.isArray(parents?.[item1]) && boundaryStatus?.[ind + 2] && (idx == 0 || idx == 1) ? ( + <> + + + + ) : Array.isArray(parents?.[item1]) && !boundaryStatus?.[ind + 2] ? ( + <> - )) - } + + + ) : null + )) || null + } + { + boundaryStatus?.[ind + 2] ? ( +
handleViewMore(ind + 2)} + className="view-more" + > + View More +
+ ) : (!boundaryStatus?.[ind + 2]) ? + (
handleViewMore(ind + 2)} className="view-more" > View Less
-
- ) : (Array.isArray(item1) && (boundaryStatus[ind + 2])) ? ( -
- - - {item1.filter(() => (idx == 0 || idx == 1)).map((item2) => ( - //item2-parents name eg, sino etc - - )) - } -
handleViewMore(ind + 2)} - className="view-more" - > - View More -
-
+ ) : null + } + + ))} - -
- - - - ) : (null) - - - - }); - } - return null; - })}
); }; diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js index d1d61e42d69..341a12e60c8 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js @@ -160,6 +160,8 @@ const App = ({ path, stateCode, userType, tenants,BOUNDARY_HIERARCHY_TYPE, hiera } /> } /> } /> + } /> + );