From 4efa0474513855cdccc45f401336f68fd45182b0 Mon Sep 17 00:00:00 2001 From: Nipun Arora Date: Tue, 7 Jan 2025 11:27:24 +0530 Subject: [PATCH 1/5] FEATURE/HCMPRE-1706: Plan Inbox updates and draft flow changes (#2109) * updated plan inbox * Update createUpdatePlanProject.js * formatted createupdateplanproject --- .../hooks/services/createUpdatePlanProject.js | 180 +++++++++++------- .../microplan/src/pages/employee/PlanInbox.js | 2 +- 2 files changed, 107 insertions(+), 75 deletions(-) diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/hooks/services/createUpdatePlanProject.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/hooks/services/createUpdatePlanProject.js index fb7d9fe5d2..f9a174c004 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/hooks/services/createUpdatePlanProject.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/hooks/services/createUpdatePlanProject.js @@ -51,13 +51,9 @@ const isValidResourceName = async (name) => { function updateFormulasSource(formulasToUpdate, assumptions) { // Extract keys of assumptions with source "CUSTOM" - let customKeys = assumptions - .filter((assumption) => assumption.source === "CUSTOM") - .map((assumption) => assumption.key); + let customKeys = assumptions.filter((assumption) => assumption.source === "CUSTOM").map((assumption) => assumption.key); - const customKeysFromFormula = formulasToUpdate - ?.filter((formula) => formula.source === "CUSTOM") - ?.map((formula) => formula.output); + const customKeysFromFormula = formulasToUpdate?.filter((formula) => formula.source === "CUSTOM")?.map((formula) => formula.output); customKeys = [...customKeys, ...customKeysFromFormula]; // Update the source of formulas based on the conditions @@ -66,8 +62,8 @@ function updateFormulasSource(formulasToUpdate, assumptions) { formula.source === "MDMS" && // Check if the formula's source is "MDMS" (customKeys.includes(formula.input) || customKeys.includes(formula.assumptionValue)) // Check if input or assumptionValue belongs to "CUSTOM" ) { - // Dynamically add this formula's output to customKeys - customKeys.push(formula.output) + // Dynamically add this formula's output to customKeys + customKeys.push(formula.output); return { ...formula, source: "CUSTOM" }; // Update the source to "CUSTOM" } return formula; // Return unchanged formula otherwise @@ -181,7 +177,6 @@ const UpdateResource = async (req, currentPlanObject, currentCampaignObject) => //creating a microplan and campaign instance here const { totalFormData, state, setShowToast, setCurrentKey, setCurrentStep, config, campaignObject, planObject } = req; try { - // Update the campaign object by keeping existing properties and only changing the name const updatedCampaignObject = { ...currentCampaignObject, @@ -199,7 +194,7 @@ const UpdateResource = async (req, currentPlanObject, currentCampaignObject) => const updatedPlanObject = { ...currentPlanObject, name: totalFormData?.MICROPLAN_DETAILS?.microplanDetails?.microplanName, - additionalDetails:{...currentPlanObject.additionalDetails,key:req?.config?.key || "2"} + additionalDetails: { ...currentPlanObject.additionalDetails, key: req?.config?.key || "2" }, }; const planRes = await Digit.CustomService.getResponse({ @@ -208,7 +203,7 @@ const UpdateResource = async (req, currentPlanObject, currentCampaignObject) => method: "POST", userService: true, body: { - PlanConfiguration: updatedPlanObject + PlanConfiguration: updatedPlanObject, }, }); @@ -284,17 +279,59 @@ const updatePlan = async (req) => { const updatePlanEmployee = async (req) => { const planEmployeeRes = await Digit.CustomService.getResponse({ url: "/plan-service/employee/_update", - body:req, + body: req, }); return planEmployeeRes; }; +/** + * Documentation for the createUpdatePlanProject function + * + * This function handles creation and updates of plan and project based on different triggers(Triggers are screens' next button). + * + * Flow: + * 1. Function takes a request object containing: + * - totalFormData: Form data from different screens + * - state: Application state + * - setShowToast: Toast notification setter + * - setCurrentKey: Current key setter + * - setCurrentStep: Current step setter + * - config: Configuration object + * - invalidateConfig: Config for data invalidation + * + * 2. Gets microplanId, campaignId and key from URL query params + * + * 3. Gets current tenant ID + * + * 4. If microplanId exists: + * - Fetches existing plan configuration using searchPlanConfig + * + * 5. If campaignId exists: + * - Fetches campaign details using searchCampaignConfig + * + * 6. Based on triggeredFrom config name: + * - CAMPAIGN_DETAILS: Increments key and step + * - MICROPLAN_DETAILS: Checks if update needed based on name change + * - HYPOTHESIS: Handles assumptions updates + * - SUB_HYPOTHESIS: Updates sub-hypothesis assumptions + * - FORMULA_CONFIGURATION: Validates and updates formula configurations + * + * 7. Returns appropriate response based on the trigger + * + * Key APIs Used: + * - searchPlanConfig: Fetches plan configuration + * - searchCampaignConfig: Fetches campaign details + * - updatePlan: Updates plan configuration + * - updateProject: Updates project details + * - updatePlanEmployee: Updates plan employee details + */ + const createUpdatePlanProject = async (req) => { try { //later this object must have an invalidation config which can be used to invalidate data such as files uploaded,assumptions,formulas etc... const { totalFormData, state, setShowToast, setCurrentKey, setCurrentStep, config, invalidateConfig } = req; - const { microplanId, campaignId,key} = Digit.Hooks.useQueryParams(); + const { microplanId, campaignId, key } = Digit.Hooks.useQueryParams(); // const key=config?.key; const tenantId = Digit.ULBService.getCurrentTenantId(); //now basically we need to decide from which screen this hook was triggered and take action accordingly @@ -327,7 +364,6 @@ const createUpdatePlanProject = async (req) => { }; case "MICROPLAN_DETAILS": - //here just check if microplanId and campaignId is already there then if microplan name is same as old one no need to do anything if (microplanId && campaignId && planObject?.name === totalFormData?.MICROPLAN_DETAILS?.microplanDetails?.microplanName) { setCurrentKey((prev) => prev + 1); @@ -337,7 +373,6 @@ const createUpdatePlanProject = async (req) => { /// now check if microplan and campaign id is there but name need to be updated if (microplanId && campaignId && planObject?.name !== totalFormData?.MICROPLAN_DETAILS?.microplanDetails?.microplanName) { - // check if the name is valid const isResourceNameValid = await isValidResourceName(totalFormData?.MICROPLAN_DETAILS?.microplanDetails?.microplanName); if (!isResourceNameValid) { @@ -356,10 +391,9 @@ const createUpdatePlanProject = async (req) => { return { triggeredFrom, }; - - }else{ - //if we reach here then we need to create a plan and project instance - // validate campaign and microplan name feasible or not -> search campaign + search plan + } else { + //if we reach here then we need to create a plan and project instance + // validate campaign and microplan name feasible or not -> search campaign + search plan const isResourceNameValid = await isValidResourceName(totalFormData?.MICROPLAN_DETAILS?.microplanDetails?.microplanName); if (!isResourceNameValid) { setShowToast({ key: "error", label: "ERROR_MICROPLAN_NAME_ALREADY_EXISTS" }); @@ -378,7 +412,6 @@ const createUpdatePlanProject = async (req) => { triggeredFrom, }; } - case "BOUNDARY": // call an update to plan @@ -420,7 +453,7 @@ const createUpdatePlanProject = async (req) => { //invalidate files const updatedPlanObjectForBoundaryInvalidate = { ...fetchedPlanForBoundaryInvalidate, - additionalDetails:{...fetchedPlanForBoundaryInvalidate.additionalDetails,key:key}, + additionalDetails: { ...fetchedPlanForBoundaryInvalidate.additionalDetails, key: key }, files: fetchedPlanForBoundaryInvalidate?.files?.length > 0 ? fetchedPlanForBoundaryInvalidate?.files?.map((file) => { @@ -432,7 +465,6 @@ const createUpdatePlanProject = async (req) => { : [], }; - const fetchedPlanEmployeeForBoundaryInvalidate = await searchPlanEmployeeConfig({ PlanEmployeeAssignmentSearchCriteria: { tenantId: tenantId, @@ -482,27 +514,27 @@ const createUpdatePlanProject = async (req) => { if (planUpdateForBoundaryInvalidation && allEmployeesUpdated) { // doing this after invalidating the session // setCurrentKey((prev) => prev + 1); - // setCurrentStep((prev) => prev + 1); + // setCurrentStep((prev) => prev + 1); return { triggeredFrom, - invalidateSession:true + invalidateSession: true, }; - } - else if (!planUpdateForBoundaryInvalidation){ + } else if (!planUpdateForBoundaryInvalidation) { setShowToast({ key: "error", label: "ERR_PLAN_UPDATE_FAILED" }); - } - else if (!allEmployeesUpdated){ + } else if (!allEmployeesUpdated) { setShowToast({ key: "error", label: "ERR_EMPLOYEE_UPDATE_FAILED" }); - } - else { + } else { setShowToast({ key: "error", label: "ERR_BOUNDARY_UPDATE" }); } case "ASSUMPTIONS_FORM": // here we have to invalidate the existing assumptions in update call if there is a change in assumptionsForm // check whether the currentAssumptionsForm is equal to prev assumptionsForm (if so then skip this update call) - - if (_.isEqual(planObject?.additionalDetails?.assumptionsForm, totalFormData?.ASSUMPTIONS_FORM?.assumptionsForm) && Object.keys(planObject?.additionalDetails?.assumptionsForm).length>0) { + + if ( + _.isEqual(planObject?.additionalDetails?.assumptionsForm, totalFormData?.ASSUMPTIONS_FORM?.assumptionsForm) && + Object.keys(planObject?.additionalDetails?.assumptionsForm).length > 0 + ) { setCurrentKey((prev) => prev + 1); setCurrentStep((prev) => prev + 1); return { @@ -552,7 +584,7 @@ const createUpdatePlanProject = async (req) => { totalFormData.CAMPAIGN_DETAILS.campaignDetails.distributionStrat.resourceDistributionStrategyCode === "MIXED" ? "SEPARATELY" : totalFormData.ASSUMPTIONS_FORM.assumptionsForm.selectedRegistrationDistributionMode?.code, - key:key + key: key, }, }; const planResAssumptionsForm = await updatePlan(updatedPlanObjAssumptionsForm); @@ -561,7 +593,7 @@ const createUpdatePlanProject = async (req) => { // setCurrentStep((prev) => prev + 1); return { triggeredFrom, - invalidateSession:true + invalidateSession: true, }; } else { setShowToast({ key: "error", label: "ERR_ASSUMPTIONS_FORM_UPDATE" }); @@ -589,7 +621,7 @@ const createUpdatePlanProject = async (req) => { const upatedPlanObjHypothesis = { ...fetchedPlanForHypothesis, assumptions: [...prevAssumptions, ...assumptionsToUpdate], - additionalDetails:{...fetchedPlanForHypothesis.additionalDetails,key:key} + additionalDetails: { ...fetchedPlanForHypothesis.additionalDetails, key: key }, }; const planResHypothesis = await updatePlan(upatedPlanObjHypothesis); @@ -631,7 +663,7 @@ const createUpdatePlanProject = async (req) => { const upatedPlanObjSubHypothesis = { ...fetchedPlanForSubHypothesis, assumptions: [...prevAssumptionsForSubHypothesis, ...assumptionsToUpdateFromUI], - additionalDetails:{...fetchedPlanForSubHypothesis.additionalDetails,key:key} + additionalDetails: { ...fetchedPlanForSubHypothesis.additionalDetails, key: key }, }; await updatePlan(upatedPlanObjSubHypothesis); @@ -673,11 +705,11 @@ const createUpdatePlanProject = async (req) => { updatedRow.operator = state?.RuleConfigureOperators?.find((operation) => operation.operatorName === operatorName)?.operatorCode; return updatedRow; }); - const formulasToUpdateWithUpdatedSource = updateFormulasSource(formulasToUpdate,fetchedPlanForFormula?.assumptions) - //here we need to update the source of operations + const formulasToUpdateWithUpdatedSource = updateFormulasSource(formulasToUpdate, fetchedPlanForFormula?.assumptions); + //here we need to update the source of operations const updatedPlanObjFormula = { ...fetchedPlanForFormula, - additionalDetails:{...fetchedPlanForFormula.additionalDetails,key:key}, + additionalDetails: { ...fetchedPlanForFormula.additionalDetails, key: key }, operations: [...prevFormulas, ...formulasToUpdateWithUpdatedSource], }; @@ -695,7 +727,7 @@ const createUpdatePlanProject = async (req) => { setShowToast({ key: "error", label: "ERR_ASSUMPTIONS_FORM_UPDATE" }); } - case "SUB_FORMULA": + case "SUB_FORMULA": //first fetch current plan object const fetchedPlanForSubFormula = await searchPlanConfig({ PlanConfigurationSearchCriteria: { @@ -703,7 +735,7 @@ const createUpdatePlanProject = async (req) => { id: microplanId, }, }); - // const currentCategory = + // const currentCategory = const prevFormulaValues = fetchedPlanForSubFormula?.operations.length > 0 ? fetchedPlanForSubFormula?.operations?.map((row) => { @@ -716,26 +748,26 @@ const createUpdatePlanProject = async (req) => { : []; //get the list of assumptions from UI - const formulasToUpdateFromUIForSubFormula = req?.formulasToUpdate?.filter((row) => { - return row.category && row.output && row.input && row.operatorName && row.assumptionValue; - }) - ?.map((row) => { - const updatedRow = { ...row }; - const operatorName = row?.operatorName; - delete updatedRow?.operatorName; - updatedRow.operator = state?.RuleConfigureOperators?.find((operation) => operation.operatorName === operatorName)?.operatorCode; - return updatedRow; - }); + const formulasToUpdateFromUIForSubFormula = req?.formulasToUpdate + ?.filter((row) => { + return row.category && row.output && row.input && row.operatorName && row.assumptionValue; + }) + ?.map((row) => { + const updatedRow = { ...row }; + const operatorName = row?.operatorName; + delete updatedRow?.operatorName; + updatedRow.operator = state?.RuleConfigureOperators?.find((operation) => operation.operatorName === operatorName)?.operatorCode; + return updatedRow; + }); //mix the current + api res const upatedPlanObjSubFormula = { ...fetchedPlanForSubFormula, operations: [...prevFormulaValues, ...formulasToUpdateFromUIForSubFormula], - additionalDetails:{...fetchedPlanForSubFormula.additionalDetails,key:key} + additionalDetails: { ...fetchedPlanForSubFormula.additionalDetails, key: key }, }; await updatePlan(upatedPlanObjSubFormula); return; - case "UPLOADBOUNDARYDATA": const fetchedPlanForBoundary = await searchPlanConfig({ PlanConfigurationSearchCriteria: { @@ -762,7 +794,7 @@ const createUpdatePlanProject = async (req) => { const updatedPlanObjForBoundary = { ...fetchedPlanForBoundary, files, - additionalDetails:{...fetchedPlanForBoundary.additionalDetails,key:key} + additionalDetails: { ...fetchedPlanForBoundary.additionalDetails, key: key }, }; const planResBoundary = await updatePlan(updatedPlanObjForBoundary); @@ -805,7 +837,7 @@ const createUpdatePlanProject = async (req) => { const updatedPlanObjForFacility = { ...fetchedPlanForFacility, files: filesForFacility, - additionalDetails:{ ...fetchedPlanForFacility.additionalDetails,key:key} + additionalDetails: { ...fetchedPlanForFacility.additionalDetails, key: key }, }; const planResFacility = await updatePlan(updatedPlanObjForFacility); @@ -883,21 +915,21 @@ const createUpdatePlanProject = async (req) => { setShowToast({ key: "error", label: "ERR_FAILED_TO_COMPLETE_SETUP" }); } - case "ROLE_ACCESS_CONFIGURATION":{ - const fetchedPlan = await searchPlanConfig({ - PlanConfigurationSearchCriteria: { - tenantId, - id: microplanId, - }, - }); - const updatedPlanObject = { - ...fetchedPlan, - additionalDetails:{...fetchedPlan.additionalDetails,key:key} - }; - const response= await updatePlan(updatedPlanObject); - // Return as expected - if(response){ - setCurrentKey((prev) => prev + 1); + case "ROLE_ACCESS_CONFIGURATION": { + const fetchedPlan = await searchPlanConfig({ + PlanConfigurationSearchCriteria: { + tenantId, + id: microplanId, + }, + }); + const updatedPlanObject = { + ...fetchedPlan, + additionalDetails: { ...fetchedPlan.additionalDetails, key: key }, + }; + const response = await updatePlan(updatedPlanObject); + // Return as expected + if (response) { + setCurrentKey((prev) => prev + 1); setCurrentStep((prev) => prev + 1); window.dispatchEvent(new Event("isLastStep")); Digit.Utils.microplanv1.updateUrlParams({ isLastVerticalStep: null }); @@ -905,11 +937,11 @@ const createUpdatePlanProject = async (req) => { return { triggeredFrom, }; - }else{ - setShowToast({ key: "error", label: "ERR_FAILED_TO_UPDATE_PLAN" }); - } + } else { + setShowToast({ key: "error", label: "ERR_FAILED_TO_UPDATE_PLAN" }); } - + } + default: setShowToast({ key: "error", label: "ERROR_UNHANDLED_NEXT_OPERATION" }); return { diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js index 9b958aa037..3f5f626365 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js @@ -553,7 +553,7 @@ const PlanInbox = () => { const resourceArr = (resources || []).map((resource) => ({ name: t(resource.resourceType), // Dynamic column name for each resourceType cell: (row) => { - return row?.[resource?.resourceType]; // Return estimatedNumber if exists + return row?.[resource?.resourceType] === null ? t("NA") : row?.[resource?.resourceType]; // Return NA only if null, not for 0 or falsy values }, sortable: true, width: "180px", From cf8a7c96ad6b9bbf454900e89c6a817459eba5ac Mon Sep 17 00:00:00 2001 From: Bhavya-egov <137176879+Bhavya-egov@users.noreply.github.com> Date: Tue, 7 Jan 2025 13:32:42 +0530 Subject: [PATCH 2/5] BUGFIX/HCMPRE-1776 : Added UI/UX Master changes (#2110) --- .../example/public/index.html | 2 +- .../packages/css/package.json | 2 +- .../css/src/pages/employee/campaign.scss | 9 ++----- .../css/src/pages/employee/index.scss | 12 +++++++++ .../src/components/BoundaryDetailsSummary.js | 4 +-- .../src/components/BoundarySummary.js | 5 ++-- .../src/components/CampaignDates.js | 3 ++- .../src/components/CampaignDetailsSummary.js | 5 ++-- .../src/components/CampaignSummary.js | 25 ++++++++++++++++++- .../src/components/CampaignUpdateSummary.js | 3 ++- .../src/components/DataUploadSummary.js | 3 ++- .../src/components/DeliveryDetailsSummary.js | 4 +-- .../SelectingBoundariesDuplicate.js | 5 ++-- .../src/components/TagComponent.js | 14 +++++++++++ .../src/components/UpdateBoundaryWrapper.js | 4 ++- .../src/components/UploadData.js | 5 ++-- .../src/pages/employee/CreateChecklist.js | 3 ++- .../src/pages/employee/CycleConfiguration.js | 3 ++- .../src/pages/employee/SearchChecklist.js | 3 ++- .../src/pages/employee/UpdateChecklist.js | 3 ++- .../employee/UpdateDatesWithBoundaries.js | 3 ++- .../src/pages/employee/ViewChecklist.js | 3 ++- health/micro-ui/web/public/index.html | 2 +- 23 files changed, 91 insertions(+), 34 deletions(-) create mode 100644 health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/TagComponent.js diff --git a/health/micro-ui/web/micro-ui-internals/example/public/index.html b/health/micro-ui/web/micro-ui-internals/example/public/index.html index 7b00f6e046..e27792f67b 100644 --- a/health/micro-ui/web/micro-ui-internals/example/public/index.html +++ b/health/micro-ui/web/micro-ui-internals/example/public/index.html @@ -12,7 +12,7 @@ DIGIT - + diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/package.json b/health/micro-ui/web/micro-ui-internals/packages/css/package.json index 845e76cb11..f5f09e35c1 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/css/package.json +++ b/health/micro-ui/web/micro-ui-internals/packages/css/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-health-css", - "version": "0.2.33", + "version": "0.2.34", "license": "MIT", "main": "dist/index.css", "author": "Jagankumar ", diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss index 8a5dc65c2a..5c924cb0e5 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss +++ b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss @@ -135,8 +135,9 @@ align-items: stretch; } .stepper-card{ - height: 39rem; + height: 37rem; margin-bottom: 1.5rem !important; + padding-top: 0rem; } .stepper-subheader{ color: theme(digitv2.lightTheme.header-sidenav); @@ -209,13 +210,7 @@ width: 100%; } .campaign-tag{ - border: 0.5px solid #0B4B66; margin-bottom: 1rem; - height: 3.3rem; - .digit-tag-text{ - font-size: 1.5rem; - font-weight: 700; - } } .digit-popup-wrapper.dataMapping { .digit-popup-children-wrap { diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss index ebd0224de5..77748b6949 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss +++ b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss @@ -792,6 +792,18 @@ tbody { border-color: #D4D5D6; border-radius: 0.25rem; padding: 1rem; + padding-bottom: 0rem; +} + +.summary-parent-group { + border-width: 0.063rem; + background: theme(digitv2.lightTheme.paper-secondary); + border-color: #D4D5D6; + border-radius: 0.25rem; + padding: 1rem; +} +.summary-parent-group:not(:last-child) { + margin-bottom: 1.5rem; } .card-container { diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryDetailsSummary.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryDetailsSummary.js index d828d39320..76882c6275 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryDetailsSummary.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryDetailsSummary.js @@ -47,7 +47,7 @@ const BoundaryDetailsSummary = (props) => { {Object.keys(groupedByParent) .slice(0, 2) .map((parentKey, index) => ( -
+
{parentKey && parentKey !== "undefined" && parentKey.trim() !== "" &&
{t(parentKey)}
}
@@ -100,7 +100,7 @@ const BoundaryDetailsSummary = (props) => { > {Object.keys(groupedByParent) .map((parentKey, index) => ( -
+
{parentKey && parentKey !== "undefined" && parentKey.trim() !== "" &&
{t(parentKey)}
}
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js index 6a686db78f..1ee61f49b2 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js @@ -2,8 +2,7 @@ import React, { useEffect, useState,Fragment } from "react"; import { useTranslation } from "react-i18next"; import { Header, Loader, LoaderWithGap, ViewComposer } from "@egovernments/digit-ui-react-components"; import { Toast, Stepper, TextBlock, Card ,Tag } from "@egovernments/digit-ui-components"; - - +import TagComponent from "./TagComponent"; function boundaryDataGrp(boundaryData) { @@ -152,7 +151,7 @@ const BoundarySummary = (props) => {
- +
{t("ES_BOUNDARY_SUMMARY_HEADING")}
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js index bb9ab00e80..2206a5c197 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js @@ -2,6 +2,7 @@ import React, { useState, useEffect , Fragment } from "react"; import { DatePicker, LabelFieldPair, Header } from "@egovernments/digit-ui-react-components"; import { useTranslation } from "react-i18next"; import { ErrorMessage, FieldV1, TextInput ,Stepper , TextBlock , Card , InfoCard ,Tag } from "@egovernments/digit-ui-components"; +import TagComponent from "./TagComponent"; const CampaignDates = ({ onSelect, formData, ...props }) => { const { t } = useTranslation(); @@ -131,7 +132,7 @@ const CampaignDates = ({ onSelect, formData, ...props }) => {
- +
{t(`HCM_CAMPAIGN_DATES_HEADER`)}

{t(`HCM_CAMPAIGN_DATES_DESCRIPTION`)}

diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js index e9873fae2c..05361fbb68 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js @@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next"; import { useHistory } from "react-router-dom"; import { EditIcon, Header, Loader, LoaderWithGap, ViewComposer } from "@egovernments/digit-ui-react-components"; import { Toast , Stepper , TextBlock ,Card ,Tag } from "@egovernments/digit-ui-components"; +import TagComponent from "./TagComponent"; const CampaignDetailsSummary = (props) => { const { t } = useTranslation(); @@ -158,8 +159,8 @@ const CampaignDetailsSummary = (props) => {
- -
+ +
{t("HCM_CAMPAIGN_DETAILS_SUMMARY")}
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js index e0010e8d21..e48237fc0d 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js @@ -373,7 +373,22 @@ const CampaignSummary = (props) => { { type: "DATA", cardHeader: { value: t("CAMPAIGN_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } }, - cardSecondaryAction: isPreview === "true" && ( + // cardSecondaryAction: isPreview === "true" && ( + //
- +
{t("HCM_DATA_UPLOAD_SUMMARY")}
{/* {userCredential && ( diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js index 1883b63cca..227dfbec8f 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js @@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next"; import { useHistory } from "react-router-dom"; import { EditIcon, Header, Loader, LoaderWithGap, ViewComposer } from "@egovernments/digit-ui-react-components"; import { Toast, Card, Stepper, TextBlock ,Tag } from "@egovernments/digit-ui-components"; - +import TagComponent from "./TagComponent"; function mergeObjects(item) { const arr = item; @@ -352,7 +352,7 @@ const DeliveryDetailsSummary = (props) => {
- +
{t("HCM_DELIVERY_DETAILS_SUMMARY")}
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js index 7c58549a4d..eb07c878b6 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js @@ -5,6 +5,7 @@ import { useLocation, useHistory } from "react-router-dom"; import { Wrapper } from "./SelectingBoundaryComponent"; import { InfoCard, PopUp, Stepper, TextBlock,Tag , Card} from "@egovernments/digit-ui-components"; import { CONSOLE_MDMS_MODULENAME } from "../Module"; +import TagComponent from "./TagComponent"; const SelectingBoundariesDuplicate = ({ onSelect, formData, ...props }) => { const { t } = useTranslation(); @@ -112,7 +113,7 @@ const SelectingBoundariesDuplicate = ({ onSelect, formData, ...props }) => {
- +
{t(`CAMPAIGN_SELECT_BOUNDARY`)}

{t(`CAMPAIGN_SELECT_BOUNDARIES_DESCRIPTION`)}

@@ -134,7 +135,7 @@ const SelectingBoundariesDuplicate = ({ onSelect, formData, ...props }) => { name: "infocard", }} variant="default" - style={{ margin: "0rem", maxWidth: "100%" , marginTop: "1rem"}} + style={{ margin: "0rem", maxWidth: "100%" , marginTop: "1.5rem" , marginBottom: "2rem"}} additionalElements={[ {t("HCM_BOUNDARY_INFO")} diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/TagComponent.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/TagComponent.js new file mode 100644 index 0000000000..7cb30497e4 --- /dev/null +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/TagComponent.js @@ -0,0 +1,14 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { useTranslation } from "react-i18next"; +import { Tag } from "@egovernments/digit-ui-components"; + +const TagComponent = ({campaignName}) => { + const { t } = useTranslation(); + return ( + + ); +}; + + +export default TagComponent; \ No newline at end of file diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js index 61af7c82bb..1a19b1dd57 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js @@ -5,6 +5,7 @@ import { useLocation , useHistory } from "react-router-dom"; import { Wrapper } from "./SelectingBoundaryComponent"; import { Loader, InfoCard ,Tag } from "@egovernments/digit-ui-components"; import { CONSOLE_MDMS_MODULENAME } from "../Module"; +import TagComponent from "./TagComponent"; const UpdateBoundaryWrapper = ({ onSelect,...props }) => { const { t } = useTranslation(); @@ -76,7 +77,7 @@ const UpdateBoundaryWrapper = ({ onSelect,...props }) => { return ( <> - +
{t(`CAMPAIGN_SELECT_BOUNDARY`)}

{t(`CAMPAIGN_SELECT_BOUNDARIES_DESCRIPTION`)}

@@ -101,6 +102,7 @@ const UpdateBoundaryWrapper = ({ onSelect,...props }) => { label="Info" text={t("CAMPAIGN_CANNOT_REMOVE_PREVIOUS_BOUNDARIES")} variant="default" + style={{ margin: "0rem", maxWidth: "100%" , marginTop: "1.5rem" , marginBottom: "2rem"}} />
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js index 85919bc2e2..79d3d830cf 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js @@ -5,9 +5,10 @@ import { Card, Modal, CardText } from "@egovernments/digit-ui-react-components"; import BulkUpload from "./BulkUpload"; import Ajv from "ajv"; import XLSX from "xlsx"; -import { InfoCard, PopUp, Toast, Button, DownloadIcon, Stepper, TextBlock, Tag } from "@egovernments/digit-ui-components"; +import { InfoCard, PopUp, Toast, Button} from "@egovernments/digit-ui-components"; import { downloadExcelWithCustomName } from "../utils"; import { CONSOLE_MDMS_MODULENAME } from "../Module"; +import TagComponent from "./TagComponent"; /** * The `UploadData` function in JavaScript handles the uploading, validation, and management of files @@ -1108,7 +1109,7 @@ const UploadData = ({ formData, onSelect, ...props }) => { {loader && }
- +
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js index e1219b2b03..cfebb95b88 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js @@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next"; import data_hook from "../../hooks/data_hook"; import MobileChecklist from "../../components/MobileChecklist"; import { CONSOLE_MDMS_MODULENAME } from "../../Module"; +import TagComponent from "../../components/TagComponent"; let temp_data = [] @@ -514,7 +515,7 @@ const CreateChecklist = () => { {!loading_new && submitting && } {!submitting && !loading_new &&
- +

diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js index cbb64e4142..45f31d4e66 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js @@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next"; import { TextInput, InfoCard , Stepper , TextBlock , Tag } from "@egovernments/digit-ui-components"; import { deliveryConfig } from "../../configs/deliveryConfig"; import getDeliveryConfig from "../../utils/getDeliveryConfig"; +import TagComponent from "../../components/TagComponent"; const initialState = (saved, filteredDeliveryConfig, refetch) => { const data = { @@ -215,7 +216,7 @@ function CycleConfiguration({ onSelect, formData, control, ...props }) {

- +
{t( diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js index 0d8b03598e..5bed80c5e7 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js @@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next"; import { useHistory } from "react-router-dom"; import { checklistSearchConfig } from "../../configs/checklistSearchConfig"; import { CONSOLE_MDMS_MODULENAME } from "../../Module"; +import TagComponent from "../../components/TagComponent"; const SearchChecklist = () => { const { t } = useTranslation(); @@ -134,7 +135,7 @@ const SearchChecklist = () => { activeSteps={6} // className={"campaign-flow-stepper"} /> */} - +
{t("CONFIGURE_CHECKLIST")}
{/*
{t("ACTION_LABEL_CONFIGURE_APP")}
*/} diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js index 660e92f1de..ed066c9974 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js @@ -5,6 +5,7 @@ import { ViewCardFieldPair, Toast, Card, TextBlock, Button, PopUp, CardText, Tex import { FormComposerV2 } from "@egovernments/digit-ui-react-components"; import { useHistory, useLocation } from "react-router-dom"; import MobileChecklist from "../../components/MobileChecklist"; +import TagComponent from "../../components/TagComponent"; const UpdateChecklist = () => { const { t } = useTranslation(); @@ -465,7 +466,7 @@ const UpdateChecklist = () => { {/* {submitting && } */} {!submitting &&
- +

diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js index 59e49a7cba..60bd33727a 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js @@ -6,6 +6,7 @@ import { dateChangeBoundaryConfig, dateChangeConfig } from "../../configs/dateCh import { Button, InfoCard, PopUp, Toast , Tag} from "@egovernments/digit-ui-components"; import getProjectServiceUrl from "../../utils/getProjectServiceUrl"; import { CONSOLE_MDMS_MODULENAME } from "../../Module"; +import TagComponent from "../../components/TagComponent"; function UpdateDatesWithBoundaries() { @@ -146,7 +147,7 @@ function UpdateDatesWithBoundaries() { return (
- + { const { t } = useTranslation(); @@ -185,7 +186,7 @@ const ViewChecklist = () => { return (
- +

diff --git a/health/micro-ui/web/public/index.html b/health/micro-ui/web/public/index.html index 58a2485aef..909c37fa2e 100644 --- a/health/micro-ui/web/public/index.html +++ b/health/micro-ui/web/public/index.html @@ -10,7 +10,7 @@ - + DIGIT HCM From 397f356ab347615c4e9b72e47dc5a44dbdca04b0 Mon Sep 17 00:00:00 2001 From: Nipun Arora Date: Tue, 7 Jan 2025 14:32:04 +0530 Subject: [PATCH 3/5] FEATURE/HCMPRE-1681: Handled the case where capacity is 0 and tested full flow (#2111) handled the case where capacity is 0 and tested full flow --- .../web/micro-ui-internals/example/src/UICustomizations.js | 5 +++++ .../modules/microplan/src/configs/FacilityMappingConfig.js | 3 +++ .../modules/microplan/src/configs/UICustomizations.js | 5 +++++ 3 files changed, 13 insertions(+) diff --git a/health/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js b/health/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js index 08953411b9..1b4bada361 100644 --- a/health/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js +++ b/health/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js @@ -1300,6 +1300,11 @@ export const UICustomizations = { const VillageHierarchyTooltipWrapper = Digit.ComponentRegistryService.getComponent("VillageHierarchyTooltipWrapper"); switch (key) { + case `MICROPLAN_FACILITY_${column?.projectType}_CAPACITY`: + if (row?.additionalDetails?.capacity || row?.additionalDetails?.capacity === 0) { + return row?.additionalDetails?.capacity; + } + return t("NA"); case "MICROPLAN_FACILITY_SERVINGPOPULATION": return row?.additionalDetails?.servingPopulation; case "MICROPLAN_FACILITY_RESIDINGVILLAGE": diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/FacilityMappingConfig.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/FacilityMappingConfig.js index faba63dbdc..362cc78b9e 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/FacilityMappingConfig.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/FacilityMappingConfig.js @@ -1,5 +1,6 @@ import { useMyContext } from "../utils/context"; +//ProjectType will be ["LLIN-mz","MR-DN"] for microplan const facilityMappingConfig = (projectType, disabledAction) => { const { state, dispatch } = useMyContext(); @@ -124,6 +125,8 @@ const facilityMappingConfig = (projectType, disabledAction) => { { label: `MICROPLAN_FACILITY_${projectType}_CAPACITY`, jsonPath: "additionalDetails.capacity", + additionalCustomization: true, + projectType: projectType, }, { label: "MICROPLAN_FACILITY_ASSIGNED_VILLAGES", diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js index 78c6e03883..f8fe90573c 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js @@ -582,6 +582,11 @@ export const UICustomizations = { const VillageHierarchyTooltipWrapper = Digit.ComponentRegistryService.getComponent("VillageHierarchyTooltipWrapper"); switch (key) { + case `MICROPLAN_FACILITY_${column?.projectType}_CAPACITY`: + if (row?.additionalDetails?.capacity || row?.additionalDetails?.capacity === 0) { + return row?.additionalDetails?.capacity; + } + return t("NA"); case "MICROPLAN_FACILITY_SERVINGPOPULATION": return row?.additionalDetails?.servingPopulation; case "MICROPLAN_FACILITY_RESIDINGVILLAGE": From b368b9cdc3ac5f926507f47529f85cbc84679b6d Mon Sep 17 00:00:00 2001 From: Bhavya-egov <137176879+Bhavya-egov@users.noreply.github.com> Date: Tue, 7 Jan 2025 18:02:57 +0530 Subject: [PATCH 4/5] BUGFIX/HCMPRE-1209 changes in the project type code (#2116) --- .../modules/campaign-manager/src/components/UploadData.js | 2 +- .../modules/campaign-manager/src/hooks/useProductList.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js index 79d3d830cf..d39dcb6e38 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js @@ -206,7 +206,7 @@ const UploadData = ({ formData, onSelect, ...props }) => { var required = []; var columns = []; for (const propType of ["enumProperties", "numberProperties", "stringProperties"]) { - if (convertData?.properties[propType] && Array.isArray(convertData?.properties[propType]) && convertData?.properties[propType]?.length > 0) { + if (convertData?.properties?.[propType] && Array.isArray(convertData?.properties?.[propType]) && convertData?.properties?.[propType]?.length > 0) { for (const property of convertData?.properties[propType]) { properties[property?.name] = { ...property, diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useProductList.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useProductList.js index f0ecc586cb..db916101e6 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useProductList.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useProductList.js @@ -8,7 +8,7 @@ export const useProductList = (tenantId,projectType) => { config: { enabled: true, select: (data) => { - if (projectType === "CO-DEL") { + if (projectType === "Co-delivery") { return data?.ProductVariant; } const filteredData = data?.ProductVariant?.filter(item => From 1eea6a1e885825a3d7b9e4e75c7fa83867d40aa2 Mon Sep 17 00:00:00 2001 From: nabeelmd-eGov Date: Wed, 8 Jan 2025 12:43:27 +0530 Subject: [PATCH 5/5] HCMPRE-1766: App Configuration Screen Setup (#2117) * HCMPRE-1766: Added AppScreenConfiguration Feature screen * added enhancement in app configuration * added app configuration link * added tag component in mapping * package upgrade --------- Co-authored-by: NabeelAyubee --- .../example/public/index.html | 4 +- .../packages/css/package.json | 2 +- .../css/src/pages/employee/campaign.scss | 82 ++++-- .../modules/campaign-manager/src/Module.js | 4 +- .../src/components/CampaignCard.js | 8 +- .../src/components/SidePanel.js | 223 ++++++++++++++ .../campaign-manager/src/components/Switch.js | 62 ++++ .../components/UploadDataMappingWrapper.js | 17 +- .../pages/employee/AppConfigurationWrapper.js | 217 ++++++++++++++ .../src/pages/employee/AppFieldComposer.js | 274 ++++++++++++++++++ .../pages/employee/AppFieldScreenWrapper.js | 215 ++++++++++++++ .../src/pages/employee/DrawerFieldComposer.js | 189 ++++++++++++ .../src/pages/employee/SidePanel.js | 241 +++++++++++++++ .../src/pages/employee/index.js | 4 +- .../src/components/OldCampaignCard.js | 8 +- health/micro-ui/web/public/index.html | 2 +- 16 files changed, 1514 insertions(+), 38 deletions(-) create mode 100644 health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SidePanel.js create mode 100644 health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/Switch.js create mode 100644 health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppConfigurationWrapper.js create mode 100644 health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldComposer.js create mode 100644 health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldScreenWrapper.js create mode 100644 health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/DrawerFieldComposer.js create mode 100644 health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SidePanel.js diff --git a/health/micro-ui/web/micro-ui-internals/example/public/index.html b/health/micro-ui/web/micro-ui-internals/example/public/index.html index e27792f67b..89f0115887 100644 --- a/health/micro-ui/web/micro-ui-internals/example/public/index.html +++ b/health/micro-ui/web/micro-ui-internals/example/public/index.html @@ -11,8 +11,8 @@ DIGIT - - + + diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/package.json b/health/micro-ui/web/micro-ui-internals/packages/css/package.json index f5f09e35c1..6e08896c2d 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/css/package.json +++ b/health/micro-ui/web/micro-ui-internals/packages/css/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-health-css", - "version": "0.2.34", + "version": "0.2.35", "license": "MIT", "main": "dist/index.css", "author": "Jagankumar ", diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss index 5c924cb0e5..b636d64d92 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss +++ b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss @@ -67,9 +67,9 @@ border-width: 0rem 1.5rem; tbody { tr:hover { - td{ + td { background: rgba(#f47738, 0.12); - cursor: pointer; + cursor: pointer; } } } @@ -111,46 +111,46 @@ justify-content: space-between; align-items: center; } -.setup-campaign{ - .digit-success{ - z-index: 1000; +.setup-campaign { + .digit-success { + z-index: 1000; } } -.digit-error{ +.digit-error { z-index: 900; } -.timeline-user{ +.timeline-user { display: flex; justify-content: space-between; } -.upcoming-timeline{ - .timeline-label{ +.upcoming-timeline { + .timeline-label { color: #b1b4b6; } } -.container{ +.container { display: flex; flex-direction: row; gap: 1.5rem; align-items: stretch; } -.stepper-card{ - height: 37rem; +.stepper-card { + height: 39rem; margin-bottom: 1.5rem !important; padding-top: 0rem; } -.stepper-subheader{ +.stepper-subheader { color: theme(digitv2.lightTheme.header-sidenav); } -.container-full{ +.container-full { display: flex; flex-direction: row; gap: 1.5rem; align-items: stretch; height: 100%; } -.name-container-label{ - .label-field-wrapper{ +.name-container-label { + .label-field-wrapper { width: -webkit-fill-available; } } @@ -186,31 +186,37 @@ .hierarchy-boundary-heading { font-size: 2.5rem; font-weight: 700; - font-family: 'Roboto Condensed', sans-serif; + font-family: "Roboto Condensed", sans-serif; } .hierarchy-boundary-sub-heading { width: 20rem; margin-top: 0.6rem; font-weight: 600; - font-family: 'Roboto', sans-serif; + font-family: "Roboto", sans-serif; } .hierarchy-boundary-sub-heading2 { - font-size: 1.2rem; + font-size: 1.2rem; font-weight: 600; - font-family: 'Roboto', sans-serif; + font-family: "Roboto", sans-serif; } -.campaign-preview{ +.campaign-preview { display: flex; align-items: center; gap: 0.5rem; } -.card-container1{ +.card-container1 { width: 100%; } -.campaign-tag{ +.campaign-tag { + border: 0.5px solid #0b4b66; margin-bottom: 1rem; + height: 3.3rem; + .digit-tag-text { + font-size: 1.5rem; + font-weight: 700; + } } .digit-popup-wrapper.dataMapping { .digit-popup-children-wrap { @@ -231,4 +237,32 @@ > div:nth-of-type(1) { width: 69%; } -} \ No newline at end of file +} + +.appConfiglabelField { + padding: 3rem 1rem; + background-color: #eee; + border: 1px solid #d6d5d4; + border-radius: 0.5rem; +} +.appConfiglabelField.selected { + background-color: #f477381a; + border: 1px solid #c84c0e; +} +.appConfig-flow-stepper { + margin-top: 2rem; +} +.app-config-add-section { + margin-inline: auto; + margin-top: 2rem; + margin-bottom: 5rem; +} +.appConfigScreenCard { + margin-bottom: 2rem; +} +.appConfiglabelField-label { + width: 25rem; +} +.app-config-actionBar { + z-index: 9999; +} diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js index aa986b565d..26f16633c2 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js @@ -57,6 +57,7 @@ import MapView from "./components/MapView"; import NoResultsFound from "./components/NoResultsFound"; import UploadDataMappingWrapper from "./components/UploadDataMappingWrapper"; import DataUploadWrapper from "./components/DataUploadWrapper"; +import AppConfigurationWrapper from "./pages/employee/AppConfigurationWrapper"; /** * MDMS Module name @@ -91,7 +92,7 @@ const CampaignModule = ({ stateCode, userType, tenants }) => { const hierarchyData = Digit.Hooks.campaign.useBoundaryRelationshipSearch({ BOUNDARY_HIERARCHY_TYPE, tenantId }); const modulePrefix = "hcm"; - const moduleCode = BOUNDARY_HIERARCHY_TYPE ? [`boundary-${BOUNDARY_HIERARCHY_TYPE}`] : ["campaignmanager", "schema", "admin-schemas", "checklist"]; + const moduleCode = BOUNDARY_HIERARCHY_TYPE ? [`boundary-${BOUNDARY_HIERARCHY_TYPE}`] : ["campaignmanager", "schema", "admin-schemas", "checklist", "appconfiguration"]; const { path, url } = useRouteMatch(); const language = Digit.StoreData.getCurrentLanguage(); @@ -175,6 +176,7 @@ const componentsToRegister = { NoResultsFound, UploadDataMappingWrapper, DataUploadWrapper, + AppConfigurationWrapper, }; const overrideHooks = () => { diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignCard.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignCard.js index 7b000d81dc..cfc87a259f 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignCard.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignCard.js @@ -63,7 +63,13 @@ const CampaignCard = () => { link: `/${window?.contextPath}/employee/campaign/boundary/home`, roles: ROLES.BOUNDARY_MANAGER, // count: isLoading?"-":data - } + }, + { + label: t("ACTION_TEST_APP_CONFIGURATION"), + link: `/workbench-ui/employee/campaign/app-configuration`, + roles: ROLES.CAMPAIGN_MANAGER, + // count: isLoading?"-":data + }, ]; links = links.filter((link) => (link?.roles && link?.roles?.length > 0 ? Digit.Utils.didEmployeeHasAtleastOneRole(link?.roles) : true)); diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SidePanel.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SidePanel.js new file mode 100644 index 0000000000..92c9bb49b5 --- /dev/null +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SidePanel.js @@ -0,0 +1,223 @@ +import React, { useEffect, useState, useRef } from "react"; +import PropTypes from "prop-types"; +import { SVG } from "./SVG"; +import { Colors } from "../constants/colors/colorconstants"; +import { Spacers } from "../constants/spacers/spacers"; + +const SidePanel = ({ + className = "", + styles = {}, + type = "static", + position = "right", + children, + header, + footer, + bgActive = false, + isOverlay = false, + isDraggable = false, + hideArrow, + hideScrollIcon, + sections = [], + defaultOpenWidth, + defaultClosedWidth, + addClose, + closedContents, + closedSections, + closedHeader, + closedFooter, + transitionDuration +}) => { + const [isOpen, setIsOpen] = useState(true); + const sliderRef = useRef(null); + const [sliderWidth, setSliderWidth] = useState(defaultOpenWidth || 300); + const isDragging = useRef(false); + + const iconColor = Colors.lightTheme.text.primary; + const iconSize = Spacers.spacer8; + + const toggleSlider = () => { + if (type === "static") return; + if (isOpen) { + setIsOpen(false); + setSliderWidth(defaultClosedWidth || 64); + return; + } + setIsOpen((prevState) => !prevState); + if (!isOpen) { + setSliderWidth(defaultOpenWidth); + } + }; + + const handleClose = () => { + setIsOpen(false); + }; + + const handleMouseDown = (e) => { + if (isDraggable && type === "dynamic" && isOpen) { + isDragging.current = true; + document.addEventListener("mousemove", handleMouseMove); + document.addEventListener("mouseup", handleMouseUp); + } + }; + + const handleMouseMove = (e) => { + if (isDragging.current && sliderRef.current && isOpen) { + const newWidth = + position === "right" ? window.innerWidth - e.clientX : e.clientX; + setSliderWidth( + newWidth > (defaultClosedWidth || 64) + ? newWidth + : defaultClosedWidth || 64 + ); + } + }; + + const handleMouseUp = () => { + isDragging.current = false; + document.removeEventListener("mousemove", handleMouseMove); + document.removeEventListener("mouseup", handleMouseUp); + }; + + useEffect(() => { + return () => { + document.removeEventListener("mousemove", handleMouseMove); + document.removeEventListener("mouseup", handleMouseUp); + }; + }, []); + + useEffect(() => {}, [isOpen]); + + return ( + <> + {!bgActive &&
} +
+ {type === "dynamic" && ( +
+ {!hideScrollIcon &&
} + {!hideArrow && ( +
+ +
+ )} +
+ )} +
+ {header && isOpen && ( +
+ {addClose && isOpen && ( +
+ +
+ )} + {header} +
+ )} + { + closedHeader && !isOpen && ( +
+ {closedHeader} +
+ ) + } +
0 ? "with-sections" : "" + }`} + > + {isOpen + ? sections && sections?.length > 0 + ? sections?.map((section, index) => ( +
+
+ {section} +
+ {index < sections.length - 1 && ( +
+ )} +
+ )) + : children + : sections && sections?.length > 0 + ? closedSections?.map((section, index) => ( +
+
+ {section} +
+ {index < sections.length - 1 && ( +
+ )} +
+ )) + : closedContents} +
+ + {footer && isOpen &&
{footer}
} + {closedFooter && !isOpen &&
{closedFooter}
} +
+
+ + ); +}; + +SidePanel.propTypes = { + className: PropTypes.string, + styles: PropTypes.object, + type: PropTypes.oneOf(["static", "dynamic"]), + position: PropTypes.oneOf(["left", "right"]), + children: PropTypes.node, + header: PropTypes.node, + footer: PropTypes.node, + addClose: PropTypes.bool, + closedContents: PropTypes.node, + closedSections: PropTypes.arrayOf(PropTypes.node), + closedHeader: PropTypes.node, + closedFooter: PropTypes.node, + transitionDuration: PropTypes.number, + bgActive: PropTypes.bool, + isOverlay: PropTypes.bool, + isDraggable: PropTypes.bool, + sections: PropTypes.arrayOf(PropTypes.node), + hideArrow: PropTypes.bool, + hideScrollIcon: PropTypes.bool, + defaultOpenWidth: PropTypes.number, + defaultClosedWidth: PropTypes.number, +}; + +export default SidePanel; diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/Switch.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/Switch.js new file mode 100644 index 0000000000..a04e20f47b --- /dev/null +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/Switch.js @@ -0,0 +1,62 @@ +import React, { useEffect, useState } from "react"; +import PropTypes from "prop-types"; + +const Switch = ({ + isLabelFirst = false, + label = "", + shapeOnOff = false, + isCheckedInitially = false, + onToggle = () => {}, + className, + style, + disable = false, + switchStyle, +}) => { + const [isChecked, setIsChecked] = useState(isCheckedInitially); + useEffect(() => { + setIsChecked(isCheckedInitially); + }, [isCheckedInitially]); + + const handleToggle = () => { + if (!disable) { + setIsChecked(!isChecked); + onToggle(!isChecked); + } + }; + + return ( +
+ {isLabelFirst && {label}} +
{ + if (e.key === "Enter" || e.key === " ") { + handleToggle(); + } + }} + > + {shapeOnOff && isChecked &&
} +
+ {shapeOnOff && !isChecked &&
} +
+ {!isLabelFirst && {label}} +
+ ); +}; + +export default Switch; + +Switch.propTypes = { + isLabelFirst: PropTypes.bool, + label: PropTypes.string, + shapeOnOff: PropTypes.bool, + isCheckedInitially: PropTypes.bool, + onToggle: PropTypes.func, + className: PropTypes.string, + style: PropTypes.object, + switchStyle: PropTypes.object, + disable: PropTypes.bool, +}; diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMappingWrapper.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMappingWrapper.js index 89af558e9a..2ab249f807 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMappingWrapper.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMappingWrapper.js @@ -2,6 +2,7 @@ import { Card, CardHeader, Switch, Toast, ToggleSwitch } from "@egovernments/dig import React, { createContext, Fragment, useContext, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import UploadDataMapping from "./UploadDataMapping"; +import TagComponent from "./TagComponent"; const UploadDataMappingContext = createContext("UploadDataMappingContext"); @@ -11,18 +12,22 @@ export const useUploadDataMappingContext = () => { function UploadDataMappingWrapper({ props: customProps, formData, currentCategories, onSelect }) { const { t } = useTranslation(); const searchParams = new URLSearchParams(window.location.search); + const campaignName = customProps?.sessionData?.HCM_CAMPAIGN_NAME?.campaignName || searchParams.get("campaignName"); const tenantId = Digit.ULBService.getCurrentTenantId(); const [showToast, setShowToast] = useState(null); const { id, draft, key, ...queryParams } = Digit.Hooks.useQueryParams(); return ( - - {t(`UPLOAD_DATA_MAPPING`)} -
- -
- +
+ + + {t(`UPLOAD_DATA_MAPPING`)} +
+ +
+ +
{showToast && ( { + return useContext(AppConfigContext); +}; + +const reducer = (state = initialState, action) => { + switch (action.type) { + case "MASTER_DATA": + return { + ...state, + MASTER_DATA: { ...action.state }, + screenData: action.state?.AppScreenConfigTemplateSchema, + }; + case "ADD_SECTION": + return { + ...state, + screenData: state?.screenData?.map((item, index) => { + if (item?.name === action?.payload?.currentScreen?.name) { + return { + ...item, + cards: [ + ...item?.cards, + { + fields: [], + header: "Header", + description: "Desc", + headerFields: [ + { + type: "text", + label: "SCREEN_HEADING", + active: true, + jsonPath: "ScreenHeading", + metaData: {}, + required: true, + }, + { + type: "text", + label: "SCREEN_DESCRIPTION", + active: true, + jsonPath: "Description", + metaData: {}, + required: true, + }, + ], + }, + ], + }; + } + return item; + }), + }; + case "ADD_FIELD": + return { + ...state, + screenData: state?.screenData?.map((item, index) => { + if (item?.name === action?.payload?.currentScreen?.name) { + return { + ...item, + cards: item?.cards?.map((j, k) => { + if (j.header === action.payload.currentCard?.header) { + return { + ...j, + fields: [ + ...j.fields, + { + id: crypto.randomUUID(), + type: "text", + label: "LABEL", + active: true, + }, + ], + }; + } + return j; + }), + }; + } + return item; + }), + }; + case "DELETE_FIELD": + return { + ...state, + screenData: state?.screenData?.map((item, index) => { + if (item?.name === action?.payload?.currentScreen?.name) { + return { + ...item, + cards: item?.cards?.map((j, k) => { + if (j.header === action.payload.currentCard?.header) { + return { + ...j, + fields: j.fields?.filter((k) => k.id !== action.payload.currentField.id), + }; + } + return j; + }), + }; + } + return item; + }), + }; + case "SELECT_DRAWER_FIELD": + return { + ...state, + currentScreen: action?.payload?.currentScreen, + currentCard: action?.payload?.currentCard, + drawerField: action?.payload?.drawerField, + }; + case "UNSELECT_DRAWER_FIELD": + return { + ...state, + drawerField: null, + }; + case "UPDATE_DRAWER_FIELD": + return { + ...state, + screenData: state?.screenData?.map((item, index) => { + if (item?.name === state?.currentScreen?.name) { + return { + ...item, + cards: item?.cards?.map((j, k) => { + if (j.header === state.currentCard?.header) { + return { + ...j, + fields: j.fields.map((k) => { + if (k.id === state.drawerField.id) { + return { + ...action.payload.updatedState, + }; + } + return k; + }), + }; + } + return j; + }), + }; + } + return item; + }), + }; + default: + return state; + } +}; + +const MODULE_CONSTANTS = "HCM-ADMIN-CONSOLE"; +function AppConfigurationWrapper() { + const [state, dispatch] = useReducer(reducer, initialState); + const { t } = useTranslation(); + const { isLoading: isLoadingAppConfigMdmsData, data: AppConfigMdmsData } = Digit.Hooks.useCustomMDMS( + Digit.ULBService.getCurrentTenantId(), + MODULE_CONSTANTS, + [{ name: "AppScreenConfigTemplateSchema" }, { name: "AppFieldType" }, { name: "DrawerPanelConfig" }, { name: "AppScreenLocalisationConfig" }], + { + cacheTime: Infinity, + staleTime: Infinity, + select: (data) => { + dispatch({ + type: "MASTER_DATA", + state: { + ...data?.["HCM-ADMIN-CONSOLE"], + }, + }); + }, + }, + { schemaCode: "BASE_APP_MASTER_DATA" } //mdmsv2 + ); + + if (isLoadingAppConfigMdmsData) { + return ; + } + + return ( + + + {state?.drawerField && ( + ]} + closedHeader={[]} + closedSections={[]} + defaultClosedWidth="" + defaultOpenWidth="" + footer={[]} + header={[ +
+ Header +
, + ]} + hideScrollIcon + isDraggable={false} + position="right" + sections={[]} + styles={{}} + type="static" + > + + + )} + + ); +} + +export default AppConfigurationWrapper; diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldComposer.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldComposer.js new file mode 100644 index 0000000000..b050ca5681 --- /dev/null +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldComposer.js @@ -0,0 +1,274 @@ +import { LabelFieldPair, TextInput, Dropdown, CheckBox } from "@egovernments/digit-ui-components"; +import React, { Fragment, useEffect, useRef, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { PRIMARY_COLOR } from "../../utils"; +import { DustbinIcon } from "../../components/icons/DustbinIcon"; +import { useAppConfigContext } from "./AppConfigurationWrapper"; + +const CheckBoxes = ({ t, option, optionKey, isLabelFirst }) => { + return ( +
+ {option?.map((item, index) => ( + {}} value={""} label={t(`${item?.[optionKey]}`)} isLabelFirst={isLabelFirst} /> + ))} +
+ ); +}; + +function AppFieldComposer({ + headerFields = false, + type, + label, + value, + required, + isDelete = false, + onDelete, + onSelectField = () => {}, + dropDownOptions = [], + config, +}) { + const { t } = useTranslation(); + const { state, dispatch } = useAppConfigContext(); + const componentRef = useRef(null); + + const Field = () => { + switch (type) { + case "text": + case "textInput": + return ( + //
{ + // onSelectField(); + // }} + // > + +
+ {`${t(label)}`} + {required && *} +
+ {}} /> + {isDelete && ( +
{ + // e.stopPropagation(); + onDelete(); + }} + style={{ + cursor: "pointer", + fontWeight: "600", + marginLeft: "1rem", + fontSize: "1rem", + color: PRIMARY_COLOR, + display: "flex", + gap: "0.5rem", + alignItems: "center", + marginTop: "1rem", + }} + > + +
+ )} + + //
+ ); + break; + case "dropDown": + return ( + //
{ + // onSelectField(); + // }} + // > + +
+ {`${t(label)}`} + {required && *} +
+ {}} + /> + {isDelete && ( +
{ + // e.stopPropagation(); + onDelete(); + }} + style={{ + cursor: "pointer", + fontWeight: "600", + marginLeft: "1rem", + fontSize: "1rem", + color: PRIMARY_COLOR, + display: "flex", + gap: "0.5rem", + alignItems: "center", + marginTop: "1rem", + }} + > + +
+ )} + + //
+ ); + break; + case "dobPicker": + case "datePicker": + return ( + +
+ {`${t(label)}`} + {required && *} +
+ {}} /> + {isDelete && ( +
{ + // e.stopPropagation(); + onDelete(); + }} + style={{ + cursor: "pointer", + fontWeight: "600", + marginLeft: "1rem", + fontSize: "1rem", + color: PRIMARY_COLOR, + display: "flex", + gap: "0.5rem", + alignItems: "center", + marginTop: "1rem", + }} + > + +
+ )} + + ); + break; + case "counter": + return ( + +
+ {`${t(label)}`} + {required && *} +
+ {}} /> + {isDelete && ( +
{ + // e.stopPropagation(); + onDelete(); + }} + style={{ + cursor: "pointer", + fontWeight: "600", + marginLeft: "1rem", + fontSize: "1rem", + color: PRIMARY_COLOR, + display: "flex", + gap: "0.5rem", + alignItems: "center", + marginTop: "1rem", + }} + > + +
+ )} + + ); + break; + case "number": + return ( + +
+ {`${t(label)}`} + {required && *} +
+ {}} /> + {isDelete && ( +
{ + // e.stopPropagation(); + onDelete(); + }} + style={{ + cursor: "pointer", + fontWeight: "600", + marginLeft: "1rem", + fontSize: "1rem", + color: PRIMARY_COLOR, + display: "flex", + gap: "0.5rem", + alignItems: "center", + marginTop: "1rem", + }} + > + +
+ )} + + ); + case "checkbox": + return ( + +
+ {`${t(label)}`} + {required && *} +
+ + {isDelete && ( +
{ + // e.stopPropagation(); + onDelete(); + }} + style={{ + cursor: "pointer", + fontWeight: "600", + marginLeft: "1rem", + fontSize: "1rem", + color: PRIMARY_COLOR, + display: "flex", + gap: "0.5rem", + alignItems: "center", + marginTop: "1rem", + }} + > + +
+ )} + + ); + default: + return null; + break; + } + }; + + return ( +
{ + if (config?.id !== state?.drawerField?.id) { + onSelectField(); + } + // e.stopPropagation(); + // onSelectField(); + }} + className="app-config-field-wrapper" + style={{ width: "50%" }} + > + +
+ ); +} + +export default AppFieldComposer; diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldScreenWrapper.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldScreenWrapper.js new file mode 100644 index 0000000000..e9717cf4af --- /dev/null +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/AppFieldScreenWrapper.js @@ -0,0 +1,215 @@ +import React, { useEffect, useMemo, useState } from "react"; +import { useAppConfigContext } from "./AppConfigurationWrapper"; +import { useTranslation } from "react-i18next"; +import { Button, Card, CardHeader, Divider, Stepper, Tab, ActionBar } from "@egovernments/digit-ui-components"; +import AppFieldComposer from "./AppFieldComposer"; +import _ from "lodash"; + +const Tabs = ({ numberTabs, onTabChange }) => { + const { state, dispatch } = useAppConfigContext(); + const { t } = useTranslation(); + return ( +
+ {numberTabs.map((_, index) => ( + + ))} +
+ ); +}; + +function AppFieldScreenWrapper() { + const { state, dispatch } = useAppConfigContext(); + const { t } = useTranslation(); + // const appTemplate = state?.["MASTER_DATA"]?.AppScreenConfigTemplateSchema; + const appTemplate = state?.screenData; + const [numberTabs, setNumberTabs] = useState( + [...new Set(appTemplate?.map((i) => i?.parent))].map((i, index) => { + return { parent: i, active: index === 0 ? true : false, code: index + 1 }; + }) + ); + + const [stepper, setStepper] = useState( + appTemplate + ?.filter((i) => i.parent === numberTabs.find((j) => j.active)?.parent) + .sort((a, b) => a.order - b.order) + ?.map((k, j, t) => ({ + name: k.name, + isLast: j === t.length - 1 ? true : false, + isFirst: j === 0 ? true : false, + active: j === 0 ? true : false, + })) + ); + + const [currentStep, setCurrentStep] = useState(1); + + useEffect(() => { + // if (currentStep) { + setStepper((prev) => { + return prev.map((i, c) => { + if (c === currentStep - 1) { + return { + ...i, + active: true, + }; + } + return { + ...i, + active: false, + }; + }); + }); + dispatch({ + type: "UNSELECT_DRAWER_FIELD", + }); + // } + }, [currentStep]); + + const currentCard = useMemo(() => { + return state?.screenData + ?.filter((i) => i.parent === numberTabs.find((j) => j.active)?.parent) + ?.sort((a, b) => a.order - b.order) + ?.filter((k) => k.name === stepper.find((l) => l.active)?.name)?.[0]; + }, [state?.screenData, numberTabs, stepper, currentStep]); + + return ( + + { + setNumberTabs((prev) => { + return prev.map((j) => { + if (j.parent === tab.parent) { + return { + ...j, + active: true, + }; + } + return { + ...j, + active: false, + }; + }); + }); + }} + /> + i.name)]} + currentStep={currentStep} + onStepClick={() => {}} + activeSteps={0} + className={"appConfig-flow-stepper"} + /> + {currentCard?.cards?.map(({ fields, description, header, headerFields }, index, card) => { + return ( + + {headerFields?.map(({ type, label, active, required }) => ( + + ))} + + {fields?.map(({ type, label, active, required, dropDownOptions, deleteFlag }, i, c) => ( + { + dispatch({ + type: "DELETE_FIELD", + payload: { + currentScreen: currentCard, + currentCard: card[index], + currentField: c[i], + }, + }); + // return; + }} + onSelectField={() => { + dispatch({ + type: "SELECT_DRAWER_FIELD", + payload: { + currentScreen: currentCard, + currentCard: card[index], + drawerField: c[i], + }, + }); + // return; + }} + config={c[i]} + /> + ))} + {currentCard?.config?.enableFieldAddition && ( +
+ )} +

+ ); +} + +export default DrawerFieldComposer; diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SidePanel.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SidePanel.js new file mode 100644 index 0000000000..05be4199ea --- /dev/null +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SidePanel.js @@ -0,0 +1,241 @@ +import React, { useEffect, useState, useRef, Fragment } from "react"; +import PropTypes from "prop-types"; +import { SVG } from "@egovernments/digit-ui-components"; + +const Colors = { + lightTheme: { + primary: { + 1: "#C84C0E", + 2: "#0B4B66", + bg: "#FBEEE8", + }, + text: { + primary: "#363636", + secondary: "#787878", + disabled: "#C5C5C5", + }, + alert: { + error: "#B91900", + errorbg: "#FFF5F4", + success: "#00703C", + successbg: "#F1FFF8", + warning: "#9E5F00", + warningbg: "#FFF9F0", + info: "#0057BD", + infobg: "#DEEFFF", + }, + generic: { + background: "#EEEEEE", + divider: "#D6D5D4", + inputBorder: "#505A5F", + }, + paper: { + primary: "#FFFFFF", + secondary: "#FAFAFA", + }, + }, +}; +const Spacers = { + spacer0: "0rem", + spacer1: "0.25rem", + spacer2: "0.5rem", + spacer3: "0.75rem", + spacer4: "1rem", + spacer5: "1.25rem", + spacer6: "1.5rem", + spacer7: "1.75rem", + spacer8: "2rem", + spacer9: "2.25rem", + spacer10: "2.5rem", + spacer11: "2.75rem", + spacer12: "3rem", +}; + +const SidePanel = ({ + className = "", + styles = {}, + type = "static", + position = "right", + children, + header, + footer, + bgActive = false, + isOverlay = false, + isDraggable = false, + hideArrow, + hideScrollIcon, + sections = [], + defaultOpenWidth, + defaultClosedWidth, + addClose, + closedContents, + closedSections, + closedHeader, + closedFooter, + transitionDuration, +}) => { + const [isOpen, setIsOpen] = useState(true); + const sliderRef = useRef(null); + const [sliderWidth, setSliderWidth] = useState(defaultOpenWidth || 300); + const isDragging = useRef(false); + + const iconColor = Colors.lightTheme.text.primary; + const iconSize = Spacers.spacer8; + + const toggleSlider = () => { + if (type === "static") return; + if (isOpen) { + setIsOpen(false); + setSliderWidth(defaultClosedWidth || 64); + return; + } + setIsOpen((prevState) => !prevState); + if (!isOpen) { + setSliderWidth(defaultOpenWidth); + } + }; + + const handleClose = () => { + setIsOpen(false); + }; + + const handleMouseDown = (e) => { + if (isDraggable && type === "dynamic" && isOpen) { + isDragging.current = true; + document.addEventListener("mousemove", handleMouseMove); + document.addEventListener("mouseup", handleMouseUp); + } + }; + + const handleMouseMove = (e) => { + if (isDragging.current && sliderRef.current && isOpen) { + const newWidth = position === "right" ? window.innerWidth - e.clientX : e.clientX; + setSliderWidth(newWidth > (defaultClosedWidth || 64) ? newWidth : defaultClosedWidth || 64); + } + }; + + const handleMouseUp = () => { + isDragging.current = false; + document.removeEventListener("mousemove", handleMouseMove); + document.removeEventListener("mouseup", handleMouseUp); + }; + + useEffect(() => { + return () => { + document.removeEventListener("mousemove", handleMouseMove); + document.removeEventListener("mouseup", handleMouseUp); + }; + }, []); + + useEffect(() => {}, [isOpen]); + + return ( + <> + {!bgActive &&
} +
+ {type === "dynamic" && ( +
+ {!hideScrollIcon &&
} + {!hideArrow && ( +
+ +
+ )} +
+ )} +
+ {header && isOpen && ( +
+ {addClose && isOpen && ( +
+ +
+ )} + {header} +
+ )} + {closedHeader && !isOpen &&
{closedHeader}
} +
0 ? "with-sections" : ""}`}> + {isOpen + ? sections && sections?.length > 0 + ? sections?.map((section, index) => ( +
+
+ {section} +
+ {index < sections.length - 1 &&
} +
+ )) + : children + : sections && sections?.length > 0 + ? closedSections?.map((section, index) => ( +
+
+ {section} +
+ {index < sections.length - 1 &&
} +
+ )) + : closedContents} +
+ + {footer && isOpen &&
{footer}
} + {closedFooter && !isOpen &&
{closedFooter}
} +
+
+ + ); +}; + +SidePanel.propTypes = { + className: PropTypes.string, + styles: PropTypes.object, + type: PropTypes.oneOf(["static", "dynamic"]), + position: PropTypes.oneOf(["left", "right"]), + children: PropTypes.node, + header: PropTypes.node, + footer: PropTypes.node, + addClose: PropTypes.bool, + closedContents: PropTypes.node, + closedSections: PropTypes.arrayOf(PropTypes.node), + closedHeader: PropTypes.node, + closedFooter: PropTypes.node, + transitionDuration: PropTypes.number, + bgActive: PropTypes.bool, + isOverlay: PropTypes.bool, + isDraggable: PropTypes.bool, + sections: PropTypes.arrayOf(PropTypes.node), + hideArrow: PropTypes.bool, + hideScrollIcon: PropTypes.bool, + defaultOpenWidth: PropTypes.number, + defaultClosedWidth: PropTypes.number, +}; + +export default SidePanel; diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js index 122578edc9..b30b177ce6 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js @@ -104,7 +104,8 @@ const App = ({ path, BOUNDARY_HIERARCHY_TYPE, hierarchyData }) => { const Response = Digit?.ComponentRegistryService?.getComponent("Response"); const AddProduct = Digit?.ComponentRegistryService?.getComponent("AddProduct"); const UpdateDatesWithBoundaries = Digit?.ComponentRegistryService?.getComponent("UpdateDatesWithBoundaries"); - + const AppConfigurationWrapper = Digit?.ComponentRegistryService?.getComponent("AppConfigurationWrapper"); + useEffect(() => { if (window.location.pathname !== "/workbench-ui/employee/campaign/setup-campaign") { window.Digit.SessionStorage.del("HCM_CAMPAIGN_MANAGER_FORM_DATA"); @@ -154,6 +155,7 @@ const App = ({ path, BOUNDARY_HIERARCHY_TYPE, hierarchyData }) => { } /> } /> } /> + } /> diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/OldCampaignCard.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/OldCampaignCard.js index 2e0ab2386a..8453461590 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/OldCampaignCard.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/OldCampaignCard.js @@ -54,7 +54,13 @@ const CampaignCard = () => { link: `/workbench-ui/employee/campaign/boundary/home`, roles: ROLES.BOUNDARY_MANAGER, // count: isLoading?"-":data - } + }, + { + label: t("ACTION_TEST_APP_CONFIGURATION"), + link: `/workbench-ui/employee/campaign/app-configuration`, + roles: ROLES.CAMPAIGN_MANAGER, + // count: isLoading?"-":data + }, ]; links = links.filter((link) => (link?.roles && link?.roles?.length > 0 ? Digit.Utils.didEmployeeHasAtleastOneRole(link?.roles) : true)); diff --git a/health/micro-ui/web/public/index.html b/health/micro-ui/web/public/index.html index 909c37fa2e..54d966c576 100644 --- a/health/micro-ui/web/public/index.html +++ b/health/micro-ui/web/public/index.html @@ -10,7 +10,7 @@ - + DIGIT HCM