FEATURE/HCMPRE-1710: Accessibility dropdown for planInbox with plan i…

…ntegration and apply filter (#2091) * Adding filters * Working Filter Search * InboxFilter Changes * removing console.log * Css package update * changes * changes * changes * changes * changes * A lot of changes * changes * changes * changes * uniform payload structure
egovernments · Jan 3, 2025 · dc5e629 · dc5e629
1 parent 7084443
commit dc5e629
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 51 deletions.
diff --git a/health/micro-ui/web/micro-ui-internals/example/public/index.html b/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-->

diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/package.json b/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]>",

diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss b/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;
+
 }
diff --git a/...ui/web/micro-ui-internals/packages/modules/microplan/src/components/InboxFilterWrapper.js b/...ui/web/micro-ui-internals/packages/modules/microplan/src/components/InboxFilterWrapper.js
@@ -1,29 +1,45 @@
 import React, { useState, 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 [filterValues, setFilterValues] = useState(
+    { status: null, onRoadCondition: null, terrain: null, securityQ1: null, securityQ2: null }
+  );
+
 
   // Default selected option
-  const defaultSelectedOption = props.defaultValue
-    ? { code: Object.keys(props.defaultValue)[0], name: `${t(Object.keys(props.defaultValue)[0])} (${Object.values(props.defaultValue)[0]})` }
+  let defaultSelectedOptions = props.defaultValue
+    ? Object.entries(props.defaultValue).reduce((acc, [key, value]) => {
+      if (value !== null) {
+        acc[key] = { code: value, name: `${t(key)} (${value})` };
+      } else {
+        acc[key] = null;
+      }
+      return acc;
+    }, {})
     : null;
 
   // Initialize state with the default selected option
-  const [selectedValue, setSelectedValue] = useState(defaultSelectedOption);
-
-  // Only update selectedValue when defaultValue from props changes, but not when it's null or undefined
   useEffect(() => {
     if (props.defaultValue && Object.keys(props.defaultValue).length > 0) {
-      const newDefault = {
-        code: Object.keys(props.defaultValue)[0],
-        name: `${t(Object.keys(props.defaultValue)[0])} (${Object.values(props.defaultValue)[0]})`,
-      };
-      setSelectedValue(newDefault);
+      const newDefault = Object.entries(props.defaultValue).reduce((acc, [key, value]) => {
+        acc[key] = value !== null
+          ? { code: value, name: `${t(key)} (${value})` }
+          : null;
+        return acc;
+      }, {});
+      setFilterValues(newDefault);
     }
   }, [props.defaultValue, t]);
 
+
+
   const createArrayFromObject = (obj, t) => {
     if (!obj || typeof obj !== "object" || Object.keys(obj).length === 0 || typeof t !== "function") {
       return []; // Return an empty array if options object is empty or null
@@ -45,21 +61,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('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
     }
   };
 
   // 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 });
+    defaultSelectedOptions = {};
     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 +104,78 @@ 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"]?.code || defaultSelectedOptions?.status?.code} // 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"] || defaultSelectedOptions?.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"] || defaultSelectedOptions?.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,
+          }));
+
+          const isLastElement = index === state.securityQuestions.length - 1;
+
+          return (
+            <LabelFieldPair
+              vertical
+              style={{ paddingBottom: isLastElement ? "1rem" : "0" }} 
+            >
+              <TextBlock body={t(`MP_SECURITY_QUESTION ${index + 1}`)} />
+              <Dropdown
+                option={options}
+                optionKey="code"
+                selected={filterValues[`securityQ${index + 1}`]} 
+                select={(value) => handleDropdownChange(`securityQ${index + 1}`, value)}
+                t={(key) => key} 
+                disabled={false}
+              />
+            </LabelFieldPair>
+          );
+        })}
+
+
       </div>
     </FilterCard>
   );
@@ -97,4 +188,4 @@ InboxFilterWrapper.defaultProps = {
   optionsKey: "name",
 };
 
-export default InboxFilterWrapper;
+export default InboxFilterWrapper;