feat: temp barcode templates

src/client/index.ts

@@ -9,6 +9,7 @@ export type { OpenAPIConfig } from './core/OpenAPI';
 
 export type { AuthLoginRequest } from './models/AuthLoginRequest';
 export type { AuthLoginResponse } from './models/AuthLoginResponse';
+export type { BarcodeTemplateAdditionalAttributeSchema } from './models/BarcodeTemplateAdditionalAttributeSchema';
 export type { BarcodeTemplateAttributeSchema } from './models/BarcodeTemplateAttributeSchema';
 export type { BarcodeTemplateCreateRequest } from './models/BarcodeTemplateCreateRequest';
 export type { BarcodeTemplateCreateResponse } from './models/BarcodeTemplateCreateResponse';

src/client/models/BarcodeTemplateAdditionalAttributeSchema.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type BarcodeTemplateAdditionalAttributeSchema = {
+    name: string;
+    value: string;
+};
+

src/client/models/BarcodeTemplateCreateRequest.ts

@@ -2,11 +2,13 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { BarcodeTemplateAdditionalAttributeSchema } from './BarcodeTemplateAdditionalAttributeSchema';
 export type BarcodeTemplateCreateRequest = {
     name: string;
     isDefault: boolean;
     width: number;
     height: number;
+    additionalAttributes: Array<BarcodeTemplateAdditionalAttributeSchema>;
     attributeIds: Array<number>;
 };
 

src/client/models/BarcodeTemplateSchema.ts

@@ -2,12 +2,14 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { BarcodeTemplateAdditionalAttributeSchema } from './BarcodeTemplateAdditionalAttributeSchema';
 import type { BarcodeTemplateAttributeSchema } from './BarcodeTemplateAttributeSchema';
 export type BarcodeTemplateSchema = {
     name: string;
     isDefault: boolean;
     width: number;
     height: number;
+    additionalAttributes: Array<BarcodeTemplateAdditionalAttributeSchema>;
     id: number;
     attributes: Array<BarcodeTemplateAttributeSchema>;
 };

src/client/models/BarcodeTemplateUpdateRequest.ts

@@ -2,11 +2,13 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { BarcodeTemplateAdditionalAttributeSchema } from './BarcodeTemplateAdditionalAttributeSchema';
 export type BarcodeTemplateUpdateRequest = {
     name: string;
     isDefault: boolean;
     width: number;
     height: number;
+    additionalAttributes: Array<BarcodeTemplateAdditionalAttributeSchema>;
     id: number;
     attributeIds: Array<number>;
 };

src/client/models/ProductCreateRequest.ts

@@ -2,10 +2,12 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { BarcodeTemplateSchema } from './BarcodeTemplateSchema';
 export type ProductCreateRequest = {
     name: string;
     article: string;
     clientId: number;
     barcodes: Array<string>;
+    barcodeTemplate?: (BarcodeTemplateSchema | null);
 };
 

src/client/models/ProductSchema.ts

@@ -2,11 +2,13 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { BarcodeTemplateSchema } from './BarcodeTemplateSchema';
 export type ProductSchema = {
     id: number;
     name: string;
     article: string;
     clientId: number;
     barcodes: Array<string>;
+    barcodeTemplate?: (BarcodeTemplateSchema | null);
 };
 

src/pages/BarcodePage/components/BarcodeTemplateAdditionalFieldTable/BarcodeTemplateAdditionalFieldTable.tsx

@@ -1,7 +1,75 @@
-import {GetInputProps} from "@mantine/form/lib/types";
+import {FC, useEffect, useState} from "react";
-import {FC} from "react";
+import {ActionIcon, Button, Flex, rem, TextInput} from "@mantine/core";
+import {BarcodeTemplateAdditionalAttributeSchema} from "../../../../client";
+import {IconX} from "@tabler/icons-react";
+import {isEqual} from "lodash";
 
-type Props = GetInputProps<Array<{ name:string,value:string }>>
+type FieldType = BarcodeTemplateAdditionalAttributeSchema;
-const BarcodeTemplateAdditionalFieldTable:FC<Props> = (props:Props) => {
+type Props = {
+    onChange: (value: FieldType[]) => void;
+    value?: FieldType[];
+    error?: string | null;
+}
+const BarcodeTemplateAdditionalFieldTable: FC<Props> = (props: Props) => {
+    const {value, onChange} = props;
+    const [innerValue, setInnerValue] = useState<FieldType[]>(props.value || []);
+    console.log(innerValue);
+    const onNameChange = (field: FieldType, newName: string) => {
+        const newField = {...field, name: newName};
+        const newFields = innerValue.map(f => f === field ? newField : f);
+        setInnerValue(newFields);
+        onChange(newFields);
+    }
+    const onValueChange = (field: FieldType, newValue: string) => {
+        const newField = {...field, value: newValue};
+        const newFields = innerValue.map(f => f === field ? newField : f);
+        setInnerValue(newFields);
+        onChange(newFields);
+    }
+    const onCreateField = () => {
+        const newField = {name: "", value: ""};
+        setInnerValue([...innerValue, newField]);
+        onChange([...innerValue, newField]);
+    }
+    const onDeleteField = (field: FieldType) => {
+        const newFields = innerValue.filter(f => f !== field);
+        setInnerValue(newFields);
+        onChange(newFields);
+    }
+    useEffect(() => {
+        if (isEqual(value, innerValue)) return;
+        setInnerValue(value || []);
+    }, [value]);
+    return (
+        <>
+            <Flex
+                direction={"column"}
+                gap={rem(10)}
+            >
+                {/*{innerValue.length === 0 && <Text>Дополнительных полей нет</Text>}*/}
+                {innerValue.map((field, idx) => (
+                    <Flex align={"center"} gap={rem(10)} key={idx}>
+                        <ActionIcon onClick={() => onDeleteField(field)} variant={"default"}>
+                            <IconX/>
+                        </ActionIcon>
+                        <TextInput
+                            placeholder={"Название атрибута"}
+                            value={field.name}
+                            onChange={event => event &&
+                                onNameChange(field, event.target.value)}/>
+                        <TextInput
+                            placeholder={"Значение атрибута"}
+                            value={field.value}
+                            onChange={event => event &&
+                                onValueChange(field, event.target.value)}
+                        />
+                    </Flex>
+                ))
+                }
+                <Button variant={"default"} onClick={onCreateField}>Создать дополительный атрибут</Button>
+            </Flex>
+        </>
+    )
+}
 
-}
+export default BarcodeTemplateAdditionalFieldTable;

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

