116 lines
4.9 KiB
TypeScript
116 lines
4.9 KiB
TypeScript
import { ContextModalProps } from "@mantine/modals";
|
|
import { Fieldset, Textarea, TextInput } from "@mantine/core";
|
|
import { useForm } from "@mantine/form";
|
|
import { ClientSchema } from "../../../../client";
|
|
import BaseFormModal, {
|
|
CreateEditFormProps,
|
|
} from "../BaseFormModal/BaseFormModal.tsx";
|
|
import BarcodeTemplateSelect from "../../../../components/Selects/BarcodeTemplateSelect/BarcodeTemplateSelect.tsx";
|
|
|
|
type Props = CreateEditFormProps<ClientSchema>;
|
|
|
|
const ClientFormModal = ({
|
|
context,
|
|
id,
|
|
innerProps,
|
|
}: ContextModalProps<Props>) => {
|
|
const isEditing = "onChange" in innerProps;
|
|
|
|
const initialValues: ClientSchema = isEditing
|
|
? innerProps.element
|
|
: {
|
|
id: -1,
|
|
name: "",
|
|
companyName: "",
|
|
details: {
|
|
telegram: "",
|
|
phoneNumber: "",
|
|
email: "",
|
|
inn: undefined,
|
|
},
|
|
comment: "",
|
|
};
|
|
const form = useForm<ClientSchema>({
|
|
initialValues: initialValues,
|
|
validate: {
|
|
name: (name: string) =>
|
|
name.trim() !== ""
|
|
? null
|
|
: "Необходимо ввести название клиента",
|
|
// details: {
|
|
// telegram: (address: string | undefined | null) => (address && address.trim() !== '') ? null : "Необходимо ввести телеграм",
|
|
// phoneNumber: (phoneNumber: string | undefined | null) => (phoneNumber && phoneNumber.trim() !== '') ? null : "Необходимо ввести номер телефона",
|
|
// email: (email: string | undefined | null) => (email && email.trim() !== '') ? null : "Необходимо ввести почту",
|
|
// inn: (inn: string | undefined | null) => (inn && getDigitsCount(parseInt(inn)) >= 10) ? null : "ИНН должен содержать не менее 10 цифр",
|
|
// }
|
|
},
|
|
});
|
|
|
|
const onClose = () => {
|
|
context.closeContextModal(id);
|
|
};
|
|
return (
|
|
<BaseFormModal
|
|
{...innerProps}
|
|
closeOnSubmit
|
|
form={form}
|
|
onClose={onClose}>
|
|
<BaseFormModal.Body>
|
|
<>
|
|
<Fieldset legend={"Основная информация"}>
|
|
<TextInput
|
|
required
|
|
label={"Название клиента"}
|
|
placeholder={"Введите название клиента"}
|
|
{...form.getInputProps("name")}
|
|
/>
|
|
|
|
</Fieldset>
|
|
<Fieldset legend={"Дополнительная информация"}>
|
|
<TextInput
|
|
label={"Телеграм"}
|
|
placeholder={"Введите телеграм"}
|
|
{...form.getInputProps("details.telegram")}
|
|
/>
|
|
<TextInput
|
|
label={"Номер телефона"}
|
|
placeholder={"Введите номер телефона"}
|
|
{...form.getInputProps("details.phoneNumber")}
|
|
/>
|
|
<TextInput
|
|
label={"Почта"}
|
|
placeholder={"Введите почту"}
|
|
{...form.getInputProps("details.email")}
|
|
/>
|
|
<TextInput
|
|
label={"ИНН"}
|
|
placeholder={"Введите ИНН"}
|
|
{...form.getInputProps("details.inn")}
|
|
/>
|
|
<TextInput
|
|
label={"Название компании"}
|
|
placeholder={"Введите название компании"}
|
|
{...form.getInputProps("companyName")}
|
|
/>
|
|
<Textarea
|
|
label={"Комментарий"}
|
|
placeholder={"Введите комментарий"}
|
|
{...form.getInputProps("comment")}
|
|
/>
|
|
|
|
</Fieldset>
|
|
<Fieldset legend={"Настройки"}>
|
|
<BarcodeTemplateSelect
|
|
label={"Шаблон штрихкодов"}
|
|
placeholder={"Выберите шаблон штрихкодов"}
|
|
{...form.getInputProps("barcodeTemplate")}
|
|
/>
|
|
</Fieldset>
|
|
</>
|
|
</BaseFormModal.Body>
|
|
</BaseFormModal>
|
|
);
|
|
};
|
|
|
|
export default ClientFormModal;
|