93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
"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 { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
|
|
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 { selectedBoard } = useBoardsContext();
|
|
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}
|
|
isCreatingContainerEnabled={!!selectedBoard}
|
|
/>
|
|
);
|
|
|
|
if (isMobile) return renderFunnelDnd();
|
|
|
|
return (
|
|
<ScrollArea
|
|
offsetScrollbars={"x"}
|
|
scrollbarSize={"0.5rem"}>
|
|
<Group
|
|
align={"start"}
|
|
wrap={"nowrap"}
|
|
gap={"xs"}>
|
|
{renderFunnelDnd()}
|
|
{selectedBoard && <CreateStatusButton />}
|
|
</Group>
|
|
</ScrollArea>
|
|
);
|
|
};
|
|
|
|
export default Funnel;
|