fix: fixed drawers sorting
This commit is contained in:
@ -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",
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -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}
|
||||||
|
|||||||
@ -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,16 +91,18 @@ export const useStatusesOperations = ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
setStatuses(statuses =>
|
setStatuses(statuses =>
|
||||||
statuses.map(oldStatus =>
|
sortByLexorank(
|
||||||
oldStatus.id !== statusId
|
statuses.map(oldStatus =>
|
||||||
? oldStatus
|
oldStatus.id !== statusId
|
||||||
: {
|
? oldStatus
|
||||||
id: oldStatus.id,
|
: {
|
||||||
name: status.name ? status.name : oldStatus.name,
|
id: oldStatus.id,
|
||||||
lexorank: status.lexorank
|
name: status.name ? status.name : oldStatus.name,
|
||||||
? status.lexorank
|
lexorank: status.lexorank
|
||||||
: oldStatus.lexorank,
|
? status.lexorank
|
||||||
}
|
: oldStatus.lexorank,
|
||||||
|
}
|
||||||
|
)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user