92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import React, { FC, ReactNode } from "react";
|
|
import DealCard from "@/app/deals/components/shared/DealCard/DealCard";
|
|
import DealContainer from "@/app/deals/components/shared/DealContainer/DealContainer";
|
|
import StatusColumnHeader from "@/app/deals/components/shared/StatusColumnHeader/StatusColumnHeader";
|
|
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/utils/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,
|
|
swiperRef,
|
|
} = useDealsAndStatusesDnd();
|
|
|
|
return (
|
|
<FunnelDnd
|
|
containers={sortedStatuses}
|
|
items={deals}
|
|
onDragStart={handleDragStart}
|
|
onDragOver={handleDragOver}
|
|
onDragEnd={handleDragEnd}
|
|
swiperRef={swiperRef}
|
|
getContainerId={(status: StatusSchema) => `${status.id}-status`}
|
|
getItemsByContainer={(status: StatusSchema, items: DealSchema[]) =>
|
|
sortByLexorank(
|
|
items.filter(deal => deal.statusId === status.id)
|
|
)
|
|
}
|
|
renderContainer={(
|
|
status: StatusSchema,
|
|
funnelColumnComponent: ReactNode,
|
|
renderDraggable,
|
|
index
|
|
) => (
|
|
<StatusColumnWrapper
|
|
status={status}
|
|
renderHeader={renderDraggable}
|
|
createFormEnabled={index === 0}>
|
|
{funnelColumnComponent}
|
|
</StatusColumnWrapper>
|
|
)}
|
|
renderContainerHeader={status => (
|
|
<StatusColumnHeader
|
|
status={status}
|
|
isDragging={activeStatus?.id === status.id}
|
|
/>
|
|
)}
|
|
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}
|
|
renderHeader={() => (
|
|
<StatusColumnHeader
|
|
status={status}
|
|
isDragging={activeStatus?.id === status.id}
|
|
/>
|
|
)}>
|
|
{children}
|
|
</StatusColumnWrapper>
|
|
)}
|
|
disabledColumns={isMobile}
|
|
isCreatingContainerEnabled={!!selectedBoard}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default Funnel;
|