feat: a few shipping products in box

src/pages/CardsPage/tabs/ShippingTab/hooks/shippingTableColumns.tsx

@@ -1,44 +1,89 @@
-import { useMemo } from "react";
-import { MRT_ColumnDef, MRT_RowData } from "mantine-react-table";
+import { DataTableColumn } from "mantine-datatable";
+import { ShippingProductSchema, ShippingService } from "../../../../../client";
+import { ActionIcon, Flex, Tooltip } from "@mantine/core";
+import { IconEdit, IconTrash } from "@tabler/icons-react";
+import { notifications } from "../../../../../shared/lib/notifications.ts";
+import { modals } from "@mantine/modals";
+import useUpdateCard from "./useUpdateCard.tsx";
+import { useCardPageContext } from "../../../contexts/CardPageContext.tsx";
 
-type Props = {
-    isBox: boolean;
-}
+const useShippingTableColumns = () => {
+    const { update } = useUpdateCard();
+    const { selectedCard: card } = useCardPageContext();
 
-const useShippingTableColumns = <T extends MRT_RowData>({ isBox }: Props) => {
-    const hideBoxColumns = ["id"];
+    const onDeleteClick = (shippingProduct: ShippingProductSchema) => {
+        ShippingService.deleteShippingProduct({
+            shippingProductId: shippingProduct.id,
+        })
+            .then(({ ok, message }) => {
+                notifications.guess(ok, { message });
+                update();
+            })
+            .catch(err => console.log(err));
+    };
 
-    return useMemo<MRT_ColumnDef<T>[]>(
-        () => [
-            {
-                header: "ID",
-                accessorKey: "id",
-                Cell: ({ row }) => `K${row.original.id}`,
+    const onEditClick = (shippingProduct: ShippingProductSchema) => {
+        if (!card) return;
+        modals.openContextModal({
+            modal: "shippingProductModal",
+            title: "Редактирование товара",
+            withCloseButton: false,
+            innerProps: {
+                card,
+                updateOnSubmit: update,
+                shippingData: {
+                    shippingProductId: shippingProduct.id,
+                    productId: shippingProduct.product.id,
+                    quantity: shippingProduct.quantity,
+                },
             },
-            {
-                header: "Название",
-                accessorKey: "product.name",
-                Cell: ({ row }) => row.original.product?.name ?? "-",
-            },
-            {
-                header: "Артикул",
-                accessorKey: "product.article",
-                Cell: ({ row }) => row.original.product?.article ?? "-",
-            },
-            {
-                header: "Размер",
-                accessorKey: "product.size",
-                Cell: ({ row }) => row.original.product?.size ?? "-",
-            },
-            {
-                header: "Количество",
-                accessorKey: "quantity",
-            },
-        ],
-        [],
-    ).filter(
-        columnDef => isBox || !hideBoxColumns.includes(columnDef.accessorKey || ""),
-    );
+        });
+    };
+
+    return [
+        {
+            title: "Название",
+            accessor: "product.name",
+            render: shippingProduct => shippingProduct.product?.name ?? "-",
+        },
+        {
+            title: "Артикул",
+            accessor: "product.article",
+            render: shippingProduct => shippingProduct.product?.article ?? "-",
+        },
+        {
+            title: "Размер",
+            accessor: "product.size",
+            render: shippingProduct => shippingProduct.product?.size ?? "-",
+        },
+        {
+            title: "Количество",
+            accessor: "quantity",
+        },
+        {
+            accessor: "actions",
+            title: "",
+            width: "0%",
+            render: shippingProduct => (
+                <Flex gap="md">
+                    <Tooltip label="Удалить">
+                        <ActionIcon
+                            onClick={() => onDeleteClick(shippingProduct)}
+                            variant={"default"}>
+                            <IconTrash />
+                        </ActionIcon>
+                    </Tooltip>
+                    <Tooltip label="Редактировать">
+                        <ActionIcon
+                            onClick={() => onEditClick(shippingProduct)}
+                            variant={"default"}>
+                            <IconEdit />
+                        </ActionIcon>
+                    </Tooltip>
+                </Flex>
+            ),
+        },
+    ] as DataTableColumn<ShippingProductSchema>[];
 };
 
 export default useShippingTableColumns;

src/pages/CardsPage/tabs/ShippingTab/hooks/useShipping.tsx

@@ -1,14 +1,20 @@
 import { useCardPageContext } from "../../../contexts/CardPageContext.tsx";
-import { CreateBoxInCardSchema, CreateBoxInPalletSchema, ShippingService } from "../../../../../client";
+import {
+    CreateBoxInCardSchema,
+    CreateBoxInPalletSchema, PalletSchema,
+    ShippingService,
+} from "../../../../../client";
 import { notifications } from "../../../../../shared/lib/notifications.ts";
 import { modals } from "@mantine/modals";
 import { Text } from "@mantine/core";
 import useUpdateCard from "./useUpdateCard.tsx";
+import { useState } from "react";
+import { ShippingProductParentData } from "../types/ShippingProductData.tsx";
 
 const useShipping = () => {
     const { selectedCard: card } = useCardPageContext();
     const { update } = useUpdateCard();
-    const palletIds: string[] = [];
+    const [palletIds, setPalletIds] = useState<number[]>([]);
 
     const onCreatePalletClick = () => {
         if (!card) return;
@@ -34,19 +40,24 @@ const useShipping = () => {
             .catch(err => console.log(err));
     };
 
-    const onDeletePalletClick = (palletId: number) => {
+    const onDeletePalletClick = (pallet: PalletSchema) => {
         if (!card) return;
+        if (pallet.shippingProducts.length === 0 && pallet.boxes.length === 0) {
+            onDeletePallet(pallet.id);
+            return;
+        }
+
         modals.openConfirmModal({
             title: "Удаление паллета",
             children: <Text size="sm">Вы уверены что хотите удалить паллет?</Text>,
             labels: { confirm: "Да", cancel: "Нет" },
             confirmProps: { color: "red" },
-            onConfirm: () => onDeletePallet(palletId),
+            onConfirm: () => onDeletePallet(pallet.id),
         });
     };
 
     const onCreateBox = (data: CreateBoxInPalletSchema | CreateBoxInCardSchema) => {
-        ShippingService.updateBox({
+        ShippingService.createBox({
             requestBody: {
                 data,
             },
@@ -66,18 +77,20 @@ const useShipping = () => {
         onCreateBox({ palletId });
     };
 
-    const onCreateShippingProduct = (palletId: number) => {
+    const onCreateShippingProduct = ({ palletId, boxId }: ShippingProductParentData) => {
         if (!card) return;
+        const postfix = palletId ? "на паллет" : "в короб";
+
         modals.openContextModal({
             modal: "shippingProductModal",
-            title: "Добавление товара на паллет",
+            title: "Добавление товара " + postfix,
             withCloseButton: false,
             innerProps: {
                 card,
                 updateOnSubmit: update,
-                isBox: false,
                 shippingData: {
                     palletId,
+                    boxId,
                     productId: null,
                     quantity: null,
                 },
@@ -92,6 +105,7 @@ const useShipping = () => {
         onCreatePalletClick,
         onDeletePalletClick,
         palletIds,
+        setPalletIds,
     };
 };