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: dnd reordering

Browse Source
This commit is contained in:
ascarbek 2023-03-17 15:13:51 +06:00
parent 745ee264c8
commit d60c39d483
3 changed files with 60 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}>
{(provided, snapshot) => (
<div className={'h-full'} {...provided.droppableProps} ref={provided.innerRef}>
<BoardBlock
key={index}
viewId={viewId}
controller={controller}
rows={group.rows}
title={group.name}
allRows={rows}
onNewRowClick={() => onNewRowClick(index)}
/>
</div>
)}
</Droppable>
<BoardBlock
groupId={group.groupId}
key={index}
viewId={viewId}
controller={controller}
rows={group.rows}
title={group.name}
allRows={rows}
onNewRowClick={() => onNewRowClick(index)}
/>
))}
<NewBoardBlock onClick={() => console.log('new block')}></NewBoardBlock>
</div>

38
frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx
View File

@ -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'}>
{rows.map((row_pb, index) => {
const row = allRows.find((r) => r.row.id === row_pb.id);
return row ? (
<Draggable draggableId={row_pb.id} index={index} key={index}>
{(provided, snapshot) => (
<div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
<BoardCard viewId={viewId} controller={controller} key={index} rowInfo={row}></BoardCard>
</div>
)}
</Draggable>
) : (
<span key={index}></span>
);
})}
</div>
<Droppable droppableId={groupId}>
{(provided) => (
<div
className={'flex flex-1 flex-col gap-1 overflow-auto px-2'}
{...provided.droppableProps}
ref={provided.innerRef}
>
{rows.map((row_pb, index) => {
const row = allRows.find((r) => r.row.id === row_pb.id);
return row ? (
<BoardCard viewId={viewId} controller={controller} index={index} key={index} rowInfo={row}></BoardCard>
) : (
<span key={index}></span>
);
})}
</div>
)}
</Droppable>
<div className={'p-2'}>
<button
onClick={onNewRowClick}

46
frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx
View File

@ -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
onClick={() => console.log('on click')}
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 `}
>
<button className={'absolute right-4 top-2.5 h-5 w-5 rounded hover:bg-surface-2'}>
<Details2Svg></Details2Svg>
</button>
<div className={'flex flex-col gap-3'}>
{cells.map((cell, index) => (
<BoardCell
key={index}
cellIdentifier={cell.cellIdentifier}
cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
fieldController={controller.fieldController}
></BoardCell>
))}
</div>
</div>
<Draggable draggableId={rowInfo.row.id} index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
onClick={() => console.log('on click')}
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 `}
>
<button className={'absolute right-4 top-2.5 h-5 w-5 rounded hover:bg-surface-2'}>
<Details2Svg></Details2Svg>
</button>
<div className={'flex flex-col gap-3'}>
{cells.map((cell, cellIndex) => (
<BoardCell
key={cellIndex}
cellIdentifier={cell.cellIdentifier}
cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
fieldController={controller.fieldController}
></BoardCell>
))}
</div>
</div>
)}
</Draggable>
);
};