From 19f58345d9c2f92547e14119a88f38c1a58549a4 Mon Sep 17 00:00:00 2001 From: Vikas Nale Date: Mon, 9 Jun 2025 17:24:31 +0530 Subject: [PATCH] add cosmati changes --- src/pages/Activities/DailyTask.jsx | 392 +++++++++++++++++------------ 1 file changed, 229 insertions(+), 163 deletions(-) diff --git a/src/pages/Activities/DailyTask.jsx b/src/pages/Activities/DailyTask.jsx index 55947684..41e7ff9e 100644 --- a/src/pages/Activities/DailyTask.jsx +++ b/src/pages/Activities/DailyTask.jsx @@ -14,7 +14,9 @@ import FilterIcon from "../../components/common/FilterIcon"; // Import the Filte const DailyTask = () => { const [searchParams] = useSearchParams(); const projectIdFromUrl = searchParams.get("project"); - const selectedProject = useSelector((store) => store.localVariables.projectId); + const selectedProject = useSelector( + (store) => store.localVariables.projectId + ); const { projects, loading: project_loading, @@ -26,7 +28,7 @@ const DailyTask = () => { // State for filters (moved to FilterIcon, but we need to receive them here) const [filters, setFilters] = useState({ - selectedBuilding: '', + selectedBuilding: "", selectedFloors: [], selectedActivities: [], }); @@ -42,7 +44,14 @@ const DailyTask = () => { } setInitialized(true); } - }, [project_loading, projects, projectIdFromUrl, selectedProject, initialized, dispatch]); + }, [ + project_loading, + projects, + projectIdFromUrl, + selectedProject, + initialized, + dispatch, + ]); const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" }); @@ -68,29 +77,40 @@ const DailyTask = () => { let filteredTasks = TaskList; if (filters.selectedBuilding) { - filteredTasks = filteredTasks.filter(task => - task?.workItem?.workArea?.floor?.building?.name === filters.selectedBuilding + filteredTasks = filteredTasks.filter( + (task) => + task?.workItem?.workArea?.floor?.building?.name === + filters.selectedBuilding ); } if (filters.selectedFloors.length > 0) { - filteredTasks = filteredTasks.filter(task => - filters.selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName) + filteredTasks = filteredTasks.filter((task) => + filters.selectedFloors.includes( + task?.workItem?.workArea?.floor?.floorName + ) ); } if (filters.selectedActivities.length > 0) { - filteredTasks = filteredTasks.filter(task => - filters.selectedActivities.includes(task?.workItem?.activityMaster?.activityName) + filteredTasks = filteredTasks.filter((task) => + filters.selectedActivities.includes( + task?.workItem?.activityMaster?.activityName + ) ); } 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([]); + // 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([]); } - }, [TaskList, filters.selectedBuilding, filters.selectedFloors, filters.selectedActivities]); + }, [ + TaskList, + filters.selectedBuilding, + filters.selectedFloors, + filters.selectedActivities, + ]); useEffect(() => { const AssignmentDates = [ @@ -119,7 +139,11 @@ const DailyTask = () => { useEffect(() => { // Ensure Bootstrap's Popover is initialized correctly popoverRefs.current.forEach((el) => { - if (el && window.bootstrap && typeof window.bootstrap.Popover === 'function') { + 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) { @@ -137,7 +161,11 @@ const DailyTask = () => { // Cleanup function for popovers when component unmounts or dependencies change return () => { popoverRefs.current.forEach((el) => { - if (el && window.bootstrap && typeof window.bootstrap.Popover === 'function') { + if ( + el && + window.bootstrap && + typeof window.bootstrap.Popover === "function" + ) { const existingPopover = window.bootstrap.Popover.getInstance(el); if (existingPopover) { existingPopover.dispose(); @@ -155,14 +183,18 @@ const DailyTask = () => { // --- 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) - setFilters({ selectedBuilding: '', selectedFloors: [], selectedActivities: [] }); + setFilters({ + selectedBuilding: "", + selectedFloors: [], + selectedActivities: [], + }); }; return ( <> {/* Report Task Modal */}
{ closeModal={closeModal} refetch={refetch} /> - {isModalOpen &&
} {/* Add backdrop */} + {isModalOpen &&
}{" "} + {/* Add backdrop */}
{/* Report Task Comments Modal */} @@ -188,7 +221,8 @@ const DailyTask = () => { commentsData={comments} closeModal={closeCommentModal} /> - {isModalOpenComment &&
} {/* Add backdrop */} + {isModalOpenComment &&
}{" "} + {/* Add backdrop */}
@@ -198,7 +232,7 @@ const DailyTask = () => { { label: "Daily Progress Report", link: null }, ]} > -
+
@@ -258,94 +292,117 @@ const DailyTask = () => { {/* --- Spinner when tasks are loading --- */} - {task_loading && ( + {(task_loading || project_loading) && ( - {/* ColSpan set to 6 based on your table headers */} -
- Loading... + + {" "} + {/* ColSpan set to 6 based on your table headers */} +
+
+ Loading... +
+

Loading Tasks...

-

Loading Tasks...

)} {/* --- "No Reports Found" message only if not loading and no tasks --- */} - {!task_loading && TaskLists.length === 0 && ( - - {/* ColSpan set to 6 */} -

No Reports Found

- - - )} + {!task_loading && + !project_loading && + TaskLists.length === 0 && ( + + +
+ {" "} + {/* ColSpan set to 6 */} +

No Reports Found

+
+ + + )} {/* --- 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; + {!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 ( - - - {/* ColSpan set to 6 */} - {moment(date).format("DD-MM-YYYY")} - - - {tasksForDate.map((task, index) => { - const refIndex = `${i}-${index}`; - return ( - - - -
- {task.workItem.activityMaster - .activityName || "No Activity Name"} -
-
-
+ + + + ); + })} + + ); + })}