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

feat: raw slider for deals on mobile

Browse Source
This commit is contained in:
AlexSserb
2025-08-10 19:29:02 +04:00
parent 54cf883a3c
commit 7815f99fa4
12 changed files with 271 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/deals/components/DealContainer/DealContainer.tsx
View File

@ -6,16 +6,14 @@ import { DealSchema } from "@/lib/client";
type Props = {
deal: DealSchema;
disabled?: boolean;
};
const DealContainer: FC<Props> = ({ deal, disabled = false }) => {
const DealContainer: FC<Props> = ({ deal }) => {
const dealBody = useMemo(() => <DealCard deal={deal} />, [deal]);
return (
<Box>
<SortableItem
disabled={disabled}
dragHandleStyle={{ cursor: "pointer" }}
id={deal.id}
renderItem={() => dealBody}

106
src/app/deals/components/Funnel/Funnel.tsx
View File

@ -25,6 +25,59 @@ const Funnel: FC = () => {
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"}
@ -33,58 +86,7 @@ const Funnel: FC = () => {
align={"start"}
wrap={"nowrap"}
gap={"sm"}>
<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}
disabled={isMobile}
/>
)}
activeContainer={activeStatus}
activeItem={activeDeal}
renderItemOverlay={(deal: DealSchema) => (
<DealCard deal={deal} />
)}
renderContainerOverlay={(
status: StatusSchema,
children
) => (
<StatusColumnWrapper
status={status}
isDragging>
{children}
</StatusColumnWrapper>
)}
disabled={isMobile}
/>
<CreateStatusButton />
{renderFunnelDnd()}
</Group>
</ScrollArea>
);

2
src/app/layout.tsx
View File

@ -1,5 +1,7 @@
import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { ReactNode } from "react";
import {
ColorSchemeScript,