BUGFIX/HCMPRE-2212 : Updated Facility Filter as a Multiselect dropdown

egovernments · Jan 28, 2025 · 470f718 · 470f718
1 parent d739518
commit 470f718
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
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,6 +1,6 @@
 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 { FilterCard, Dropdown, LabelFieldPair, RadioButtons, TextBlock, Loader,MultiSelectDropdown } from "@egovernments/digit-ui-components";
 import { useMyContext } from "../utils/context";
 
 
@@ -11,7 +11,7 @@ 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,facilityID:null }
+    { status: null, onRoadCondition: null, terrain: null, securityQ1: null, securityQ2: null, facilityId:null }
   );
 
   // Default selected option
@@ -71,7 +71,7 @@ const InboxFilterWrapper = (props) => {
     if (props.onApplyFilters) {
       const filtersToApply = {};
       for (let key in filterValues) {
-        if(filterValues[key] && typeof filterValues[key] === 'object' && String(key)==='facilityId' &&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')) {
@@ -101,6 +101,20 @@ const InboxFilterWrapper = (props) => {
     }));
   };
 
+  const handleMultiSelectDropdownChange = (key, value) => {
+    const transformedValue = Array.isArray(value)
+      ? value.map((item) => ({
+          code: item?.[1]?.code,
+          id: item?.[1]?.id,
+        }))
+      : [];
+    setFilterValues((prev) => ({
+      ...prev,
+      [key]: transformedValue,
+    }));
+  };
+
+
   const planFacilitySearchConfig = {
     url: "/plan-service/plan/facility/_search",
     body: {
@@ -116,7 +130,8 @@ const InboxFilterWrapper = (props) => {
 
         // Extract facilityName and facilityId for each object
         const facilityOptions = data.PlanFacility.map((facility) => ({
-          code: facility.facilityName,
+          name: facility.facilityName,
+          code: facility.facilityId,
           id: facility.facilityId
         }));
 
@@ -193,15 +208,15 @@ const InboxFilterWrapper = (props) => {
 
         <LabelFieldPair vertical>
         <div className="custom-filter-names">{t("MP_FILTER_FACILITY")}</div>           
-          <Dropdown
-            option={planFacility}
-            optionKey={"code"}
-            selected={filterValues["facilityId"] || defaultSelectedOptions?.facilityId  }
-            select={(value) => handleDropdownChange("facilityId", value)}
+          <div style={{width:"100%"}}>
+          <MultiSelectDropdown
+            options={planFacility}
+            selected={defaultSelectedOptions?.facilityId}
+            optionsKey={"name"}
+            onSelect={(value) => handleMultiSelectDropdownChange("facilityId", value)}
             t={t}
-            disabled={false}
-            showToolTip={true}
           />
+          </div>
         </LabelFieldPair>   
 
 

diff --git a/...icro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js b/...icro-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,facilityId:null});
+  const [selectedFilter, setSelectedFilter] = useState({status:"PENDING_FOR_VALIDATION",onRoadCondition:null,terrain:null,securityQ1:null,securityQ2:null,facilityId:[]});
   const [activeFilter, setActiveFilter] = useState({});
   const [actionBarPopUp, setactionBarPopUp] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
@@ -176,7 +176,9 @@ 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 }),
+        ...(selectedFilter?.facilityId && {
+          facilityIds: selectedFilter?.facilityId?.map((item) => item.id),
+        }),
         assignee: user.info.uuid,
         planConfigurationId: microplanId, 
         limit: limitAndOffset?.limit,
@@ -212,8 +214,9 @@ 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 }),
-
+        ...(selectedFilter?.facilityId && {
+          facilityIds: selectedFilter?.facilityId?.map((item) => item.id),
+        }),
         planConfigurationId: microplanId, //list of plan ids
         limit: limitAndOffset?.limit,
         offset: limitAndOffset?.offset,