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

fix: fixed columns draggables and styles

Browse Source
This commit is contained in:
AlexSserb
2025-08-17 10:38:28 +04:00
parent 4ff663536e
commit c405c802aa
14 changed files with 188 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/deals/hooks/useDealsAndStatusesDnd.ts
View File

@ -1,13 +1,14 @@
import { RefObject, useMemo, useRef, useState } from "react";
import { DragOverEvent, DragStartEvent, Over } from "@dnd-kit/core";
import { SwiperRef } from "swiper/swiper-react";
import { useDebouncedCallback } from "@mantine/hooks";
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import useGetNewRank from "@/app/deals/hooks/useGetNewRank";
import { getStatusId, isStatusId } from "@/app/deals/utils/statusId";
import useIsMobile from "@/hooks/useIsMobile";
import { DealSchema, StatusSchema } from "@/lib/client";
import { sortByLexorank } from "@/utils/lexorank";
import { SwiperRef } from "swiper/swiper-react";
type ReturnType = {
sortedStatuses: StatusSchema[];
@ -26,6 +27,7 @@ const useDealsAndStatusesDnd = (): ReturnType => {
const { statuses, setStatuses, updateStatus } = useStatusesContext();
const { deals, setDeals, updateDeal } = useDealsContext();
const sortedStatuses = useMemo(() => sortByLexorank(statuses), [statuses]);
const isMobile = useIsMobile();
const {
getNewRankForSameStatus,
@ -42,32 +44,50 @@ const useDealsAndStatusesDnd = (): ReturnType => {
return statuses.find(status => status.id === deal.statusId);
};
const swipeSliderDuringDrag = (activeId: number, over: Over) => {
const activeStatusLexorank = getStatusByDealId(
Number(activeId)
)?.lexorank;
let overStatusLexorank: string | undefined;
if (typeof over.id === "string" && isStatusId(over.id)) {
const overStatusId = getStatusId(over.id);
overStatusLexorank = statuses.find(
s => s.id === overStatusId
)?.lexorank;
} else {
overStatusLexorank = getStatusByDealId(Number(over.id))?.lexorank;
}
if (
!activeStatusLexorank ||
!overStatusLexorank ||
!swiperRef.current?.swiper
)
return;
const activeIndex = sortedStatuses.findIndex(
s => s.lexorank === activeStatusLexorank
);
const overIndex = sortedStatuses.findIndex(
s => s.lexorank === overStatusLexorank
);
if (activeIndex > overIndex) {
swiperRef.current.swiper.slidePrev();
return;
}
if (activeIndex < overIndex) {
swiperRef.current.swiper.slideNext();
}
};
const handleDragOver = ({ active, over }: DragOverEvent) => {
if (!over) return;
const activeId = active.id as string | number;
// Only perform swiper navigation for deal drag (not status column drag)
if (typeof activeId !== "string") {
const activeStatusLexorank = getStatusByDealId(Number(activeId))?.lexorank;
let overStatusLexorank: string | undefined;
if (typeof over.id === "string" && isStatusId(over.id)) {
const overStatusId = getStatusId(over.id);
overStatusLexorank = statuses.find(s => s.id === overStatusId)?.lexorank;
} else {
overStatusLexorank = getStatusByDealId(Number(over.id))?.lexorank;
}
if (activeStatusLexorank && overStatusLexorank && swiperRef.current?.swiper) {
const activeIndex = sortedStatuses.findIndex(s => s.lexorank === activeStatusLexorank);
const overIndex = sortedStatuses.findIndex(s => s.lexorank === overStatusLexorank);
if (activeIndex > overIndex) {
swiperRef.current.swiper.slidePrev();
} else if (activeIndex < overIndex) {
swiperRef.current.swiper.slideNext();
}
}
if (isMobile && typeof activeId !== "string") {
swipeSliderDuringDrag(activeId, over);
}
if (typeof activeId === "string" && isStatusId(activeId)) {