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

feat: prettier

Browse Source
This commit is contained in:
admin
2024-09-27 04:47:04 +03:00
parent c5f839d9ef
commit de4fe450ab
253 changed files with 11322 additions and 10004 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/BarcodePage/BarcodePage.module.css
View File

@@ -9,4 +9,4 @@
padding: rem(5);
gap: rem(10);
display: flex;
}
}

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

@@ -1,76 +1,74 @@
import styles from './BarcodePage.module.css';
import styles from "./BarcodePage.module.css";
import PageBlock from "../../components/PageBlock/PageBlock.tsx";
import {Button} from "@mantine/core";
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";
import { modals } from "@mantine/modals";
import { BarcodeService, BarcodeTemplateSchema } from "../../client";
import { notifications } from "../../shared/lib/notifications.ts";
const BarcodePage = () => {
const {barcodeTemplates, refetch} = useGetAllBarcodeTemplates();
const { barcodeTemplates, refetch } = useGetAllBarcodeTemplates();
const onCreate = (template: BarcodeTemplateSchema) => {
BarcodeService.createBarcodeTemplate(({
BarcodeService.createBarcodeTemplate({
requestBody: {
...template,
attributeIds: template.attributes.map(attr => attr.id)
}
})).then(async ({ok, message}) => {
notifications.guess(ok, {message});
attributeIds: template.attributes.map(attr => attr.id),
},
}).then(async ({ ok, message }) => {
notifications.guess(ok, { message });
if (!ok) return;
await refetch()
})
}
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});
attributeIds: template.attributes.map(attr => attr.id),
},
}).then(async ({ ok, message }) => {
notifications.guess(ok, { message });
if (!ok) return;
await refetch()
})
}
await refetch();
});
};
const onDelete = (template: BarcodeTemplateSchema) => {
BarcodeService.deleteBarcodeTemplate({
requestBody: {
id: template.id
}
}).then(async ({ok, message}) => {
notifications.guess(ok, {message});
id: template.id,
},
}).then(async ({ ok, message }) => {
notifications.guess(ok, { message });
if (!ok) return;
await refetch()
})
}
await refetch();
});
};
const onCreateClick = () => {
modals.openContextModal({
modal: "barcodeTemplateFormModal",
title: 'Создание шаблона',
title: "Создание шаблона",
withCloseButton: false,
innerProps: {
onCreate: onCreate
}
onCreate: onCreate,
},
});
}
};
return (
<div className={styles['container']}>
<div className={styles["container"]}>
<PageBlock>
<div className={styles['top-panel']}>
<div className={styles["top-panel"]}>
<Button
onClick={() => onCreateClick()}
variant={"default"}
>
variant={"default"}>
Создать шаблон
</Button>
</div>
</PageBlock>
<PageBlock>
<BarcodeTemplatesTable
@@ -80,7 +78,7 @@ const BarcodePage = () => {
/>
</PageBlock>
</div>
)
}
);
};
export default BarcodePage;
export default BarcodePage;

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

@@ -1,40 +1,42 @@
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";
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 || []);
const { value, onChange } = props;
const [innerValue, setInnerValue] = useState<FieldType[]>(
props.value || []
);
const onNameChange = (field: FieldType, newName: string) => {
const newField = {...field, name: newName};
const newFields = innerValue.map(f => f === field ? newField : f);
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);
const newField = { ...field, value: newValue };
const newFields = innerValue.map(f => (f === field ? newField : f));
setInnerValue(newFields);
onChange(newFields);
}
};
const onCreateField = () => {
const newField = {name: "", value: ""};
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 || []);
@@ -43,32 +45,43 @@ const BarcodeTemplateAdditionalFieldTable: FC<Props> = (props: Props) => {
<>
<Flex
direction={"column"}
gap={rem(10)}
>
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/>
<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)}/>
onChange={event =>
event && onNameChange(field, event.target.value)
}
/>
<TextInput
placeholder={"Значение атрибута"}
value={field.value}
onChange={event => event &&
onValueChange(field, event.target.value)}
onChange={event =>
event &&
onValueChange(field, event.target.value)
}
/>
</Flex>
))
}
<Button variant={"default"} onClick={onCreateField}>Создать дополительный атрибут</Button>
))}
<Button
variant={"default"}
onClick={onCreateField}>
Создать дополительный атрибут
</Button>
</Flex>
</>
)
}
);
};
export default BarcodeTemplateAdditionalFieldTable;
export default BarcodeTemplateAdditionalFieldTable;

