refactor: manual ordering bugs (#312)

makeplane · Feb 21, 2023 · 8d6a357 · 8d6a357 · vercel · Feb 21, 2023
1 parent 8c15a15
commit 8d6a357
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
@@ -86,7 +86,7 @@ export const SingleBoard: React.FC<Props> = ({
         <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
           {(provided, snapshot) => (
             <div
-              className={`relative mt-3 h-full space-y-3 px-3 pb-3 ${
+              className={`relative mt-3 h-full px-3 pb-3 ${
                 snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
               } ${!isCollapsed ? "hidden" : "block"}`}
               ref={provided.innerRef}
@@ -104,7 +104,7 @@ export const SingleBoard: React.FC<Props> = ({
                       snapshot.isDraggingOver ? "block" : "hidden"
                     } top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs whitespace-nowrap bg-white p-2 rounded pointer-events-none z-[99999999]`}
                   >
-                    This board is order by {orderBy}
+                    This board is ordered by {orderBy}
                   </div>
                 </>
               )}

diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
@@ -188,7 +188,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
 
   return (
     <div
-      className={`rounded border bg-white shadow-sm ${
+      className={`rounded border bg-white shadow-sm mb-3 ${
         snapshot.isDragging ? "border-theme bg-indigo-50 shadow-lg" : ""
       }`}
       ref={provided.innerRef}

diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
@@ -116,20 +116,41 @@ export const IssuesView: React.FC<Props> = ({
           const destinationGroupArray = groupedByIssues[destination.droppableId];
 
           if (destinationGroupArray.length !== 0) {
-            if (destination.index === 0) newSortOrder = destinationGroupArray[0].sort_order - 10000;
-            else if (
-              (source.droppableId !== destination.droppableId &&
-                destination.index === destinationGroupArray.length) ||
-              (source.droppableId === destination.droppableId &&
-                destination.index === destinationGroupArray.length - 1)
-            )
-              newSortOrder =
-                destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
-            else
-              newSortOrder =
-                (destinationGroupArray[destination.index - 1].sort_order +
-                  destinationGroupArray[destination.index].sort_order) /
-                2;
+            // check if dropping in the same group
+            if (source.droppableId === destination.droppableId) {
+              // check if dropping at beginning
+              if (destination.index === 0)
+                newSortOrder = destinationGroupArray[0].sort_order - 10000;
+              // check if dropping at last
+              else if (destination.index === destinationGroupArray.length - 1)
+                newSortOrder =
+                  destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
+              else {
+                if (destination.index > source.index)
+                  newSortOrder =
+                    (destinationGroupArray[source.index + 1].sort_order +
+                      destinationGroupArray[source.index + 2].sort_order) /
+                    2;
+                else if (destination.index < source.index)
+                  newSortOrder =
+                    (destinationGroupArray[source.index - 1].sort_order +
+                      destinationGroupArray[source.index - 2].sort_order) /
+                    2;
+              }
+            } else {
+              // check if dropping at beginning
+              if (destination.index === 0)
+                newSortOrder = destinationGroupArray[0].sort_order - 10000;
+              // check if dropping at last
+              else if (destination.index === destinationGroupArray.length)
+                newSortOrder =
+                  destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
+              else
+                newSortOrder =
+                  (destinationGroupArray[destination.index - 1].sort_order +
+                    destinationGroupArray[destination.index].sort_order) /
+                  2;
+            }
           }
 
           draggedItem.sort_order = newSortOrder;