Skip to content

Commit

Permalink
Updated activity selection screen to have view also (#1830)
Browse files Browse the repository at this point in the history 
updated activity selection screen to have view also

Co-authored-by: rachana-egov <[email protected]>
  • Loading branch information
@rachana-egov
rachana-egov and rachana-egov authored Nov 14, 2024
1 parent aa672b1 commit 5b8e5e0
Show file tree
Hide file tree
Showing 7 changed files with 185 additions and 79 deletions.
29 changes: 18 additions & 11 deletions ...micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/ActivityCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
import React, { Fragment } from "react";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { Card, CardHeader } from "@egovernments/digit-ui-react-components";
import { Card as CardNew } from "@egovernments/digit-ui-components";
import { CardHeader } from "@egovernments/digit-ui-react-components";
import { Card, Tag } from "@egovernments/digit-ui-components";

const ActivityHomeCard = ({onClickCard=()=>{},...props}) => {
const { t } = useTranslation();
const history = useHistory();

return (
<React.Fragment>
<Card className="fsm" style={{ backgroundColor: "transparent", boxShadow: "none", paddingTop: "0",marginRight:"1rem",marginLeft:"1rem" }}>
<CardHeader> {t(props.title)} </CardHeader>
<div >
<div className="village-header" >
{t(props.title)}
</div>
<div className="activity-grid"
>
{props.module.map((i) => {
return (
<CardNew
<Card
className={`activity-card ${i.disable ? "disabled-activity" : ""}`}
key={i.name} // Always use key when rendering list items
style={{
minWidth: "100px",
cursor: i.disable ? "not-allowed" : "pointer",
opacity: i.disable ? 0.8 : 1,
backgroundColor:i.disable ? "transparent" : "#FFFFFF",
// To visually indicate the disabled state
opacity: i.disable ? 0.8 : 1, // To visually indicate the disabled state
justifyContent: "center",
alignItems: "center",
height: "130px",
height: "200px",
}} // Adding margin to each card
onClick={() => {
if (!i.disable) { // Check if disabled
Expand All @@ -38,14 +38,21 @@ const ActivityHomeCard = ({onClickCard=()=>{},...props}) => {
children={
<>
{i.icon}
{i.doneLabel && <Tag
icon=""
label={t(i.doneLabel)}
labelStyle={{}}
style={{}}
type="success"
/>}
<p className={`activity-card-label ${i.disable ? "disable-label" : ""}`}>{t(i.name)}</p>
</>
}
></CardNew>
></Card>
);
})}
</div>
</Card>
</div>
</React.Fragment>
);
};
Expand Down
27 changes: 24 additions & 3 deletions ...icro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const FacilityPopUp = ({ details, onClose, updateDetails }) => {
const [totalCensusCount, setTotalCensusCount] = useState(0);
const [currentPage, setCurrentPage] = useState(1);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [disabledAction, setDisabledAction] = useState(false);
const [boundaryData, setBoundaryData] = useState([]);
const configNavItem = [
{
Expand Down Expand Up @@ -65,7 +66,27 @@ const FacilityPopUp = ({ details, onClose, updateDetails }) => {
setLoader(false);
}, [currentPage, rowsPerPage])

// fetch the process instance for the current microplan to check if we need to disabled actions or not
const { isLoading:isProcessLoading, data: processData, } = Digit.Hooks.useCustomAPIHook({
url: "/egov-workflow-v2/egov-wf/process/_search",
params: {
tenantId: tenantId,
history: true,
businessIds: microplanId,
},
config: {
enabled: true,
select: (data) => {
return data?.ProcessInstances;
},
},
});

useEffect(() => {
if (processData && processData.some((instance) => instance.action === "FINALIZE_CATCHMENT_MAPPING")) {
setDisabledAction(true);
}
}, [processData]);


const { data: planEmployeeDetailsData, isLoading: isLoadingPlanEmployee } = Digit.Hooks.microplanv1.usePlanSearchEmployee({
Expand Down Expand Up @@ -181,12 +202,12 @@ const FacilityPopUp = ({ details, onClose, updateDetails }) => {
}

useEffect(() => {
if (isLoadingPlanEmployee || isLoadingCampaign) {
if (isLoadingPlanEmployee || isLoadingCampaign || isProcessLoading) {
setLoader(true);
} else {
setLoader(false);
}
}, [isLoadingPlanEmployee, isLoadingCampaign]);
}, [isLoadingPlanEmployee, isLoadingCampaign, isProcessLoading]);

const handleRowSelect = (event) => {
// Extract the IDs of all selected rows
Expand Down Expand Up @@ -397,7 +418,7 @@ const FacilityPopUp = ({ details, onClose, updateDetails }) => {
onChangeRowsPerPage={handleRowsPerPageChange}
paginationRowsPerPageOptions={[10, 20, 50, 100]}
paginationTotalRows={totalCensusCount}
selectableRows
selectableRows={!disabledAction}
selectableRowsHighlight
noContextMenu
onSelectedRowsChange={handleRowSelect}
Expand Down
2 changes: 1 addition & 1 deletion ...icro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ const PopInboxTable = ({ ...props }) => {
<DataTable
columns={columns}
data={props.censusData}
selectableRows
selectableRows={!props.disabledAction}
selectableRowsHighlight
noContextMenu
onSelectedRowsChange={handleRowSelect}
Expand Down
143 changes: 86 additions & 57 deletions ...ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/ChooseActivity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,27 @@ const ChooseActivity = () => {
const { campaignId, microplanId, } = Digit.Hooks.useQueryParams();
const tenantId = Digit.ULBService.getStateId();
const userInfo = Digit.UserService.getUser();
const { isLoading: isLoadingPlanObject, data: planObject,} = Digit.Hooks.microplanv1.useSearchPlanConfig(
const [activityCardData, setActivityCardData] = useState([]);



const { isLoading: isLoadingPlanObject, data: planObject, refetch: refetchPlanObject} = Digit.Hooks.microplanv1.useSearchPlanConfig(
{
PlanConfigurationSearchCriteria: {
tenantId,
id: microplanId,
},
},
{
enabled: microplanId ? true : false,
enabled: true,
}
);

// // Watch for campaignId or microplanId changes to trigger the fetch
useEffect(() => {
refetchPlanObject();
}, [microplanId, campaignId]);

const { isLoading: isBusinessServiceLoading, data: workflowData, } = Digit.Hooks.useCustomAPIHook({
url: "/egov-workflow-v2/egov-wf/businessservice/_search",
params: {
Expand All @@ -37,68 +46,85 @@ const ChooseActivity = () => {
},
});

// fetch the process instance for the current microplan to check if current process is done or not
const { isLoading:isProcessLoading, data: processData, revalidate } = Digit.Hooks.useCustomAPIHook({
url: "/egov-workflow-v2/egov-wf/process/_search",
params: {
tenantId: tenantId,
history: true,
businessIds: microplanId,
},
config: {
enabled: true,
select: (data) => {
return data?.ProcessInstances;
},
},
});


if(isLoadingPlanObject || isBusinessServiceLoading){
return <Loader/>;
}
else{
// Merged function to disable a card based on user roles and available actions in the current state
const isCardDisabled = (validRoles = [], currentState, validStatuses = [],) => {
const userRoles = userInfo?.info?.roles?.map((roleData) => roleData?.code) || [];
useEffect(() => {
if(planObject && workflowData && processData){
const updatedActivityCardData = [
{
name: t("VALIDATE_N_APPROVE_POPULATION_DATA"),
link: `pop-inbox?campaignId=${campaignId}&microplanId=${microplanId}`,
doneLabel: isProcessDone(processData, "APPROVE_CENSUS_DATA") && "CENSUS_VALIDATED_LABEL",
icon: <SVG.Population height="36" width="36" fill={isCardDisabled(["POPULATION_DATA_APPROVER", "ROOT_POPULATION_DATA_APPROVER"], isProcessDone(processData, "APPROVE_CENSUS_DATA"), ["EXECUTION_TO_BE_DONE","CENSUS_DATA_APPROVAL_IN_PROGRESS"]) ? "#C5C5C5" : "#C84C0E"}/>,
disable: isCardDisabled(["POPULATION_DATA_APPROVER", "ROOT_POPULATION_DATA_APPROVER"], isProcessDone(processData, "APPROVE_CENSUS_DATA"), ["EXECUTION_TO_BE_DONE","CENSUS_DATA_APPROVAL_IN_PROGRESS"]),
optionKey: "VALIDATE_N_APPROVE_POPULATION_DATA"
},
{
name: t("ASSIGN_FACILITIES_TO_VILLAGE"),
link: `assign-facilities-to-villages?campaignId=${campaignId}&microplanId=${microplanId}`,
doneLabel: isProcessDone(processData, "FINALIZE_CATCHMENT_MAPPING") && "FACILITY_CATCHEMENT_DONE_LABEL",
icon: <SVG.AssignmentTurnedIn height="36" width="36" fill={isCardDisabled(["FACILITY_CATCHMENT_MAPPER", "ROOT_FACILITY_CATCHMENT_MAPPER"], isProcessDone(processData, "FINALIZE_CATCHMENT_MAPPING"), ["CENSUS_DATA_APPROVED"]) ? "#C5C5C5" : "#C84C0E"} />,
disable: isCardDisabled(["FACILITY_CATCHMENT_MAPPER", "ROOT_FACILITY_CATCHMENT_MAPPER"], isProcessDone(processData, "FINALIZE_CATCHMENT_MAPPING"), ["CENSUS_DATA_APPROVED"]),
optionKey: "ASSIGN_FACILITIES_TO_VILLAGE"
},
{
name: t("VALIDATE_N_APPROVE_MICROPLAN_ESTIMATIONS"),
link: `plan-inbox?campaignId=${campaignId}&microplanId=${microplanId}`,
doneLabel: isProcessDone(processData, "APPROVE_ESTIMATIONS") && "ESTIMATIONS_APPROVED_LABEL",
icon: <SVG.FactCheck height="36" width="36" fill={isCardDisabled(["PLAN_ESTIMATION_APPROVER", "ROOT_PLAN_ESTIMATION_APPROVER"], isProcessDone(processData, "APPROVE_ESTIMATIONS"), ["RESOURCE_ESTIMATION_IN_PROGRESS"]) ? "#C5C5C5" : "#C84C0E"} />,
disable: isCardDisabled(["PLAN_ESTIMATION_APPROVER", "ROOT_PLAN_ESTIMATION_APPROVER"], isProcessDone(processData, "APPROVE_ESTIMATIONS"), ["RESOURCE_ESTIMATION_IN_PROGRESS"]),
optionKey: "VALIDATE_N_APPROVE_MICROPLAN_ESTIMATIONS"
},
{
name: t("GEOSPATIAL_MAP_VIEW"),
link: null,
icon: <SVG.LocationOn height="36" width="36" fill={isCardDisabled([], workflowData) ? "#C5C5C5" : "#C84C0E"} />,
disable: isCardDisabled([], false),
optionKey: "GEOSPATIAL_MAP_VIEW"
},
];
setActivityCardData(updatedActivityCardData);
}
}, [planObject, workflowData, processData]);


// Merged function to disable a card based on user roles
const isCardDisabled = (validRoles = [], isProcessDone, validStatuses = [],) => {
const userRoles = userInfo?.info?.roles?.map((roleData) => roleData?.code) || [];

// Check if user has any valid roles
const hasValidRole = validRoles?.length > 0 && validRoles?.some(role => userRoles.includes(role));
// Check if user has any valid roles
const hasValidRole = validRoles?.length > 0 && validRoles?.some(role => userRoles.includes(role));

// Check if there are valid actions in the current state that match user roles
const hasValidNextAction = currentState?.actions?.some(action =>
action?.roles.some(role => userRoles?.includes(role))
);
const hasValidCurrentStatus = validStatuses?.includes(planObject?.status);

// Disable if either hasValidRole or hasValidNextAction is false
return !(hasValidRole &&(isProcessDone || hasValidCurrentStatus) /*hasValidNextAction*/ );
};

const hasValidCurrentStatus = validStatuses?.includes(planObject?.status);

// Disable if either hasValidRole or hasValidNextAction is false
return !(hasValidRole && hasValidCurrentStatus /*hasValidNextAction*/ );
// Function to check if process is done for the current card
const isProcessDone = (ProcessInstances, process) => {
// Iterate over each process instance in the array
return ProcessInstances.some((instance) => instance.action === process);
};

// Usage in activityCardData
const activityCardData = [
{
name: t("VALIDATE_N_APPROVE_POPULATION_DATA"),
link: `pop-inbox?campaignId=${campaignId}&microplanId=${microplanId}`,
icon: <SVG.Population height="36" width="36" fill={isCardDisabled(["POPULATION_DATA_APPROVER", "ROOT_POPULATION_DATA_APPROVER"], workflowData, ["EXECUTION_TO_BE_DONE","CENSUS_DATA_APPROVAL_IN_PROGRESS"]) ? "#C5C5C5" : "#C84C0E"}/>,
disable: isCardDisabled(["POPULATION_DATA_APPROVER", "ROOT_POPULATION_DATA_APPROVER"], workflowData, ["EXECUTION_TO_BE_DONE","CENSUS_DATA_APPROVAL_IN_PROGRESS"]),
optionKey: "VALIDATE_N_APPROVE_POPULATION_DATA"
},
{
name: t("ASSIGN_FACILITIES_TO_VILLAGE"),
link: `assign-facilities-to-villages?campaignId=${campaignId}&microplanId=${microplanId}`,
icon: <SVG.AssignmentTurnedIn height="36" width="36" fill={isCardDisabled(["FACILITY_CATCHMENT_MAPPER", "ROOT_FACILITY_CATCHMENT_MAPPER"], workflowData, ["CENSUS_DATA_APPROVED"]) ? "#C5C5C5" : "#C84C0E"} />,
disable: isCardDisabled(["FACILITY_CATCHMENT_MAPPER", "ROOT_FACILITY_CATCHMENT_MAPPER"], workflowData, ["CENSUS_DATA_APPROVED"]),
optionKey: "ASSIGN_FACILITIES_TO_VILLAGE"
},
{
name: t("VALIDATE_N_APPROVE_MICROPLAN_ESTIMATIONS"),
link: `plan-inbox?campaignId=${campaignId}&microplanId=${microplanId}`,
icon: <SVG.FactCheck height="36" width="36" fill={isCardDisabled(["PLAN_ESTIMATION_APPROVER", "ROOT_PLAN_ESTIMATION_APPROVER"], workflowData, ["RESOURCE_ESTIMATION_IN_PROGRESS"]) ? "#C5C5C5" : "#C84C0E"} />,
disable: isCardDisabled(["PLAN_ESTIMATION_APPROVER", "ROOT_PLAN_ESTIMATION_APPROVER"], workflowData, ["RESOURCE_ESTIMATION_IN_PROGRESS"]),
optionKey: "VALIDATE_N_APPROVE_MICROPLAN_ESTIMATIONS"
},
{
name: t("GEOSPATIAL_MAP_VIEW"),
link: null,
icon: <SVG.LocationOn height="36" width="36" fill={isCardDisabled([], workflowData) ? "#C5C5C5" : "#C84C0E"} />,
disable: isCardDisabled([], workflowData),
optionKey: "GEOSPATIAL_MAP_VIEW"
},
//commenting this as for now we are not showing viewer
// {
// name: t("VIEW_MICROPLAN_ESTIMATIONS"),
// link: `pop-inbox?campaignId=${campaignId}&microplanId=${microplanId}`,
// icon: <SVG.Visibility height="36" width="36" fill={isCardDisabled(["MICROPLAN_VIEWER"], workflowData) ? "#C5C5C5" : "#C84C0E"} />,
// disable: isCardDisabled(["MICROPLAN_VIEWER"], workflowData),
// optionKey: "VIEW_MICROPLAN_ESTIMATIONS"
// }
];


const updatePlan = async (req) => {
const planRes = await Digit.CustomService.getResponse({
Expand Down Expand Up @@ -127,12 +153,15 @@ const ChooseActivity = () => {
}
}

if(isLoadingPlanObject || isBusinessServiceLoading || isProcessLoading){
return <Loader/>;
}

return (
<React.Fragment>
<ActivityHomeCard title={t("SELECT_AN_ACTIVITY_TO_CONTINUE")} module={activityCardData} onClickCard={onClickCard}/>
</React.Fragment>
);
}
}

export default ChooseActivity;
8 changes: 4 additions & 4 deletions ...ro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMapping.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ const FacilityCatchmentMapping = () => {
return <Loader />

return (
<React.Fragment>
<div style={{ marginBottom: "2.5rem" }}>
<Header styles={{ marginBottom: "1.5rem" }}>{t("MICROPLAN_ASSIGN_CATCHMENT_VILLAGES")}</Header>
<div className="inbox-search-wrapper">
<InboxSearchComposer
Expand Down Expand Up @@ -171,8 +171,8 @@ const FacilityCatchmentMapping = () => {
{actionBarPopUp && (
<WorkflowCommentPopUp
onClose={closeActionBarPopUp}
heading={t(`HCM_MICROPLAN_FINALIZE_FACILITY_TO_VILLAGE_ASSIGNMENT`)}
submitLabel={t(`HCM_MICROPLAN_FINALIZE_FACILITY_TO_VILLAGE_ASSIGNMENT`)}
heading={t(`HCM_MICROPLAN_FINALIZE_FACILITY_TO_VILLAGE_ASSIGNMENT_HEADING_LABEL`)}
submitLabel={t(`HCM_MICROPLAN_FINALIZE_FACILITY_TO_VILLAGE_ASSIGNMENT_SUBMIT_LABEL`)}
url="/plan-service/config/_update"
requestPayload={{ PlanConfiguration: updateWorkflowForFooterAction() }}
commentPath="workflow.comment"
Expand All @@ -186,7 +186,7 @@ const FacilityCatchmentMapping = () => {
}}
/>
)}
</React.Fragment>
</div>
);
};

Expand Down
Loading

0 comments on commit 5b8e5e0

Please sign in to comment.