fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: displaying and sorting groups of deals

Browse Source
This commit is contained in:
AlexSserb
2025-10-17 11:52:19 +04:00
parent fc176ec9e4
commit 0fe41656f8
26 changed files with 1310 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/deals/components/shared/Funnel/Funnel.tsx
View File

@ -2,7 +2,7 @@
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 DealsGroup from "@/app/deals/components/shared/DealsGroup/DealsGroup";
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";
@ -11,37 +11,36 @@ 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 GroupWithDealsSchema from "@/types/GroupWithDealsSchema";
import { sortByLexorank } from "@/utils/lexorank/sort";
const Funnel: FC = () => {
const { selectedBoard } = useBoardsContext();
const { deals } = useDealsContext();
const { dealsWithoutGroup, groupsWithDeals } = useDealsContext();
const isMobile = useIsMobile();
const {
sortedStatuses,
handleDragStart,
handleDragOver,
handleDragEnd,
activeStatus,
activeDeal,
swiperRef,
} = useDealsAndStatusesDnd();
const { sortedStatuses, handleDragOver, handleDragEnd, swiperRef } =
useDealsAndStatusesDnd();
return (
<FunnelDnd
<FunnelDnd<StatusSchema, DealSchema, GroupWithDealsSchema>
containers={sortedStatuses}
items={deals}
onDragStart={handleDragStart}
itemsAndGroups={sortByLexorank([
...dealsWithoutGroup,
...groupsWithDeals,
])}
onDragOver={handleDragOver}
onDragEnd={handleDragEnd}
swiperRef={swiperRef}
getContainerId={(status: StatusSchema) => `${status.id}-status`}
getItemsByContainer={(status: StatusSchema, items: DealSchema[]) =>
sortByLexorank(
items.filter(deal => deal.status.id === status.id)
)
getItemsByContainer={(status: StatusSchema) =>
sortByLexorank([
...dealsWithoutGroup.filter(
deal => deal.status.id === status.id
),
...groupsWithDeals.filter(
group => group.items[0].status.id === status.id
),
])
}
renderContainer={(
status: StatusSchema,
@ -59,25 +58,28 @@ const Funnel: FC = () => {
renderContainerHeader={status => (
<StatusColumnHeader
status={status}
isDragging={activeStatus?.id === status.id}
isDragging={false}
/>
)}
renderItem={(deal: DealSchema) => (
<DealContainer
<DealCard
key={deal.id}
deal={deal}
/>
)}
activeContainer={activeStatus}
activeItem={activeDeal}
renderItemOverlay={(deal: DealSchema) => <DealCard deal={deal} />}
renderGroup={(group: GroupWithDealsSchema) => (
<DealsGroup
key={`${group.id}group`}
group={group}
/>
)}
renderContainerOverlay={(status: StatusSchema, children) => (
<StatusColumnWrapper
status={status}
renderHeader={() => (
<StatusColumnHeader
status={status}
isDragging={activeStatus?.id === status.id}
isDragging
/>
)}>
{children}