FEATURE/HCMPRE-1709: Accessibility Dropdown

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

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

@@ -531,4 +531,11 @@ tbody tr:last-child td:last-child .digit-dropdown-employee-select-wrap .digit-dr
       }
     }
   }
+}
+
+.gap-between-dropdowns{
+  display:flex;
+  flex-direction: column;
+  gap: 1rem;
+
 }

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

@@ -1,9 +1,20 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, Fragment, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { FilterCard, LabelFieldPair, RadioButtons } from "@egovernments/digit-ui-components";
+import { FilterCard, Dropdown, LabelFieldPair, RadioButtons, TextBlock } from "@egovernments/digit-ui-components";
+import { useMyContext } from "../utils/context";
+
+
 
 const InboxFilterWrapper = (props) => {
+  const { state } = useMyContext();
   const { t } = useTranslation();
+  const [dropdown1Value, setDropdown1Value] = useState(null);
+  const [dropdown2Value, setDropdown2Value] = useState(null);
+  const [filterValues, setFilterValues] = useState(
+    { status: null, onRoadCondition: null, terrain: null, securityQ1: null, securityQ2: null }
+  );
+  const [onRoadCondition, setonRoadCOndition] = useState(null);
+
 
   // Default selected option
   const defaultSelectedOption = props.defaultValue
@@ -45,21 +56,41 @@ const InboxFilterWrapper = (props) => {
   // Apply filters when the user presses the primary action button
   const handleApplyFilters = () => {
     if (props.onApplyFilters) {
-      props.onApplyFilters(selectedValue); // Call the parent function with selected value
+      const filtersToApply= {};
+
+      for (let key in filterValues) {
+        if (filterValues[key] && typeof filterValues[key] === 'object' && filterValues[key].hasOwnProperty('name')) {
+          filtersToApply[key] = filterValues[key].name; // 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
     }
   };
 
   // Clear filters when the user presses the secondary action button
   const clearFilters = () => {
-    setSelectedValue(selectedValue); // Clear the selection
+    // setSelectedValue(selectedValue); // Clear the selection
+    setFilterValues({ status: null, onRoadCondition: null, terrain: null, securityQ1: null, securityQ2: null });
     if (props.clearFilters) {
       props.clearFilters();
     }
   };
 
+  const handleDropdownChange = (key, value) => {
+    setFilterValues((prev) => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
+
   return (
+
     <FilterCard
-      style={{ flexGrow: 1, display: "flex", flexDirection: "column",width:"22vw" }}
+      style={{ flexGrow: 1, display: "flex", flexDirection: "column", width: "22vw" }}
       layoutType={"vertical"}
       onClose={props?.onClose}
       onPrimaryPressed={handleApplyFilters} // Apply filters
@@ -68,23 +99,72 @@ const InboxFilterWrapper = (props) => {
       secondaryActionLabel={resultArray.length > 0 && t(props?.secondaryActionLabel)}
       title={t(props?.title)}
     >
-      <div className="filter-content-wrapper" style={{ height: "18rem" }}>
+      <div className="gap-between-dropdowns" style={{ height: "18rem" }}>
         {/* Only render LabelFieldPair if resultArray has items */}
         {resultArray.length > 0 && (
-          <LabelFieldPair>
+          <LabelFieldPair vertical style={{ marginBottom: "1rem" }} >
             <RadioButtons
               options={resultArray}
               optionsKey={"name"} // Use "name" key for display
-              selectedOption={selectedValue?.code} // Pass current selected option's code for comparison
+              selectedOption={filterValues["status"]} // Pass current selected option's code for comparison
               style={{
                 display: "flex",
                 flexDirection: "column",
                 gap: "1rem", // Adds space between options
               }}
-              onSelect={handleSelect} // Function to handle selection
+              onSelect={(value) => handleDropdownChange("status", value)} // Function to handle selection
             />
           </LabelFieldPair>
         )}
+
+        <LabelFieldPair vertical>
+          <TextBlock body={t(`MP_VILLAGE_ROAD_CONDITION`)} />
+          <Dropdown
+            option={state.villageRoadCondition}
+            optionKey={"code"}
+            selected={filterValues["onRoadCondition"]}
+            select={(value) => handleDropdownChange("onRoadCondition", value)}
+            t={t}
+            disabled={false}
+          />
+        </LabelFieldPair>
+
+        <LabelFieldPair vertical>
+          <TextBlock body={t(`MP_VILLAGE_TERRAIN`)} />
+          <Dropdown
+            option={state.villageTerrain}
+            optionKey={"code"}
+            selected={filterValues["terrain"]}
+            select={(value) => handleDropdownChange("terrain", value)}
+            t={t}
+            disabled={false}
+          />
+        </LabelFieldPair>
+
+
+        {state.securityQuestions.map((item, index) => {
+          // Transform item.values into an array of objects
+          const options = item.values.map((value) => ({
+            code: value,
+            name: value,
+            active: true,
+          }));
+
+          return (
+            <LabelFieldPair vertical>
+              <TextBlock body={t(`MP_SECURITY_QUESTION ${index + 1}`)} />
+              <Dropdown
+                option={options} // Pass filtersToApplyoptions here
+                optionKey="code" // Key for displaying dropdown options
+                selected={filterValues[`securityQ${index + 1}`]} // Set selected value
+                select={(value) => handleDropdownChange(`securityQ${index + 1}`, value)} // Handle selection
+                t={(key) => key} // Translation function (you can replace as needed)
+                disabled={false}
+              />
+            </LabelFieldPair>
+          );
+        })}
+
       </div>
     </FilterCard>
   );
@@ -97,4 +177,4 @@ InboxFilterWrapper.defaultProps = {
   optionsKey: "name",
 };
 
-export default InboxFilterWrapper;
+export default InboxFilterWrapper;

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(null);
+  const [selectedFilter, setSelectedFilter] = useState({status:null,onRoadCondition:null,terrain:null,securityQ1:null,securityQ2:null});
   const [activeFilter, setActiveFilter] = useState({});
   const [actionBarPopUp, setactionBarPopUp] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
@@ -120,7 +120,7 @@ const PlanInbox = () => {
   };
 
   useEffect(() => {
-    if (selectedFilter === "VALIDATED") {
+    if (selectedFilter.status === "VALIDATED") {
       setActiveLink({ code: "", name: "" });
       setShowTab(false);
     } else {
@@ -132,7 +132,7 @@ const PlanInbox = () => {
         setShowTab(true);
       }
     }
-  }, [selectedFilter]);
+  }, [selectedFilter.status]);
 
   const selectProps = {
     hideLabel: true,
@@ -171,7 +171,11 @@ const PlanInbox = () => {
         tenantId: tenantId,
         active: true,
         jurisdiction: censusJurisdiction,
-        status: selectedFilter !== null && selectedFilter !== undefined ? selectedFilter : "",
+        status: selectedFilter.status !== null && selectedFilter.status !== undefined ? selectedFilter.status : "",
+        onRoadCondition:selectedFilter.onRoadCondition,
+        terrain:selectedFilter?.terrain,
+        securityQ1:selectedFilter?.securityQ1,
+        securityQ2:selectedFilter?.securityQ2,
         assignee: user.info.uuid,
         planConfigurationId: microplanId, 
         limit: limitAndOffset?.limit,
@@ -206,8 +210,10 @@ const PlanInbox = () => {
         tenantId: tenantId,
         active: true,
         jurisdiction: censusJurisdiction,
-        status: selectedFilter !== null && selectedFilter !== undefined ? selectedFilter : "",
-        ...(activeLink.code == "ASSIGNED_TO_ALL" || selectedFilter == "VALIDATED" ? {} : { assignee: user.info.uuid }),
+        status: selectedFilter.status !== null && selectedFilter.status !== undefined ? selectedFilter.status : "",
+        ...(activeLink.code == "ASSIGNED_TO_ALL" || selectedFilter.status == "VALIDATED" ? {} : { assignee: user.info.uuid }),
+        terrain:selectedFilter?.terrain,
+        onRoadCondition:selectedFilter?.onRoadCondition,
         planConfigurationId: microplanId, //list of plan ids
         limit: limitAndOffset?.limit,
         offset: limitAndOffset?.offset,
@@ -366,7 +372,7 @@ const PlanInbox = () => {
       businessServices: "PLAN_ESTIMATION",
     },
     config: {
-      enabled: selectedFilter ? true : false,
+      enabled: selectedFilter.status ? true : false,
       select: (data) => {
         return data.BusinessServices?.[0];
       },
@@ -375,16 +381,16 @@ const PlanInbox = () => {
 
   useEffect(() => {
     if (workflowData) {
-      // Assume selectedFilter maps to applicationStatus or state
-      const selectedState = workflowData?.states?.find((state) => state.state === selectedFilter);
+      // Assume selectedFilter.filterValue maps to applicationStatus or state
+      const selectedState = workflowData?.states?.find((state) => state.state === selectedFilter.status);
 
       // Filter actions based on the selected state
       const availableActions = selectedState?.actions?.filter((action) => action.roles.some((role) => userRoles.includes(role)));
 
       // Update the available actions state
       setAvailableActionsForUser(availableActions || []);
     }
-  }, [workflowData, selectedFilter]);
+  }, [workflowData, selectedFilter.status]);
 
   // if availableActionsForUser is defined and is an array
   const actionsMain = availableActionsForUser?.length > 0 ? availableActionsForUser : [];
@@ -409,29 +415,33 @@ const PlanInbox = () => {
       );
       setActiveFilter(reorderedStatusCount);
       const activeFilterKeys = Object.keys(reorderedStatusCount || {});
-      if (selectedFilter === null || selectedFilter === undefined || selectedFilter === "" || !activeFilterKeys.includes(selectedFilter)) {
-        setSelectedFilter(activeFilterKeys[0]);
+      if (selectedFilter.filterValue === null || selectedFilter.status=== undefined || selectedFilter.status === "" || !activeFilterKeys.includes(selectedFilter.status)) {
+        setSelectedFilter((prev) => ({
+          ...prev, // Spread the previous state to retain other attributes
+          status: activeFilterKeys[0], // Update only the `status` key
+        }));
+
       }
       setVillagesSelected(0);
 
       setSelectedRows([]);
       if (activeLink.code === "ASSIGNED_TO_ME") {
         setAssignedToMeCount(planWithCensus?.TotalCount);
-        setAssignedToAllCount(planWithCensus?.StatusCount[selectedFilter] || 0);
+        setAssignedToAllCount(planWithCensus?.StatusCount[selectedFilter.status] || 0);
       } else {
         setAssignedToAllCount(planWithCensus?.TotalCount);
       }
 
       const uniqueAssignees = [...new Set(planWithCensus?.planData?.flatMap((item) => item.assignee || []))];
       setAssigneeUuids(uniqueAssignees.join(","));
     }
-  }, [planWithCensus, selectedFilter, activeLink]);
+  }, [planWithCensus, selectedFilter.status, activeLink]);
 
   useEffect(() => {
     if (censusJurisdiction?.length > 0) {
       refetchPlanWithCensus(); // Trigger the API call again after activeFilter changes
     }
-  }, [selectedFilter, activeLink, censusJurisdiction, limitAndOffset]);
+  }, [selectedFilter.status, activeLink, censusJurisdiction, limitAndOffset]);
 
   const reqCri = {
     url: `/${hrms_context_path}/employees/_search`,
@@ -484,7 +494,7 @@ const PlanInbox = () => {
   }, [processData]);
 
   useEffect(() => {
-    if (selectedFilter === "VALIDATED") {
+    if (selectedFilter.status === "VALIDATED") {
       setActiveLink({ code: "", name: "" });
       setShowTab(false);
     } else {
@@ -496,10 +506,15 @@ const PlanInbox = () => {
         setShowTab(true);
       }
     }
-  }, [selectedFilter]);
+  }, [selectedFilter.status]);
 
-  const onFilter = (selectedStatus) => {
-    setSelectedFilter(selectedStatus?.code);
+  const onFilter = (filterValue) => {
+    setSelectedFilter((prev)=>(
+      {
+        ...prev,
+        ...filterValue
+      }
+    ));
     setCurrentPage(1);
     setLimitAndOffset((prev)=>{
       return {
@@ -513,10 +528,12 @@ const PlanInbox = () => {
     });
   };
 
-  const clearFilters = () => {
-    if (selectedFilter !== Object.entries(activeFilter)?.[0]?.[0]) {
-      setSelectedFilter(Object.entries(activeFilter)?.[0]?.[0]);
-    }
+  const clearFilters = () => {    
+      setSelectedFilter((prev)=>(
+        { 
+          status:Object.entries(activeFilter)?.[0]?.[0]
+        }
+      ));
     setCurrentPage(1);
     setLimitAndOffset((prev)=>{
       return {
@@ -787,13 +804,13 @@ const PlanInbox = () => {
   };
 
   const getButtonState = (action) => {
-    if (selectedFilter === "PENDING_FOR_VALIDATION" && action === "VALIDATE") {
+    if (selectedFilter.status === "PENDING_FOR_VALIDATION" && action === "VALIDATE") {
       return true;
     }
-    if (selectedFilter === "PENDING_FOR_APPROVAL" && (action === "APPROVE" || action === "ROOT_APPROVE")) {
+    if (selectedFilter.status === "PENDING_FOR_APPROVAL" && (action === "APPROVE" || action === "ROOT_APPROVE")) {
       return true;
     }
-    if (selectedFilter === "VALIDATED" && action === "SEND_BACK_FOR_CORRECTION") {
+    if (selectedFilter.status === "VALIDATED" && action === "SEND_BACK_FOR_CORRECTION") {
       return true;
     }
     return false;
@@ -839,7 +856,7 @@ const PlanInbox = () => {
           <div>{`${t("LOGGED_IN_AS")} ${userName} - ${t(userRole)}`}</div>
         </div>
       </div>
-      <GenericKpiFromDSS module="MICROPLAN" status={selectedFilter} planId={microplanId} refetchTrigger={refetchTrigger} campaignType={campaignObject?.projectType} planEmployee={planEmployee} boundariesForKpi={defaultBoundaries}/>
+      <GenericKpiFromDSS module="MICROPLAN" status={selectedFilter.status} planId={microplanId} refetchTrigger={refetchTrigger} campaignType={campaignObject?.projectType} planEmployee={planEmployee} boundariesForKpi={defaultBoundaries}/>
       <SearchJurisdiction
         boundaries={boundaries}
         defaultHierarchy={defaultHierarchy}
@@ -867,7 +884,7 @@ const PlanInbox = () => {
           options={activeFilter}
           onApplyFilters={onFilter}
           clearFilters={clearFilters}
-          defaultValue={{ [selectedFilter]: activeFilter[selectedFilter] }}
+          defaultValue={{ [selectedFilter.status]: activeFilter[selectedFilter.status] }}
         ></InboxFilterWrapper>
 
         <div className={"pop-inbox-table-wrapper"}>
@@ -993,7 +1010,7 @@ const PlanInbox = () => {
               <Loader />
             ) : planWithCensus?.tableData?.length === 0 ? (
               <NoResultsFound
-                style={{ height: selectedFilter === "VALIDATED" ? "472px" : "408px" }}
+                style={{ height: selectedFilter.status === "VALIDATED" ? "472px" : "408px" }}
                 text={t(`HCM_MICROPLAN_NO_DATA_FOUND_FOR_PLAN_INBOX_PLAN`)}
               />
             ) : (