feat: barcode templates

src/pages/BarcodePage/components/BarcodeTemplateSizeSelect/BarcodeTemplateSizeSelect.tsx

@@ -0,0 +1,16 @@
+import {BarcodeTemplateSizeSchema} from "../../../../client";
+import ObjectSelect, {ObjectSelectProps} from "../../../../components/ObjectSelect/ObjectSelect.tsx";
+import useBarcodeTemplateSizesList from "../../hooks/useBarcodeTemplateSizesList.tsx";
+
+type Props = Omit<ObjectSelectProps<BarcodeTemplateSizeSchema>, 'data'>
+const BarcodeTemplateSizeSelect = (props: Props) => {
+    const {barcodeTemplateSizes} = useBarcodeTemplateSizesList();
+
+    return (
+        <ObjectSelect
+            data={barcodeTemplateSizes}
+            {...props}
+        />
+    )
+}
+export default BarcodeTemplateSizeSelect;

src/pages/BarcodePage/components/BarcodeTemplatesTable/columns.tsx

@@ -15,8 +15,8 @@ export const useBarcodeTemplatesTableColumns = () => {
             Cell: ({row}) => <>{row.original.attributes.map(attr => attr.name).join(', ')}</>
         },
         {
+            accessorKey: "size.name",
             header: "Размер",
-            Cell: ({row}) => <>{row.original.width}x{row.original.height}</>
         },
         {
             accessorKey: "isDefault",

src/pages/BarcodePage/hooks/useBarcodeTemplateSizesList.tsx

@@ -0,0 +1,14 @@
+import {BarcodeService} from "../../../client";
+import {useQuery} from "@tanstack/react-query";
+
+const useBarcodeTemplateSizesList = () => {
+    const {isLoading, data, error, refetch} = useQuery({
+        queryKey: ['getAllBarcodeTemplateSizes'],
+        queryFn: BarcodeService.getAllBarcodeTemplateSizes
+    });
+
+    const barcodeTemplateSizes = isLoading || error || !data ? [] : data.sizes;
+
+    return {barcodeTemplateSizes, refetch}
+}
+export default useBarcodeTemplateSizesList;

src/pages/BarcodePage/modals/BarcodeTemplateFormModal/BarcodeTemplateFormModal.tsx

@@ -6,12 +6,12 @@ import {
 } 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 {Checkbox, Fieldset, Flex, rem, TextInput} from "@mantine/core";
 import BarcodeTemplateAttributeMultiselect
     from "../../components/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect.tsx";
 import BarcodeTemplateAdditionalFieldTable
     from "../../components/BarcodeTemplateAdditionalFieldTable/BarcodeTemplateAdditionalFieldTable.tsx";
+import BarcodeTemplateSizeSelect from "../../components/BarcodeTemplateSizeSelect/BarcodeTemplateSizeSelect.tsx";
 
 type Props = CreateEditFormProps<BarcodeTemplateSchema>
 const BarcodeTemplateFormModal = ({
@@ -22,8 +22,6 @@ const BarcodeTemplateFormModal = ({
     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>
@@ -31,9 +29,7 @@ const BarcodeTemplateFormModal = ({
     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 : "Необходимо добавить хотя бы один атрибут",
+            attributes: (attributes: Array<BarcodeTemplateAttributeSchema> | undefined) => attributes ? null : "Необходимо добавить хотя бы один атрибут",
             name: (name: string | undefined) => name && name.trim() !== '' ? null : "Необходимо ввести название шаблона",
         }
     })
@@ -55,21 +51,12 @@ const BarcodeTemplateFormModal = ({
                                 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>
+                            <BarcodeTemplateSizeSelect
+                                label={"Размер"}
+                                placeholder={"Выберите размер шаблона"}
+                                {...form.getInputProps('size')}
+                            />
+
                             <BarcodeTemplateAttributeMultiselect
                                 label={"Стандартные атрибуты"}
                                 placeholder={!form.values.attributes?.length ? "Выберите атрибуты" : undefined}