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

4
src/app/deals/components/shared/CreateDealButton/CreateDealButton.module.css
View File

@ -1,11 +1,13 @@
.create-button {
cursor: pointer;
min-height: max-content;
border: 1px dashed;
@mixin light {
background-color: var(--color-light-white-blue);
border-color: lightblue;
}
@mixin dark {
background-color: var(--mantine-color-dark-7);
border-color: var(--mantine-color-dark-5);
}
}

16
src/app/deals/components/shared/DealCard/DealCard.module.css
View File

@ -1,11 +1,27 @@
.container {
padding: 0;
border: 1px dashed;
@mixin light {
background-color: var(--color-light-white-blue);
border-color: lightblue;
}
@mixin dark {
background-color: var(--mantine-color-dark-7);
border-color: var(--mantine-color-dark-5);
}
}
.container-in-group {
padding: 0;
border: 1px dashed;
@mixin light {
background-color: var(--color-light-aqua);
border-color: lightblue;
}
@mixin dark {
background-color: var(--mantine-color-dark-6);
border-color: var(--mantine-color-dark-5);
}
}

7
src/app/deals/components/shared/DealCard/DealCard.tsx
View File

@ -8,9 +8,10 @@ import styles from "./DealCard.module.css";
type Props = {
deal: DealSchema;
isInGroup?: boolean;
};
const DealCard = ({ deal }: Props) => {
const DealCard = ({ deal, isInGroup = false }: Props) => {
const { selectedProject, modulesSet } = useProjectsContext();
const { dealsCrud, refetchDeals } = useDealsContext();
const { openDrawer } = useDrawersContext();
@ -31,7 +32,9 @@ const DealCard = ({ deal }: Props) => {
return (
<Card
onClick={onClick}
className={styles.container}>
className={
isInGroup ? styles["container-in-group"] : styles.container
}>
<Group
justify={"space-between"}
wrap={"nowrap"}

25
src/app/deals/components/shared/DealContainer/DealContainer.tsx
View File

@ -1,25 +0,0 @@
import React, { FC, useMemo } from "react";
import { Box } from "@mantine/core";
import DealCard from "@/app/deals/components/shared/DealCard/DealCard";
import SortableItem from "@/components/dnd/SortableItem";
import { DealSchema } from "@/lib/client";
type Props = {
deal: DealSchema;
};
const DealContainer: FC<Props> = ({ deal }) => {
const dealBody = useMemo(() => <DealCard deal={deal} />, [deal]);
return (
<Box>
<SortableItem
dragHandleStyle={{ cursor: "pointer" }}
id={deal.id}
renderItem={() => dealBody}
/>
</Box>
);
};
export default DealContainer;

12
src/app/deals/components/shared/DealsGroup/DealsGroup.module.css Normal file
View File

@ -0,0 +1,12 @@
.group-container {
border: 1px dashed;
@mixin light {
background-color: var(--color-light-white-blue);
border-color: lightblue;
}
@mixin dark {
background-color: var(--mantine-color-dark-7);
border-color: var(--mantine-color-dark-5);
}
}

30
src/app/deals/components/shared/DealsGroup/DealsGroup.tsx Normal file
View File

@ -0,0 +1,30 @@
import { FC } from "react";
import { Stack, Text } from "@mantine/core";
import DealCard from "@/app/deals/components/shared/DealCard/DealCard";
import GroupWithDealsSchema from "@/types/GroupWithDealsSchema";
import styles from "./DealsGroup.module.css";
type Props = {
group: GroupWithDealsSchema;
};
const DealsGroup: FC<Props> = ({ group }) => {
return (
<Stack
className={styles["group-container"]}
gap={"xs"}
bdrs={"lg"}
p={"xs"}>
<Text mx={"xs"}>{group.name}</Text>
{group.items.map(deal => (
<DealCard
deal={deal}
isInGroup
key={deal.id}
/>
))}
</Stack>
);
};
export default DealsGroup;

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}