Dynamic date range for DateRange Picker in task allocation log
This commit is contained in:
parent
b07101d4aa
commit
a14e5c88b4
@ -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 () => {
|
||||
|
@ -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"}
|
||||
|
Loading…
x
Reference in New Issue
Block a user