FEATURE/HCMPRE-1713: PopInbox and filtering integration

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].35/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].36/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.35",
+  "version": "0.2.36",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

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

@@ -538,4 +538,13 @@ tbody tr:last-child td:last-child .digit-dropdown-employee-select-wrap .digit-dr
   flex-direction: column;
   gap: 1rem;
 
-}
+}
+
+.custom-filter-names {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.37rem;
+  color: #363636;
+  font-size: 1.1rem;
+}

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import { FilterCard, Dropdown, LabelFieldPair, RadioButtons, TextBlock, Loader } from "@egovernments/digit-ui-components";
 import { useMyContext } from "../utils/context";
@@ -11,34 +11,39 @@ const InboxFilterWrapper = (props) => {
   const {microplanId,...rest} = Digit.Hooks.useQueryParams()
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const [filterValues, setFilterValues] = useState(
-    { status: null, onRoadCondition: null, terrain: null, securityQ1: null, securityQ2: null }
+    { status: null, onRoadCondition: null, terrain: null, securityQ1: null, securityQ2: null,facilityID:null }
   );
 
-
   // Default selected option
   let defaultSelectedOptions = props.defaultValue
-    ? Object.entries(props.defaultValue).reduce((acc, [key, value]) => {
-      if (value !== null) {
+  ? Object.entries(props.defaultValue).reduce((acc, [key, value]) => {
+      if (key === "facilityId") {
+        acc[key] = { code: value?.code, name: `${t(key)} (${value})` };
+      } else if (value !== null) {
         acc[key] = { code: value, name: `${t(key)} (${value})` };
       } else {
         acc[key] = null;
       }
       return acc;
     }, {})
-    : null;
+  : null;
+
 
   // Initialize state with the default selected option
   useEffect(() => {
     if (props.defaultValue && Object.keys(props.defaultValue).length > 0) {
       const newDefault = Object.entries(props.defaultValue).reduce((acc, [key, value]) => {
         acc[key] = value !== null
-          ? { code: value, name: `${t(key)} (${value})` }
+          ? key === 'facilityId'
+            ? { code: value?.code }
+            : { code: value, name: `${t(key)} (${value})` }
           : null;
         return acc;
       }, {});
       setFilterValues(newDefault);
     }
   }, [props.defaultValue, t]);
+
 
 
 
@@ -65,15 +70,16 @@ const InboxFilterWrapper = (props) => {
   const handleApplyFilters = () => {
     if (props.onApplyFilters) {
       const filtersToApply = {};
-
       for (let key in filterValues) {
-        if (filterValues[key] && typeof filterValues[key] === 'object' && filterValues[key].hasOwnProperty('code')) {
+        if(filterValues[key] && typeof filterValues[key] === 'object' && String(key)==='facilityId' &&filterValues[key].hasOwnProperty('code') ){
+          filtersToApply[key] = filterValues[key]
+        }
+        else if (filterValues[key] && typeof filterValues[key] === 'object' && filterValues[key].hasOwnProperty('code')) {
           filtersToApply[key] = filterValues[key].code; // Extract 'name' if it exists
         } else {
           filtersToApply[key] = filterValues[key]; // Keep the value as is (including null)
         }
       }
-
       props.onApplyFilters(filtersToApply); // Pass the new array to onApplyFilters
     }
   };
@@ -125,7 +131,7 @@ const InboxFilterWrapper = (props) => {
   if(isPlanFacilityLoading){
     return <Loader/>
   }
-  
+
   return (
 
     <FilterCard
@@ -155,9 +161,10 @@ const InboxFilterWrapper = (props) => {
             />
           </LabelFieldPair>
         )}
-
+        {props.isPlanInbox &&
+        <Fragment>
         <LabelFieldPair vertical>
-          <TextBlock body={t(`MP_VILLAGE_ROAD_CONDITION`)} />
+        <div className="custom-filter-names">{t("MP_VILLAGE_ROAD_CONDITION")}</div> 
           <Dropdown
             option={state.villageRoadCondition}
             optionKey={"code"}
@@ -169,8 +176,8 @@ const InboxFilterWrapper = (props) => {
         </LabelFieldPair>
 
         <LabelFieldPair vertical>
-          <TextBlock body={t(`MP_VILLAGE_TERRAIN`)} />
-          <Dropdown
+        <div className="custom-filter-names">{t("MP_VILLAGE_TERRAIN")}</div>           
+        <Dropdown
             option={state.villageTerrain}
             optionKey={"code"}
             selected={filterValues["terrain"] || defaultSelectedOptions?.terrain}
@@ -181,12 +188,12 @@ const InboxFilterWrapper = (props) => {
         </LabelFieldPair>
 
         <LabelFieldPair vertical>
-          <TextBlock body={t(`MP_FILTER_FACILITY`)} />
+        <div className="custom-filter-names">{t("MP_FILTER_FACILITY")}</div>           
           <Dropdown
             option={planFacility}
             optionKey={"code"}
-            selected={filterValues["facility"] || defaultSelectedOptions?.facility}
-            select={(value) => handleDropdownChange("facility", value)}
+            selected={filterValues["facilityId"] || defaultSelectedOptions?.facilityId  }
+            select={(value) => handleDropdownChange("facilityId", value)}
             t={t}
             disabled={false}
           />
@@ -202,24 +209,27 @@ const InboxFilterWrapper = (props) => {
           }));
 
           const isLastElement = index === state.securityQuestions.length - 1;
+          const questionNumber = parseInt(item.id, 10); 
 
           return (
             <LabelFieldPair
               vertical
               style={{ paddingBottom: isLastElement ? "1rem" : "0" }} 
             >
-              <TextBlock body={t(`MP_SECURITY_QUESTION ${index + 1}`)} />
+              <div className="custom-filter-names">{t(`MP_SECURITY_QUESTION ${index + 1}`)}</div>             
               <Dropdown
                 option={options}
-                optionKey="code"
-                selected={filterValues[`securityQ${index + 1}`]} 
-                select={(value) => handleDropdownChange(`securityQ${index + 1}`, value)}
-                t={(key) => key} 
+                optionKey={"code"}
+                selected={filterValues[`securityQ${questionNumber}`]} 
+                select={(value) => handleDropdownChange(`securityQ${questionNumber}`, value)}
+                t={t}
                 disabled={false}
               />
             </LabelFieldPair>
           );
         })}
+      </Fragment>
+      }
 
 
       </div>

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

@@ -79,7 +79,6 @@ function RoleTableComposer({ nationalRoles }) {
       enabled: true,
       select: (data) => {
         const resp = data?.Employees
-        ?.filter((emp)=> emp?.user?.userServiceUuid!== null)
         ?.map((item, index) => {
           return {
             rowIndex: index + 1,

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

@@ -33,7 +33,7 @@ const PlanInbox = () => {
   const [hierarchyLevel, setHierarchyLevel] = useState("");
   const [censusData, setCensusData] = useState([]);
   const [boundaries, setBoundaries] = useState([]);
-  const [selectedFilter, setSelectedFilter] = useState({status:"PENDING_FOR_VALIDATION",onRoadCondition:null,terrain:null,securityQ1:null,securityQ2:null});
+  const [selectedFilter, setSelectedFilter] = useState({status:"PENDING_FOR_VALIDATION",onRoadCondition:null,terrain:null,securityQ1:null,securityQ2:null,facilityId:null});
   const [activeFilter, setActiveFilter] = useState({});
   const [actionBarPopUp, setactionBarPopUp] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
@@ -176,6 +176,7 @@ const PlanInbox = () => {
         ...(selectedFilter?.terrain != null && { terrain: selectedFilter.terrain }),
         ...(selectedFilter?.securityQ1 != null && { securityQ1: selectedFilter.securityQ1 }),
         ...(selectedFilter?.securityQ2 != null && { securityQ2: selectedFilter.securityQ2 }),
+        ...(selectedFilter?.facilityId?.id != null && { facilityId: selectedFilter.facilityId.id }),
         assignee: user.info.uuid,
         planConfigurationId: microplanId, 
         limit: limitAndOffset?.limit,
@@ -216,6 +217,8 @@ const PlanInbox = () => {
         ...(selectedFilter?.onRoadCondition != null && { onRoadCondition: selectedFilter.onRoadCondition }),
         ...(selectedFilter?.securityQ1 != null && { securityQ1: selectedFilter.securityQ1 }),
         ...(selectedFilter?.securityQ2 != null && { securityQ2: selectedFilter.securityQ2 }),
+        ...(selectedFilter?.facilityId?.id != null && { facilityId: selectedFilter.facilityId.id }),
+
         planConfigurationId: microplanId, //list of plan ids
         limit: limitAndOffset?.limit,
         offset: limitAndOffset?.offset,
@@ -882,6 +885,7 @@ const PlanInbox = () => {
         }}
       >
         <InboxFilterWrapper
+          isPlanInbox={true}
           options={activeFilter}
           onApplyFilters={onFilter}
           clearFilters={clearFilters}