Skip to content

Commit

Permalink
Boundary screen1 (#1511)
Browse files Browse the repository at this point in the history 
* parents_group proper and displaying parents on seaparate cards

* Working boundary screen

* view more view less working

* removed console logs

---------

Co-authored-by: Nipun Arora <aroranipun1@gmail.com>
  • Loading branch information
@abishekTa-egov @nipunarora-eGov
abishekTa-egov and nipunarora-eGov authored Oct 13, 2024
1 parent e760db1 commit 533ee3d
Show file tree
Hide file tree
Showing 2 changed files with 218 additions and 66 deletions.
282 changes: 216 additions & 66 deletions ...o-ui/web/micro-ui-internals/packages/modules/microplan/src/components/CampaignBoundary.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
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";
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();

Expand All @@ -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 = {};
Expand All @@ -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]);

Expand Down Expand Up @@ -112,20 +274,20 @@ 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);





}, [boundaryHierarchy]); // Only re-run when boundaryHierarchy changes

return (
<div>

Expand All @@ -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
<Card key={`card_${ind}_${idx}`}>
<HeaderComp title={bHierarchy[ind + 2]} />
{item1.map((item2) => (
//item2-parents name eg, sino etc
{bHierarchy.length > 1 && bHierarchy.slice(1, -1).map((item, ind) => (
<Card key={`card_${ind}`}>
<HeaderComp title={bHierarchy[ind + 2]} /> {/* Wrap each bHierarchy item with Card */}
{
parent_group?.[item]?.map((item1, idx) => (
Array.isArray(parents?.[item1]) && boundaryStatus?.[ind + 2] && (idx == 0 || idx == 1) ? (
<>
<SubBoundaryView
key={`${item1}_${idx}`}
title={item1}
arr={parents?.[item1]}
/>

</>
) : Array.isArray(parents?.[item1]) && !boundaryStatus?.[ind + 2] ? (
<>
<SubBoundaryView
key={`${item2}_${idx}`}
title={item2}
arr={parents[item2]}
key={`${item1}_${idx}`}
title={item1}
arr={parents?.[item1]}
/>
))
}

</>
) : null
)) || null
}
{
boundaryStatus?.[ind + 2] ? (
<div
onClick={() => handleViewMore(ind + 2)}
className="view-more"
>
View More
</div>
) : (!boundaryStatus?.[ind + 2]) ?
(
<div
onClick={() => handleViewMore(ind + 2)}
className="view-more"
>
View Less
</div>
</Card>
) : (Array.isArray(item1) && (boundaryStatus[ind + 2])) ? (
<div key={`div_${ind}_${idx}`}>
<Card>
<HeaderComp title={bHierarchy[ind + 2]} />
{item1.filter(() => (idx == 0 || idx == 1)).map((item2) => (
//item2-parents name eg, sino etc
<SubBoundaryView
key={`${item2}_${idx}`}
title={item2}
arr={parents[item2]}
/>
))
}
<div
onClick={() => handleViewMore(ind + 2)}
className="view-more"
>
View More
</div>
</Card>

) : null
}
</Card>
))}



</div>



) : (null)



});
}
return null;
})}
</div>
);
};
Expand Down
2 changes: 2 additions & 0 deletions ...th/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,8 @@ const App = ({ path, stateCode, userType, tenants,BOUNDARY_HIERARCHY_TYPE, hiera
<PrivateRoute path={`${path}/setup-microplan`} component={() => <SetupMicroplan hierarchyType={BOUNDARY_HIERARCHY_TYPE} hierarchyData={hierarchyData} />} />
<PrivateRoute path={`${path}/microplan-search`} component={() => <MicroplanSearch></MicroplanSearch>} />
<PrivateRoute path={`${path}/user-management`} component={() => <UserManagement></UserManagement>} />
<PrivateRoute path={`${path}/campaign-boundary`} component={() => <CampaignBoundary/>} />

</AppContainer>
</Switch>
);
Expand Down

0 comments on commit 533ee3d

Please sign in to comment.