86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
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;
|