feat: division between mobile and desktop components, boards for mobile

2025-08-13 09:55:27 +04:00
parent 1a98facd72
commit 838c9640a1
26 changed files with 175 additions and 89 deletions
--- a/src/app/deals/components/shared/Funnel/Funnel.tsx
+++ b/src/app/deals/components/shared/Funnel/Funnel.tsx
@ -0,0 +1,96 @@
+"use client";
+
+import React, { FC, ReactNode } from "react";
+import { Group, ScrollArea } from "@mantine/core";
+import CreateStatusButton from "@/app/deals/components/shared/CreateStatusButton/CreateStatusButton";
+import DealCard from "@/app/deals/components/shared/DealCard/DealCard";
+import DealContainer from "@/app/deals/components/shared/DealContainer/DealContainer";
+import StatusColumnWrapper from "@/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper";
+import { useDealsContext } from "@/app/deals/contexts/DealsContext";
+import useDealsAndStatusesDnd from "@/app/deals/hooks/useDealsAndStatusesDnd";
+import FunnelDnd from "@/components/dnd/FunnelDnd/FunnelDnd";
+import useIsMobile from "@/hooks/useIsMobile";
+import { DealSchema, StatusSchema } from "@/lib/client";
+import { sortByLexorank } from "@/utils/lexorank";
+
+const Funnel: FC = () => {
+    const { deals } = useDealsContext();
+    const isMobile = useIsMobile();
+
+    const {
+        sortedStatuses,
+        handleDragStart,
+        handleDragOver,
+        handleDragEnd,
+        activeStatus,
+        activeDeal,
+    } = useDealsAndStatusesDnd();
+
+    const renderFunnelDnd = () => (
+        <>
+            <FunnelDnd
+                containers={sortedStatuses}
+                items={deals}
+                onDragStart={handleDragStart}
+                onDragOver={handleDragOver}
+                onDragEnd={handleDragEnd}
+                getContainerId={(status: StatusSchema) => `${status.id}-status`}
+                getItemsByContainer={(
+                    status: StatusSchema,
+                    items: DealSchema[]
+                ) =>
+                    sortByLexorank(
+                        items.filter(deal => deal.statusId === status.id)
+                    )
+                }
+                renderContainer={(
+                    status: StatusSchema,
+                    funnelColumnComponent: ReactNode
+                ) => (
+                    <StatusColumnWrapper
+                        status={status}
+                        isDragging={activeStatus?.id === status.id}>
+                        {funnelColumnComponent}
+                    </StatusColumnWrapper>
+                )}
+                renderItem={(deal: DealSchema) => (
+                    <DealContainer
+                        key={deal.id}
+                        deal={deal}
+                    />
+                )}
+                activeContainer={activeStatus}
+                activeItem={activeDeal}
+                renderItemOverlay={(deal: DealSchema) => (
+                    <DealCard deal={deal} />
+                )}
+                renderContainerOverlay={(status: StatusSchema, children) => (
+                    <StatusColumnWrapper
+                        status={status}
+                        isDragging>
+                        {children}
+                    </StatusColumnWrapper>
+                )}
+                disabledColumns={isMobile}
+            />
+            {!isMobile && <CreateStatusButton />}
+        </>
+    );
+
+    if (isMobile) return renderFunnelDnd();
+
+    return (
+        <ScrollArea
+            offsetScrollbars={"x"}
+            scrollbarSize={"0.5rem"}>
+            <Group
+                align={"start"}
+                wrap={"nowrap"}
+                gap={"sm"}>
+                {renderFunnelDnd()}
+            </Group>
+        </ScrollArea>
+    );
+};
+
+export default Funnel;