diff --git a/src/components/common/FilterIcon.jsx b/src/components/common/FilterIcon.jsx index 1c91a693..922af101 100644 --- a/src/components/common/FilterIcon.jsx +++ b/src/components/common/FilterIcon.jsx @@ -1,4 +1,5 @@ import React, { useState, useEffect } from "react"; +import { useSelector } from "react-redux"; const FilterIcon = ({ taskListData, @@ -7,15 +8,26 @@ const FilterIcon = ({ currentSelectedFloors, currentSelectedActivities, }) => { + const selectedProject = useSelector((store) => store.localVariables.projectId); + const [selectedBuilding, setSelectedBuilding] = useState(currentSelectedBuilding || ""); const [selectedFloors, setSelectedFloors] = useState(currentSelectedFloors || []); const [selectedActivities, setSelectedActivities] = useState(currentSelectedActivities || []); + const [appliedBuilding, setAppliedBuilding] = useState(currentSelectedBuilding || ""); + const [appliedFloors, setAppliedFloors] = useState(currentSelectedFloors || []); + const [appliedActivities, setAppliedActivities] = useState(currentSelectedActivities || []); + + // Reset filters whenever inputs OR projectId changes useEffect(() => { setSelectedBuilding(currentSelectedBuilding || ""); setSelectedFloors(currentSelectedFloors || []); setSelectedActivities(currentSelectedActivities || []); - }, [currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities]); + + setAppliedBuilding(currentSelectedBuilding || ""); + setAppliedFloors(currentSelectedFloors || []); + setAppliedActivities(currentSelectedActivities || []); + }, [currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities, selectedProject]); const getUniqueFilterValues = (key, overrideBuilding, overrideFloors) => { if (!taskListData) return []; @@ -61,12 +73,11 @@ const FilterIcon = ({ } else if (filterType === "floor") { if (updatedFloors.includes(value)) { updatedFloors = updatedFloors.filter((floor) => floor !== value); + const validActivities = getUniqueFilterValues("activity", updatedBuilding, updatedFloors); + updatedActivities = updatedActivities.filter((act) => validActivities.includes(act)); } else { updatedFloors.push(value); } - - const validActivities = getUniqueFilterValues("activity", updatedBuilding, updatedFloors); - updatedActivities = updatedActivities.filter((act) => validActivities.includes(act)); } else if (filterType === "activity") { if (updatedActivities.includes(value)) { updatedActivities = updatedActivities.filter((act) => act !== value); @@ -78,12 +89,20 @@ const FilterIcon = ({ setSelectedBuilding(updatedBuilding); setSelectedFloors(updatedFloors); setSelectedActivities(updatedActivities); + }; + + const applyFilters = () => { + setAppliedBuilding(selectedBuilding); + setAppliedFloors(selectedFloors); + setAppliedActivities(selectedActivities); onApplyFilters({ - selectedBuilding: updatedBuilding, - selectedFloors: updatedFloors, - selectedActivities: updatedActivities, + selectedBuilding, + selectedFloors, + selectedActivities, }); + + document.getElementById("filterDropdown").click(); }; const clearAllFilters = () => { @@ -91,6 +110,10 @@ const FilterIcon = ({ setSelectedFloors([]); setSelectedActivities([]); + setAppliedBuilding(""); + setAppliedFloors([]); + setAppliedActivities([]); + onApplyFilters({ selectedBuilding: "", selectedFloors: [], @@ -98,21 +121,51 @@ const FilterIcon = ({ }); }; + // Count applied filters + const appliedFilterCount = + (appliedBuilding ? 1 : 0) + appliedFloors.length + appliedActivities.length; + return ( -