Files
Fulfillment-Frontend/src/pages/LeadsPage/tabs/ShippingTab/components/BoxesTable.tsx

88 lines
3.1 KiB
TypeScript

import useShippingTableColumns from "../hooks/shippingTableColumns.tsx";
import { BaseTable } from "../../../../../components/BaseTable/BaseTable.tsx";
import { BoxSchema, ShippingService } from "../../../../../client";
import { ActionIcon, Flex, Tooltip } from "@mantine/core";
import { IconEdit, IconTrash } from "@tabler/icons-react";
import { MRT_TableOptions } from "mantine-react-table";
import { modals } from "@mantine/modals";
import { useDealPageContext } from "../../../contexts/DealPageContext.tsx";
import useUpdateDeal from "../hooks/useUpdateDeal.tsx";
import { notifications } from "../../../../../shared/lib/notifications.ts";
type Props = {
items: BoxSchema[];
}
const BoxesTable = ({ items }: Props) => {
const columns = useShippingTableColumns<BoxSchema>();
const { update } = useUpdateDeal();
const { selectedDeal: deal } = useDealPageContext();
const onDeleteClick = (box: BoxSchema) => {
ShippingService.deleteBox({
boxId: box.id,
})
.then(({ ok, message }) => {
notifications.guess(ok, { message });
if (ok) update();
})
.catch(err => console.log(err));
};
const onEditClick = (box: BoxSchema) => {
if (!deal) return;
modals.openContextModal({
modal: "shippingProductModal",
title: "Редактирование короба",
withCloseButton: false,
innerProps: {
deal,
updateOnSubmit: update,
isBox: true,
shippingData: {
boxId: box.id,
productId: box.product.id,
quantity: box.quantity,
},
},
});
};
return (
<BaseTable
data={items}
columns={columns}
restProps={
{
enableSorting: false,
enableColumnActions: false,
enableRowActions: true,
enableRowNumbers: true,
positionActionsColumn: "last",
renderRowActions: ({ row }) => (
<Flex gap="md">
<Tooltip label="Удалить">
<ActionIcon
onClick={() => onDeleteClick(row.original)}
variant={"default"}>
<IconTrash />
</ActionIcon>
</Tooltip>
<Tooltip label="Редактировать">
<ActionIcon
onClick={() => onEditClick(row.original)}
variant={"default"}>
<IconEdit />
</ActionIcon>
</Tooltip>
</Flex>
),
} as MRT_TableOptions<BoxSchema>
}
/>
);
};
export default BoxesTable;