113 lines
4.3 KiB
TypeScript
113 lines
4.3 KiB
TypeScript
import { BaseTable } from "../../../../../../components/BaseTable/BaseTable.tsx";
|
||
import useAttributesTableColumns from "./hooks/attributesTableColumns.tsx";
|
||
import useAttributesList from "../../../../../../hooks/useAttributesList.tsx";
|
||
import { ActionIcon, Flex, Group, Stack, Text, Tooltip } from "@mantine/core";
|
||
import InlineButton from "../../../../../../components/InlineButton/InlineButton.tsx";
|
||
import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
|
||
import { modals } from "@mantine/modals";
|
||
import { AttributeSchema, AttributeService } from "../../../../../../client";
|
||
import { notifications } from "../../../../../../shared/lib/notifications.ts";
|
||
import { MRT_TableOptions } from "mantine-react-table";
|
||
|
||
const AttributesTab = () => {
|
||
const columns = useAttributesTableColumns();
|
||
const { objects: attributes, refetch: refetchAttributes } = useAttributesList();
|
||
|
||
const onCreateAttributeClick = () => {
|
||
modals.openContextModal({
|
||
modal: "attributeModal",
|
||
title: "Создание атрибута",
|
||
withCloseButton: false,
|
||
innerProps: {
|
||
refetchAttributes,
|
||
},
|
||
});
|
||
};
|
||
|
||
const onEditAttributeClick = (attribute: AttributeSchema) => {
|
||
modals.openContextModal({
|
||
modal: "attributeModal",
|
||
title: "Редактирование атрибута",
|
||
withCloseButton: false,
|
||
innerProps: {
|
||
refetchAttributes,
|
||
attribute,
|
||
},
|
||
});
|
||
};
|
||
|
||
const deleteAttribute = (attribute: AttributeSchema) => {
|
||
AttributeService.delete({
|
||
attributeId: attribute.id,
|
||
})
|
||
.then(({ ok, message }) => {
|
||
if (!ok) {
|
||
notifications.error({ message });
|
||
}
|
||
refetchAttributes();
|
||
})
|
||
.catch(err => console.log(err));
|
||
};
|
||
|
||
const onDeleteAttributeClick = (attribute: AttributeSchema) => {
|
||
modals.openConfirmModal({
|
||
title: "Удаление атрибута",
|
||
children: (
|
||
<Text>
|
||
Вы уверены, что хотите удалить атрибут "{attribute.label}"?
|
||
</Text>
|
||
),
|
||
labels: { confirm: "Да", cancel: "Нет" },
|
||
confirmProps: { color: "red" },
|
||
onConfirm: () => deleteAttribute(attribute),
|
||
});
|
||
};
|
||
|
||
return (
|
||
<Stack>
|
||
<Group>
|
||
<InlineButton onClick={onCreateAttributeClick}>
|
||
<IconPlus />
|
||
Добавить атрибут
|
||
</InlineButton>
|
||
</Group>
|
||
<BaseTable
|
||
data={attributes}
|
||
columns={columns}
|
||
|
||
restProps={
|
||
{
|
||
enableSorting: false,
|
||
enableColumnActions: false,
|
||
enableBottomToolbar: false,
|
||
enableRowActions: true,
|
||
enableRowVirtualization: true,
|
||
mantineTableContainerProps: { style: { maxHeight: "86vh" } },
|
||
|
||
renderRowActions: ({ row }) => (
|
||
<Flex gap="md">
|
||
<Tooltip label="Редактировать">
|
||
<ActionIcon
|
||
onClick={() => onEditAttributeClick(row.original)}
|
||
variant={"default"}>
|
||
<IconEdit />
|
||
</ActionIcon>
|
||
</Tooltip>
|
||
<Tooltip label="Удалить">
|
||
<ActionIcon
|
||
onClick={() => onDeleteAttributeClick(row.original)}
|
||
variant={"default"}>
|
||
<IconTrash />
|
||
</ActionIcon>
|
||
</Tooltip>
|
||
</Flex>
|
||
),
|
||
} as MRT_TableOptions<AttributeSchema>
|
||
}
|
||
/>
|
||
</Stack>
|
||
);
|
||
};
|
||
|
||
export default AttributesTab;
|