feat: projects and boards

2025-02-07 20:07:10 +04:00
parent 58d397ed0b
commit 580552bd47
185 changed files with 3352 additions and 1284 deletions
--- a/src/pages/DealsPage/tabs/ShippingTab/components/ShippingTree.tsx
+++ b/src/pages/DealsPage/tabs/ShippingTab/components/ShippingTree.tsx
@@ -0,0 +1,151 @@
+import { useDealPageContext } from "../../../contexts/DealPageContext.tsx";
+import { Accordion, ActionIcon, Button, Center, Group, rem, Stack, Title, Tooltip } from "@mantine/core";
+import { BoxSchema, PalletSchema, ShippingProductSchema } from "../../../../../client";
+import ShippingProductsTable from "./ShippingProductsTable.tsx";
+import BoxesTable from "./BoxesTable.tsx";
+import { IconBox, IconPlus, IconSpace, IconTrash } from "@tabler/icons-react";
+import useShipping from "../hooks/useShipping.tsx";
+
+const ShippingTree = () => {
+    const { selectedDeal: deal } = useDealPageContext();
+
+    const {
+        onCreateBoxInPallet,
+        onCreateShippingProduct,
+        onDeletePalletClick,
+        palletIds,
+    } = useShipping();
+
+    const sortById = (data?: PalletSchema[] | BoxSchema[] | ShippingProductSchema[]) => {
+        return data?.sort((a, b) => a.id - b.id);
+    };
+
+    const getPallets = () => {
+        const sortedPallets = sortById(deal?.pallets) as PalletSchema[];
+        const pallets = sortedPallets?.map((pallet => {
+            palletIds.push(pallet.id.toString());
+            return (
+                <Accordion.Item key={pallet.id} value={pallet.id.toString()}>
+                    <Center>
+                        <Accordion.Control icon={<IconSpace />}>
+                            Паллет - П{pallet.id}
+                        </Accordion.Control>
+                        {removePalletButton(pallet.id)}
+                    </Center>
+                    <Accordion.Panel>
+                        {getPalletContent(pallet)}
+                    </Accordion.Panel>
+                </Accordion.Item>
+            );
+        })) ?? [];
+
+        if (deal?.boxes && deal?.boxes.length > 0) {
+            const boxes = deal?.boxes.sort((b1, b2) => (b1.id - b2.id));
+            const itemValue = "noPallets";
+            const boxesWithoutPallet = (
+                <Accordion.Item key={-1} value={itemValue}>
+                    <Accordion.Control icon={<IconBox />}>
+                        Короба без паллетов
+                    </Accordion.Control>
+                    <Accordion.Panel>
+                        <BoxesTable items={boxes} />
+                    </Accordion.Panel>
+                </Accordion.Item>
+            );
+            pallets.unshift(boxesWithoutPallet);
+            palletIds.push(itemValue);
+        }
+
+        return pallets;
+    };
+
+    const removePalletButton = (palletId: number) => {
+        return (
+            <Tooltip label="Удалить паллет">
+                <ActionIcon
+                    variant={"default"}
+                    onClick={() => onDeletePalletClick(palletId)}
+                    mx={"md"}
+                >
+                    <IconTrash />
+                </ActionIcon>
+            </Tooltip>
+        );
+    };
+
+    const createBoxOrShippingProductButton = (palletId: number, isBox: boolean) => {
+        const createButtonLabel = isBox ? "Добавить короб" : "Добавить товар";
+
+        return (
+            <Button
+                variant={"default"}
+                onClick={() => {
+                    if (isBox) {
+                        onCreateBoxInPallet(palletId);
+                    } else {
+                        onCreateShippingProduct(palletId);
+                    }
+                }}
+            >
+                <Group gap={rem(5)}>
+                    <IconPlus />
+                    {createButtonLabel}
+                </Group>
+            </Button>
+        );
+    };
+
+    const getPalletContent = (pallet: PalletSchema) => {
+        const isEmpty = pallet.boxes.length === 0 && pallet.shippingProducts.length === 0;
+        const isBox = pallet.boxes.length > 0;
+        const title = isEmpty ? "Пустой" : isBox ? "Короба" : "Товары";
+
+        let palletButtons;
+        if (isEmpty) {
+            palletButtons = [
+                createBoxOrShippingProductButton(pallet.id, true),
+                createBoxOrShippingProductButton(pallet.id, false),
+            ];
+        } else {
+            palletButtons = [
+                createBoxOrShippingProductButton(pallet.id, isBox),
+            ];
+        }
+
+        const boxes = sortById(pallet.boxes) as BoxSchema[];
+        const shippingProducts = sortById(pallet.shippingProducts) as ShippingProductSchema[];
+
+        let table;
+        if (!isEmpty) {
+            if (isBox) {
+                table = (<BoxesTable items={boxes} />);
+            } else {
+                table = (<ShippingProductsTable items={shippingProducts} />);
+            }
+        }
+
+        return (
+            <Stack gap={rem(5)}>
+                <Group justify={"space-between"}>
+                    <Title order={6}>{title}</Title>
+                    <Group gap={rem(10)}>
+                        {...palletButtons}
+                    </Group>
+                </Group>
+                {table}
+            </Stack>
+        );
+    };
+
+    return (
+        <Accordion
+            multiple={true}
+            defaultValue={palletIds}
+            bd={"solid 1px gray"}
+        >
+            {getPallets()}
+        </Accordion>
+    );
+};
+
+export default ShippingTree;