Merge branch 'console' into FEATURE/HCMPRE-1634

Author: Swathi-eGov

health/micro-ui/web/micro-ui-internals/example/public/index.html

@@ -12,7 +12,7 @@
   <title>DIGIT</title>
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].2/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].3/dist/index.css" />
 
 
   <!-- added below css for hcm-workbench module inclusion-->

health/micro-ui/web/micro-ui-internals/packages/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-health-css",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss

@@ -217,3 +217,23 @@
   font-weight: 700;
   }
 }
+.digit-popup-wrapper.dataMapping {
+  .digit-popup-children-wrap {
+    overflow: visible;
+  }
+}
+.dataMappingCard {
+  overflow-y: scroll;
+}
+.dataMappingDropdown {
+  min-width: 13rem !important;
+}
+.data-mapping-filter-switch {
+  float: right;
+  margin-bottom: 1.5rem;
+}
+.digit-label-field-pair.multiselect-label-field {
+  > div:nth-of-type(1) {
+    width: 69%;
+  }
+}

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/package.json

@@ -21,6 +21,8 @@
     "@cyntler/react-doc-viewer": "1.10.3",
     "@egovernments/digit-ui-components": "0.0.2-beta.58",
     "@egovernments/digit-ui-react-components": "1.8.10",
+    "react-data-table-component": "7.6.2",
+    "styled-components": "5.0.0",
     "@rjsf/core": "5.10.0",
     "@rjsf/utils": "5.10.0",
     "@rjsf/validator-ajv8": "5.10.0",
@@ -36,6 +38,7 @@
     "react-router-dom": "5.3.0",
     "react-select": "5.7.4",
     "react-table": "7.7.0",
+    "exceljs": "^4.4.0",
     "xlsx": "0.17.5"
   },
   "author": "JaganKumar <[email protected]>",

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

@@ -55,11 +55,13 @@ import ViewHierarchy from "./pages/employee/ViewHierarchy";
 import MultiSelectDropdown from "./components/MultiSelectDropdown";
 import MapView from "./components/MapView";
 import NoResultsFound from "./components/NoResultsFound";
+import UploadDataMappingWrapper from "./components/UploadDataMappingWrapper";
+import DataUploadWrapper from "./components/DataUploadWrapper";
 
 /**
  * MDMS Module name
  */
