Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: move rows in group

Browse Source
This commit is contained in:
ascarbek 2023-03-16 18:55:06 +06:00
parent 60676fdc41
commit ab5b40fa51
4 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts
View File

@ -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 };
};

4
frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx
View File

@ -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 }) => {
<SearchInput />
</div>
</div>
<DragDropContext onDragEnd={(res) => console.log(res)}>
<DragDropContext onDragEnd={onDragEnd}>
<div className={'relative w-full flex-1 overflow-auto'}>
<div className={'absolute flex h-full flex-shrink-0 items-start justify-start gap-4'}>
{controller &&

11
frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_bd_svc.ts
View File

@ -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,

5
frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_controller.ts
View File

@ -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);
};