112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
import { Col, Form, Input, Modal, Row, Select } from 'antd';
|
|
import type React from 'react';
|
|
import { useEffect, useState } from 'react';
|
|
import { ApiError } from '../../api/client';
|
|
import { useMe } from '../../auth/useMe';
|
|
import { useAppSelector } from '../../store/store';
|
|
import type { CreateCompanyGroupProps } from '../../types/companyGroups/companyGroups';
|
|
import { useNotificationApi } from '../../utils/useNotification';
|
|
import { loadOffices } from '../Admin/UsersTable';
|
|
|
|
type Props = {
|
|
open: boolean;
|
|
onCancel: () => void;
|
|
onOk: (values: CreateCompanyGroupProps) => void | Promise<void>;
|
|
};
|
|
|
|
export const CompanyGroupForm: React.FC<Props> = ({ open, onCancel, onOk }) => {
|
|
const [form] = Form.useForm<CreateCompanyGroupProps>();
|
|
const { me } = useMe();
|
|
const notification = useNotificationApi();
|
|
|
|
const activeCompanyGroup = useAppSelector((state) => state.company_groups.activeCompanyGroup);
|
|
const [officesOptions, setOfficesOptions] = useState<{ value: string; label: string }[]>([]);
|
|
const [loadingOptions, setLoadingOptions] = useState(false);
|
|
const [confirmLoading, setConfirmLoading] = useState(false);
|
|
|
|
async function getOfficesOptionsHandler() {
|
|
setLoadingOptions(true);
|
|
try {
|
|
const res = await loadOffices();
|
|
const options = res.map((elem) => elem && { value: elem.id, label: elem.name });
|
|
setOfficesOptions(options);
|
|
} catch (e) {
|
|
if (e instanceof ApiError) {
|
|
notification.error({ description: e.message });
|
|
}
|
|
} finally {
|
|
setLoadingOptions(false);
|
|
}
|
|
}
|
|
|
|
const handleOk = async () => {
|
|
setConfirmLoading(true);
|
|
try {
|
|
const values = await form.validateFields();
|
|
await onOk({
|
|
...values,
|
|
base_regional_office_id: values?.base_regional_office_id ? values?.base_regional_office_id : (me?.regional_office.id as string),
|
|
});
|
|
} catch (e) {
|
|
if (e instanceof ApiError) {
|
|
notification.error({
|
|
description: e.message,
|
|
});
|
|
} else if (e instanceof Error && e.name !== 'ValidationError') {
|
|
console.error(e);
|
|
}
|
|
} finally {
|
|
setConfirmLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
form.resetFields();
|
|
onCancel();
|
|
};
|
|
|
|
useEffect(() => {
|
|
getOfficesOptionsHandler();
|
|
}, [activeCompanyGroup]);
|
|
|
|
return (
|
|
<Modal
|
|
title='Создать группу компаний'
|
|
open={open}
|
|
onCancel={handleCancel}
|
|
onOk={handleOk}
|
|
okText='Создать'
|
|
cancelText='Отмена'
|
|
destroyOnHidden
|
|
confirmLoading={confirmLoading}
|
|
width={720}>
|
|
<Form form={form} layout='vertical'>
|
|
<Form.Item name='name' label='Название ГК' rules={[{ required: true, message: 'Укажите название ГК' }]}>
|
|
<Input placeholder='Например: Агроком' />
|
|
</Form.Item>
|
|
|
|
<Row gutter={16}>
|
|
<Col span={12}>
|
|
<Form.Item name='crm_id' label='ID ГК в CRM'>
|
|
<Input placeholder='Генерируется автоматически' />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item name='base_regional_office_id' label='Базовый РФ ГК'>
|
|
<Select
|
|
allowClear
|
|
loading={loadingOptions}
|
|
placeholder='— не указан —'
|
|
options={officesOptions}
|
|
showSearch
|
|
optionFilterProp='label'
|
|
notFoundContent={loadingOptions ? 'Загрузка' : 'Нет вариантов'}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|