Dynamic date range for DateRange Picker in task allocation log

This commit is contained in:
Vikas Nale 2025-05-04 12:50:53 +05:30
parent b07101d4aa
commit a14e5c88b4
2 changed files with 26 additions and 34 deletions

View File

@ -1,13 +1,12 @@
import React, { useEffect, useRef } from "react";
const DateRangePicker = ({ onRangeChange }) => {
const DateRangePicker = ({ onRangeChange, DateDifference = 15 }) => {
const inputRef = useRef(null);
useEffect(() => {
const today = new Date();
const fifteenDaysAgo = new Date();
fifteenDaysAgo.setDate(today.getDate() - 15);
fifteenDaysAgo.setDate(today.getDate() - DateDifference);
const fp = flatpickr(inputRef.current, {
mode: "range",
@ -20,12 +19,12 @@ const DateRangePicker = ({ onRangeChange }) => {
onRangeChange?.({ startDate, endDate });
},
});
onRangeChange?.({
// startDate: fifteenDaysAgo.toISOString().split("T")[0],
// endDate: today.toISOString().split("T")[0],
startDate: fifteenDaysAgo.toLocaleDateString('en-CA'),
endDate: today.toLocaleDateString('en-CA'),
startDate: fifteenDaysAgo.toLocaleDateString("en-CA"),
endDate: today.toLocaleDateString("en-CA"),
});
return () => {

View File

@ -27,27 +27,21 @@ const DailyTask = () => {
error: projects_Error,
} = useProjects();
const [initialized, setInitialized] = useState(false);
// Sync projectId (either from URL or pick first accessible one)
useEffect(() => {
if (!project_lodaing && projects.length > 0 && !initialized) {
if (projectId) {
dispatch(setProjectId(projectId));
} else if (!selectedProject) {
dispatch(setProjectId(projects[0].id));
dispatch(setProjectId(projects[0].id));
}
setInitialized(true);
}
}, [project_lodaing, projects, projectId, selectedProject, initialized]);
const dispatch = useDispatch(selectedProject);
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
@ -56,15 +50,17 @@ const DailyTask = () => {
loading: task_loading,
error: task_error,
refetch,
} = useTaskList( initialized ? selectedProject : null,
} = useTaskList(
initialized ? selectedProject : null,
initialized ? dateRange.startDate : null,
initialized ? dateRange.endDate : null);
initialized ? dateRange.endDate : null
);
const [TaskLists, setTaskLists] = useState([]);
useEffect(() => {
setTaskLists(TaskList);
}, [TaskList,selectedProject]);
}, [TaskList, selectedProject]);
const [selectedTask, selectTask] = useState(null);
const [comments, setComment] = useState(null);
@ -81,7 +77,7 @@ const DailyTask = () => {
selectTask(task);
openModal();
};
return (
<>
<div
@ -122,7 +118,10 @@ const DailyTask = () => {
<div className="card-body p-1 p-sm-2">
<div className="row d-flex justify-content-between">
<div className="col-6 text-start">
<DateRangePicker onRangeChange={setDateRange} />
<DateRangePicker
onRangeChange={setDateRange}
DateDifference="1"
/>
</div>
<div className="col-sm-3 col-6 text-end mb-1">
<select
@ -133,21 +132,18 @@ const DailyTask = () => {
onChange={(e) => dispatch(setProjectId(e.target.value))}
aria-label=""
>
{(project_lodaing ) && (
{project_lodaing && (
<option value="Loading..." disabled>
Loading...
</option>
)}
{(!project_lodaing && projects) &&
projects
?.filter((project) =>
LoggedUser?.projects?.map(String).includes(project.id)
)
.map((project) => (
<option value={project.id} key={project.id}>
{project.name}
</option>
))}
{!project_lodaing &&
projects &&
projects?.map((project) => (
<option value={project.id} key={project.id}>
{project.name}
</option>
))}
</select>
</div>
</div>
@ -155,7 +151,6 @@ const DailyTask = () => {
<table className="table">
<thead>
<tr>
<th>Activity</th>
<th>Planned </th>
<th>Compeleted</th>
@ -168,7 +163,7 @@ const DailyTask = () => {
{TaskLists?.length === 0 && !task_loading && (
<tr>
<td colSpan={7} className="text-center">
No Task Found
No Task Found
</td>
</tr>
)}
@ -180,13 +175,11 @@ const DailyTask = () => {
</td>
</tr>
)}
{TaskLists.map((task, index) => {
return (
<React.Fragment key={index}>
<tr>
<td className="flex-wrap">
{task.workItem.activityMaster.activityName ||
"No Activity Name"}