init
This commit is contained in:
chamikaJ
137
worklenz-frontend/src/features/schedule/ProjectTimelineModal.tsx
Normal file
137
worklenz-frontend/src/features/schedule/ProjectTimelineModal.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { ScheduleData } from '@/types/schedule/schedule-v2.types';
|
||||
import { Button, Col, DatePicker, Flex, Form, Input, Row } from 'antd';
|
||||
import React, { useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { createSchedule, fetchTeamData } from './scheduleSlice';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { getDayName } from '@/utils/schedule';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const ProjectTimelineModal = ({ setIsModalOpen, defaultData, projectId, memberId }: { setIsModalOpen: (x: boolean) => void, defaultData?: ScheduleData, projectId?:string, memberId?:string }) => {
|
||||
const [form] = Form.useForm();
|
||||
const { t } = useTranslation('schedule');
|
||||
const { workingDays } = useAppSelector(state => state.scheduleReducer);
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const handleFormSubmit = async (values: any) => {
|
||||
dispatch(createSchedule({schedule:{ ...values, project_id:projectId, team_member_id:memberId }}));
|
||||
form.resetFields();
|
||||
setIsModalOpen(false);
|
||||
dispatch(fetchTeamData());
|
||||
};
|
||||
|
||||
const calTotalHours = async () => {
|
||||
const startDate = form.getFieldValue('allocated_from'); // Start date
|
||||
const endDate = form.getFieldValue('allocated_to'); // End date
|
||||
const secondsPerDay = form.getFieldValue('seconds_per_day'); // Seconds per day
|
||||
|
||||
if (startDate && endDate && secondsPerDay && !isNaN(Number(secondsPerDay))) {
|
||||
const start: any = new Date(startDate);
|
||||
const end: any = new Date(endDate);
|
||||
|
||||
if (start > end) {
|
||||
console.error("Start date cannot be after end date");
|
||||
return;
|
||||
}
|
||||
|
||||
let totalWorkingDays = 0;
|
||||
for (let current = new Date(start); current <= end; current.setDate(current.getDate() + 1)) {
|
||||
if (workingDays.includes(getDayName(current))) {
|
||||
totalWorkingDays++;
|
||||
}
|
||||
}
|
||||
|
||||
const hoursPerDay = secondsPerDay;
|
||||
|
||||
const totalHours = totalWorkingDays * hoursPerDay;
|
||||
|
||||
form.setFieldsValue({ total_seconds: totalHours.toFixed(2) });
|
||||
} else {
|
||||
form.setFieldsValue({ total_seconds: 0 });
|
||||
}
|
||||
};
|
||||
|
||||
const disabledStartDate = (current: dayjs.Dayjs) => {
|
||||
const endDate = form.getFieldValue('allocated_to');
|
||||
return current && endDate ? current > dayjs(endDate) : false;
|
||||
};
|
||||
|
||||
const disabledEndDate = (current: dayjs.Dayjs) => {
|
||||
const startDate = form.getFieldValue('allocated_from');
|
||||
return current && startDate ? current < dayjs(startDate) : false;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
form.setFieldsValue({ allocated_from: dayjs(defaultData?.allocated_from) });
|
||||
form.setFieldsValue({ allocated_to: dayjs(defaultData?.allocated_to) });
|
||||
|
||||
}, [defaultData]);
|
||||
|
||||
return (
|
||||
<Form form={form} onFinish={handleFormSubmit}>
|
||||
<Flex vertical gap={10} style={{ width: '480px' }}>
|
||||
<Row>
|
||||
<Col
|
||||
span={12}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
paddingRight: '20px',
|
||||
}}
|
||||
>
|
||||
<span>{t('startDate')}</span>
|
||||
<Form.Item name="allocated_from">
|
||||
<DatePicker disabledDate={disabledStartDate} onChange={e => calTotalHours()} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col
|
||||
span={12}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
paddingLeft: '20px',
|
||||
}}
|
||||
>
|
||||
<span>{t('endDate')}</span>
|
||||
<Form.Item name="allocated_to">
|
||||
<DatePicker disabledDate={disabledEndDate} onChange={e => calTotalHours()}/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={12} style={{ paddingRight: '20px' }}>
|
||||
<span>{t('hoursPerDay')}</span>
|
||||
<Form.Item name="seconds_per_day">
|
||||
<Input max={24} onChange={e => calTotalHours()} defaultValue={defaultData?.seconds_per_day} type="number" suffix="hours" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
<Col span={12} style={{ paddingLeft: '20px' }}>
|
||||
<span>{t('totalHours')}</span>
|
||||
<Form.Item name="total_seconds">
|
||||
<Input readOnly max={24} defaultValue={defaultData?.total_seconds} type="number" suffix="hours" />
|
||||
</Form.Item>
|
||||
</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={() => setIsModalOpen(false)}>{t('cancelButton')}</Button>
|
||||
<Button htmlType='submit' type="primary">
|
||||
{t('saveButton')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ProjectTimelineModal);
|
||||
45
worklenz-frontend/src/features/schedule/ScheduleDrawer.tsx
Normal file
45
worklenz-frontend/src/features/schedule/ScheduleDrawer.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { Avatar, Drawer, Tabs, TabsProps } from 'antd';
|
||||
import React from 'react';
|
||||
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,99 @@
|
||||
import { Button, Checkbox, Col, Drawer, Form, Input, Row } from 'antd';
|
||||
import React, { ReactHTMLElement, useEffect, useState } from 'react';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { fetchDateList, fetchTeamData, getWorking, toggleSettingsDrawer, updateSettings, updateWorking } from './scheduleSlice';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { scheduleAPIService } from '@/api/schedule/schedule.api.service';
|
||||
import Skeleton from 'antd/es/skeleton/Skeleton';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
|
||||
const ScheduleSettingsDrawer: React.FC = () => {
|
||||
const isDrawerOpen = useAppSelector(state => state.scheduleReducer.isSettingsDrawerOpen);
|
||||
const dispatch = useAppDispatch();
|
||||
const [form] = Form.useForm();
|
||||
const { t } = useTranslation('schedule');
|
||||
|
||||
const { workingDays, workingHours, loading } = useAppSelector(state => state.scheduleReducer);
|
||||
const { date, type } = useAppSelector(state => state.scheduleReducer);
|
||||
|
||||
|
||||
const handleFormSubmit = async (values: any) => {
|
||||
await dispatch(updateWorking(values));
|
||||
dispatch(toggleSettingsDrawer());
|
||||
dispatch(fetchDateList({ date, type }));
|
||||
dispatch(fetchTeamData());
|
||||
};
|
||||
|
||||
const fetchSettings = async () => {
|
||||
dispatch(getWorking());
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
form.setFieldsValue({ workingDays, workingHours });
|
||||
}, [workingDays, workingHours]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Drawer
|
||||
title={t('settings')}
|
||||
open={isDrawerOpen}
|
||||
onClose={() => {
|
||||
dispatch(toggleSettingsDrawer());
|
||||
}}
|
||||
destroyOnClose
|
||||
afterOpenChange={() => {
|
||||
fetchSettings();
|
||||
}}
|
||||
>
|
||||
<Skeleton loading={loading} active paragraph={{ rows: 1 }}>
|
||||
<Form layout="vertical" form={form} onFinish={handleFormSubmit}>
|
||||
<Form.Item label={t('workingDays')} name="workingDays">
|
||||
<Checkbox.Group defaultValue={workingDays}>
|
||||
<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')} name="workingHours">
|
||||
<Input
|
||||
max={24}
|
||||
type="number"
|
||||
suffix={<span style={{ color: 'rgba(0, 0, 0, 0.46)' }}>{t('hours')}</span>}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" style={{ width: '100%' }}>
|
||||
{t('saveButton')}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Skeleton>
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScheduleSettingsDrawer;
|
||||
223
worklenz-frontend/src/features/schedule/scheduleSlice.ts
Normal file
223
worklenz-frontend/src/features/schedule/scheduleSlice.ts
Normal file
@@ -0,0 +1,223 @@
|
||||
import { scheduleAPIService } from '@/api/schedule/schedule.api.service';
|
||||
import { PickerType, ScheduleData } from '@/types/schedule/schedule-v2.types';
|
||||
import logger from '@/utils/errorLogger';
|
||||
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
|
||||
|
||||
interface scheduleState {
|
||||
isSettingsDrawerOpen: boolean;
|
||||
isScheduleDrawerOpen: boolean;
|
||||
workingDays: string[];
|
||||
workingHours: number;
|
||||
teamData: any[];
|
||||
dateList: any;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
type: PickerType;
|
||||
date: Date;
|
||||
dayCount: number;
|
||||
}
|
||||
|
||||
const initialState: scheduleState = {
|
||||
isSettingsDrawerOpen: false,
|
||||
isScheduleDrawerOpen: false,
|
||||
workingDays: [],
|
||||
workingHours: 8,
|
||||
teamData: [],
|
||||
dateList: {},
|
||||
loading: false,
|
||||
error: null,
|
||||
type: 'month',
|
||||
date: new Date(),
|
||||
dayCount: 0,
|
||||
};
|
||||
|
||||
export const fetchTeamData = createAsyncThunk('schedule/fetchTeamData', async () => {
|
||||
const response = await scheduleAPIService.fetchScheduleMembers();
|
||||
if (!response.done) {
|
||||
throw new Error('Failed to fetch team data');
|
||||
}
|
||||
const data = response.body;
|
||||
return data;
|
||||
});
|
||||
|
||||
export const fetchDateList = createAsyncThunk(
|
||||
'schedule/fetchDateList',
|
||||
async ({ date, type }: { date: Date; type: string }) => {
|
||||
const response = await scheduleAPIService.fetchScheduleDates({ date: date.toISOString(), type });
|
||||
if (!response.done) {
|
||||
throw new Error('Failed to fetch date list');
|
||||
}
|
||||
const data = response.body;
|
||||
return data;
|
||||
}
|
||||
);
|
||||
|
||||
export const updateWorking = createAsyncThunk(
|
||||
'schedule/updateWorking',
|
||||
async ({ workingDays, workingHours }: { workingDays: string[]; workingHours: number }) => {
|
||||
const response = await scheduleAPIService.updateScheduleSettings({ workingDays, workingHours });
|
||||
if (!response.done) {
|
||||
throw new Error('Failed to fetch date list');
|
||||
}
|
||||
const data = response.body;
|
||||
return data;
|
||||
}
|
||||
);
|
||||
|
||||
export const getWorking = createAsyncThunk(
|
||||
'schedule/getWorking',
|
||||
async (_, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await scheduleAPIService.fetchScheduleSettings();
|
||||
if (!response.done) {
|
||||
throw new Error('Failed to fetch date list');
|
||||
}
|
||||
return response;
|
||||
} catch (error) {
|
||||
logger.error('getWorking', error);
|
||||
if (error instanceof Error) {
|
||||
return rejectWithValue(error.message);
|
||||
}
|
||||
return rejectWithValue('Failed to getWorking');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const fetchMemberProjects = createAsyncThunk(
|
||||
'schedule/fetchMemberProjects',
|
||||
async ({ id }: { id: string }) => {
|
||||
const response = await scheduleAPIService.fetchMemberProjects({ id });
|
||||
if (!response.done) {
|
||||
throw new Error('Failed to fetch date list');
|
||||
}
|
||||
const data = response.body;
|
||||
return data;
|
||||
}
|
||||
);
|
||||
|
||||
export const createSchedule = createAsyncThunk(
|
||||
'schedule/createSchedule',
|
||||
async ({ schedule }: { schedule: ScheduleData}) => {
|
||||
const response = await scheduleAPIService.submitScheduleData({ schedule });
|
||||
if (!response.done) {
|
||||
throw new Error('Failed to fetch date list');
|
||||
}
|
||||
const data = response.body;
|
||||
return data;
|
||||
}
|
||||
);
|
||||
|
||||
const scheduleSlice = createSlice({
|
||||
name: 'scheduleReducer',
|
||||
initialState,
|
||||
reducers: {
|
||||
toggleSettingsDrawer: state => {
|
||||
state.isSettingsDrawerOpen = !state.isSettingsDrawerOpen;
|
||||
},
|
||||
updateSettings(state, action) {
|
||||
state.workingDays = action.payload.workingDays;
|
||||
state.workingHours = action.payload.workingHours;
|
||||
},
|
||||
toggleScheduleDrawer: state => {
|
||||
state.isScheduleDrawerOpen = !state.isScheduleDrawerOpen;
|
||||
},
|
||||
getWorkingSettings(state, action) {
|
||||
state.workingDays = action.payload.workingDays;
|
||||
state.workingHours = action.payload.workingHours;
|
||||
},
|
||||
setDate(state, action) {
|
||||
state.date = action.payload;
|
||||
},
|
||||
setType(state, action) {
|
||||
state.type = action.payload;
|
||||
},
|
||||
setDayCount(state, action) {
|
||||
state.dayCount = action.payload;
|
||||
},
|
||||
},
|
||||
extraReducers: builder => {
|
||||
builder
|
||||
.addCase(fetchTeamData.pending, state => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(fetchTeamData.fulfilled, (state, action) => {
|
||||
state.teamData = action.payload;
|
||||
state.loading = false;
|
||||
})
|
||||
.addCase(fetchTeamData.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.error.message || 'Failed to fetch team data';
|
||||
})
|
||||
.addCase(fetchDateList.pending, state => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(fetchDateList.fulfilled, (state, action) => {
|
||||
state.dateList = action.payload;
|
||||
state.dayCount = (action.payload as any)?.date_data[0]?.days?.length;
|
||||
state.loading = false;
|
||||
})
|
||||
.addCase(fetchDateList.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.error.message || 'Failed to fetch date list';
|
||||
})
|
||||
.addCase(updateWorking.pending, state => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(updateWorking.fulfilled, (state, action) => {
|
||||
state.workingDays = action.payload.workingDays;
|
||||
state.workingHours = action.payload.workingHours;
|
||||
state.loading = false;
|
||||
})
|
||||
.addCase(updateWorking.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.error.message || 'Failed to fetch date list';
|
||||
})
|
||||
.addCase(getWorking.pending, state => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(getWorking.fulfilled, (state, action) => {
|
||||
state.workingDays = action.payload.body.workingDays;
|
||||
state.workingHours = action.payload.body.workingHours;
|
||||
state.loading = false;
|
||||
})
|
||||
.addCase(getWorking.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.error.message || 'Failed to fetch list';
|
||||
}).addCase(fetchMemberProjects.pending, state => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(fetchMemberProjects.fulfilled, (state, action) => {
|
||||
const data = action.payload;
|
||||
|
||||
state.teamData.find((team: any) => {
|
||||
if (team.id === data.id) {
|
||||
team.projects = data.projects||[];
|
||||
}
|
||||
})
|
||||
state.loading = false;
|
||||
})
|
||||
.addCase(fetchMemberProjects.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.error.message || 'Failed to fetch date list';
|
||||
}).addCase(createSchedule.pending, state => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(createSchedule.fulfilled, (state, action) => {
|
||||
state.loading = false;
|
||||
})
|
||||
.addCase(createSchedule.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.error.message || 'Failed to send schedule';
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const { toggleSettingsDrawer, updateSettings, toggleScheduleDrawer, getWorkingSettings, setDate, setType, setDayCount } =
|
||||
scheduleSlice.actions;
|
||||
export default scheduleSlice.reducer;
|
||||
Reference in New Issue
Block a user