init

worklenz-frontend/src/components/admin-center/teams/add-team-drawer/add-team-drawer.tsx

@@ -0,0 +1,85 @@
+import React, { useRef, useState } from 'react';
+import { Button, Drawer, Form, Input, InputRef, Typography } from 'antd';
+import { fetchTeams } from '@features/teams/teamSlice';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { useTranslation } from 'react-i18next';
+import logger from '@/utils/errorLogger';
+import { teamsApiService } from '@/api/teams/teams.api.service';
+
+interface AddTeamDrawerProps {
+  isDrawerOpen: boolean;
+  onClose: () => void;
+  reloadTeams: () => void;
+}
+
+const AddTeamDrawer: React.FC<AddTeamDrawerProps> = ({ isDrawerOpen, onClose, reloadTeams }) => {
+  const { t } = useTranslation('admin-center/teams');
+  const dispatch = useAppDispatch();
+  const [form] = Form.useForm();
+  const [creating, setCreating] = useState(false);
+  const addTeamNameInputRef = useRef<InputRef>(null);
+
+  const handleFormSubmit = async (values: any) => {
+    if (!values.name || values.name.trim() === '') return;
+
+    try {
+      setCreating(true);
+      const newTeam = {
+        name: values.name,
+      };
+      const res = await teamsApiService.createTeam(newTeam);
+      if (res.done) {
+        onClose();
+        reloadTeams();
+        dispatch(fetchTeams());
+      }
+    } catch (error) {
+      logger.error('Error adding team', error);
+    } finally {
+      setCreating(false);
+    }
+
+    form.resetFields();
+  };
+
+  return (
+    <Drawer
+      title={
+        <Typography.Text style={{ fontWeight: 500, fontSize: 16 }}>
+          {t('drawerTitle')}
+        </Typography.Text>
+      }
+      open={isDrawerOpen}
+      destroyOnClose
+      afterOpenChange={() => {
+        setTimeout(() => {
+          addTeamNameInputRef.current?.focus();
+        }, 100);
+      }}
+      onClose={onClose}
+    >
+      <Form form={form} layout="vertical" onFinish={handleFormSubmit}>
+        <Form.Item
+          name="name"
+          label={t('label')}
+          rules={[
+            {
+              required: true,
+              message: t('message'),
+            },
+          ]}
+        >
+          <Input placeholder={t('drawerPlaceholder')} ref={addTeamNameInputRef} />
+        </Form.Item>
+
+        <Form.Item>
+          <Button type="primary" style={{ width: '100%' }} htmlType="submit" loading={creating}>
+            {t('create')}
+          </Button>
+        </Form.Item>
+      </Form>
+    </Drawer>
+  );
+};
+
+export default AddTeamDrawer;