feat: cards, attributes and modules

src/pages/CardsPage/tabs/ShippingTab/components/BoxesTable.tsx

@@ -0,0 +1,86 @@
+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 { useCardPageContext } from "../../../contexts/CardPageContext.tsx";
+import useUpdateCard from "../hooks/useUpdateCard.tsx";
+import { notifications } from "../../../../../shared/lib/notifications.ts";
+
+
+type Props = {
+    items: BoxSchema[];
+}
+
+const BoxesTable = ({ items }: Props) => {
+    const columns = useShippingTableColumns<BoxSchema>({ isBox: true });
+    const { update } = useUpdateCard();
+    const { selectedCard: card } = useCardPageContext();
+
+    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 (!card) return;
+        modals.openContextModal({
+            modal: "shippingProductModal",
+            title: "Редактирование короба",
+            withCloseButton: false,
+            innerProps: {
+                card,
+                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,
+                    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;