expand sub tasks
This commit is contained in:
chamiakJ
@@ -1,110 +1,111 @@
|
||||
import { useSocket } from "@/socket/socketContext";
|
||||
import { IProjectTask } from "@/types/project/projectTasksViewModel.types";
|
||||
import { DatePicker } from "antd";
|
||||
import { useSocket } from '@/socket/socketContext';
|
||||
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
|
||||
import { DatePicker } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import calendar from 'dayjs/plugin/calendar';
|
||||
import { SocketEvents } from '@/shared/socket-events';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useEffect, useState, useMemo } from "react";
|
||||
import { useAppSelector } from "@/hooks/useAppSelector";
|
||||
import { useGetMyTasksQuery } from "@/api/home-page/home-page.api.service";
|
||||
import { getUserSession } from "@/utils/session-helper";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { useGetMyTasksQuery } from '@/api/home-page/home-page.api.service';
|
||||
import { getUserSession } from '@/utils/session-helper';
|
||||
|
||||
// Extend dayjs with the calendar plugin
|
||||
dayjs.extend(calendar);
|
||||
|
||||
type HomeTasksDatePickerProps = {
|
||||
record: IProjectTask;
|
||||
record: IProjectTask;
|
||||
};
|
||||
|
||||
const HomeTasksDatePicker = ({ record }: HomeTasksDatePickerProps) => {
|
||||
const { socket, connected } = useSocket();
|
||||
const { t } = useTranslation('home');
|
||||
const { homeTasksConfig } = useAppSelector(state => state.homePageReducer);
|
||||
const { refetch } = useGetMyTasksQuery(homeTasksConfig, {
|
||||
skip: false
|
||||
const { socket, connected } = useSocket();
|
||||
const { t } = useTranslation('home');
|
||||
const { homeTasksConfig } = useAppSelector(state => state.homePageReducer);
|
||||
const { refetch } = useGetMyTasksQuery(homeTasksConfig, {
|
||||
skip: false,
|
||||
});
|
||||
|
||||
// Use useMemo to avoid re-renders when record.end_date is the same
|
||||
const initialDate = useMemo(
|
||||
() => (record.end_date ? dayjs(record.end_date) : null),
|
||||
[record.end_date]
|
||||
);
|
||||
|
||||
const [selectedDate, setSelectedDate] = useState<Dayjs | null>(initialDate);
|
||||
|
||||
// Update selected date when record changes
|
||||
useEffect(() => {
|
||||
setSelectedDate(initialDate);
|
||||
}, [initialDate]);
|
||||
|
||||
const handleChangeReceived = (value: any) => {
|
||||
refetch();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
socket?.on(SocketEvents.TASK_END_DATE_CHANGE.toString(), handleChangeReceived);
|
||||
socket?.on(SocketEvents.TASK_STATUS_CHANGE.toString(), handleChangeReceived);
|
||||
return () => {
|
||||
socket?.removeListener(SocketEvents.TASK_END_DATE_CHANGE.toString(), handleChangeReceived);
|
||||
socket?.removeListener(SocketEvents.TASK_STATUS_CHANGE.toString(), handleChangeReceived);
|
||||
};
|
||||
}, [connected]);
|
||||
|
||||
const handleEndDateChanged = (value: Dayjs | null, task: IProjectTask) => {
|
||||
setSelectedDate(value);
|
||||
if (!task.id) return;
|
||||
|
||||
const body = {
|
||||
task_id: task.id,
|
||||
end_date: value?.format('YYYY-MM-DD'),
|
||||
parent_task: task.parent_task_id,
|
||||
time_zone: getUserSession()?.timezone_name
|
||||
? getUserSession()?.timezone_name
|
||||
: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
};
|
||||
socket?.emit(SocketEvents.TASK_END_DATE_CHANGE.toString(), JSON.stringify(body));
|
||||
};
|
||||
|
||||
// Function to dynamically format the date based on the calendar rules
|
||||
const getFormattedDate = (date: Dayjs | null) => {
|
||||
if (!date) return '';
|
||||
|
||||
return date.calendar(null, {
|
||||
sameDay: '[Today]',
|
||||
nextDay: '[Tomorrow]',
|
||||
nextWeek: 'MMM DD',
|
||||
lastDay: '[Yesterday]',
|
||||
lastWeek: 'MMM DD',
|
||||
sameElse: date.year() === dayjs().year() ? 'MMM DD' : 'MMM DD, YYYY',
|
||||
});
|
||||
};
|
||||
|
||||
// Use useMemo to avoid re-renders when record.end_date is the same
|
||||
const initialDate = useMemo(() =>
|
||||
record.end_date ? dayjs(record.end_date) : null
|
||||
, [record.end_date]);
|
||||
|
||||
const [selectedDate, setSelectedDate] = useState<Dayjs | null>(initialDate);
|
||||
|
||||
// Update selected date when record changes
|
||||
useEffect(() => {
|
||||
setSelectedDate(initialDate);
|
||||
}, [initialDate]);
|
||||
|
||||
const handleChangeReceived = (value: any) => {
|
||||
refetch();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
socket?.on(SocketEvents.TASK_END_DATE_CHANGE.toString(), handleChangeReceived);
|
||||
socket?.on(SocketEvents.TASK_STATUS_CHANGE.toString(), handleChangeReceived);
|
||||
return () => {
|
||||
socket?.removeListener(SocketEvents.TASK_END_DATE_CHANGE.toString(), handleChangeReceived);
|
||||
socket?.removeListener(SocketEvents.TASK_STATUS_CHANGE.toString(), handleChangeReceived);
|
||||
};
|
||||
}, [connected]);
|
||||
|
||||
const handleEndDateChanged = (value: Dayjs | null, task: IProjectTask) => {
|
||||
setSelectedDate(value);
|
||||
if (!task.id) return;
|
||||
|
||||
const body = {
|
||||
task_id: task.id,
|
||||
end_date: value?.format('YYYY-MM-DD'),
|
||||
parent_task: task.parent_task_id,
|
||||
time_zone: getUserSession()?.timezone_name
|
||||
? getUserSession()?.timezone_name
|
||||
: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
};
|
||||
socket?.emit(SocketEvents.TASK_END_DATE_CHANGE.toString(), JSON.stringify(body));
|
||||
};
|
||||
|
||||
// Function to dynamically format the date based on the calendar rules
|
||||
const getFormattedDate = (date: Dayjs | null) => {
|
||||
if (!date) return '';
|
||||
|
||||
return date.calendar(null, {
|
||||
sameDay: '[Today]',
|
||||
nextDay: '[Tomorrow]',
|
||||
nextWeek: 'MMM DD',
|
||||
lastDay: '[Yesterday]',
|
||||
lastWeek: 'MMM DD',
|
||||
sameElse: date.year() === dayjs().year() ? 'MMM DD' : 'MMM DD, YYYY',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<DatePicker
|
||||
allowClear
|
||||
disabledDate={
|
||||
record.start_date ? current => current.isBefore(dayjs(record.start_date)) : undefined
|
||||
}
|
||||
placeholder={t('tasks.dueDatePlaceholder')}
|
||||
value={selectedDate}
|
||||
onChange={value => handleEndDateChanged(value || null, record || null)}
|
||||
format={(value) => getFormattedDate(value)} // Dynamically format the displayed value
|
||||
style={{
|
||||
color: selectedDate
|
||||
? selectedDate.isSame(dayjs(), 'day') || selectedDate.isSame(dayjs().add(1, 'day'), 'day')
|
||||
? '#52c41a'
|
||||
: selectedDate.isAfter(dayjs().add(1, 'day'), 'day')
|
||||
? undefined
|
||||
: '#ff4d4f'
|
||||
: undefined,
|
||||
width: '125px', // Ensure the input takes full width
|
||||
}}
|
||||
inputReadOnly // Prevent manual input to avoid overflow issues
|
||||
variant={'borderless'} // Make the DatePicker borderless
|
||||
suffixIcon={null}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<DatePicker
|
||||
allowClear
|
||||
disabledDate={
|
||||
record.start_date ? current => current.isBefore(dayjs(record.start_date)) : undefined
|
||||
}
|
||||
placeholder={t('tasks.dueDatePlaceholder')}
|
||||
value={selectedDate}
|
||||
onChange={value => handleEndDateChanged(value || null, record || null)}
|
||||
format={value => getFormattedDate(value)} // Dynamically format the displayed value
|
||||
style={{
|
||||
color: selectedDate
|
||||
? selectedDate.isSame(dayjs(), 'day') || selectedDate.isSame(dayjs().add(1, 'day'), 'day')
|
||||
? '#52c41a'
|
||||
: selectedDate.isAfter(dayjs().add(1, 'day'), 'day')
|
||||
? undefined
|
||||
: '#ff4d4f'
|
||||
: undefined,
|
||||
width: '125px', // Ensure the input takes full width
|
||||
}}
|
||||
inputReadOnly // Prevent manual input to avoid overflow issues
|
||||
variant={'borderless'} // Make the DatePicker borderless
|
||||
suffixIcon={null}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeTasksDatePicker;
|
||||
export default HomeTasksDatePicker;
|
||||
|
||||
Reference in New Issue
Block a user