feat: temp barcode templates
This commit is contained in:
12
src/pages/BarcodePage/BarcodePage.module.css
Normal file
12
src/pages/BarcodePage/BarcodePage.module.css
Normal file
@@ -0,0 +1,12 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
gap: rem(10);
|
||||
}
|
||||
|
||||
.top-panel {
|
||||
padding: rem(5);
|
||||
gap: rem(10);
|
||||
display: flex;
|
||||
}
|
||||
27
src/pages/BarcodePage/BarcodePage.tsx
Normal file
27
src/pages/BarcodePage/BarcodePage.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import styles from './BarcodePage.module.css';
|
||||
import PageBlock from "../../components/PageBlock/PageBlock.tsx";
|
||||
import {Button} from "@mantine/core";
|
||||
|
||||
const BarcodePage = () => {
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles['container']}>
|
||||
<PageBlock>
|
||||
<div className={styles['top-panel']}>
|
||||
<Button
|
||||
variant={"default"}
|
||||
>
|
||||
Создать клиента
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</PageBlock>
|
||||
<PageBlock>
|
||||
<>dsad</>
|
||||
</PageBlock>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BarcodePage;
|
||||
@@ -0,0 +1,20 @@
|
||||
import ObjectMultiSelect, {
|
||||
ObjectMultiSelectProps
|
||||
} from "../../../../components/ObjectMultiSelect/ObjectMultiSelect.tsx";
|
||||
import {BarcodeTemplateAttributeSchema} from "../../../../client";
|
||||
import {FC} from "react";
|
||||
import useBarcodeTemplateAttributesList from "../../hooks/useBarcodeTemplateAttributesList.tsx";
|
||||
|
||||
type Props = Omit<ObjectMultiSelectProps<BarcodeTemplateAttributeSchema>, 'data'>
|
||||
|
||||
const BarcodeTemplateAttributeMultiselect: FC<Props> = (props: Props) => {
|
||||
const {barcodeTemplateAttributes} = useBarcodeTemplateAttributesList();
|
||||
return (
|
||||
<ObjectMultiSelect
|
||||
data={barcodeTemplateAttributes}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default BarcodeTemplateAttributeMultiselect;
|
||||
@@ -0,0 +1,62 @@
|
||||
import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
|
||||
import {BarcodeTemplateSchema} from "../../../../client";
|
||||
import {FC} from "react";
|
||||
import {useBarcodeTemplatesTableColumns} from "./columns.tsx";
|
||||
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";
|
||||
|
||||
const BarcodeTemplatesTable: FC<CRUDTableProps<BarcodeTemplateSchema>> = ({
|
||||
items,
|
||||
onDelete,
|
||||
onChange
|
||||
}) => {
|
||||
const columns = useBarcodeTemplatesTableColumns();
|
||||
const onEditClick = (template: BarcodeTemplateSchema) => {
|
||||
if (!onChange) return;
|
||||
modals.openContextModal({
|
||||
modal: "barcodeTemplateFormModal",
|
||||
title: 'Создание шаблона',
|
||||
withCloseButton: false,
|
||||
innerProps: {
|
||||
onChange: (newTemplate) => onChange(newTemplate),
|
||||
element: template,
|
||||
}
|
||||
});
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<BaseTable
|
||||
striped
|
||||
data={items}
|
||||
columns={columns}
|
||||
restProps={{
|
||||
enableColumnActions: false,
|
||||
enableRowActions: true,
|
||||
renderRowActions: ({row}) => (
|
||||
<Flex gap="md">
|
||||
<Tooltip label="Редактировать">
|
||||
<ActionIcon
|
||||
onClick={() => onEditClick(row.original)}
|
||||
variant={"default"}
|
||||
>
|
||||
<IconEdit/>
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label="Удалить">
|
||||
<ActionIcon onClick={() => {
|
||||
if (onDelete) onDelete(row.original);
|
||||
}} variant={"default"}>
|
||||
<IconTrash/>
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default BarcodeTemplatesTable;
|
||||
@@ -0,0 +1,24 @@
|
||||
import {BarcodeTemplateSchema} from "../../../../client";
|
||||
import {MRT_ColumnDef} from "mantine-react-table";
|
||||
import {useMemo} from "react";
|
||||
|
||||
export const useBarcodeTemplatesTableColumns = () => {
|
||||
return useMemo<MRT_ColumnDef<BarcodeTemplateSchema>[]>(() => [
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "Название",
|
||||
},
|
||||
{
|
||||
accessorKey: "isDefault",
|
||||
header: "По умолчанию",
|
||||
},
|
||||
{
|
||||
accessorKey: "attributes",
|
||||
header: "Атрибуты",
|
||||
},
|
||||
{
|
||||
header: "Размер",
|
||||
Cell: ({row}) => <>{row.original.width}x{row.original.height}</>
|
||||
}
|
||||
], []);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import {BarcodeService} from "../../../client";
|
||||
import {useQuery} from "@tanstack/react-query";
|
||||
|
||||
const useBarcodeTemplateAttributesList = () => {
|
||||
const {isLoading, data, error, refetch} = useQuery({
|
||||
queryKey: ['getAllBarcodeTemplateAttributes'],
|
||||
queryFn: BarcodeService.getAllBarcodeTemplateAttributes
|
||||
});
|
||||
|
||||
const barcodeTemplateAttributes = isLoading || error || !data ? [] : data.attributes;
|
||||
|
||||
return {barcodeTemplateAttributes, refetch}
|
||||
}
|
||||
export default useBarcodeTemplateAttributesList;
|
||||
@@ -0,0 +1,91 @@
|
||||
import BaseFormModal, {CreateEditFormProps} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
|
||||
import {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 "../../component/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect.tsx";
|
||||
|
||||
type Props = CreateEditFormProps<BarcodeTemplateSchema>
|
||||
const BarcodeTemplateFormModal = ({
|
||||
context,
|
||||
id,
|
||||
innerProps
|
||||
}: ContextModalProps<Props>) => {
|
||||
const isEditing = 'onChange' in innerProps;
|
||||
const initialValues = isEditing ? innerProps.element : {
|
||||
name: "",
|
||||
width: undefined,
|
||||
height: undefined,
|
||||
isDefault: false,
|
||||
attributes: [] as Array<BarcodeTemplateAttributeSchema>
|
||||
} as Partial<BarcodeTemplateSchema>;
|
||||
const form = useForm<Partial<BarcodeTemplateSchema>>({
|
||||
initialValues: initialValues,
|
||||
validate: {
|
||||
width: (width: number | undefined) => width && width > 0 ? null : "Ширина должна быть больше 0",
|
||||
height: (height: number | undefined) => height && height > 0 ? null : "Высота должна быть больше 0",
|
||||
attributes: (attributes: Array<BarcodeTemplateAttributeSchema> | undefined) => attributes && attributes.length > 0 ? null : "Необходимо добавить хотя бы один атрибут",
|
||||
name: (name: string | undefined) => name && name.trim() !== '' ? null : "Необходимо ввести название шаблона",
|
||||
}
|
||||
})
|
||||
console.log(form.values);
|
||||
return (
|
||||
<BaseFormModal
|
||||
{...innerProps}
|
||||
closeOnSubmit
|
||||
form={form}
|
||||
|
||||
onClose={() => context.closeContextModal(id)}
|
||||
>
|
||||
<BaseFormModal.Body>
|
||||
<>
|
||||
<Fieldset legend={"Шаблон штрихкода"}>
|
||||
<Flex direction={"column"} gap={rem(10)}>
|
||||
<TextInput
|
||||
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>
|
||||
<BarcodeTemplateAttributeMultiselect
|
||||
label={"Атрибуты"}
|
||||
placeholder={"Выберите атрибуты"}
|
||||
{...form.getInputProps('attributes')}
|
||||
/>
|
||||
<Checkbox
|
||||
label={"Использовать как стандартный шаблон"}
|
||||
{...form.getInputProps('isDefault')}/>
|
||||
</Flex>
|
||||
|
||||
</Fieldset>
|
||||
</>
|
||||
</BaseFormModal.Body>
|
||||
</BaseFormModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default BarcodeTemplateFormModal;
|
||||
Reference in New Issue
Block a user