@@ -1,11 +1,17 @@
 import BaseFormModal, {CreateEditFormProps} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
-import {BarcodeTemplateAttributeSchema, BarcodeTemplateSchema} from "../../../../client";
+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 = ({
@@ -19,7 +25,8 @@ const BarcodeTemplateFormModal = ({
         width: undefined,
         height: undefined,
         isDefault: false,
-        attributes: [] as Array<BarcodeTemplateAttributeSchema>
+        attributes: [] as Array<BarcodeTemplateAttributeSchema>,
+        additionalAttributes: [] as Array<BarcodeTemplateAdditionalAttributeSchema>
     } as Partial<BarcodeTemplateSchema>;
     const form = useForm<Partial<BarcodeTemplateSchema>>({
         initialValues: initialValues,
@@ -30,7 +37,7 @@ const BarcodeTemplateFormModal = ({
             name: (name: string | undefined) => name && name.trim() !== '' ? null : "Необходимо ввести название шаблона",
         }
     })
-
+    console.log(form.values.additionalAttributes);
     return (
         <BaseFormModal
             {...innerProps}
@@ -64,10 +71,13 @@ const BarcodeTemplateFormModal = ({
                                 />
                             </Flex>
                             <BarcodeTemplateAttributeMultiselect
-                                label={"Атрибуты"}
+                                label={"Стандартные атрибуты"}
                                 placeholder={!form.values.attributes?.length ? "Выберите атрибуты" : undefined}
                                 {...form.getInputProps('attributes')}
                             />
+                            <BarcodeTemplateAdditionalFieldTable
+                                {...form.getInputProps('additionalAttributes')}
+                            />
                             <Checkbox
                                 label={"Использовать как стандартный шаблон"}
                                 checked={form.getInputProps('isDefault').value as boolean}

src/pages/ProductsPage/components/ProductsTable/columns.tsx

@@ -34,7 +34,13 @@ export const useProductsTableColumns = () => {
 
                     </List>
                 )
-            }
+            },
+            enableSorting: false,
+        },
+        {
+            accessorKey: "barcodeTemplate.name",
+            header: "Шаблон штрихкода",
+            enableSorting: false,
         }
     ], []);
 

src/pages/ProductsPage/modals/CreateProductModal/CreateProductModal.tsx

@@ -3,6 +3,7 @@ import {Button, Flex, rem, TagsInput, TextInput} from "@mantine/core";
 import {useForm} from "@mantine/form";
 import {BaseProduct, CreateProductRequest} from "../../types.ts";
 import {ProductSchema} from "../../../../client";
+import BarcodeTemplateSelect from "../../../../components/Selects/BarcodeTemplateSelect/BarcodeTemplateSelect.tsx";
 
 type CreateProps = {
     clientId: number;
@@ -26,7 +27,8 @@ const CreateProductModal = ({
     const initialValues = isEditProps ? {
         name: innerProps.product.name,
         article: innerProps.product.article,
-        barcodes: innerProps.product.barcodes
+        barcodes: innerProps.product.barcodes,
+        barcodeTemplate: innerProps.product.barcodeTemplate
     } : {
         name: '',
         article: '',
@@ -69,6 +71,11 @@ const CreateProductModal = ({
                         label={"Штрихкоды"}
                         {...form.getInputProps('barcodes')}
                     />
+                    <BarcodeTemplateSelect
+                        placeholder={"Выберите шаблон штрихкода"}
+                        label={"Шаблон штрихкода"}
+                        {...form.getInputProps('barcodeTemplate')}
+                    />
                     <Flex justify={"flex-end"} mt={rem(5)} gap={rem(10)}>
                         <Button onClick={() => onCancelClick()} variant={"subtle"}>Отменить</Button>
                         {isEditProps ?

src/routes/test.lazy.tsx

@@ -1,6 +1,4 @@
 import {createLazyFileRoute} from "@tanstack/react-router";
-import {Fieldset, Flex, NumberInput} from "@mantine/core";
-import {IconCross, IconX} from "@tabler/icons-react";
 import {useEffect} from "react";
 import {openContextModal} from "@mantine/modals";
 
@@ -22,22 +20,6 @@ function TestPage() {
     }, []);
     return (
         <>
-            <Fieldset legend={"Размеры"}>
-
-                <Flex gap={10} align={"center"}>
-
-                    <NumberInput
-                        hideControls
-                        placeholder={"Ширина"}
-                    />
-                    <IconX/>
-                    <NumberInput
-                        hideControls
-                        placeholder={"Высота"}
-
-                    />
-                </Flex>
-            </Fieldset>
 
         </>
     );