From 25127659c8159d55d81f6e98a2f490e6b5069e6e Mon Sep 17 00:00:00 2001 From: "ashutosh.nehete" Date: Tue, 6 May 2025 18:28:56 +0530 Subject: [PATCH 1/2] Added fuctionality to Displayed Date-Wise Based on Selected Date Range --- src/index.css | 8 + src/pages/Activities/DailyTask.jsx | 281 ++++++++++++++++++----------- 2 files changed, 181 insertions(+), 108 deletions(-) diff --git a/src/index.css b/src/index.css index 96f19f7b..21f8a532 100644 --- a/src/index.css +++ b/src/index.css @@ -130,3 +130,11 @@ button:focus-visible { .spin { animation: spin 1s linear infinite; } +.popover-body { + padding: 0 !important; +} +.custom-popover{ + max-height: 100px; + overflow: auto; + +} \ No newline at end of file diff --git a/src/pages/Activities/DailyTask.jsx b/src/pages/Activities/DailyTask.jsx index e220a6d0..9345ef4b 100644 --- a/src/pages/Activities/DailyTask.jsx +++ b/src/pages/Activities/DailyTask.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useRef } from "react"; import { useDispatch, useSelector } from "react-redux"; import Breadcrumb from "../../components/common/Breadcrumb"; import { dailyTask } from "../../data/masters"; @@ -38,6 +38,7 @@ const DailyTask = () => { setInitialized(true); } + }, [project_lodaing, projects, projectId, selectedProject, initialized]); const dispatch = useDispatch(selectedProject); @@ -55,11 +56,22 @@ const DailyTask = () => { ); const [TaskLists, setTaskLists] = useState([]); + const [dates, setDates] = useState([]); + const popoverRefs = useRef([]); useEffect(() => { setTaskLists(TaskList); }, [TaskList, selectedProject]); + useEffect(() => { + const AssignmentDates = [ + ...new Set(TaskLists.map((task) => task.assignmentDate.split("T")[0])), + ].sort((a, b) => new Date(b) - new Date(a)); + setDates(AssignmentDates); + + + }, [TaskLists]); + const [selectedTask, selectTask] = useState(null); const [comments, setComment] = useState(null); @@ -75,6 +87,21 @@ const DailyTask = () => { selectTask(task); openModal(); }; + + useEffect(() => { + popoverRefs.current.forEach((el) => { + console.log(el) + if (el) { + new bootstrap.Popover(el, { + trigger: "focus", + placement: "left", + html: true, + content: el.getAttribute("data-bs-content"), // use inline content from attribute + }); + } + }); + }, [dates]); + return ( <>
{ )} - {project_lodaing && - - Loading... - - } - {TaskLists?.length === 0 && !task_loading && !project_lodaing &&( - - - No Task Found - - - )} - - {TaskLists.map((task, index) => { + {dates.map((date, i) => { return ( - + - -
- {task.workItem.activityMaster.activityName || - "No Activity Name"} -
-
- {" "} - -
- - - {task.plannedTask || "NA"} / - {task.workItem.plannedWork - - task.workItem.completedWork} - - {task.completedTask} - {formatDate(task.assignmentDate)} - -
- {task.teamMembers.slice(0, 3).map((member) => ( -
- {/* Avatar */} - - {member?.firstName.slice(0, 1)} - -
- ))} - {task.teamMembers.length > 3 && ( -
- - +{task.teamMembers.length - 3} - -
- )} -
- - -
- - -
+ + {date} + {TaskLists.filter((task) => + task.assignmentDate.includes(date) + ).map((task, index) => { + const refIndex = index * 10 + i; + console.log(refIndex) + return ( + + + +
+ {task.workItem.activityMaster + .activityName || "No Activity Name"} +
+
+ {" "} + +
+ + + {task.plannedTask || "NA"} / + {task.workItem.plannedWork - + task.workItem.completedWork} + + {task.completedTask} + {formatDate(task.assignmentDate)} + +
+ (popoverRefs.current[refIndex] = el) + } + tabIndex="0" + className="d-flex align-items-center avatar-group justify-content-center" + data-bs-toggle="popover" + data-bs-trigger="focus" + data-bs-placement="left" + data-bs-html="true" + data-bs-content={` +
+ ${task.teamMembers + .map( + (member) => ` +
+
+ + ${member?.firstName?.charAt(0) || ""}${member?.lastName?.charAt(0) || ""} + +
+ ${member.firstName} ${member.lastName} +
+ ` + ) + .join('')} +
+ `} + > + {task.teamMembers + .slice(0, 3) + .map((member) => ( +
+ {/* Avatar */} + + {member?.firstName.slice(0, 1)} + +
+ ))} + {task.teamMembers.length > 3 && ( +
+ + +{task.teamMembers.length - 3} + +
+ )} +
+ + +
+ + +
+ + + + ); + })} ); })} From a60cd6b1a9fdcc6025dd66d5b88fd95e04b12b4f Mon Sep 17 00:00:00 2001 From: Vikas Nale Date: Wed, 7 May 2025 12:02:30 +0530 Subject: [PATCH 2/2] Added row background color and also changed message on report submit --- public/assets/css/default.css | 4 ++++ src/components/Activities/ReportTask.jsx | 2 +- src/pages/Activities/DailyTask.jsx | 30 ++++++++++++++---------- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/public/assets/css/default.css b/public/assets/css/default.css index 936c150b..42852b61 100644 --- a/public/assets/css/default.css +++ b/public/assets/css/default.css @@ -175,3 +175,7 @@ .text-darkgreen { color: #16a085; } + +.table-row-header { + background-color: #efefef; +} diff --git a/src/components/Activities/ReportTask.jsx b/src/components/Activities/ReportTask.jsx index 1d02b432..286d3df4 100644 --- a/src/components/Activities/ReportTask.jsx +++ b/src/components/Activities/ReportTask.jsx @@ -43,7 +43,7 @@ export const ReportTask = ({ report, closeModal, refetch }) => { }; let response = await TasksRepository.reportTask(reportData); - showToast("succesfully", "success"); + showToast("Task reported successfully.", "success"); refetch(); closeModal(); } catch (error) { diff --git a/src/pages/Activities/DailyTask.jsx b/src/pages/Activities/DailyTask.jsx index 9345ef4b..6455453d 100644 --- a/src/pages/Activities/DailyTask.jsx +++ b/src/pages/Activities/DailyTask.jsx @@ -32,13 +32,12 @@ const DailyTask = () => { // Sync projectId (either from URL or pick first accessible one) useEffect(() => { if (!project_lodaing && projects.length > 0 && !initialized) { - if (selectedProject === 1 || selectedProject === undefined) { + if (selectedProject === 1 || selectedProject === undefined) { dispatch(setProjectId(projects[0].id)); } setInitialized(true); } - }, [project_lodaing, projects, projectId, selectedProject, initialized]); const dispatch = useDispatch(selectedProject); @@ -68,8 +67,6 @@ const DailyTask = () => { ...new Set(TaskLists.map((task) => task.assignmentDate.split("T")[0])), ].sort((a, b) => new Date(b) - new Date(a)); setDates(AssignmentDates); - - }, [TaskLists]); const [selectedTask, selectTask] = useState(null); @@ -90,7 +87,7 @@ const DailyTask = () => { useEffect(() => { popoverRefs.current.forEach((el) => { - console.log(el) + console.log(el); if (el) { new bootstrap.Popover(el, { trigger: "focus", @@ -144,7 +141,7 @@ const DailyTask = () => {
@@ -184,8 +181,7 @@ const DailyTask = () => { - - {task_loading && ( + {task_loading && (

Loading..

@@ -195,7 +191,7 @@ const DailyTask = () => { {dates.map((date, i) => { return ( - + {date} @@ -204,7 +200,7 @@ const DailyTask = () => { task.assignmentDate.includes(date) ).map((task, index) => { const refIndex = index * 10 + i; - console.log(refIndex) + console.log(refIndex); return ( @@ -266,14 +262,22 @@ const DailyTask = () => {
- ${member?.firstName?.charAt(0) || ""}${member?.lastName?.charAt(0) || ""} + ${ + member?.firstName?.charAt( + 0 + ) || "" + }${ + member?.lastName?.charAt(0) || "" + }
- ${member.firstName} ${member.lastName} + ${member.firstName} ${ + member.lastName + }
` ) - .join('')} + .join("")}
`} >