expand sub tasks

worklenz-frontend/src/features/schedule/ProjectTimelineModal.tsx

@@ -8,14 +8,26 @@ 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 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 }}));
+    dispatch(
+      createSchedule({ schedule: { ...values, project_id: projectId, team_member_id: memberId } })
+    );
     form.resetFields();
     setIsModalOpen(false);
     dispatch(fetchTeamData());
@@ -25,13 +37,13 @@ const ProjectTimelineModal = ({ setIsModalOpen, defaultData, projectId, memberId
     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");
+        console.error('Start date cannot be after end date');
         return;
       }
 
@@ -41,11 +53,11 @@ const ProjectTimelineModal = ({ setIsModalOpen, defaultData, projectId, memberId
           totalWorkingDays++;
         }
       }
-  
+
       const hoursPerDay = secondsPerDay;
-  
+
       const totalHours = totalWorkingDays * hoursPerDay;
-  
+
       form.setFieldsValue({ total_seconds: totalHours.toFixed(2) });
     } else {
       form.setFieldsValue({ total_seconds: 0 });
@@ -65,7 +77,6 @@ const ProjectTimelineModal = ({ setIsModalOpen, defaultData, projectId, memberId
   useEffect(() => {
     form.setFieldsValue({ allocated_from: dayjs(defaultData?.allocated_from) });
     form.setFieldsValue({ allocated_to: dayjs(defaultData?.allocated_to) });
-
   }, [defaultData]);
 
   return (
@@ -95,7 +106,7 @@ const ProjectTimelineModal = ({ setIsModalOpen, defaultData, projectId, memberId
           >
             <span>{t('endDate')}</span>
             <Form.Item name="allocated_to">
-              <DatePicker disabledDate={disabledEndDate} onChange={e => calTotalHours()}/>
+              <DatePicker disabledDate={disabledEndDate} onChange={e => calTotalHours()} />
             </Form.Item>
           </Col>
         </Row>
@@ -103,14 +114,26 @@ const ProjectTimelineModal = ({ setIsModalOpen, defaultData, projectId, memberId
           <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" />
+              <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" />
+              <Input
+                readOnly
+                max={24}
+                defaultValue={defaultData?.total_seconds}
+                type="number"
+                suffix="hours"
+              />
             </Form.Item>
           </Col>
         </Row>
@@ -124,7 +147,7 @@ const ProjectTimelineModal = ({ setIsModalOpen, defaultData, projectId, memberId
           <Button type="link">{t('deleteButton')}</Button>
           <div style={{ display: 'flex', gap: '5px' }}>
             <Button onClick={() => setIsModalOpen(false)}>{t('cancelButton')}</Button>
-            <Button htmlType='submit' type="primary">
+            <Button htmlType="submit" type="primary">
               {t('saveButton')}
             </Button>
           </div>

worklenz-frontend/src/features/schedule/ScheduleSettingsDrawer.tsx

@@ -1,7 +1,14 @@
 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 {
+  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';
@@ -17,7 +24,6 @@ const ScheduleSettingsDrawer: React.FC = () => {
   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());

worklenz-frontend/src/features/schedule/scheduleSlice.ts

@@ -43,7 +43,10 @@ export const fetchTeamData = createAsyncThunk('schedule/fetchTeamData', async ()
 export const fetchDateList = createAsyncThunk(
   'schedule/fetchDateList',
   async ({ date, type }: { date: Date; type: string }) => {
-    const response = await scheduleAPIService.fetchScheduleDates({ date: date.toISOString(), type });
+    const response = await scheduleAPIService.fetchScheduleDates({
+      date: date.toISOString(),
+      type,
+    });
     if (!response.done) {
       throw new Error('Failed to fetch date list');
     }
@@ -97,7 +100,7 @@ export const fetchMemberProjects = createAsyncThunk(
 
 export const createSchedule = createAsyncThunk(
   'schedule/createSchedule',
-  async ({ schedule }: { schedule: ScheduleData}) => {
+  async ({ schedule }: { schedule: ScheduleData }) => {
     const response = await scheduleAPIService.submitScheduleData({ schedule });
     if (!response.done) {
       throw new Error('Failed to fetch date list');
@@ -187,7 +190,8 @@ const scheduleSlice = createSlice({
       .addCase(getWorking.rejected, (state, action) => {
         state.loading = false;
         state.error = action.error.message || 'Failed to fetch list';
-      }).addCase(fetchMemberProjects.pending, state => {
+      })
+      .addCase(fetchMemberProjects.pending, state => {
         state.loading = true;
         state.error = null;
       })
@@ -196,15 +200,16 @@ const scheduleSlice = createSlice({
 
         state.teamData.find((team: any) => {
           if (team.id === data.id) {
-            team.projects = data.projects||[];
+            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 => {
+      })
+      .addCase(createSchedule.pending, state => {
         state.loading = true;
         state.error = null;
       })
@@ -218,6 +223,13 @@ const scheduleSlice = createSlice({
   },
 });
 
-export const { toggleSettingsDrawer, updateSettings, toggleScheduleDrawer, getWorkingSettings, setDate, setType, setDayCount } =
-  scheduleSlice.actions;
+export const {
+  toggleSettingsDrawer,
+  updateSettings,
+  toggleScheduleDrawer,
+  getWorkingSettings,
+  setDate,
+  setType,
+  setDayCount,
+} = scheduleSlice.actions;
 export default scheduleSlice.reducer;