19
src/pages/BarcodePage/components/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect.tsx
View File

@@ -1,20 +1,23 @@
import ObjectMultiSelect, {
ObjectMultiSelectProps
ObjectMultiSelectProps,
} from "../../../../components/ObjectMultiSelect/ObjectMultiSelect.tsx";
import {BarcodeTemplateAttributeSchema} from "../../../../client";
import {FC} from "react";
import { BarcodeTemplateAttributeSchema } from "../../../../client";
import { FC } from "react";
import useBarcodeTemplateAttributesList from "../../hooks/useBarcodeTemplateAttributesList.tsx";
type Props = Omit<ObjectMultiSelectProps<BarcodeTemplateAttributeSchema>, 'data'>
type Props = Omit<
ObjectMultiSelectProps<BarcodeTemplateAttributeSchema>,
"data"
>;
const BarcodeTemplateAttributeMultiselect: FC<Props> = (props: Props) => {
const {barcodeTemplateAttributes} = useBarcodeTemplateAttributesList();
const { barcodeTemplateAttributes } = useBarcodeTemplateAttributesList();
return (
<ObjectMultiSelect
data={barcodeTemplateAttributes}
{...props}
/>
)
}
);
};
export default BarcodeTemplateAttributeMultiselect;
export default BarcodeTemplateAttributeMultiselect;

16
src/pages/BarcodePage/components/BarcodeTemplateSizeSelect/BarcodeTemplateSizeSelect.tsx
View File

@@ -1,16 +1,18 @@
import {BarcodeTemplateSizeSchema} from "../../../../client";
import ObjectSelect, {ObjectSelectProps} from "../../../../components/ObjectSelect/ObjectSelect.tsx";
import { BarcodeTemplateSizeSchema } from "../../../../client";
import ObjectSelect, {
ObjectSelectProps,
} from "../../../../components/ObjectSelect/ObjectSelect.tsx";
import useBarcodeTemplateSizesList from "../../hooks/useBarcodeTemplateSizesList.tsx";
type Props = Omit<ObjectSelectProps<BarcodeTemplateSizeSchema>, 'data'>
type Props = Omit<ObjectSelectProps<BarcodeTemplateSizeSchema>, "data">;
const BarcodeTemplateSizeSelect = (props: Props) => {
const {barcodeTemplateSizes} = useBarcodeTemplateSizesList();
const { barcodeTemplateSizes } = useBarcodeTemplateSizesList();
return (
<ObjectSelect
data={barcodeTemplateSizes}
{...props}
/>
)
}
export default BarcodeTemplateSizeSelect;
);
};
export default BarcodeTemplateSizeSelect;

91
src/pages/BarcodePage/components/BarcodeTemplatesTable/BarcodeTemplatesTable.tsx
View File

@@ -1,62 +1,69 @@
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";
import {MRT_TableOptions} from "mantine-react-table";
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";
import { MRT_TableOptions } from "mantine-react-table";
const BarcodeTemplatesTable: FC<CRUDTableProps<BarcodeTemplateSchema>> = ({
items,
onDelete,
onChange
}) => {
items,
onDelete,
onChange,
}) => {
const columns = useBarcodeTemplatesTableColumns();
const onEditClick = (template: BarcodeTemplateSchema) => {
if (!onChange) return;
modals.openContextModal({
modal: "barcodeTemplateFormModal",
title: 'Создание шаблона',
title: "Создание шаблона",
withCloseButton: false,
innerProps: {
onChange: (newTemplate) => onChange(newTemplate),
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>
)
} as MRT_TableOptions<BarcodeTemplateSchema>}
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>
),
} as MRT_TableOptions<BarcodeTemplateSchema>
}
/>
</>
)
}
);
};
export default BarcodeTemplatesTable;
export default BarcodeTemplatesTable;

60
src/pages/BarcodePage/components/BarcodeTemplatesTable/columns.tsx
View File

