admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Dynamic date range for DateRange Picker in task allocation log

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/common/DateRangePicker.jsx
View File

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

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

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