90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
import { Button, DatePicker, DatePickerProps, Select, Space } from 'antd';
|
|
import React, { Suspense, useState } from 'react';
|
|
import Team from '../../components/schedule-old/team/Team';
|
|
import { SettingOutlined } from '@ant-design/icons';
|
|
import { useDispatch } from 'react-redux';
|
|
import { toggleSettingsDrawer } from '@/features/schedule-old/scheduleSlice';
|
|
import ScheduleSettingsDrawer from '@/features/schedule-old/ScheduleSettingsDrawer';
|
|
import dayjs from 'dayjs';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useDocumentTitle } from '@/hooks/useDoumentTItle';
|
|
import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
|
|
|
|
const { Option } = Select;
|
|
|
|
type PickerType = 'week' | 'month';
|
|
|
|
const PickerWithType = ({
|
|
type,
|
|
onChange,
|
|
}: {
|
|
type: PickerType;
|
|
onChange: DatePickerProps['onChange'];
|
|
}) => {
|
|
return <DatePicker picker={type} onChange={onChange} />;
|
|
};
|
|
|
|
const Schedule: React.FC = () => {
|
|
const [type, setType] = useState<PickerType>('week');
|
|
const [date, setDate] = useState<Date | null>(null);
|
|
const { t } = useTranslation('schedule');
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
useDocumentTitle('Schedule');
|
|
|
|
const handleDateChange = (value: dayjs.Dayjs | null) => {
|
|
if (!value) return;
|
|
let selectedDate = value.toDate();
|
|
|
|
// If 'Month' is selected, default to the first day of the selected month
|
|
if (type === 'month') {
|
|
selectedDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
|
|
}
|
|
|
|
setDate(selectedDate);
|
|
};
|
|
|
|
const handleToday = () => {
|
|
const today = new Date();
|
|
setDate(today);
|
|
};
|
|
|
|
return (
|
|
<Suspense fallback={<SuspenseFallback />}>
|
|
<div style={{ marginBlock: 65, minHeight: '90vh' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '16px',
|
|
paddingTop: '25px',
|
|
paddingBottom: '20px',
|
|
}}
|
|
>
|
|
<Button onClick={handleToday}>{t('today')}</Button>
|
|
<Space>
|
|
<Select value={type} onChange={value => setType(value as PickerType)}>
|
|
<Option value="week">{t('week')}</Option>
|
|
<Option value="month">{t('month')}</Option>
|
|
</Select>
|
|
<PickerWithType type={type} onChange={handleDateChange} />
|
|
</Space>
|
|
</div>
|
|
<Button size="small" shape="circle" onClick={() => dispatch(toggleSettingsDrawer())}>
|
|
<SettingOutlined />
|
|
</Button>
|
|
</div>
|
|
|
|
<div>
|
|
<Team date={date} />
|
|
</div>
|
|
<ScheduleSettingsDrawer />
|
|
</div>
|
|
</Suspense>
|
|
);
|
|
};
|
|
|
|
export default Schedule;
|