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 ( -
+
+

    - {(selectedBuilding || selectedFloors.length > 0 || selectedActivities.length > 0) && ( -
  • +
  • +
    +
  • + {(appliedFilterCount > 0 || + selectedBuilding || + selectedFloors.length > 0 || + selectedActivities.length > 0) && ( +
  • )} - -
); diff --git a/src/pages/Activities/DailyTask.jsx b/src/pages/Activities/DailyTask.jsx index 1837f6fa..ef5e1d6e 100644 --- a/src/pages/Activities/DailyTask.jsx +++ b/src/pages/Activities/DailyTask.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useRef, useState } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import { useDispatch } from "react-redux"; import { useTaskList } from "../../hooks/useTasks"; import { useProjectName } from "../../hooks/useProjects"; @@ -14,7 +14,6 @@ import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils"; import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { APPROVE_TASK, ASSIGN_REPORT_TASK } from "../../utils/constants"; import { useSelectedproject } from "../../slices/apiDataManager"; -import moment from "moment"; import Loader from "../../components/common/Loader"; const DailyTask = () => { @@ -45,6 +44,15 @@ const DailyTask = () => { } }, [selectedProject, projectNames, dispatch]); + // 🔹 Reset filters when project changes + useEffect(() => { + setFilters({ + selectedBuilding: "", + selectedFloors: [], + selectedActivities: [], + }); + }, [selectedProject]); + // Memoized filtering const filteredTasks = useMemo(() => { if (!TaskList) return []; @@ -91,8 +99,8 @@ const DailyTask = () => { data-bs-content={`
${task.teamMembers - .map( - (m) => ` + .map( + (m) => `
@@ -101,8 +109,8 @@ const DailyTask = () => {
${m.firstName} ${m.lastName}
` - ) - .join("")} + ) + .join("")}
`} > @@ -163,6 +171,7 @@ const DailyTask = () => { currentSelectedBuilding={filters.selectedBuilding} currentSelectedFloors={filters.selectedFloors} currentSelectedActivities={filters.selectedActivities} + selectedProject={selectedProject} />