init

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

@@ -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;