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";
const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities }) => {
// State for filters, now managed within FilterIcon
const [selectedBuilding, setSelectedBuilding] = useState(currentSelectedBuilding);
const [selectedFloors, setSelectedFloors] = useState(currentSelectedFloors);
const [selectedActivities, setSelectedActivities] = useState(currentSelectedActivities);
const FilterIcon = ({
taskListData,
onApplyFilters,
currentSelectedBuilding,
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(() => {
setSelectedBuilding(currentSelectedBuilding);
setSelectedFloors(currentSelectedFloors);
setSelectedActivities(currentSelectedActivities);
setSelectedBuilding(currentSelectedBuilding || "");
setSelectedFloors(currentSelectedFloors || []);
setSelectedActivities(currentSelectedActivities || []);
}, [currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities]);
// Helper to get unique values for filters based on current selections
const getUniqueFilterValues = (key) => {
const getUniqueFilterValues = (key, overrideBuilding, overrideFloors) => {
if (!taskListData) return [];
let relevantTasks = taskListData;
// Filter tasks based on selected building for floors and activities
if (selectedBuilding) {
relevantTasks = relevantTasks.filter(task =>
task?.workItem?.workArea?.floor?.building?.name === selectedBuilding
let filteredTasks = [...taskListData];
if (overrideBuilding) {
filteredTasks = filteredTasks.filter(
(task) =>
task?.workItem?.workArea?.floor?.building?.name === overrideBuilding
);
}
// Filter tasks based on selected floors for activities
if (selectedFloors.length > 0) {
relevantTasks = relevantTasks.filter(task =>
selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
if (overrideFloors?.length > 0) {
filteredTasks = filteredTasks.filter((task) =>
overrideFloors.includes(task?.workItem?.workArea?.floor?.floorName)
);
}
const values = relevantTasks.map(task => {
if (key === 'building') return task?.workItem?.workArea?.floor?.building?.name;
if (key === 'floor') return task?.workItem?.workArea?.floor?.floorName;
if (key === 'activity') return task?.workItem?.activityMaster?.activityName;
const values = filteredTasks.map((task) => {
if (key === "building") return task?.workItem?.workArea?.floor?.building?.name;
if (key === "floor") return task?.workItem?.workArea?.floor?.floorName;
if (key === "activity") return task?.workItem?.activityMaster?.activityName;
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 uniqueFloors = getUniqueFilterValues('floor');
const uniqueActivities = getUniqueFilterValues('activity');
const uniqueBuildings = getUniqueFilterValues("building");
const uniqueFloors = getUniqueFilterValues("floor", selectedBuilding);
const uniqueActivities = getUniqueFilterValues("activity", selectedBuilding, selectedFloors);
// Handle filter selection with dependency logic
const handleFilterChange = (filterType, value) => {
let newSelectedBuilding = selectedBuilding;
let newSelectedFloors = [...selectedFloors];
let newSelectedActivities = [...selectedActivities];
let updatedBuilding = selectedBuilding;
let updatedFloors = [...selectedFloors];
let updatedActivities = [...selectedActivities];
if (filterType === 'building') {
if (selectedBuilding !== value) {
newSelectedFloors = [];
newSelectedActivities = [];
if (filterType === "building") {
updatedBuilding = value;
updatedFloors = [];
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') {
newSelectedFloors = selectedFloors.includes(value) ? selectedFloors.filter(item => item !== value) : [...selectedFloors, value];
if (!newSelectedFloors.includes(value) && selectedFloors.includes(value)) {
newSelectedActivities = [];
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);
} else {
updatedActivities.push(value);
}
} else if (filterType === 'activity') {
newSelectedActivities = selectedActivities.includes(value) ? selectedActivities.filter(item => item !== value) : [...selectedActivities, value];
}
setSelectedBuilding(newSelectedBuilding);
setSelectedFloors(newSelectedFloors);
setSelectedActivities(newSelectedActivities);
setSelectedBuilding(updatedBuilding);
setSelectedFloors(updatedFloors);
setSelectedActivities(updatedActivities);
// Communicate the updated filter states back to the parent
onApplyFilters({
selectedBuilding: newSelectedBuilding,
selectedFloors: newSelectedFloors,
selectedActivities: newSelectedActivities,
selectedBuilding: updatedBuilding,
selectedFloors: updatedFloors,
selectedActivities: updatedActivities,
});
};
const clearAllFilters = () => {
setSelectedBuilding('');
setSelectedBuilding("");
setSelectedFloors([]);
setSelectedActivities([]);
// Communicate cleared filters back to the parent
onApplyFilters({
selectedBuilding: '',
selectedBuilding: "",
selectedFloors: [],
selectedActivities: [],
});
@ -98,20 +106,19 @@ const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, cur
data-bs-toggle="dropdown"
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>
<ul
className="dropdown-menu p-2"
aria-labelledby="filterDropdown"
style={{
minWidth: "360px",
fontSize: "13px",
}}
// Prevent dropdown from closing when clicking inside it
style={{ minWidth: "360px", fontSize: "13px" }}
onClick={(e) => e.stopPropagation()}
>
{/* Building Filter - Now a Dropdown */}
{/* Building */}
<li>
<div className="fw-bold text-dark mb-1">Building</div>
<div className="row">
@ -122,33 +129,26 @@ const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, cur
onChange={(e) => handleFilterChange("building", e.target.value)}
>
<option value="">Select Building</option>
{uniqueBuildings.length > 0 ? (
uniqueBuildings.map((building, idx) => (
<option key={`building-option-${idx}`} value={building}>
{building}
</option>
))
) : (
<option value="" disabled>No buildings available</option>
)}
{uniqueBuildings.map((building, idx) => (
<option key={idx} value={building}>
{building}
</option>
))}
</select>
</div>
</div>
</li>
{/* Floor Filter - Visible only if a building is selected */}
{/* Floor */}
{selectedBuilding && (
<>
<li><hr className="my-1" /></li>
<li>
<hr className="my-1" />
</li>
<li>
<div className="fw-bold text-dark mb-1">Floor</div>
<div className="fw-bold text-dark mb-1">Floors</div>
<div className="row">
{uniqueFloors.length > 0 ? (
uniqueFloors.map((floor, idx) => (
<div className="col-6" key={`floor-${idx}`}>
<div className="col-6" key={idx}>
<div className="form-check mb-1">
<input
className="form-check-input"
@ -157,36 +157,30 @@ const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, cur
checked={selectedFloors.includes(floor)}
onChange={() => handleFilterChange("floor", floor)}
/>
<label
className="form-check-label"
htmlFor={`floor-${floor}`}
>
<label className="form-check-label" htmlFor={`floor-${floor}`}>
{floor}
</label>
</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>
</li>
</>
)}
{/* Activity Filter - Visible only if a floor is selected */}
{/* Activity */}
{selectedFloors.length > 0 && (
<>
<li><hr className="my-1" /></li>
<li>
<hr className="my-1" />
</li>
<li>
<div className="fw-bold text-dark mb-1">Activity</div>
<div className="fw-bold text-dark mb-1">Activities</div>
<div className="row">
{uniqueActivities.length > 0 ? (
uniqueActivities.map((activity, idx) => (
<div className="col-6" key={`activity-${idx}`}>
<div className="col-6" key={idx}>
<div className="form-check mb-1">
<input
className="form-check-input"
@ -195,43 +189,60 @@ const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, cur
checked={selectedActivities.includes(activity)}
onChange={() => handleFilterChange("activity", activity)}
/>
<label
className="form-check-label"
htmlFor={`activity-${activity}`}
>
<label className="form-check-label" htmlFor={`activity-${activity}`}>
{activity}
</label>
</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>
</li>
</>
)}
{/* Clear Filters */}
{(selectedBuilding ||
selectedFloors.length > 0 ||
selectedActivities.length > 0) && (
<>
<li>
<hr className="my-1" />
</li>
<li>
<button
type="button"
className="dropdown-item text-danger px-2 py-1"
style={{ fontSize: "13px" }}
onClick={clearAllFilters}
>
Clear All Filters
</button>
</li>
</>
)}
{/* Action Buttons */}
<li><hr className="my-1" /></li>
{(selectedBuilding || selectedFloors.length > 0 || selectedActivities.length > 0) && (
<li className="d-flex justify-content-end gap-2 px-2">
<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={clearAllFilters}
>
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>
</div>
);

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

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