admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Updation In Daily Progress Report filter icon.

Browse Source
This commit is contained in:
Umesh Desai 2025-06-10 12:27:11 +05:30 committed by Vikas Nale
parent 7eff9d8c3a
commit d3524c40f3
2 changed files with 138 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
src/components/common/FilterIcon.jsx
View File

@ -1,90 +1,98 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities }) => { const FilterIcon = ({
// State for filters, now managed within FilterIcon taskListData,
const [selectedBuilding, setSelectedBuilding] = useState(currentSelectedBuilding); onApplyFilters,
const [selectedFloors, setSelectedFloors] = useState(currentSelectedFloors); currentSelectedBuilding,
const [selectedActivities, setSelectedActivities] = useState(currentSelectedActivities); currentSelectedFloors,
currentSelectedActivities,
}) => {
const [selectedBuilding, setSelectedBuilding] = useState(currentSelectedBuilding || "");
const [selectedFloors, setSelectedFloors] = useState(currentSelectedFloors || []);
const [selectedActivities, setSelectedActivities] = useState(currentSelectedActivities || []);
// Update internal state when props change (e.g., project selection in DailyTask clears filters)
useEffect(() => { useEffect(() => {
setSelectedBuilding(currentSelectedBuilding); setSelectedBuilding(currentSelectedBuilding || "");
setSelectedFloors(currentSelectedFloors); setSelectedFloors(currentSelectedFloors || []);
setSelectedActivities(currentSelectedActivities); setSelectedActivities(currentSelectedActivities || []);
}, [currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities]); }, [currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities]);
// Helper to get unique values for filters based on current selections const getUniqueFilterValues = (key, overrideBuilding, overrideFloors) => {
const getUniqueFilterValues = (key) => {
if (!taskListData) return []; if (!taskListData) return [];
let relevantTasks = taskListData;
// Filter tasks based on selected building for floors and activities let filteredTasks = [...taskListData];
if (selectedBuilding) {
relevantTasks = relevantTasks.filter(task => if (overrideBuilding) {
task?.workItem?.workArea?.floor?.building?.name === selectedBuilding filteredTasks = filteredTasks.filter(
(task) =>
task?.workItem?.workArea?.floor?.building?.name === overrideBuilding
); );
} }
// Filter tasks based on selected floors for activities if (overrideFloors?.length > 0) {
if (selectedFloors.length > 0) { filteredTasks = filteredTasks.filter((task) =>
relevantTasks = relevantTasks.filter(task => overrideFloors.includes(task?.workItem?.workArea?.floor?.floorName)
selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
); );
} }
const values = relevantTasks.map(task => { const values = filteredTasks.map((task) => {
if (key === 'building') return task?.workItem?.workArea?.floor?.building?.name; if (key === "building") return task?.workItem?.workArea?.floor?.building?.name;
if (key === 'floor') return task?.workItem?.workArea?.floor?.floorName; if (key === "floor") return task?.workItem?.workArea?.floor?.floorName;
if (key === 'activity') return task?.workItem?.activityMaster?.activityName; if (key === "activity") return task?.workItem?.activityMaster?.activityName;
return null; return null;
}).filter(Boolean); // Remove null or undefined values });
return [...new Set(values)].sort(); // Sort for consistent order
return [...new Set(values.filter(Boolean))].sort();
}; };
const uniqueBuildings = getUniqueFilterValues('building'); const uniqueBuildings = getUniqueFilterValues("building");
const uniqueFloors = getUniqueFilterValues('floor'); const uniqueFloors = getUniqueFilterValues("floor", selectedBuilding);
const uniqueActivities = getUniqueFilterValues('activity'); const uniqueActivities = getUniqueFilterValues("activity", selectedBuilding, selectedFloors);
// Handle filter selection with dependency logic
const handleFilterChange = (filterType, value) => { const handleFilterChange = (filterType, value) => {
let newSelectedBuilding = selectedBuilding; let updatedBuilding = selectedBuilding;
let newSelectedFloors = [...selectedFloors]; let updatedFloors = [...selectedFloors];
let newSelectedActivities = [...selectedActivities]; let updatedActivities = [...selectedActivities];
if (filterType === 'building') { if (filterType === "building") {
if (selectedBuilding !== value) { updatedBuilding = value;
newSelectedFloors = []; updatedFloors = [];
newSelectedActivities = []; updatedActivities = [];
} else if (filterType === "floor") {
if (updatedFloors.includes(value)) {
updatedFloors = updatedFloors.filter((floor) => floor !== value);
} else {
updatedFloors.push(value);
} }
newSelectedBuilding = value;
} else if (filterType === 'floor') { const validActivities = getUniqueFilterValues("activity", updatedBuilding, updatedFloors);
newSelectedFloors = selectedFloors.includes(value) ? selectedFloors.filter(item => item !== value) : [...selectedFloors, value]; updatedActivities = updatedActivities.filter((act) => validActivities.includes(act));
if (!newSelectedFloors.includes(value) && selectedFloors.includes(value)) { } else if (filterType === "activity") {
newSelectedActivities = []; if (updatedActivities.includes(value)) {
updatedActivities = updatedActivities.filter((act) => act !== value);
} else {
updatedActivities.push(value);
} }
} else if (filterType === 'activity') {
newSelectedActivities = selectedActivities.includes(value) ? selectedActivities.filter(item => item !== value) : [...selectedActivities, value];
} }
setSelectedBuilding(newSelectedBuilding); setSelectedBuilding(updatedBuilding);
setSelectedFloors(newSelectedFloors); setSelectedFloors(updatedFloors);
setSelectedActivities(newSelectedActivities); setSelectedActivities(updatedActivities);
// Communicate the updated filter states back to the parent
onApplyFilters({ onApplyFilters({
selectedBuilding: newSelectedBuilding, selectedBuilding: updatedBuilding,
selectedFloors: newSelectedFloors, selectedFloors: updatedFloors,
selectedActivities: newSelectedActivities, selectedActivities: updatedActivities,
}); });
}; };
const clearAllFilters = () => { const clearAllFilters = () => {
setSelectedBuilding(''); setSelectedBuilding("");
setSelectedFloors([]); setSelectedFloors([]);
setSelectedActivities([]); setSelectedActivities([]);
// Communicate cleared filters back to the parent
onApplyFilters({ onApplyFilters({
selectedBuilding: '', selectedBuilding: "",
selectedFloors: [], selectedFloors: [],
selectedActivities: [], selectedActivities: [],
}); });
@ -98,20 +106,19 @@ const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, cur
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false" aria-expanded="false"
> >
<i className="fa-solid fa-filter bx-sm "></i> <i
className="fa-solid fa-filter bx-sm"
style={{ color: selectedBuilding || selectedFloors.length > 0 || selectedActivities.length > 0 ? "#7161EF" : "gray" }}
></i>
</a> </a>
<ul <ul
className="dropdown-menu p-2" className="dropdown-menu p-2"
aria-labelledby="filterDropdown" aria-labelledby="filterDropdown"
style={{ style={{ minWidth: "360px", fontSize: "13px" }}
minWidth: "360px",
fontSize: "13px",
}}
// Prevent dropdown from closing when clicking inside it
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
{/* Building Filter - Now a Dropdown */} {/* Building */}
<li> <li>
<div className="fw-bold text-dark mb-1">Building</div> <div className="fw-bold text-dark mb-1">Building</div>
<div className="row"> <div className="row">
@ -122,33 +129,26 @@ const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, cur
onChange={(e) => handleFilterChange("building", e.target.value)} onChange={(e) => handleFilterChange("building", e.target.value)}
> >
<option value="">Select Building</option> <option value="">Select Building</option>
{uniqueBuildings.length > 0 ? ( {uniqueBuildings.map((building, idx) => (
uniqueBuildings.map((building, idx) => ( <option key={idx} value={building}>
<option key={`building-option-${idx}`} value={building}> {building}
{building} </option>
</option> ))}
))
) : (
<option value="" disabled>No buildings available</option>
)}
</select> </select>
</div> </div>
</div> </div>
</li> </li>
{/* Floor Filter - Visible only if a building is selected */} {/* Floor */}
{selectedBuilding && ( {selectedBuilding && (
<> <>
<li><hr className="my-1" /></li>
<li> <li>
<hr className="my-1" /> <div className="fw-bold text-dark mb-1">Floors</div>
</li>
<li>
<div className="fw-bold text-dark mb-1">Floor</div>
<div className="row"> <div className="row">
{uniqueFloors.length > 0 ? ( {uniqueFloors.length > 0 ? (
uniqueFloors.map((floor, idx) => ( uniqueFloors.map((floor, idx) => (
<div className="col-6" key={`floor-${idx}`}> <div className="col-6" key={idx}>
<div className="form-check mb-1"> <div className="form-check mb-1">
<input <input
className="form-check-input" className="form-check-input"
@ -157,36 +157,30 @@ const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, cur
checked={selectedFloors.includes(floor)} checked={selectedFloors.includes(floor)}
onChange={() => handleFilterChange("floor", floor)} onChange={() => handleFilterChange("floor", floor)}
/> />
<label <label className="form-check-label" htmlFor={`floor-${floor}`}>
className="form-check-label"
htmlFor={`floor-${floor}`}
>
{floor} {floor}
</label> </label>
</div> </div>
</div> </div>
)) ))
) : ( ) : (
<div className="col-12 text-muted">No floors for selected building.</div> <div className="col-12 text-muted">No floors found.</div>
)} )}
</div> </div>
</li> </li>
</> </>
)} )}
{/* Activity Filter - Visible only if a floor is selected */} {/* Activity */}
{selectedFloors.length > 0 && ( {selectedFloors.length > 0 && (
<> <>
<li><hr className="my-1" /></li>
<li> <li>
<hr className="my-1" /> <div className="fw-bold text-dark mb-1">Activities</div>
</li>
<li>
<div className="fw-bold text-dark mb-1">Activity</div>
<div className="row"> <div className="row">
{uniqueActivities.length > 0 ? ( {uniqueActivities.length > 0 ? (
uniqueActivities.map((activity, idx) => ( uniqueActivities.map((activity, idx) => (
<div className="col-6" key={`activity-${idx}`}> <div className="col-6" key={idx}>
<div className="form-check mb-1"> <div className="form-check mb-1">
<input <input
className="form-check-input" className="form-check-input"
@ -195,43 +189,60 @@ const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, cur
checked={selectedActivities.includes(activity)} checked={selectedActivities.includes(activity)}
onChange={() => handleFilterChange("activity", activity)} onChange={() => handleFilterChange("activity", activity)}
/> />
<label <label className="form-check-label" htmlFor={`activity-${activity}`}>
className="form-check-label"
htmlFor={`activity-${activity}`}
>
{activity} {activity}
</label> </label>
</div> </div>
</div> </div>
)) ))
) : ( ) : (
<div className="col-12 text-muted">No activities for selected floor(s).</div> <div className="col-12 text-muted">No activities found.</div>
)} )}
</div> </div>
</li> </li>
</> </>
)} )}
{/* Clear Filters */} {/* Action Buttons */}
{(selectedBuilding || <li><hr className="my-1" /></li>
selectedFloors.length > 0 || {(selectedBuilding || selectedFloors.length > 0 || selectedActivities.length > 0) && (
selectedActivities.length > 0) && ( <li className="d-flex justify-content-end gap-2 px-2">
<> <button
<li> type="button"
<hr className="my-1" /> className="btn btn-sm"
</li> style={{
<li> backgroundColor: "#7161EF",
<button color: "white",
type="button" fontSize: "13px",
className="dropdown-item text-danger px-2 py-1" padding: "4px 16px",
style={{ fontSize: "13px" }} borderRadius: "8px",
onClick={clearAllFilters} boxShadow: "0 1px 4px rgba(0,0,0,0.1)"
> }}
Clear All Filters onClick={clearAllFilters}
</button> >
</li> Clear
</> </button>
)} <button
type="button"
className="btn btn-sm"
style={{
backgroundColor: "#7161EF",
color: "white",
fontSize: "13px",
padding: "4px 16px",
borderRadius: "8px",
boxShadow: "0 1px 4px rgba(0,0,0,0.1)"
}}
onClick={() => {
document.getElementById("filterDropdown").click();
}}
>
Apply
</button>
</li>
)}
</ul> </ul>
</div> </div>
); );

74
src/pages/Activities/DailyTask.jsx
View File

@ -26,20 +26,17 @@ const DailyTask = () => {
const [initialized, setInitialized] = useState(false); const [initialized, setInitialized] = useState(false);
const dispatch = useDispatch(); const dispatch = useDispatch();
// State for filters (moved to FilterIcon, but we need to receive them here)
const [filters, setFilters] = useState({ const [filters, setFilters] = useState({
selectedBuilding: "", selectedBuilding: "",
selectedFloors: [], selectedFloors: [],
selectedActivities: [], selectedActivities: [],
}); });
// Sync projectId (either from URL or pick first accessible one)
useEffect(() => { useEffect(() => {
if (!project_loading && projects.length > 0 && !initialized) { if (!project_loading && projects.length > 0 && !initialized) {
if (projectIdFromUrl) { if (projectIdFromUrl) {
dispatch(setProjectId(projectIdFromUrl)); dispatch(setProjectId(projectIdFromUrl));
} else if (selectedProject === 1 || selectedProject === undefined) { } else if (selectedProject === 1 || selectedProject === undefined) {
// If no project from URL or default/undefined, pick the first project
dispatch(setProjectId(projects[0].id)); dispatch(setProjectId(projects[0].id));
} }
setInitialized(true); setInitialized(true);
@ -57,7 +54,7 @@ const DailyTask = () => {
const { const {
TaskList, TaskList,
loading: task_loading, // This `loading` state indicates if task data is being fetched loading: task_loading,
error: task_error, error: task_error,
refetch, refetch,
} = useTaskList( } = useTaskList(
@ -66,13 +63,11 @@ const DailyTask = () => {
initialized ? dateRange.endDate : null initialized ? dateRange.endDate : null
); );
const [TaskLists, setTaskLists] = useState([]); // This state holds the *filtered* tasks for display const [TaskLists, setTaskLists] = useState([]);
const [dates, setDates] = useState([]); const [dates, setDates] = useState([]);
const popoverRefs = useRef([]); const popoverRefs = useRef([]);
// Effect to apply filters to TaskList (from useTaskList) and update TaskLists (filtered display)
useEffect(() => { useEffect(() => {
// Only filter if TaskList is available (not null or undefined)
if (TaskList) { if (TaskList) {
let filteredTasks = TaskList; let filteredTasks = TaskList;
@ -101,8 +96,6 @@ const DailyTask = () => {
} }
setTaskLists(filteredTasks); setTaskLists(filteredTasks);
} else { } else {
// If TaskList is null (e.g., during initial load or project change before data arrives),
// ensure TaskLists is also empty to avoid displaying stale data.
setTaskLists([]); setTaskLists([]);
} }
}, [ }, [
@ -137,52 +130,22 @@ const DailyTask = () => {
}; };
useEffect(() => { useEffect(() => {
// Ensure Bootstrap's Popover is initialized correctly
popoverRefs.current.forEach((el) => { popoverRefs.current.forEach((el) => {
if ( if (el) {
el && new bootstrap.Popover(el, {
window.bootstrap &&
typeof window.bootstrap.Popover === "function"
) {
// Dispose existing popovers to prevent duplicates if component re-renders
const existingPopover = window.bootstrap.Popover.getInstance(el);
if (existingPopover) {
existingPopover.dispose();
}
new window.bootstrap.Popover(el, {
trigger: "focus", trigger: "focus",
placement: "left", placement: "left",
html: true, html: true,
content: el.getAttribute("data-bs-content"), content: el.getAttribute("data-bs-content"),
}); });
} }
}); });
},[dates, TaskLists]);
// Cleanup function for popovers when component unmounts or dependencies change
return () => {
popoverRefs.current.forEach((el) => {
if (
el &&
window.bootstrap &&
typeof window.bootstrap.Popover === "function"
) {
const existingPopover = window.bootstrap.Popover.getInstance(el);
if (existingPopover) {
existingPopover.dispose();
}
}
});
popoverRefs.current = []; // Clear the refs array
};
}, [dates, TaskLists]); // Re-initialize popovers when tasks or dates change
// Handler for project selection
const handleProjectChange = (e) => { const handleProjectChange = (e) => {
const newProjectId = e.target.value; const newProjectId = e.target.value;
dispatch(setProjectId(newProjectId)); dispatch(setProjectId(newProjectId));
// --- IMPORTANT: Clear old data immediately to show loading state --- setTaskLists([]);
setTaskLists([]); // This makes the table empty, allowing the spinner to show
// Reset filters when project changes (communicate to FilterIcon to clear)
setFilters({ setFilters({
selectedBuilding: "", selectedBuilding: "",
selectedFloors: [], selectedFloors: [],
@ -192,7 +155,6 @@ const DailyTask = () => {
return ( return (
<> <>
{/* Report Task Modal */}
<div <div
className={`modal fade ${isModalOpen ? "show d-block" : ""}`} className={`modal fade ${isModalOpen ? "show d-block" : ""}`}
tabIndex="-1" tabIndex="-1"
@ -206,10 +168,8 @@ const DailyTask = () => {
refetch={refetch} refetch={refetch}
/> />
{isModalOpen && <div className="modal-backdrop fade show"></div>}{" "} {isModalOpen && <div className="modal-backdrop fade show"></div>}{" "}
{/* Add backdrop */}
</div> </div>
{/* Report Task Comments Modal */}
<div <div
className={`modal fade ${isModalOpenComment ? "show d-block" : ""}`} className={`modal fade ${isModalOpenComment ? "show d-block" : ""}`}
tabIndex="-1" tabIndex="-1"
@ -222,7 +182,6 @@ const DailyTask = () => {
closeModal={closeCommentModal} closeModal={closeCommentModal}
/> />
{isModalOpenComment && <div className="modal-backdrop fade show"></div>}{" "} {isModalOpenComment && <div className="modal-backdrop fade show"></div>}{" "}
{/* Add backdrop */}
</div> </div>
<div className="container-xxl flex-grow-1 container-p-y"> <div className="container-xxl flex-grow-1 container-p-y">
@ -242,15 +201,12 @@ const DailyTask = () => {
DateDifference="6" DateDifference="6"
dateFormat="DD-MM-YYYY" dateFormat="DD-MM-YYYY"
/> />
{/* FilterIcon component now manages its own filter states and logic */}
<FilterIcon <FilterIcon
taskListData={TaskList} // Pass the raw TaskList to FilterIcon taskListData={TaskList}
onApplyFilters={setFilters} // Callback to receive the filtered states from FilterIcon onApplyFilters={setFilters}
currentSelectedBuilding={filters.selectedBuilding} currentSelectedBuilding={filters.selectedBuilding}
currentSelectedFloors={filters.selectedFloors} currentSelectedFloors={filters.selectedFloors}
currentSelectedActivities={filters.selectedActivities} currentSelectedActivities={filters.selectedActivities}
// You can pass the project_loading state here if you want to disable filter during project load
// isProjectLoading={project_loading}
/> />
</div> </div>
<div className="col-md-4 col-12 text-center mb-2 mb-md-0"> <div className="col-md-4 col-12 text-center mb-2 mb-md-0">
@ -261,7 +217,7 @@ const DailyTask = () => {
value={selectedProject || ""} value={selectedProject || ""}
onChange={handleProjectChange} onChange={handleProjectChange}
aria-label="Select Project" aria-label="Select Project"
disabled={project_loading} // Disable dropdown while projects are loading disabled={project_loading}
> >
{project_loading && ( {project_loading && (
<option value="" disabled> <option value="" disabled>
@ -296,7 +252,6 @@ const DailyTask = () => {
<tr> <tr>
<td colSpan={6} className="text-center"> <td colSpan={6} className="text-center">
{" "} {" "}
{/* ColSpan set to 6 based on your table headers */}
<div className="mt-10 mb-10 pt-5 pb-10"> <div className="mt-10 mb-10 pt-5 pb-10">
<div <div
className="spinner-border text-primary" className="spinner-border text-primary"
@ -309,7 +264,6 @@ const DailyTask = () => {
</td> </td>
</tr> </tr>
)} )}
{/* --- "No Reports Found" message only if not loading and no tasks --- */}
{!task_loading && {!task_loading &&
!project_loading && !project_loading &&
TaskLists.length === 0 && ( TaskLists.length === 0 && (
@ -317,20 +271,17 @@ const DailyTask = () => {
<td colSpan={6} className="text-center"> <td colSpan={6} className="text-center">
<div className="mt-10 mb-10 pt-10 pb-10"> <div className="mt-10 mb-10 pt-10 pb-10">
{" "} {" "}
{/* ColSpan set to 6 */}
<p>No Reports Found</p> <p>No Reports Found</p>
</div> </div>
</td> </td>
</tr> </tr>
)} )}
{/* --- Render tasks when not loading and tasks exist --- */}
{!task_loading && {!task_loading &&
TaskLists.length > 0 && TaskLists.length > 0 &&
dates.map((date, i) => { dates.map((date, i) => {
const tasksForDate = TaskLists.filter((task) => const tasksForDate = TaskLists.filter((task) =>
task.assignmentDate.includes(date) task.assignmentDate.includes(date)
); );
// Only render the date header if there are tasks for that date after filtering
if (tasksForDate.length === 0) return null; if (tasksForDate.length === 0) return null;
return ( return (
@ -338,14 +289,13 @@ const DailyTask = () => {
<tr className="table-row-header"> <tr className="table-row-header">
<td colSpan={6} className="text-start"> <td colSpan={6} className="text-start">
{" "} {" "}
{/* ColSpan set to 6 */}
<strong> <strong>
{moment(date).format("DD-MM-YYYY")} {moment(date).format("DD-MM-YYYY")}
</strong> </strong>
</td> </td>
</tr> </tr>
{tasksForDate.map((task, index) => { {tasksForDate.map((task, index) => {
const refIndex = `${i}-${index}`; const refIndex = index * 10 + i;
return ( return (
<React.Fragment key={refIndex}> <React.Fragment key={refIndex}>
<tr> <tr>