init
This commit is contained in:
chamikaJ
@@ -0,0 +1,57 @@
|
||||
import { Button, Col, DatePicker, Flex, Input, Row } from 'antd';
|
||||
import React from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { toggleModal } from './scheduleSlice';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const ProjectTimelineModal = () => {
|
||||
const dispatch = useDispatch();
|
||||
const { t } = useTranslation('schedule');
|
||||
|
||||
const handleSave = () => {
|
||||
dispatch(toggleModal());
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex vertical gap={10} style={{ width: '480px' }}>
|
||||
<Row>
|
||||
<Col span={12} style={{ display: 'flex', flexDirection: 'column', paddingRight: '20px' }}>
|
||||
<span>{t('startDate')}</span>
|
||||
<DatePicker />
|
||||
</Col>
|
||||
<Col span={12} style={{ display: 'flex', flexDirection: 'column', paddingLeft: '20px' }}>
|
||||
<span>{t('endDate')}</span>
|
||||
<DatePicker />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={12} style={{ paddingRight: '20px' }}>
|
||||
<span>{t('hoursPerDay')}</span>
|
||||
<Input max={24} defaultValue={8} type="number" suffix="hours" />
|
||||
</Col>
|
||||
|
||||
<Col span={12} style={{ paddingLeft: '20px' }}>
|
||||
<span>{t('totalHours')}</span>
|
||||
<Input max={24} defaultValue={8} type="number" suffix="hours" />
|
||||
</Col>
|
||||
</Row>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Button type="link">{t('deleteButton')}</Button>
|
||||
<div style={{ display: 'flex', gap: '5px' }}>
|
||||
<Button onClick={() => dispatch(toggleModal())}>{t('cancelButton')}</Button>
|
||||
<Button type="primary" onClick={handleSave}>
|
||||
{t('saveButton')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectTimelineModal;
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Avatar, Drawer, Tabs, TabsProps } from 'antd';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { toggleScheduleDrawer } from './scheduleSlice';
|
||||
import { AvatarNamesMap } from '../../shared/constants';
|
||||
import WithStartAndEndDates from '../../components/schedule-old/tabs/withStartAndEndDates/WithStartAndEndDates';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const ScheduleDrawer = () => {
|
||||
const isScheduleDrawerOpen = useAppSelector(state => state.scheduleReducer.isScheduleDrawerOpen);
|
||||
const dispatch = useAppDispatch();
|
||||
const { t } = useTranslation('schedule');
|
||||
|
||||
const items: TabsProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: '2024-11-04 - 2024-12-24',
|
||||
children: <WithStartAndEndDates />,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: t('tabTitle'),
|
||||
children: 'Content of Tab Pane 2',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
width={1000}
|
||||
title={
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<Avatar style={{ backgroundColor: AvatarNamesMap['R'] }}>R</Avatar>
|
||||
<span>Raveesha Dilanka</span>
|
||||
</div>
|
||||
}
|
||||
onClose={() => dispatch(toggleScheduleDrawer())}
|
||||
open={isScheduleDrawerOpen}
|
||||
>
|
||||
<Tabs defaultActiveKey="1" type="card" items={items} />
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScheduleDrawer;
|
||||
@@ -0,0 +1,94 @@
|
||||
import { Button, Checkbox, Col, Drawer, Form, Input, Row } from 'antd';
|
||||
import React, { ReactHTMLElement, useState } from 'react';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { toggleSettingsDrawer, updateSettings } from './scheduleSlice';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const ScheduleSettingsDrawer: React.FC = () => {
|
||||
const isDrawerOpen = useAppSelector(state => state.scheduleReducer.isSettingsDrawerOpen);
|
||||
const dispatch = useDispatch();
|
||||
const { t } = useTranslation('schedule');
|
||||
|
||||
const [workingDays, setWorkingDays] = useState([
|
||||
'Monday',
|
||||
'Tuesday',
|
||||
'Wednesday',
|
||||
'Thursday',
|
||||
'Friday',
|
||||
]);
|
||||
const [workingHours, setWorkingHours] = useState(8);
|
||||
|
||||
const onChangeWorkingDays = (checkedValues: string[]) => {
|
||||
setWorkingDays(checkedValues);
|
||||
};
|
||||
|
||||
const onChangeWorkingHours = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setWorkingHours(Number(e.target.value));
|
||||
};
|
||||
|
||||
const onSave = () => {
|
||||
dispatch(updateSettings({ workingDays, workingHours }));
|
||||
dispatch(toggleSettingsDrawer());
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Drawer
|
||||
title={t('settings')}
|
||||
open={isDrawerOpen}
|
||||
onClose={() => {
|
||||
dispatch(toggleSettingsDrawer());
|
||||
}}
|
||||
>
|
||||
<Form layout="vertical">
|
||||
<Form.Item label={t('workingDays')}>
|
||||
<Checkbox.Group defaultValue={workingDays} onChange={onChangeWorkingDays}>
|
||||
<Row>
|
||||
<Col span={8} style={{ paddingBottom: '8px' }}>
|
||||
<Checkbox value="Monday">{t('monday')}</Checkbox>
|
||||
</Col>
|
||||
<Col span={8} style={{ paddingBottom: '8px' }}>
|
||||
<Checkbox value="Tuesday">{t('tuesday')}</Checkbox>
|
||||
</Col>
|
||||
<Col span={8} style={{ paddingBottom: '8px' }}>
|
||||
<Checkbox value="Wednesday">{t('wednesday')}</Checkbox>
|
||||
</Col>
|
||||
<Col span={8} style={{ paddingBottom: '8px' }}>
|
||||
<Checkbox value="Thursday">{t('thursday')}</Checkbox>
|
||||
</Col>
|
||||
<Col span={8} style={{ paddingBottom: '8px' }}>
|
||||
<Checkbox value="Friday">{t('friday')}</Checkbox>
|
||||
</Col>
|
||||
<Col span={8} style={{ paddingBottom: '8px' }}>
|
||||
<Checkbox value="Saturday">{t('saturday')}</Checkbox>
|
||||
</Col>
|
||||
<Col span={8} style={{ paddingBottom: '8px' }}>
|
||||
<Checkbox value="Sunday">{t('sunday')}</Checkbox>
|
||||
</Col>
|
||||
</Row>
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label={t('workingHours')}>
|
||||
<Input
|
||||
max={24}
|
||||
defaultValue={workingHours}
|
||||
type="number"
|
||||
suffix={<span style={{ color: 'rgba(0, 0, 0, 0.46)' }}>{t('hours')}</span>}
|
||||
onChange={onChangeWorkingHours}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" style={{ width: '100%' }} onClick={onSave}>
|
||||
{t('saveButton')}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScheduleSettingsDrawer;
|
||||
45
worklenz-frontend/src/features/schedule-old/scheduleSlice.ts
Normal file
45
worklenz-frontend/src/features/schedule-old/scheduleSlice.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
|
||||
interface scheduleState {
|
||||
isSettingsDrawerOpen: boolean;
|
||||
isModalOpen: boolean;
|
||||
isScheduleDrawerOpen: boolean;
|
||||
workingDays: string[];
|
||||
workingHours: number;
|
||||
}
|
||||
|
||||
const initialState: scheduleState = {
|
||||
isSettingsDrawerOpen: false,
|
||||
isModalOpen: false,
|
||||
isScheduleDrawerOpen: false,
|
||||
workingDays: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
|
||||
workingHours: 8,
|
||||
};
|
||||
|
||||
const scheduleSlice = createSlice({
|
||||
name: 'scheduleReducer',
|
||||
initialState,
|
||||
reducers: {
|
||||
toggleSettingsDrawer: state => {
|
||||
state.isSettingsDrawerOpen
|
||||
? (state.isSettingsDrawerOpen = false)
|
||||
: (state.isSettingsDrawerOpen = true);
|
||||
},
|
||||
updateSettings(state, action) {
|
||||
state.workingDays = action.payload.workingDays;
|
||||
state.workingHours = action.payload.workingHours;
|
||||
},
|
||||
toggleModal(state) {
|
||||
state.isModalOpen ? (state.isModalOpen = false) : (state.isModalOpen = true);
|
||||
},
|
||||
toggleScheduleDrawer: state => {
|
||||
state.isScheduleDrawerOpen
|
||||
? (state.isScheduleDrawerOpen = false)
|
||||
: (state.isScheduleDrawerOpen = true);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { toggleSettingsDrawer, updateSettings, toggleModal, toggleScheduleDrawer } =
|
||||
scheduleSlice.actions;
|
||||
export default scheduleSlice.reducer;
|
||||
Reference in New Issue
Block a user