chore: dnd reordering

frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx

@@ -4,7 +4,7 @@ import { BoardBlock } from './BoardBlock';
 import { NewBoardBlock } from './NewBoardBlock';
 import { useDatabase } from '../_shared/database-hooks/useDatabase';
 import { ViewLayoutTypePB } from '@/services/backend';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext } from 'react-beautiful-dnd';
 
 export const Board = ({ viewId }: { viewId: string }) => {
   const { controller, rows, groups, onNewRowClick, onDragEnd } = useDatabase(viewId, ViewLayoutTypePB.Board);
@@ -29,21 +29,16 @@ export const Board = ({ viewId }: { viewId: string }) => {
             {controller &&
               groups &&
               groups.map((group, index) => (
-                <Droppable droppableId={group.groupId} key={index}>
+                <BoardBlock
-                  {(provided, snapshot) => (
+                  groupId={group.groupId}
-                    <div className={'h-full'} {...provided.droppableProps} ref={provided.innerRef}>
+                  key={index}
-                      <BoardBlock
+                  viewId={viewId}
-                        key={index}
+                  controller={controller}
-                        viewId={viewId}
+                  rows={group.rows}
-                        controller={controller}
+                  title={group.name}
-                        rows={group.rows}
+                  allRows={rows}
-                        title={group.name}
+                  onNewRowClick={() => onNewRowClick(index)}
-                        allRows={rows}
+                />
-                        onNewRowClick={() => onNewRowClick(index)}
-                      />
-                    </div>
-                  )}
-                </Droppable>
               ))}
             <NewBoardBlock onClick={() => console.log('new block')}></NewBoardBlock>
           </div>

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx

@@ -4,9 +4,10 @@ import { BoardCard } from './BoardCard';
 import { RowInfo } from '../../stores/effects/database/row/row_cache';
 import { DatabaseController } from '../../stores/effects/database/database_controller';
 import { RowPB } from '@/services/backend';
-import { Draggable } from 'react-beautiful-dnd';
+import { Droppable } from 'react-beautiful-dnd';
 
 export const BoardBlock = ({
+  groupId,
   viewId,
   controller,
   title,
@@ -14,6 +15,7 @@ export const BoardBlock = ({
   allRows,
   onNewRowClick,
 }: {
+  groupId: string;
   viewId: string;
   controller: DatabaseController;
   title: string;
@@ -37,22 +39,24 @@ export const BoardBlock = ({
           </button>
         </div>
       </div>
-      <div className={'flex flex-1 flex-col gap-1 overflow-auto px-2'}>
+      <Droppable droppableId={groupId}>
-        {rows.map((row_pb, index) => {
+        {(provided) => (
-          const row = allRows.find((r) => r.row.id === row_pb.id);
+          <div
-          return row ? (
+            className={'flex flex-1 flex-col gap-1 overflow-auto px-2'}
-            <Draggable draggableId={row_pb.id} index={index} key={index}>
+            {...provided.droppableProps}
-              {(provided, snapshot) => (
+            ref={provided.innerRef}
-                <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+          >
-                  <BoardCard viewId={viewId} controller={controller} key={index} rowInfo={row}></BoardCard>
+            {rows.map((row_pb, index) => {
-                </div>
+              const row = allRows.find((r) => r.row.id === row_pb.id);
-              )}
+              return row ? (
-            </Draggable>
+                <BoardCard viewId={viewId} controller={controller} index={index} key={index} rowInfo={row}></BoardCard>
-          ) : (
+              ) : (
-            <span key={index}></span>
+                <span key={index}></span>
-          );
+              );
-        })}
+            })}
-      </div>
+          </div>
+        )}
+      </Droppable>
       <div className={'p-2'}>
         <button
           onClick={onNewRowClick}

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx

@@ -3,12 +3,15 @@ import { RowInfo } from '../../stores/effects/database/row/row_cache';
 import { useRow } from '../_shared/database-hooks/useRow';
 import { DatabaseController } from '../../stores/effects/database/database_controller';
 import { BoardCell } from './BoardCell';
+import { Draggable } from 'react-beautiful-dnd';
 
 export const BoardCard = ({
+  index,
   viewId,
   controller,
   rowInfo,
 }: {
+  index: number;
   viewId: string;
   controller: DatabaseController;
   rowInfo: RowInfo;
@@ -16,23 +19,30 @@ export const BoardCard = ({
   const { cells } = useRow(viewId, controller, rowInfo);
 
   return (
-    <div
+    <Draggable draggableId={rowInfo.row.id} index={index}>
-      onClick={() => console.log('on click')}
+      {(provided) => (
-      className={`relative cursor-pointer select-none rounded-lg border border-shade-6 bg-white px-3 py-2 transition-transform duration-100 hover:bg-main-selector `}
+        <div
-    >
+          ref={provided.innerRef}
-      <button className={'absolute right-4 top-2.5 h-5 w-5 rounded hover:bg-surface-2'}>
+          {...provided.draggableProps}
-        <Details2Svg></Details2Svg>
+          {...provided.dragHandleProps}
-      </button>
+          onClick={() => console.log('on click')}
-      <div className={'flex flex-col gap-3'}>
+          className={`relative cursor-pointer select-none rounded-lg border border-shade-6 bg-white px-3 py-2 transition-transform duration-100 hover:bg-main-selector `}
-        {cells.map((cell, index) => (
+        >
-          <BoardCell
+          <button className={'absolute right-4 top-2.5 h-5 w-5 rounded hover:bg-surface-2'}>
-            key={index}
+            <Details2Svg></Details2Svg>
-            cellIdentifier={cell.cellIdentifier}
+          </button>
-            cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
+          <div className={'flex flex-col gap-3'}>
-            fieldController={controller.fieldController}
+            {cells.map((cell, cellIndex) => (
-          ></BoardCell>
+              <BoardCell
-        ))}
+                key={cellIndex}
-      </div>
+                cellIdentifier={cell.cellIdentifier}
-    </div>
+                cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
+                fieldController={controller.fieldController}
+              ></BoardCell>
+            ))}
+          </div>
+        </div>
+      )}
+    </Draggable>
   );
 };