fix: fixed drawers sorting

This commit is contained in:
2025-08-22 17:32:01 +04:00
parent b5753ed3a2
commit b105510c23
4 changed files with 33 additions and 23 deletions

View File

@ -2,15 +2,16 @@ import React, { FC } from "react";
import { Box, Group, Text } from "@mantine/core"; import { Box, Group, Text } from "@mantine/core";
import { modals } from "@mantine/modals"; import { modals } from "@mantine/modals";
import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu"; import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu";
import { BoardSchema, UpdateBoardSchema } from "@/lib/client"; import { useProjectBoardsContext } from "@/app/deals/drawers/ProjectBoardsEditorDrawer/contexts/ProjectBoardsContext";
import { BoardSchema } from "@/lib/client";
type Props = { type Props = {
board: BoardSchema; board: BoardSchema;
onUpdateBoard: (boardId: number, board: UpdateBoardSchema) => void;
onDeleteBoard: (board: BoardSchema) => void;
}; };
const BoardMobile: FC<Props> = ({ board, onUpdateBoard, onDeleteBoard }) => { const BoardMobile: FC<Props> = ({ board }) => {
const { onUpdateBoard, onDeleteBoard } = useProjectBoardsContext();
const startEditing = () => { const startEditing = () => {
modals.openContextModal({ modals.openContextModal({
modal: "enterNameModal", modal: "enterNameModal",

View File

@ -12,7 +12,7 @@ type Props = {
}; };
const BoardsDrawerBody: FC<Props> = ({ onClose }) => { const BoardsDrawerBody: FC<Props> = ({ onClose }) => {
const { boards, onUpdateBoard, onDeleteBoard, project, onCreateBoard } = const { boards, onUpdateBoard, project, onCreateBoard } =
useProjectBoardsContext(); useProjectBoardsContext();
const renderDraggable = () => ( const renderDraggable = () => (
@ -28,11 +28,7 @@ const BoardsDrawerBody: FC<Props> = ({ onClose }) => {
return ( return (
<Group wrap={"nowrap"}> <Group wrap={"nowrap"}>
{renderDraggable && renderDraggable(board)} {renderDraggable && renderDraggable(board)}
<BoardMobile <BoardMobile board={board} />
board={board}
onDeleteBoard={onDeleteBoard}
onUpdateBoard={onUpdateBoard}
/>
</Group> </Group>
); );
}; };

View File

@ -8,7 +8,10 @@ import React, {
useState, useState,
} from "react"; } from "react";
import { Active, DndContext, DragEndEvent } from "@dnd-kit/core"; import { Active, DndContext, DragEndEvent } from "@dnd-kit/core";
import { restrictToHorizontalAxis } from "@dnd-kit/modifiers"; import {
restrictToHorizontalAxis,
restrictToVerticalAxis,
} from "@dnd-kit/modifiers";
import { SortableContext } from "@dnd-kit/sortable"; import { SortableContext } from "@dnd-kit/sortable";
import { LexoRank } from "lexorank"; import { LexoRank } from "lexorank";
import { FreeMode, Mousewheel, Scrollbar } from "swiper/modules"; import { FreeMode, Mousewheel, Scrollbar } from "swiper/modules";
@ -179,9 +182,13 @@ const SortableDnd = <T extends BaseItem>({
</Flex> </Flex>
); );
const restrictModifier = vertical
? restrictToVerticalAxis
: restrictToHorizontalAxis;
return ( return (
<DndContext <DndContext
modifiers={[restrictToHorizontalAxis]} modifiers={[restrictModifier]}
sensors={sensors} sensors={sensors}
onDragStart={({ active }) => setActive(active)} onDragStart={({ active }) => setActive(active)}
onDragEnd={onDragEndLocal} onDragEnd={onDragEndLocal}

View File

@ -15,7 +15,11 @@ import {
updateStatusMutation, updateStatusMutation,
} from "@/lib/client/@tanstack/react-query.gen"; } from "@/lib/client/@tanstack/react-query.gen";
import { notifications } from "@/lib/notifications"; import { notifications } from "@/lib/notifications";
import { getMaxByLexorank, getNewLexorank } from "@/utils/lexorank"; import {
getMaxByLexorank,
getNewLexorank,
sortByLexorank,
} from "@/utils/lexorank";
type Props = { type Props = {
statuses: StatusSchema[]; statuses: StatusSchema[];
@ -87,6 +91,7 @@ export const useStatusesOperations = ({
}); });
setStatuses(statuses => setStatuses(statuses =>
sortByLexorank(
statuses.map(oldStatus => statuses.map(oldStatus =>
oldStatus.id !== statusId oldStatus.id !== statusId
? oldStatus ? oldStatus
@ -98,6 +103,7 @@ export const useStatusesOperations = ({
: oldStatus.lexorank, : oldStatus.lexorank,
} }
) )
)
); );
}; };