feat: attrs on product

src/client/models/ProductSchema.ts

@@ -10,5 +10,8 @@ export type ProductSchema = {
     clientId: number;
     barcodes: Array<string>;
     barcodeTemplate?: (BarcodeTemplateSchema | null);
+    brand?: (string | null);
+    color?: (string | null);
+    composition?: (string | null);
 };
 

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

@@ -41,6 +41,21 @@ export const useProductsTableColumns = () => {
             accessorKey: "barcodeTemplate.name",
             header: "Шаблон штрихкода",
             enableSorting: false,
+        },
+        {
+            accessorKey: "brand",
+            header: "Бренд",
+            enableSorting: false
+        },
+        {
+            accessorKey: "composition",
+            header: "Состав",
+            enableSorting: false,
+        },
+        {
+            accessorKey: "color",
+            header: "Цвет",
+            enableSorting: false
         }
     ], []);
 

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

@@ -1,5 +1,5 @@
 import {ContextModalProps} from "@mantine/modals";
-import {Button, Flex, rem, TagsInput, TextInput} from "@mantine/core";
+import {Button, Fieldset, Flex, rem, TagsInput, TextInput} from "@mantine/core";
 import {useForm} from "@mantine/form";
 import {BaseProduct, CreateProductRequest} from "../../types.ts";
 import {ProductSchema} from "../../../../client";
@@ -24,12 +24,7 @@ const CreateProductModal = ({
                             }: ContextModalProps<Props>) => {
     const isEditProps = 'product' in innerProps;
     const isCreatingProps = 'clientId' in innerProps;
-    const initialValues = isEditProps ? {
+    const initialValues = isEditProps ? innerProps.product : {
-        name: innerProps.product.name,
-        article: innerProps.product.article,
-        barcodes: innerProps.product.barcodes,
-        barcodeTemplate: innerProps.product.barcodeTemplate
-    } : {
         name: '',
         article: '',
         barcodes: []
@@ -44,7 +39,6 @@ const CreateProductModal = ({
     const onCancelClick = () => {
         context.closeContextModal(id);
     }
-
     const onSubmit = (values: BaseProduct) => {
         if (isEditProps) innerProps.onChange({...innerProps.product, ...values})
         if (isCreatingProps) {
@@ -56,26 +50,46 @@ const CreateProductModal = ({
         <>
             <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
                 <Flex gap={rem(10)} direction={"column"}>
-                    <TextInput
+                    <Fieldset legend={"Основные характеристики"}>
-                        placeholder={"Введите название товара"}
+                        <TextInput
-                        label={"Название товара"}
+                            placeholder={"Введите название товара"}
-                        {...form.getInputProps('name')}
+                            label={"Название товара"}
-                    />
+                            {...form.getInputProps('name')}
-                    <TextInput
+                        />
-                        placeholder={"Введите артикул"}
+                        <TextInput
-                        label={"Артикул"}
+                            placeholder={"Введите артикул"}
-                        {...form.getInputProps('article')}
+                            label={"Артикул"}
-                    />
+                            {...form.getInputProps('article')}
-                    <TagsInput
+                        />
-                        placeholder={!form.values.barcodes.length ? "Добавьте штрихкоды к товару" : ""}
+                        <TagsInput
-                        label={"Штрихкоды"}
+                            placeholder={!form.values.barcodes.length ? "Добавьте штрихкоды к товару" : ""}
-                        {...form.getInputProps('barcodes')}
+                            label={"Штрихкоды"}
-                    />
+                            {...form.getInputProps('barcodes')}
-                    <BarcodeTemplateSelect
+                        />
-                        placeholder={"Выберите шаблон штрихкода"}
+                        <BarcodeTemplateSelect
-                        label={"Шаблон штрихкода"}
+                            placeholder={"Выберите шаблон штрихкода"}
-                        {...form.getInputProps('barcodeTemplate')}
+                            label={"Шаблон штрихкода"}
-                    />
+                            {...form.getInputProps('barcodeTemplate')}
+                        />
+                    </Fieldset>
+
+                    <Fieldset legend={"Дополнительные характеристики"}>
+                        <TextInput
+                            placeholder={"Введите бренд"}
+                            label={"Бренд"}
+                            {...form.getInputProps('brand')}
+                        />
+                        <TextInput
+                            placeholder={"Введите состав"}
+                            label={"Состав"}
+                            {...form.getInputProps('composition')}
+                        />
+                        <TextInput
+                            placeholder={"Введите цвет"}
+                            label={"Цвет"}
+                            {...form.getInputProps('color')}
+                        />
+                    </Fieldset>
                     <Flex justify={"flex-end"} mt={rem(5)} gap={rem(10)}>
                         <Button onClick={() => onCancelClick()} variant={"subtle"}>Отменить</Button>
                         {isEditProps ?