@@ -1,27 +1,37 @@
import {BarcodeTemplateSchema} from "../../../../client";
import {MRT_ColumnDef} from "mantine-react-table";
import {useMemo} from "react";
import {IconCheck, IconX} from "@tabler/icons-react";
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>[]>(() => [
{
accessorKey: "name",
header: "Название",
},
{
accessorKey: "attributes",
header: "Атрибуты",
Cell: ({row}) => <>{row.original.attributes.map(attr => attr.name).join(', ')}</>
},
{
accessorKey: "size.name",
header: "Размер",
},
{
accessorKey: "isDefault",
header: "По умолчанию",
Cell: ({row}) => row.original.isDefault ? <IconCheck/> : <IconX/>
}
], []);
}
return useMemo<MRT_ColumnDef<BarcodeTemplateSchema>[]>(
() => [
{
accessorKey: "name",
header: "Название",
},
{
accessorKey: "attributes",
header: "Атрибуты",
Cell: ({ row }) => (
<>
{row.original.attributes
.map(attr => attr.name)
.join(", ")}
</>
),
},
{
accessorKey: "size.name",
header: "Размер",
},
{
accessorKey: "isDefault",
header: "По умолчанию",
Cell: ({ row }) =>
row.original.isDefault ? <IconCheck /> : <IconX />,
},
],
[]
);
};

19
src/pages/BarcodePage/hooks/useBarcodeTemplateAttributesList.tsx
View File

