94 lines
4.7 KiB
TypeScript
94 lines
4.7 KiB
TypeScript
import BaseFormModal, {CreateEditFormProps} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
|
|
import {
|
|
BarcodeTemplateAdditionalAttributeSchema,
|
|
BarcodeTemplateAttributeSchema,
|
|
BarcodeTemplateSchema
|
|
} from "../../../../client";
|
|
import {ContextModalProps} from "@mantine/modals";
|
|
import {useForm} from "@mantine/form";
|
|
import {Checkbox, Fieldset, Flex, NumberInput, rem, TextInput} from "@mantine/core";
|
|
import {IconX} from "@tabler/icons-react";
|
|
import BarcodeTemplateAttributeMultiselect
|
|
from "../../components/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect.tsx";
|
|
import BarcodeTemplateAdditionalFieldTable
|
|
from "../../components/BarcodeTemplateAdditionalFieldTable/BarcodeTemplateAdditionalFieldTable.tsx";
|
|
|
|
type Props = CreateEditFormProps<BarcodeTemplateSchema>
|
|
const BarcodeTemplateFormModal = ({
|
|
context,
|
|
id,
|
|
innerProps
|
|
}: ContextModalProps<Props>) => {
|
|
const isEditing = 'onChange' in innerProps;
|
|
const initialValues = isEditing ? innerProps.element : {
|
|
name: "",
|
|
width: undefined,
|
|
height: undefined,
|
|
isDefault: false,
|
|
attributes: [] as Array<BarcodeTemplateAttributeSchema>,
|
|
additionalAttributes: [] as Array<BarcodeTemplateAdditionalAttributeSchema>
|
|
} as Partial<BarcodeTemplateSchema>;
|
|
const form = useForm<Partial<BarcodeTemplateSchema>>({
|
|
initialValues: initialValues,
|
|
validate: {
|
|
width: (width: number | undefined) => width && width > 0 ? null : "Ширина должна быть больше 0",
|
|
height: (height: number | undefined) => height && height > 0 ? null : "Высота должна быть больше 0",
|
|
attributes: (attributes: Array<BarcodeTemplateAttributeSchema> | undefined) => attributes && attributes.length > 0 ? null : "Необходимо добавить хотя бы один атрибут",
|
|
name: (name: string | undefined) => name && name.trim() !== '' ? null : "Необходимо ввести название шаблона",
|
|
}
|
|
})
|
|
console.log(form.values.additionalAttributes);
|
|
return (
|
|
<BaseFormModal
|
|
{...innerProps}
|
|
closeOnSubmit
|
|
form={form}
|
|
|
|
onClose={() => context.closeContextModal(id)}
|
|
>
|
|
<BaseFormModal.Body>
|
|
<>
|
|
<Fieldset legend={"Шаблон штрихкода"}>
|
|
<Flex direction={"column"} gap={rem(10)}>
|
|
<TextInput
|
|
label={'Название'}
|
|
placeholder={"Введите название шаблона"}
|
|
{...form.getInputProps('name')}
|
|
/>
|
|
<Flex gap={10} align={"center"}>
|
|
<NumberInput
|
|
hideControls
|
|
label={'Ширина'}
|
|
placeholder={"Ширина в мм"}
|
|
{...form.getInputProps('width')}
|
|
/>
|
|
<IconX/>
|
|
<NumberInput
|
|
hideControls
|
|
label={'Высота'}
|
|
placeholder={"Высота в мм"}
|
|
{...form.getInputProps('height')}
|
|
/>
|
|
</Flex>
|
|
<BarcodeTemplateAttributeMultiselect
|
|
label={"Стандартные атрибуты"}
|
|
placeholder={!form.values.attributes?.length ? "Выберите атрибуты" : undefined}
|
|
{...form.getInputProps('attributes')}
|
|
/>
|
|
<BarcodeTemplateAdditionalFieldTable
|
|
{...form.getInputProps('additionalAttributes')}
|
|
/>
|
|
<Checkbox
|
|
label={"Использовать как стандартный шаблон"}
|
|
checked={form.getInputProps('isDefault').value as boolean}
|
|
{...form.getInputProps('isDefault')}/>
|
|
</Flex>
|
|
|
|
</Fieldset>
|
|
</>
|
|
</BaseFormModal.Body>
|
|
</BaseFormModal>
|
|
)
|
|
}
|
|
|
|
export default BarcodeTemplateFormModal; |