128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
import { DatePicker, Form, Input, Modal, Select } from 'antd';
|
||
import FormItem from 'antd/es/form/FormItem';
|
||
import dayjs from 'dayjs';
|
||
import type React from 'react';
|
||
import { useEffect, useMemo, useState } from 'react';
|
||
import { ApiError } from '../../api/client';
|
||
import { fetchRelatedGroup } from '../../services/api/directories/company_groups';
|
||
import { getCompanyGroupsThunk } from '../../store/slices/companyGroupsSlice/thunks';
|
||
import { useAppDispatch, useAppSelector } from '../../store/store';
|
||
import type { RelatedGroupFormType } from '../../types/relatedGroup/relatedGroup';
|
||
import { useNotificationApi } from '../../utils/useNotification';
|
||
|
||
type Props = {
|
||
open: boolean;
|
||
onCancel: () => void;
|
||
onOk: (values: RelatedGroupFormType) => void | Promise<void>;
|
||
relatedGroupId?: string;
|
||
kind: 'gsk' | 'gsz';
|
||
};
|
||
|
||
export const RelatedGroupForm: React.FC<Props> = ({ open, onCancel, onOk, relatedGroupId, kind }) => {
|
||
const [form] = Form.useForm<RelatedGroupFormType>();
|
||
const notification = useNotificationApi();
|
||
const dispatch = useAppDispatch();
|
||
const [initialDataLoading, setInitialDataLoading] = useState(false);
|
||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||
const companyGrops = useAppSelector((state) => state.company_groups.raw_rows);
|
||
const companyGropsLoading = useAppSelector((state) => state.company_groups.loading);
|
||
|
||
async function getInitialData() {
|
||
if (!relatedGroupId) return;
|
||
setInitialDataLoading(true);
|
||
try {
|
||
const data = await fetchRelatedGroup(relatedGroupId);
|
||
await dispatch(getCompanyGroupsThunk());
|
||
form.setFieldsValue({
|
||
crm_id: data?.crm_id,
|
||
name: data?.name,
|
||
created_date: data?.created_date ?? dayjs().format('YYYY-MM-DD'),
|
||
company_group_id: data?.company_group_id,
|
||
});
|
||
} catch (e) {
|
||
if (e instanceof ApiError) {
|
||
notification.error({ description: e.message });
|
||
}
|
||
} finally {
|
||
setInitialDataLoading(false);
|
||
}
|
||
}
|
||
|
||
const handleOk = async () => {
|
||
setConfirmLoading(true);
|
||
try {
|
||
const { created_date, name, crm_id, company_group_id } = await form.validateFields();
|
||
await onOk({
|
||
created_date: created_date ?? dayjs().format('YYYY-MM-DD'),
|
||
name,
|
||
crm_id,
|
||
company_group_id: relatedGroupId ? undefined : company_group_id,
|
||
kind: relatedGroupId ? undefined : kind,
|
||
});
|
||
} catch (e) {
|
||
if (e instanceof ApiError) {
|
||
notification.error({
|
||
description: e.message,
|
||
});
|
||
}
|
||
} finally {
|
||
setConfirmLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleCancel = () => {
|
||
form.resetFields();
|
||
onCancel();
|
||
};
|
||
|
||
const companyGroupOptions = useMemo(() => {
|
||
return companyGrops?.map((company) => company && { value: company.id, label: company.name });
|
||
}, [companyGrops]);
|
||
|
||
useEffect(() => {
|
||
getInitialData();
|
||
}, [open]);
|
||
|
||
return (
|
||
<Modal
|
||
title={`${relatedGroupId ? 'Изменить' : 'Создать'} группу связанных ${kind === 'gsk' ? 'компаний' : 'заемщиков'}`}
|
||
open={open}
|
||
onCancel={handleCancel}
|
||
onOk={handleOk}
|
||
okText={`${relatedGroupId ? 'Сохранить' : 'Создать'}`}
|
||
cancelText='Отмена'
|
||
destroyOnHidden
|
||
loading={initialDataLoading}
|
||
confirmLoading={confirmLoading}>
|
||
<Form form={form} layout='vertical'>
|
||
<FormItem name='crm_id' label='ID в CRM'>
|
||
<Input placeholder='Генерируется автоматически' />
|
||
</FormItem>
|
||
<FormItem name='name' label='Наименование' rules={[{ required: true, message: 'Укажите наименование' }]}>
|
||
<Input />
|
||
</FormItem>
|
||
<Form.Item name='company_group_id' label='ГК' rules={[{ required: true, message: 'Выберите ГК' }]}>
|
||
<Select
|
||
disabled={!!relatedGroupId}
|
||
allowClear
|
||
loading={companyGropsLoading}
|
||
options={companyGroupOptions}
|
||
showSearch
|
||
optionFilterProp='label'
|
||
notFoundContent={companyGropsLoading ? 'Загрузка' : 'Нет вариантов'}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
name='created_date'
|
||
label='Дата создания'
|
||
getValueProps={(value: string | undefined) => ({
|
||
value: value ? dayjs(value) : undefined,
|
||
})}
|
||
normalize={(value) => (value ? value.format('YYYY-MM-DD') : undefined)}>
|
||
<DatePicker style={{ width: '100%' }} format='DD.MM.YYYY' placeholder='ДД.ММ.ГГГГ' />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
);
|
||
};
|