fakz9/Fulfillment-Frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: temp barcode templates

Browse Source
This commit is contained in:
fakz9
2024-05-09 03:33:36 +03:00
parent 8ff16e687f
commit 05ef4afce8
12 changed files with 122 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/client/index.ts
View File

@@ -9,6 +9,7 @@ export type { OpenAPIConfig } from './core/OpenAPI';
export type { AuthLoginRequest } from './models/AuthLoginRequest';
export type { AuthLoginResponse } from './models/AuthLoginResponse';
export type { BarcodeTemplateAdditionalAttributeSchema } from './models/BarcodeTemplateAdditionalAttributeSchema';
export type { BarcodeTemplateAttributeSchema } from './models/BarcodeTemplateAttributeSchema';
export type { BarcodeTemplateCreateRequest } from './models/BarcodeTemplateCreateRequest';
export type { BarcodeTemplateCreateResponse } from './models/BarcodeTemplateCreateResponse';

9
src/client/models/BarcodeTemplateAdditionalAttributeSchema.ts Normal file
View File

@@ -0,0 +1,9 @@
/* generated using openapi-typescript-codegen -- do no edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
export type BarcodeTemplateAdditionalAttributeSchema = {
name: string;
value: string;
};

2
src/client/models/BarcodeTemplateCreateRequest.ts
View File

@@ -2,11 +2,13 @@
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { BarcodeTemplateAdditionalAttributeSchema } from './BarcodeTemplateAdditionalAttributeSchema';
export type BarcodeTemplateCreateRequest = {
name: string;
isDefault: boolean;
width: number;
height: number;
additionalAttributes: Array<BarcodeTemplateAdditionalAttributeSchema>;
attributeIds: Array<number>;
};

2
src/client/models/BarcodeTemplateSchema.ts
View File

@@ -2,12 +2,14 @@
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { BarcodeTemplateAdditionalAttributeSchema } from './BarcodeTemplateAdditionalAttributeSchema';
import type { BarcodeTemplateAttributeSchema } from './BarcodeTemplateAttributeSchema';
export type BarcodeTemplateSchema = {
name: string;
isDefault: boolean;
width: number;
height: number;
additionalAttributes: Array<BarcodeTemplateAdditionalAttributeSchema>;
id: number;
attributes: Array<BarcodeTemplateAttributeSchema>;
};

2
src/client/models/BarcodeTemplateUpdateRequest.ts
View File

@@ -2,11 +2,13 @@
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { BarcodeTemplateAdditionalAttributeSchema } from './BarcodeTemplateAdditionalAttributeSchema';
export type BarcodeTemplateUpdateRequest = {
name: string;
isDefault: boolean;
width: number;
height: number;
additionalAttributes: Array<BarcodeTemplateAdditionalAttributeSchema>;
id: number;
attributeIds: Array<number>;
};

2
src/client/models/ProductCreateRequest.ts
View File

@@ -2,10 +2,12 @@
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { BarcodeTemplateSchema } from './BarcodeTemplateSchema';
export type ProductCreateRequest = {
name: string;
article: string;
clientId: number;
barcodes: Array<string>;
barcodeTemplate?: (BarcodeTemplateSchema | null);
};

2
src/client/models/ProductSchema.ts
View File

@@ -2,11 +2,13 @@
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { BarcodeTemplateSchema } from './BarcodeTemplateSchema';
export type ProductSchema = {
id: number;
name: string;
article: string;
clientId: number;
barcodes: Array<string>;
barcodeTemplate?: (BarcodeTemplateSchema | null);
};

78
src/pages/BarcodePage/components/BarcodeTemplateAdditionalFieldTable/BarcodeTemplateAdditionalFieldTable.tsx
View File

@@ -1,7 +1,75 @@
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) => {
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 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;

18
src/pages/BarcodePage/modals/BarcodeTemplateFormModal/BarcodeTemplateFormModal.tsx
View File

@@ -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}

8
src/pages/ProductsPage/components/ProductsTable/columns.tsx
View File

@@ -34,7 +34,13 @@ export const useProductsTableColumns = () => {
</List>
)
}
},
enableSorting: false,
},
{
accessorKey: "barcodeTemplate.name",
header: "Шаблон штрихкода",
enableSorting: false,
}
], []);

9
src/pages/ProductsPage/modals/CreateProductModal/CreateProductModal.tsx
View File

@@ -3,6 +3,7 @@ import {Button, Flex, rem, TagsInput, TextInput} from "@mantine/core";
import {useForm} from "@mantine/form";
import {BaseProduct, CreateProductRequest} from "../../types.ts";
import {ProductSchema} from "../../../../client";
import BarcodeTemplateSelect from "../../../../components/Selects/BarcodeTemplateSelect/BarcodeTemplateSelect.tsx";
type CreateProps = {
clientId: number;
@@ -26,7 +27,8 @@ const CreateProductModal = ({
const initialValues = isEditProps ? {
name: innerProps.product.name,
article: innerProps.product.article,
barcodes: innerProps.product.barcodes
barcodes: innerProps.product.barcodes,
barcodeTemplate: innerProps.product.barcodeTemplate
} : {
name: '',
article: '',
@@ -69,6 +71,11 @@ const CreateProductModal = ({
label={"Штрихкоды"}
{...form.getInputProps('barcodes')}
/>
<BarcodeTemplateSelect
placeholder={"Выберите шаблон штрихкода"}
label={"Шаблон штрихкода"}
{...form.getInputProps('barcodeTemplate')}
/>
<Flex justify={"flex-end"} mt={rem(5)} gap={rem(10)}>
<Button onClick={() => onCancelClick()} variant={"subtle"}>Отменить</Button>
{isEditProps ?

18
src/routes/test.lazy.tsx
View File

@@ -1,6 +1,4 @@
import {createLazyFileRoute} from "@tanstack/react-router";
import {Fieldset, Flex, NumberInput} from "@mantine/core";
import {IconCross, IconX} from "@tabler/icons-react";
import {useEffect} from "react";
import {openContextModal} from "@mantine/modals";
@@ -22,22 +20,6 @@ function TestPage() {
}, []);
return (
<>
<Fieldset legend={"Размеры"}>
<Flex gap={10} align={"center"}>
<NumberInput
hideControls
placeholder={"Ширина"}
/>
<IconX/>
<NumberInput
hideControls
placeholder={"Высота"}
/>
</Flex>
</Fieldset>
</>
);