tmp
This commit is contained in:
@@ -1,24 +1,83 @@
|
||||
import styles from './BarcodePage.module.css';
|
||||
import PageBlock from "../../components/PageBlock/PageBlock.tsx";
|
||||
import {Button} from "@mantine/core";
|
||||
import BarcodeTemplatesTable from "./components/BarcodeTemplatesTable/BarcodeTemplatesTable.tsx";
|
||||
import useGetAllBarcodeTemplates from "../../api/barcode/useGetAllBarcodeTemplates.tsx";
|
||||
import {modals} from "@mantine/modals";
|
||||
import {BarcodeService, BarcodeTemplateSchema} from "../../client";
|
||||
import {notifications} from "../../shared/lib/notifications.ts";
|
||||
|
||||
const BarcodePage = () => {
|
||||
const {barcodeTemplates, refetch} = useGetAllBarcodeTemplates();
|
||||
|
||||
const onCreate = (template: BarcodeTemplateSchema) => {
|
||||
BarcodeService.createBarcodeTemplate(({
|
||||
requestBody: {
|
||||
...template,
|
||||
attributeIds: template.attributes.map(attr => attr.id)
|
||||
}
|
||||
})).then(async ({ok, message}) => {
|
||||
notifications.guess(ok, {message});
|
||||
if (!ok) return;
|
||||
await refetch()
|
||||
})
|
||||
}
|
||||
|
||||
const onChange = (template: BarcodeTemplateSchema) => {
|
||||
BarcodeService.updateBarcodeTemplate({
|
||||
requestBody: {
|
||||
...template,
|
||||
attributeIds: template.attributes.map(attr => attr.id)
|
||||
}
|
||||
}).then(async ({ok, message}) => {
|
||||
notifications.guess(ok, {message});
|
||||
if (!ok) return;
|
||||
await refetch()
|
||||
})
|
||||
}
|
||||
|
||||
const onDelete = (template: BarcodeTemplateSchema) => {
|
||||
BarcodeService.deleteBarcodeTemplate({
|
||||
requestBody: {
|
||||
id: template.id
|
||||
}
|
||||
}).then(async ({ok, message}) => {
|
||||
notifications.guess(ok, {message});
|
||||
if (!ok) return;
|
||||
await refetch()
|
||||
})
|
||||
}
|
||||
|
||||
const onCreateClick = () => {
|
||||
modals.openContextModal({
|
||||
modal: "barcodeTemplateFormModal",
|
||||
title: 'Создание шаблона',
|
||||
withCloseButton: false,
|
||||
innerProps: {
|
||||
onCreate: onCreate
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['container']}>
|
||||
<PageBlock>
|
||||
<div className={styles['top-panel']}>
|
||||
<Button
|
||||
onClick={() => onCreateClick()}
|
||||
variant={"default"}
|
||||
>
|
||||
Создать клиента
|
||||
Создать шаблон
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</PageBlock>
|
||||
<PageBlock>
|
||||
<>dsad</>
|
||||
<BarcodeTemplatesTable
|
||||
items={barcodeTemplates}
|
||||
onChange={onChange}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
</PageBlock>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import {GetInputProps} from "@mantine/form/lib/types";
|
||||
import {FC} from "react";
|
||||
|
||||
type Props = GetInputProps<Array<{ name:string,value:string }>>
|
||||
const BarcodeTemplateAdditionalFieldTable:FC<Props> = (props:Props) => {
|
||||
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
|
||||
import {modals} from "@mantine/modals";
|
||||
import {ActionIcon, Flex, Tooltip} from "@mantine/core";
|
||||
import {IconEdit, IconTrash} from "@tabler/icons-react";
|
||||
import {MRT_TableOptions} from "mantine-react-table";
|
||||
|
||||
const BarcodeTemplatesTable: FC<CRUDTableProps<BarcodeTemplateSchema>> = ({
|
||||
items,
|
||||
@@ -39,8 +40,7 @@ const BarcodeTemplatesTable: FC<CRUDTableProps<BarcodeTemplateSchema>> = ({
|
||||
<Tooltip label="Редактировать">
|
||||
<ActionIcon
|
||||
onClick={() => onEditClick(row.original)}
|
||||
variant={"default"}
|
||||
>
|
||||
variant={"default"}>
|
||||
<IconEdit/>
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
@@ -53,7 +53,7 @@ const BarcodeTemplatesTable: FC<CRUDTableProps<BarcodeTemplateSchema>> = ({
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
)
|
||||
}}
|
||||
} as MRT_TableOptions<BarcodeTemplateSchema>}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
@@ -1,6 +1,7 @@
|
||||
import {BarcodeTemplateSchema} from "../../../../client";
|
||||
import {MRT_ColumnDef} from "mantine-react-table";
|
||||
import {useMemo} from "react";
|
||||
import {IconCheck, IconX} from "@tabler/icons-react";
|
||||
|
||||
export const useBarcodeTemplatesTableColumns = () => {
|
||||
return useMemo<MRT_ColumnDef<BarcodeTemplateSchema>[]>(() => [
|
||||
@@ -8,17 +9,19 @@ export const useBarcodeTemplatesTableColumns = () => {
|
||||
accessorKey: "name",
|
||||
header: "Название",
|
||||
},
|
||||
{
|
||||
accessorKey: "isDefault",
|
||||
header: "По умолчанию",
|
||||
},
|
||||
{
|
||||
accessorKey: "attributes",
|
||||
header: "Атрибуты",
|
||||
Cell: ({row}) => <>{row.original.attributes.map(attr => attr.name).join(', ')}</>
|
||||
},
|
||||
{
|
||||
header: "Размер",
|
||||
Cell: ({row}) => <>{row.original.width}x{row.original.height}</>
|
||||
},
|
||||
{
|
||||
accessorKey: "isDefault",
|
||||
header: "По умолчанию",
|
||||
Cell: ({row}) => row.original.isDefault ? <IconCheck/> : <IconX/>
|
||||
}
|
||||
], []);
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import {useForm} from "@mantine/form";
|
||||
import {Checkbox, Fieldset, Flex, NumberInput, rem, TextInput} from "@mantine/core";
|
||||
import {IconX} from "@tabler/icons-react";
|
||||
import BarcodeTemplateAttributeMultiselect
|
||||
from "../../component/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect.tsx";
|
||||
from "../../components/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect.tsx";
|
||||
|
||||
type Props = CreateEditFormProps<BarcodeTemplateSchema>
|
||||
const BarcodeTemplateFormModal = ({
|
||||
@@ -30,7 +30,7 @@ const BarcodeTemplateFormModal = ({
|
||||
name: (name: string | undefined) => name && name.trim() !== '' ? null : "Необходимо ввести название шаблона",
|
||||
}
|
||||
})
|
||||
console.log(form.values);
|
||||
|
||||
return (
|
||||
<BaseFormModal
|
||||
{...innerProps}
|
||||
@@ -44,40 +44,33 @@ const BarcodeTemplateFormModal = ({
|
||||
<Fieldset legend={"Шаблон штрихкода"}>
|
||||
<Flex direction={"column"} gap={rem(10)}>
|
||||
<TextInput
|
||||
label={"Название"}
|
||||
label={'Название'}
|
||||
placeholder={"Введите название шаблона"}
|
||||
{...form.getInputProps('name')}
|
||||
/>
|
||||
<Fieldset
|
||||
styles={{
|
||||
legend: {
|
||||
marginBottom: 0,
|
||||
fontWeight: 500
|
||||
}
|
||||
}}
|
||||
variant={"unstyled"}
|
||||
legend={"Размер"}>
|
||||
<Flex gap={10} align={"center"}>
|
||||
<NumberInput
|
||||
hideControls
|
||||
placeholder={"Ширина"}
|
||||
{...form.getInputProps('width')}
|
||||
/>
|
||||
<IconX/>
|
||||
<NumberInput
|
||||
hideControls
|
||||
placeholder={"Высота"}
|
||||
{...form.getInputProps('height')}
|
||||
/>
|
||||
</Flex>
|
||||
</Fieldset>
|
||||
<Flex gap={10} align={"center"}>
|
||||
<NumberInput
|
||||
hideControls
|
||||
label={'Ширина'}
|
||||
placeholder={"Ширина в мм"}
|
||||
{...form.getInputProps('width')}
|
||||
/>
|
||||
<IconX/>
|
||||
<NumberInput
|
||||
hideControls
|
||||
label={'Высота'}
|
||||
placeholder={"Высота в мм"}
|
||||
{...form.getInputProps('height')}
|
||||
/>
|
||||
</Flex>
|
||||
<BarcodeTemplateAttributeMultiselect
|
||||
label={"Атрибуты"}
|
||||
placeholder={"Выберите атрибуты"}
|
||||
placeholder={!form.values.attributes?.length ? "Выберите атрибуты" : undefined}
|
||||
{...form.getInputProps('attributes')}
|
||||
/>
|
||||
<Checkbox
|
||||
label={"Использовать как стандартный шаблон"}
|
||||
checked={form.getInputProps('isDefault').value as boolean}
|
||||
{...form.getInputProps('isDefault')}/>
|
||||
</Flex>
|
||||
|
||||
|
||||
@@ -24,6 +24,10 @@ export const useClientsTableColumns = () => {
|
||||
{
|
||||
accessorKey: "details.inn",
|
||||
header: "ИНН"
|
||||
},
|
||||
{
|
||||
accessorKey:"barcodeTemplate.name",
|
||||
header:"Шаблон штрихкодов"
|
||||
}
|
||||
], []);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import {Fieldset, TextInput} from "@mantine/core";
|
||||
import {useForm} from "@mantine/form";
|
||||
import {ClientSchema} from "../../../../client";
|
||||
import BaseFormModal, {CreateEditFormProps} from "../BaseFormModal/BaseFormModal.tsx";
|
||||
import BarcodeTemplateSelect from "../../../../components/Selects/BarcodeTemplateSelect/BarcodeTemplateSelect.tsx";
|
||||
|
||||
|
||||
type Props = CreateEditFormProps<ClientSchema>;
|
||||
@@ -22,7 +23,8 @@ const ClientFormModal = ({
|
||||
phoneNumber: innerProps.element.details?.phoneNumber,
|
||||
email: innerProps.element.details?.email,
|
||||
inn: innerProps.element.details?.inn
|
||||
}
|
||||
},
|
||||
barcodeTemplate: innerProps.element.barcodeTemplate
|
||||
} : {
|
||||
id: -1,
|
||||
name: '',
|
||||
@@ -89,6 +91,13 @@ const ClientFormModal = ({
|
||||
{...form.getInputProps('details.inn')}
|
||||
/>
|
||||
</Fieldset>
|
||||
<Fieldset legend={'Настройки'}>
|
||||
<BarcodeTemplateSelect
|
||||
label={'Шаблон штрихкодов'}
|
||||
placeholder={'Выберите шаблон штрихкодов'}
|
||||
{...form.getInputProps('barcodeTemplate')}
|
||||
/>
|
||||
</Fieldset>
|
||||
</>
|
||||
|
||||
</BaseFormModal.Body>
|
||||
|
||||
Reference in New Issue
Block a user