feat: temp barcode templates

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

@@ -1,7 +1,75 @@
-import {GetInputProps} from "@mantine/form/lib/types";
-import {FC} from "react";
+import {FC, useEffect, useState} 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 }>>
-const BarcodeTemplateAdditionalFieldTable:FC<Props> = (props:Props) => {
+type FieldType = BarcodeTemplateAdditionalAttributeSchema;
+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}