myMicroplanFixes

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/NoResultsFound.js

@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { SVG } from "@egovernments/digit-ui-components";
+
+const NoResultsFound = (props) => {
+  const { t } = useTranslation();
+  const iconHeight = props?.height || 262;
+  const iconWidth = props?.width || 336;
+  return (
+    <div className={`digit-no-data-found ${props?.className ? props?.className : ""}`} style={props?.style}>
+      <SVG.NoResultsFoundIcon height={iconHeight} width={iconWidth} />
+      <span className="digit-error-msg">{props?.text ? t(props?.text) : t("COMMON_NO_RESULTS_FOUND")}</span>
+    </div>
+  );
+};
+NoResultsFound.propTypes = {
+  style: PropTypes.object,
+  className: PropTypes.string,
+  height: PropTypes.number, // Prop for the height of the NoResultsFoundIcon
+  width: PropTypes.number, // Prop for the width of the NoResultsFoundIcon
+};
+
+// Default props for height and width
+NoResultsFound.defaultProps = {
+  height: 262,
+  width: 336,
+};
+export default NoResultsFound;

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.js

@@ -86,8 +86,8 @@ function RoleTableComposer({ nationalRoles }) {
             selectedHierarchy: nationalRoles?.includes(category)
               ? topBoundary
               : state?.boundaryHierarchy?.find(
-                (j) => j.boundaryType === data?.planData?.find((i) => i.employeeId === item?.user?.userServiceUuid)?.hierarchyLevel
-              ),
+                  (j) => j.boundaryType === data?.planData?.find((i) => i.employeeId === item?.user?.userServiceUuid)?.hierarchyLevel
+                ),
             selectedBoundaries: nationalRoles?.includes(category)
               ? topBoundaryValue
               : data?.planData?.find((i) => i.employeeId === item?.user?.userServiceUuid)?.jurisdiction,
