sort issue fix, title for buttons, actionbar fix (#1955)

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/digit-ui-css@1.8.3/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.42/dist/index.css" />
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.54/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.55/dist/index.css" />
 
   <!-- added below css for hcm-workbench module inclusion-->
   <!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.5.41/dist/index.css" /> -->

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

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-health-css",
-  "version": "0.1.54",
+  "version": "0.1.55",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egov.org.in>",

health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss

@@ -501,4 +501,10 @@ tbody tr:last-child td:last-child .digit-dropdown-employee-select-wrap .digit-dr
 
 .microplan-employee-module-card{
   min-height: 16.25rem;
+}
+
+.action-bar-wrap{
+  &.microplan-actionbar{
+    z-index: 19 !important;
+  }
 }

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

@@ -509,6 +509,11 @@ const FacilityPopUp = ({ detail, onClose }) => {
                             ? `${t("MICROPLAN_UNASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
                             : `${t("MICROPLAN_ASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
                         }
+                        title={
+                          facilityAssignedStatus
+                            ? `${t("MICROPLAN_UNASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
+                            : `${t("MICROPLAN_ASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
+                        }
                         type="button"
                         onClick={handleAssignUnassign}
                         size={"large"}

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

@@ -95,6 +95,20 @@ const PopInboxTable = ({ ...props }) => {
               fieldValue
             );
           },
+          sortFunction: (rowA, rowB) => {
+            const fieldA = rowA.additionalFields.find((f) => f.key === field.key);
+            const fieldB = rowB.additionalFields.find((f) => f.key === field.key);
+
+            const valueA = parseFloat(fieldA?.value || 0); // Converting to number, default to 0 if undefined
+            const valueB = parseFloat(fieldB?.value || 0);
+
+            if (fieldA?.editable && !fieldB?.editable) return 1; // Editable rows after non-editable
+            if (!fieldA?.editable && fieldB?.editable) return -1; // Non-editable rows before editable
+
+            // Numeric comparison for rows with same editability
+            return valueA - valueB;
+          },
+
           sortable: true,
           width: "180px",
           style: {

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

@@ -447,6 +447,7 @@ function RoleTableComposer({ nationalRoles }) {
               rowData?.find((item) => item?.rowIndex === row?.rowIndex)?.selectedBoundaries?.length === 0
             }
             style={{width:"100%"}}
+            title={isUserAlreadyAssignedActive ? t(`UNASSIGN`) : t(`ASSIGN`)}
             size="medium"
             className={"roleTableCell"}
             variation={isUserAlreadyAssignedActive ? "secondary" : "primary"}

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

@@ -137,7 +137,11 @@ function UserAccess({ category, setData, nationalRoles }) {
     {
       name: t("NAME"),
       selector: (row) => {
-        return row.name || t("NA");
+        return (
+          <div className="ellipsis-cell" title={row?.name || t("NA")}>
+            {row.name || t("NA")}
+          </div>
+        );
       },
       sortable: true,
       sortFunction: (rowA, rowB) => {
@@ -150,13 +154,23 @@ function UserAccess({ category, setData, nationalRoles }) {
     },
     {
       name: t("EMAIL"),
-      selector: (row) => row.email || t("NA"),
+      selector: (row) => {
+        return (
+          <div className="ellipsis-cell" title={row?.email || t("NA")}>
+            {row.email || t("NA")}
+          </div>
+        );
+      },
       sortable: false,
     },
     {
       name: t("CONTACT_NUMBER"),
       selector: (row) => {
-        return row.number || t("NA");
+        return (
+          <div className="ellipsis-cell" title={row?.number || t("NA")}>
+            {row?.number || t("NA")}
+          </div>
+        );
       },
       sortable: true,
       sortFunction: (rowA, rowB) => {
@@ -178,7 +192,11 @@ function UserAccess({ category, setData, nationalRoles }) {
         // } else {
         //   return row?.hierarchyLevel; // Otherwise, return the existing hierarchy level
         // }
-        return t(row?.hierarchyLevel || "NA");
+        return (
+          <div className="ellipsis-cell" title={t(row?.hierarchyLevel || "NA")}>
+            {t(row?.hierarchyLevel || "NA")}
+          </div>
+        );
       },
       sortable: true,
       sortFunction: (rowA, rowB) => {
@@ -191,6 +209,7 @@ function UserAccess({ category, setData, nationalRoles }) {
     },
     {
       name: t("ADMINISTRATIVE_BOUNDARY"),
+      grow: 2,
       selector: (row) => {
         return (
           <div className="digit-tag-container userAccessCell">

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js

@@ -539,6 +539,13 @@ const PlanInbox = () => {
       },
       sortable: true,
       width: "180px",
+      sortFunction: (rowA, rowB) => {
+        const fieldA = rowA?.[resource?.resourceType];
+        const fieldB = rowB?.[resource?.resourceType];
+        const valueA = parseFloat(fieldA || 0); 
+        const valueB = parseFloat(fieldB || 0);
+        return valueA - valueB;
+      },
     }));
 
     return (operationArr || [])
@@ -570,10 +577,17 @@ const PlanInbox = () => {
 
       return {
         name: t(i?.question),
-        sortable: false,
+        sortable: true,
         cell: (row) => {
           return t(`${row?.[`securityDetail_${i?.question}`]}`) || t("ES_COMMON_NA")},
         width: "180px",
+        sortFunction: (rowA, rowB) => {
+          const valueA = (rowA?.[`securityDetail_${i?.question}`] || t("ES_COMMON_NA")).toLowerCase();
+          const valueB = (rowB?.[`securityDetail_${i?.question}`] || t("ES_COMMON_NA")).toLowerCase();
+          if (valueA < valueB) return -1;
+          if (valueA > valueB) return 1;
+          return 0;
+        },
       };
     });
     // const securityColumns = Object.keys(sampleSecurityData).map((key) => ({

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/SetupMicroplan.js

@@ -398,7 +398,7 @@ const SetupMicroplan = ({ hierarchyType, hierarchyData }) => {
         onSubmit={onSubmit}
         showSecondaryLabel={true}
         secondaryLabel={t("MP_BACK")}
-        actionClassName={"actionBarClass"}
+        actionClassName={"actionBarClass microplan-actionbar"}
         className="setup-campaign"
         cardClassName="setup-compaign-card"
         noCardStyle={true}

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

@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.8.3/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.42/dist/index.css" />
   <!-- added below css for hcm-workbench module inclusion-->
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.54/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.55/dist/index.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />
   <title>DIGIT HCM</title>