Merge pull request #8 from toeverything/fix/kanban-reorder-card

Fix(kanban): kanban reorder
toeverything · Aug 1, 2022 · 090cba0 · 090cba0
2 parents 873ded9 + 4fb498c
commit 090cba0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 11 deletions.
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts
@@ -6,6 +6,7 @@ import type { DndableItems } from './type';
 import type {
     KanbanCard,
     KanbanGroup,
+    RecastItem,
 } from '@toeverything/components/editor-core';
 import { isEqual } from '@toeverything/utils';
 
@@ -33,15 +34,44 @@ const findContainer = (id: string, items: DndableItems) => {
     );
 };
 
+type FindMoveInfo = (params: {
+    id: string;
+    activeContainer: string;
+    overContainer: string;
+    kanban: KanbanGroup[];
+}) => {
+    targetCard: RecastItem;
+    targetGroup: KanbanGroup | null;
+};
+
+const findMoveInfo: FindMoveInfo = ({
+    id,
+    activeContainer,
+    overContainer,
+    kanban,
+}) => {
+    const activeGroup = kanban.find(group => group.id === activeContainer);
+    const overGroup = kanban.find(group => group.id === overContainer);
+    const activityCard = activeGroup.items.find(item => item.id === id);
+
+    return {
+        targetCard: activityCard.block,
+        targetGroup: overGroup,
+    };
+};
+
 /**
  * Find the sibling node after the dragging of the moved node ends
  * @param cards
  * @param currentCardId
  */
-const findSibling = (cards: KanbanCard[], currentCardId: string) => {
+const findSibling = (
+    cards: KanbanCard[],
+    currentCardId: string
+): [string, string, number] => {
     const index = cards.findIndex(card => card.id === currentCardId);
 
-    return [cards[index - 1]?.id ?? null, cards[index + 1]?.id ?? null];
+    return [cards[index - 1]?.id ?? null, cards[index + 1]?.id ?? null, index];
 };
 
 /**
@@ -84,4 +114,5 @@ export {
     findSibling,
     pickIdFromCards,
     shouldUpdate,
+    findMoveInfo,
 };
diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts
@@ -11,6 +11,7 @@ import {
     findSibling,
     pickIdFromCards,
     shouldUpdate,
+    findMoveInfo,
 } from '../helper';
 import type {
     CollisionDetection,
@@ -19,11 +20,13 @@ import type {
     DragEndEvent,
 } from '@dnd-kit/core';
 import type { DndableItems, UseDndableRes } from '../type';
+import { useKanban } from '@toeverything/components/editor-core';
 
 export const useDndable = (
     dndableItems: DndableItems,
     dndableContainerIds: string[]
 ): UseDndableRes => {
+    const { kanban, moveCard } = useKanban();
     const [items, setItems] = useState(dndableItems);
     const [containerIds, setContainerIds] = useState(dndableContainerIds);
     const [active, setActive] = useState(null);
@@ -259,16 +262,14 @@ export const useDndable = (
                         ).filter(Boolean),
                     };
 
-                    const activeItems = items[activeContainer];
-                    const activeItem = activeItems.find(
-                        item => item.id === activeId
-                    );
-                    const [beforeId, afterId] = findSibling(
-                        items[overContainer],
-                        activeId
-                    );
+                    const { targetCard } = findMoveInfo({
+                        id: activeId,
+                        activeContainer,
+                        overContainer,
+                        kanban,
+                    });
 
-                    activeItem?.moveTo(overContainer, beforeId, afterId);
+                    moveCard(targetCard, null, overIndex);
 
                     return data;
                 });