@@ -162,11 +162,11 @@ function RoleTableComposer({ nationalRoles }) {
         return prev.map((i) =>
           i.rowIndex === row.rowIndex
             ? {
-              ...i,
-              selectedHierarchy: value,
-              boundaryOptions,
-              selectedBoundaries: [], // Keep existing selected boundaries
-            }
+                ...i,
+                selectedHierarchy: value,
+                boundaryOptions,
+                selectedBoundaries: [], // Keep existing selected boundaries
+              }
             : i
         );
       } else {
@@ -220,9 +220,9 @@ function RoleTableComposer({ nationalRoles }) {
           return prev.map((i) =>
             i.rowIndex === row.rowIndex
               ? {
-                ...i,
-                selectedBoundaries: [], // Clear selected boundaries
-              }
+                  ...i,
+                  selectedBoundaries: [], // Clear selected boundaries
+                }
               : i
           );
         } else {
@@ -251,9 +251,9 @@ function RoleTableComposer({ nationalRoles }) {
         return prev.map((i) =>
           i.rowIndex === row.rowIndex
             ? {
-              ...i,
-              selectedBoundaries: boundariesInEvent, // Update boundaries
-            }
+                ...i,
+                selectedBoundaries: boundariesInEvent, // Update boundaries
+              }
             : i
         );
       } else {
@@ -322,19 +322,19 @@ function RoleTableComposer({ nationalRoles }) {
     {
       name: t("NAME"),
       selector: (row) => {
-        return row.name;
+        return <div title={row?.name || t("NA")}>{row.name || t("NA")}</div>;
       },
       sortable: true,
     },
     {
       name: t("EMAIL"),
-      selector: (row) => row.email,
+      selector: (row) => <div title={row?.email || t("NA")}>{row?.email || t("NA")}</div>,
       sortable: true,
     },
     {
       name: t("CONTACT_NUMBER"),
       selector: (row) => {
-        return row.number;
+        return row.number || t("NA");
       },
       sortable: true,
     },
@@ -343,7 +343,7 @@ function RoleTableComposer({ nationalRoles }) {
       cell: (row) => {
         const isUserAlreadyAssignedActive =
           HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.length > 0 &&
-            HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
+          HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
             ? true
             : false;
         return (
@@ -369,15 +369,15 @@ function RoleTableComposer({ nationalRoles }) {
       cell: (row) => {
         const isUserAlreadyAssignedActive =
           HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.length > 0 &&
-            HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
+          HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
             ? true
             : false;
         return (
           <MultiSelectDropdown
             disabled={
               isUserAlreadyAssignedActive ||
-                nationalRoles?.includes(category) ||
-                !rowData?.find((item) => item?.rowIndex === row?.rowIndex)?.selectedHierarchy
+              nationalRoles?.includes(category) ||
+              !rowData?.find((item) => item?.rowIndex === row?.rowIndex)?.selectedHierarchy
                 ? true
                 : false
             }
@@ -400,7 +400,7 @@ function RoleTableComposer({ nationalRoles }) {
         const isUserAlreadyAssigned = HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.length > 0 ? true : false;
         const isUserAlreadyAssignedActive =
           HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.length > 0 &&
-            HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
+          HrmsData?.planSearchData?.filter((i) => i.employeeId === row.employeeId)?.[0]?.active
             ? true
             : false;
 
@@ -514,18 +514,9 @@ function RoleTableComposer({ nationalRoles }) {
                 />
               </LabelFieldPair>
               <div className={`search-field-wrapper roleComposer`} style={{ display: "flex", justifyContent: "flex-end" }}>
+                <Button variation="teritiary" label={t("Clear")} onClick={handleClearSearch} />
 
-                <Button
-                  variation="teritiary"
-                  label={t("Clear")}
-                  onClick={handleClearSearch}
-                />
-
-                <Button
-                  variation="primary"
-                  label={t("Search")}
-                  onClick={handleSearchSubmit}
-                />
+                <Button variation="primary" label={t("Search")} onClick={handleSearchSubmit} />
               </div>
             </div>
           </div>

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js

@@ -1,11 +1,12 @@
-import { Button, Card, Chip, Header, Loader, NoResultsFound, PopUp, Toast } from "@egovernments/digit-ui-components";
+import { Button, Card, Chip, Header, Loader, PopUp, Toast } from "@egovernments/digit-ui-components";
 import React, { Fragment, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import RoleTableComposer, { CustomLoader } from "./RoleTableComposer";
 import DataTable from "react-data-table-component";
 import { tableCustomStyle } from "./tableCustomStyle";
 import TableSearchField from "./TableSearchBar";
 import { useQueryClient } from "react-query";
+import NoResultsFound from "./NoResultsFound";
 
 const Wrapper = ({ setShowPopUp, alreadyQueuedSelectedState }) => {
   const { t } = useTranslation();
@@ -129,19 +130,19 @@ function UserAccess({ category, setData, nationalRoles }) {
     {
       name: t("NAME"),
       selector: (row) => {
-        return row.name;
+        return row.name || t("NA");
       },
       sortable: true,
     },
     {
       name: t("EMAIL"),
-      selector: (row) => row.email,
+      selector: (row) => row.email || t("NA"),
       sortable: true,
     },
     {
       name: t("CONTACT_NUMBER"),
       selector: (row) => {
-        return row.number;
+        return row.number || t("NA");
       },
       sortable: true,
     },
@@ -210,6 +211,8 @@ function UserAccess({ category, setData, nationalRoles }) {
             className={"roleTableCell"}
             variation={"secondary"}
             label={t(`UNASSIGN`)}
+            title={t(`UNASSIGN`)}
+            style={{ padding: "1rem" }}
             icon={"Close"}
             isSuffix={false}
             onClick={(value) => handleUpdateAssignEmployee(row)}
@@ -249,7 +252,7 @@ function UserAccess({ category, setData, nationalRoles }) {
         ) : null}
         {!isPlanEmpSearchLoading && (!planEmployee?.data || planEmployee?.data?.length === 0) ? (
           <Card style={{ boxShadow: "none" }}>
-            <NoResultsFound />
+            <NoResultsFound text={Digit.Utils.locale.getTransformedLocale(`NO_RESULTS_${category}`)} />
             <Button
               variation="secondary"
               label={t(Digit.Utils.locale.getTransformedLocale(`ASSIGN_` + category))}
@@ -283,8 +286,17 @@ function UserAccess({ category, setData, nationalRoles }) {
           type={"default"}
           heading={t(`${category}_POPUP_HEADING`)}
           children={[<RoleTableComposer category={category} nationalRoles={nationalRoles} />]}
-          onOverlayClick={() => { }}
-          footerChildren={[<Button type={"button"} size={"large"} variation={"secondary"} label={t("CLOSE")} onClick={() => setShowPopUp(false)} style={{ minWidth: "200px" }} />]}
+          onOverlayClick={() => {}}
+          footerChildren={[
+            <Button
+              type={"button"}
+              size={"large"}
+              variation={"secondary"}
+              label={t("CLOSE")}
+              onClick={() => setShowPopUp(false)}
+              style={{ minWidth: "200px" }}
+            />,
+          ]}
           sortFooterChildren={true}
           onClose={() => setShowPopUp(false)}
         />

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessWrapper.js

@@ -19,7 +19,7 @@ const UserAccessWrapper = ({ onSelect, props: customProps }) => {
   const rolesArray = state?.rolesForMicroplan?.sort((a, b) => a.orderNumber - b.orderNumber).map((item) => item.roleCode);
   let mpRolesArray = rolesArray.map((item) => t(`MP_ROLE_${item}`));
 
-  const nationalRoles = ["ROOT_PLAN_ESTIMATION_APPROVER", "ROOT_POPULATION_DATA_APPROVER", "ROOT_FACILITY_CATCHMENT_MAPPER"]
+  const nationalRoles = ["ROOT_PLAN_ESTIMATION_APPROVER", "ROOT_POPULATION_DATA_APPROVER", "ROOT_FACILITY_CATCHMENT_MAPPER"];
   const hierarchyData = customProps?.hierarchyData;
   const campaignType = customProps?.sessionData?.CAMPAIGN_DETAILS?.campaignDetails?.campaignType?.code;
 
@@ -33,7 +33,6 @@ const UserAccessWrapper = ({ onSelect, props: customProps }) => {
   const [showToast, setShowToast] = useState(null);
   const [showErrorToast, setShowErrorToast] = useState(null);
 
-
   const [executionCount, setExecutionCount] = useState(0);
 
   const tenantId = Digit.ULBService.getCurrentTenantId();
@@ -45,13 +44,25 @@ const UserAccessWrapper = ({ onSelect, props: customProps }) => {
       setInternalKey((prevKey) => prevKey - 1);
     }
   };
-
+  useEffect(() => {
+    window.addEventListener("UserAccessVerticalStepper", moveToPreviousStep);
+    return () => {
+      window.removeEventListener("UserAccessVerticalStepper", moveToPreviousStep);
+    };
+  }, [internalKey]);
   const isLastStep = () => {
     //deleting these params on last step
     Digit.Utils.microplanv1.updateUrlParams({ isLastVerticalStep: null });
     Digit.Utils.microplanv1.updateUrlParams({ internalKey: null });
   };
-
+  useEffect(() => {
+    if (internalKey === mpRolesArray.length) {
+      Digit.Utils.microplanv1.updateUrlParams({ isLastVerticalStep: true });
+    } else {
+      // Assuming 1 is the first step
+      Digit.Utils.microplanv1.updateUrlParams({ isLastVerticalStep: false });
+    }
+  }, [internalKey]);
   const updateUrlParams = (params) => {
     const url = new URL(window.location.href);
     Object.entries(params).forEach(([key, value]) => {
@@ -72,7 +83,6 @@ const UserAccessWrapper = ({ onSelect, props: customProps }) => {
     });
   };
 
-
   const handleBack = () => {
     if (internalKey > 1) {
       setInternalKey((prevKey) => prevKey - 1); // Update key in URL
@@ -136,11 +146,7 @@ const UserAccessWrapper = ({ onSelect, props: customProps }) => {
           </div>
 
           <div style={{ width: "100%" }}>
-            <UserAccess
-              category={rolesArray?.[internalKey - 1]}
-              setData={setData}
-              nationalRoles={nationalRoles}
-            />
+            <UserAccess category={rolesArray?.[internalKey - 1]} setData={setData} nationalRoles={nationalRoles} />
           </div>
         </div>
 
@@ -177,4 +183,4 @@ const UserAccessWrapper = ({ onSelect, props: customProps }) => {
   );
 };
 
-export default UserAccessWrapper;
+export default UserAccessWrapper;