From ab5b40fa51882f077e399fc047a131a179f8bb01 Mon Sep 17 00:00:00 2001 From: ascarbek Date: Thu, 16 Mar 2023 18:55:06 +0600 Subject: [PATCH] chore: move rows in group --- .../_shared/database-hooks/useDatabase.ts | 14 ++++++++++++-- .../src/appflowy_app/components/board/Board.tsx | 4 ++-- .../stores/effects/database/database_bd_svc.ts | 11 +++++++++++ .../stores/effects/database/database_controller.ts | 5 +++++ 4 files changed, 30 insertions(+), 4 deletions(-) diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts index 13c9609ee3..8811c92114 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts @@ -7,6 +7,7 @@ import { FieldInfo } from '$app/stores/effects/database/field/field_controller'; import { RowInfo } from '$app/stores/effects/database/row/row_cache'; import { ViewLayoutTypePB } from '@/services/backend'; import { DatabaseGroupController } from '$app/stores/effects/database/group/group_controller'; +import { OnDragEndResponder } from 'react-beautiful-dnd'; export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => { const dispatch = useAppDispatch(); @@ -48,7 +49,6 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => { void (async () => { controller.subscribe({ onRowsChanged: (rowInfos) => { - console.log('rows changed: ', rowInfos); setRows(rowInfos); }, onFieldsChanged: (fieldInfos) => { @@ -81,5 +81,15 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => { setGroups([...controller.groups.value]); }; - return { loadFields, controller, rows, groups, onNewRowClick }; + const onDragEnd: OnDragEndResponder = async (result) => { + const { source, destination } = result; + // move inside the block (group) + if (source.droppableId === destination?.droppableId) { + const group = groups.find((g) => g.groupId === source.droppableId); + if (!group || !controller) return; + await controller.exchangeRow(group.rows[source.index].id, group.rows[destination.index].id); + } + }; + + return { loadFields, controller, rows, groups, onNewRowClick, onDragEnd }; }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx index 7847169ba5..9e26ab0f9a 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx +++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx @@ -7,7 +7,7 @@ import { ViewLayoutTypePB } from '@/services/backend'; import { DragDropContext, Droppable } from 'react-beautiful-dnd'; export const Board = ({ viewId }: { viewId: string }) => { - const { controller, rows, groups, onNewRowClick } = useDatabase(viewId, ViewLayoutTypePB.Board); + const { controller, rows, groups, onNewRowClick, onDragEnd } = useDatabase(viewId, ViewLayoutTypePB.Board); return ( <> @@ -23,7 +23,7 @@ export const Board = ({ viewId }: { viewId: string }) => { - console.log(res)}> +
{controller && diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_bd_svc.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_bd_svc.ts index 9308ccc456..18194bff2c 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_bd_svc.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_bd_svc.ts @@ -6,9 +6,11 @@ import { DatabaseEventGetGroups, DatabaseEventMoveGroup, DatabaseEventMoveGroupRow, + DatabaseEventMoveRow, DatabaseGroupIdPB, MoveGroupPayloadPB, MoveGroupRowPayloadPB, + MoveRowPayloadPB, } from '@/services/backend/events/flowy-database'; import { GetFieldPayloadPB, @@ -68,6 +70,15 @@ export class DatabaseBackendService { return DatabaseEventMoveGroupRow(payload); }; + exchangeRow = (fromRowId: string, toRowId: string) => { + const payload = MoveRowPayloadPB.fromObject({ + view_id: this.viewId, + from_row_id: fromRowId, + to_row_id: toRowId, + }); + return DatabaseEventMoveRow(payload); + }; + moveGroup = (fromGroupId: string, toGroupId: string) => { const payload = MoveGroupPayloadPB.fromObject({ view_id: this.viewId, diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_controller.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_controller.ts index a9bfc66d75..226e0b58f6 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_controller.ts +++ b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_controller.ts @@ -79,6 +79,11 @@ export class DatabaseController { return this.backendService.moveRow(rowId, groupId); }; + exchangeRow = async (fromRowId: string, toRowId: string) => { + await this.backendService.exchangeRow(fromRowId, toRowId); + await this.loadGroup(); + }; + moveGroup = (fromGroupId: string, toGroupId: string) => { return this.backendService.moveGroup(fromGroupId, toGroupId); };