@@ -1,14 +1,15 @@
import {BarcodeService} from "../../../client";
import {useQuery} from "@tanstack/react-query";
import { BarcodeService } from "../../../client";
import { useQuery } from "@tanstack/react-query";
const useBarcodeTemplateAttributesList = () => {
const {isLoading, data, error, refetch} = useQuery({
queryKey: ['getAllBarcodeTemplateAttributes'],
queryFn: BarcodeService.getAllBarcodeTemplateAttributes
const { isLoading, data, error, refetch } = useQuery({
queryKey: ["getAllBarcodeTemplateAttributes"],
queryFn: BarcodeService.getAllBarcodeTemplateAttributes,
});
const barcodeTemplateAttributes = isLoading || error || !data ? [] : data.attributes;
const barcodeTemplateAttributes =
isLoading || error || !data ? [] : data.attributes;
return {barcodeTemplateAttributes, refetch}
}
export default useBarcodeTemplateAttributesList;
return { barcodeTemplateAttributes, refetch };
};
export default useBarcodeTemplateAttributesList;

16
src/pages/BarcodePage/hooks/useBarcodeTemplateSizesList.tsx
View File

@@ -1,14 +1,14 @@
import {BarcodeService} from "../../../client";
import {useQuery} from "@tanstack/react-query";
import { BarcodeService } from "../../../client";
import { useQuery } from "@tanstack/react-query";
const useBarcodeTemplateSizesList = () => {
const {isLoading, data, error, refetch} = useQuery({
queryKey: ['getAllBarcodeTemplateSizes'],
queryFn: BarcodeService.getAllBarcodeTemplateSizes
const { isLoading, data, error, refetch } = useQuery({
queryKey: ["getAllBarcodeTemplateSizes"],
queryFn: BarcodeService.getAllBarcodeTemplateSizes,
});
const barcodeTemplateSizes = isLoading || error || !data ? [] : data.sizes;
return {barcodeTemplateSizes, refetch}
}
export default useBarcodeTemplateSizesList;
return { barcodeTemplateSizes, refetch };
};
export default useBarcodeTemplateSizesList;

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

@@ -1,85 +1,108 @@
import BaseFormModal, {CreateEditFormProps} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
import BaseFormModal, {
CreateEditFormProps,
} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
import {
BarcodeTemplateAdditionalAttributeSchema,
BarcodeTemplateAttributeSchema,
BarcodeTemplateSchema
BarcodeTemplateSchema,
} from "../../../../client";
import {ContextModalProps} from "@mantine/modals";
import {useForm} from "@mantine/form";
import {Checkbox, Fieldset, Flex, rem, Textarea, TextInput} from "@mantine/core";
import BarcodeTemplateAttributeMultiselect
from "../../components/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect.tsx";
import BarcodeTemplateAdditionalFieldTable
from "../../components/BarcodeTemplateAdditionalFieldTable/BarcodeTemplateAdditionalFieldTable.tsx";
import { ContextModalProps } from "@mantine/modals";
import { useForm } from "@mantine/form";
import {
Checkbox,
Fieldset,
Flex,
rem,
Textarea,
TextInput,
} from "@mantine/core";
import BarcodeTemplateAttributeMultiselect from "../../components/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect.tsx";
import BarcodeTemplateAdditionalFieldTable from "../../components/BarcodeTemplateAdditionalFieldTable/BarcodeTemplateAdditionalFieldTable.tsx";
import BarcodeTemplateSizeSelect from "../../components/BarcodeTemplateSizeSelect/BarcodeTemplateSizeSelect.tsx";
type Props = CreateEditFormProps<BarcodeTemplateSchema>
type Props = CreateEditFormProps<BarcodeTemplateSchema>;
const BarcodeTemplateFormModal = ({
context,
id,
innerProps
}: ContextModalProps<Props>) => {
const isEditing = 'onChange' in innerProps;
const initialValues = isEditing ? innerProps.element : {
name: "",
isDefault: false,
attributes: [] as Array<BarcodeTemplateAttributeSchema>,
additionalAttributes: [] as Array<BarcodeTemplateAdditionalAttributeSchema>
} as Partial<BarcodeTemplateSchema>;
context,
id,
innerProps,
}: ContextModalProps<Props>) => {
const isEditing = "onChange" in innerProps;
const initialValues = isEditing
? innerProps.element
: ({
name: "",
isDefault: false,
attributes: [] as Array<BarcodeTemplateAttributeSchema>,
additionalAttributes:
[] as Array<BarcodeTemplateAdditionalAttributeSchema>,
} as Partial<BarcodeTemplateSchema>);
const form = useForm<Partial<BarcodeTemplateSchema>>({
initialValues: initialValues,
validate: {
attributes: (attributes: Array<BarcodeTemplateAttributeSchema> | undefined) => attributes ? null : "Необходимо добавить хотя бы один атрибут",
name: (name: string | undefined) => name && name.trim() !== '' ? null : "Необходимо ввести название шаблона",
}
})
attributes: (
attributes: Array<BarcodeTemplateAttributeSchema> | undefined
) =>
attributes ? null : "Необходимо добавить хотя бы один атрибут",
name: (name: string | undefined) =>
name && name.trim() !== ""
? null
: "Необходимо ввести название шаблона",
},
});
return (
<BaseFormModal
{...innerProps}
closeOnSubmit
form={form}
onClose={() => context.closeContextModal(id)}
>
onClose={() => context.closeContextModal(id)}>
<BaseFormModal.Body>
<>
<Fieldset legend={"Шаблон штрихкода"}>
<Flex direction={"column"} gap={rem(10)}>
<Flex
direction={"column"}
gap={rem(10)}>
<TextInput
label={'Название'}
label={"Название"}
placeholder={"Введите название шаблона"}
{...form.getInputProps('name')}
{...form.getInputProps("name")}
/>
<BarcodeTemplateSizeSelect
label={"Размер"}
placeholder={"Выберите размер шаблона"}
{...form.getInputProps('size')}
{...form.getInputProps("size")}
/>
<BarcodeTemplateAttributeMultiselect
label={"Стандартные атрибуты"}
placeholder={!form.values.attributes?.length ? "Выберите атрибуты" : undefined}
{...form.getInputProps('attributes')}
placeholder={
!form.values.attributes?.length
? "Выберите атрибуты"
: undefined
}
{...form.getInputProps("attributes")}
/>
<BarcodeTemplateAdditionalFieldTable
{...form.getInputProps('additionalAttributes')}
{...form.getInputProps("additionalAttributes")}
/>
<Checkbox
label={"Использовать как стандартный шаблон"}
checked={form.getInputProps('isDefault').value as boolean}
{...form.getInputProps('isDefault')}/>
checked={
form.getInputProps("isDefault")
.value as boolean
}
{...form.getInputProps("isDefault")}
/>
<Textarea
label={"Дополнительное поле"}
placeholder={"Введите дополнительное поле"}
{...form.getInputProps('additionalField')}
{...form.getInputProps("additionalField")}
/>
</Flex>
</Fieldset>
</>
</BaseFormModal.Body>
</BaseFormModal>
)
}
);
};
export default BarcodeTemplateFormModal;
export default BarcodeTemplateFormModal;