feat: temp barcode templates

2024-05-07 08:07:18 +03:00
parent e157406787
commit 90802acc56
30 changed files with 723 additions and 26 deletions
--- a/src/pages/BarcodePage/modals/BarcodeTemplateFormModal/BarcodeTemplateFormModal.tsx
+++ b/src/pages/BarcodePage/modals/BarcodeTemplateFormModal/BarcodeTemplateFormModal.tsx
@@ -0,0 +1,91 @@
+import BaseFormModal, {CreateEditFormProps} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
+import {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 "../../component/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect.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>
+    } 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);
+    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')}
+                            />
+                            <Fieldset
+                                styles={{
+                                    legend: {
+                                        marginBottom: 0,
+                                        fontWeight: 500
+                                    }
+                                }}
+                                variant={"unstyled"}
+                                legend={"Размер"}>
+                                <Flex gap={10} align={"center"}>
+                                    <NumberInput
+                                        hideControls
+                                        placeholder={"Ширина"}
+                                        {...form.getInputProps('width')}
+                                    />
+                                    <IconX/>
+                                    <NumberInput
+                                        hideControls
+                                        placeholder={"Высота"}
+                                        {...form.getInputProps('height')}
+                                    />
+                                </Flex>
+                            </Fieldset>
+                            <BarcodeTemplateAttributeMultiselect
+                                label={"Атрибуты"}
+                                placeholder={"Выберите атрибуты"}
+                                {...form.getInputProps('attributes')}
+                            />
+                            <Checkbox
+                                label={"Использовать как стандартный шаблон"}
+                                {...form.getInputProps('isDefault')}/>
+                        </Flex>
+
+                    </Fieldset>
+                </>
+            </BaseFormModal.Body>
+        </BaseFormModal>
+    )
+}
+
+export default BarcodeTemplateFormModal;