-export const CONSOLE_MDMS_MODULENAME="HCM-ADMIN-CONSOLE";
+export const CONSOLE_MDMS_MODULENAME = "HCM-ADMIN-CONSOLE";
 
 /**
  * The CampaignModule function fetches store data based on state code, module code, and language, and
@@ -69,24 +71,27 @@ export const CONSOLE_MDMS_MODULENAME="HCM-ADMIN-CONSOLE";
  */
 const CampaignModule = ({ stateCode, userType, tenants }) => {
   const tenantId = Digit.ULBService.getCurrentTenantId();
-  const { data: BOUNDARY_HIERARCHY_TYPE , isLoading: hierarchyLoading } = Digit.Hooks.useCustomMDMS(tenantId, CONSOLE_MDMS_MODULENAME, [{ 
-    name: "HierarchySchema",
-    "filter": `[?(@.type=='${window.Digit.Utils.campaign.getModuleName()}')]`
-   }], {
-    select: (data) => {
-      return data?.[CONSOLE_MDMS_MODULENAME]?.HierarchySchema?.[0]?.hierarchy;
+  const { data: BOUNDARY_HIERARCHY_TYPE, isLoading: hierarchyLoading } = Digit.Hooks.useCustomMDMS(
+    tenantId,
+    CONSOLE_MDMS_MODULENAME,
+    [
+      {
+        name: "HierarchySchema",
+        filter: `[?(@.type=='${window.Digit.Utils.campaign.getModuleName()}')]`,
+      },
+    ],
+    {
+      select: (data) => {
+        return data?.[CONSOLE_MDMS_MODULENAME]?.HierarchySchema?.[0]?.hierarchy;
+      },
     },
-  },
-  { schemaCode: `${CONSOLE_MDMS_MODULENAME}.HierarchySchema` }
-);
-
+    { schemaCode: `${CONSOLE_MDMS_MODULENAME}.HierarchySchema` }
+  );
 
-  const hierarchyData = Digit.Hooks.campaign.useBoundaryRelationshipSearch({BOUNDARY_HIERARCHY_TYPE,tenantId});
+  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"];
 
   const { path, url } = useRouteMatch();
   const language = Digit.StoreData.getCurrentLanguage();
@@ -104,13 +109,19 @@ const CampaignModule = ({ stateCode, userType, tenants }) => {
   return (
     <ErrorBoundary moduleName="CAMPAIGN">
       <TourProvider>
-        <EmployeeApp BOUNDARY_HIERARCHY_TYPE={BOUNDARY_HIERARCHY_TYPE} path={path} stateCode={stateCode} url={url} userType={userType} hierarchyData={hierarchyData} />
+        <EmployeeApp
+          BOUNDARY_HIERARCHY_TYPE={BOUNDARY_HIERARCHY_TYPE}
+          path={path}
+          stateCode={stateCode}
+          url={url}
+          userType={userType}
+          hierarchyData={hierarchyData}
+        />
       </TourProvider>
     </ErrorBoundary>
   );
 };
 
-
 const componentsToRegister = {
   CampaignModule: CampaignModule,
   CampaignCard: CampaignCard,
@@ -155,13 +166,15 @@ const componentsToRegister = {
   BulkUpload,
   CampaignUpdateSummary,
   XlsPreview,
-  MultiSelectDropdownBoundary:MultiSelectDropdown,
+  MultiSelectDropdownBoundary: MultiSelectDropdown,
   GeoPode,
   ViewBoundary,
   ViewHierarchy,
   BoundarySummary,
   MapView,
-  NoResultsFound
+  NoResultsFound,
+  UploadDataMappingWrapper,
+  DataUploadWrapper,
 };
 
 const overrideHooks = () => {

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadWrapper.js

@@ -0,0 +1,79 @@
+import { Card, Stepper, TextBlock } from "@egovernments/digit-ui-components";
+import React, { Fragment, useEffect, useState } from "react";
+import UploadData from "./UploadData";
+import { useTranslation } from "react-i18next";
+import UploadDataMappingWrapper from "./UploadDataMappingWrapper";
+
+function DataUploadWrapper({ formData, props, onSelect }) {
+  const { t } = useTranslation();
+  const { parentId, key: currentKey, ...queryParams } = Digit.Hooks.useQueryParams();
+  const categories = [
+    "HCM_UPLOAD_FACILITY",
+    "HCM_UPLOAD_FACILITY_MAPPING",
+    "HCM_UPLOAD_USER",
+    "HCM_UPLOAD_USER_MAPPING",
+    "HCM_UPLOAD_TARGET",
+    "HCM_SUMMARY",
+  ];
+  const mappingCategories = ["HCM_UPLOAD_FACILITY_MAPPING", "HCM_UPLOAD_USER_MAPPING"];
+  const [currentStep, setCurrentStep] = useState(1);
+  const currentCategories = categories?.[currentStep - 1];
+  const [key, setKey] = useState(() => {
+    return currentKey ? parseInt(currentKey) : 1;
+  });
+  const baseKey = 10;
+  function updateUrlParams(params) {
+    const url = new URL(window.location.href);
+    Object.entries(params).forEach(([key, value]) => {
+      url.searchParams.set(key, value);
+    });
+    window.history.replaceState({}, "", url);
+  }
+
+  useEffect(() => {
+    setKey(currentKey);
+    setCurrentStep(currentKey - baseKey + 1);
+  }, [currentKey]);
+
+  useEffect(() => {
+    updateUrlParams({ key: key });
+    window.dispatchEvent(new Event("checking"));
+  }, [key]);
+
+  const onStepClick = (currentStep) => {
+    setCurrentStep(currentStep + 1);
+    if (currentStep === 0) {
+      setKey(10);
+    } else if (currentStep === 1) {
+      setKey(11);
+    } else if (currentStep === 3) {
+      setKey(13);
+    } else if (currentStep === 4) {
+      setKey(14);
+    } else setKey(12);
+  };
+
+  return (
+    <>
+      <div className="container-full">
+        {!parentId && (
+          <div className="card-container">
+            <Card className="card-header-timeline">
+              <TextBlock subHeader={t("HCM_UPLOAD_DATA")} subHeaderClassName={"stepper-subheader"} wrapperClassName={"stepper-wrapper"} />
+            </Card>
+            <Card className="stepper-card">
+              <Stepper customSteps={categories} currentStep={currentStep} onStepClick={onStepClick} direction={"vertical"} />
+            </Card>
+          </div>
+        )}
+        {mappingCategories?.includes(currentCategories) ? (
+          <UploadDataMappingWrapper currentCategories={currentCategories} formData={formData} props={props} onSelect={onSelect} />
+        ) : (
+          <UploadData formData={formData} props={props} onSelect={onSelect} />
+        )}
+      </div>
+    </>
+  );
+}
+
+export default DataUploadWrapper;