feat: attrs on product

This commit is contained in:
2024-05-10 16:17:58 +03:00
parent d82b23fbe9
commit 09a6ed0c4f
3 changed files with 60 additions and 28 deletions

View File

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

View File

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

View File

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