diff --git a/src/app/(main)/boards/[boardId]/BoardBody.tsx b/src/app/(main)/boards/[boardId]/BoardBody.tsx index 0c05486f..e1bc77ad 100644 --- a/src/app/(main)/boards/[boardId]/BoardBody.tsx +++ b/src/app/(main)/boards/[boardId]/BoardBody.tsx @@ -4,7 +4,7 @@ import { Fragment, type ReactElement } from 'react'; import { Group, Panel, Separator } from 'react-resizable-panels'; import { v4 as uuid } from 'uuid'; import { useBoard } from '@/components/hooks'; -import { Minus, Plus } from '@/components/icons'; +import { ChevronDown, Minus, Plus } from '@/components/icons'; import type { BoardColumn as BoardColumnType } from '@/lib/types'; const CATALOG = { @@ -14,6 +14,12 @@ const CATALOG = { }, }; +const MIN_HEIGHT = 300; +const MAX_HEIGHT = 600; +const MIN_WIDTH = 300; +const MARGIN = 10; +const MAX_COLUMNS = 4; + export function BoardBody() { const { board, updateBoard, saveBoard, isPending } = useBoard(); @@ -31,7 +37,6 @@ export function BoardBody() { }; const handleRemoveRow = (id: string) => { - console.log('Removing row', id); updateBoard({ parameters: produce(board.parameters, draft => { if (!draft.rows) { @@ -43,44 +48,90 @@ export function BoardBody() { }); }; + const handleMoveRowUp = (id: string) => { + updateBoard({ + parameters: produce(board.parameters, draft => { + if (!draft.rows) return; + + const index = draft.rows.findIndex(row => row.id === id); + if (index > 0) { + const temp = draft.rows[index - 1]; + draft.rows[index - 1] = draft.rows[index]; + draft.rows[index] = temp; + } + }), + }); + }; + + const handleMoveRowDown = (id: string) => { + updateBoard({ + parameters: produce(board.parameters, draft => { + if (!draft.rows) return; + + const index = draft.rows.findIndex(row => row.id === id); + if (index < draft.rows.length - 1) { + const temp = draft.rows[index + 1]; + draft.rows[index + 1] = draft.rows[index]; + draft.rows[index] = temp; + } + }), + }); + }; + const rows = board?.parameters?.rows ?? []; - const minHeight = 300 * (rows.length || 1); + const rowCount = (rows.length || 1) + 1; + const minHeight = (MAX_HEIGHT + MARGIN) * rowCount; return ( - <> - - {rows.map((row, index) => ( - - - - - {index < rows.length - 1 && } - - ))} - - - - - Add row - - - + + {rows.map((row, index) => ( + + + + + {index < rows.length - 1 && } + + ))} + + + + + Add row + + + + ); } function BoardRow({ rowId, + rowIndex, + rowCount, columns, onRemove, + onMoveUp, + onMoveDown, }: { rowId: string; + rowIndex: number; + rowCount: number; columns: BoardColumnType[]; - onAddComponent?: () => void; onRemove?: (id: string) => void; + onMoveUp?: (id: string) => void; + onMoveDown?: (id: string) => void; }) { const { board, updateBoard } = useBoard(); @@ -102,27 +153,54 @@ function BoardRow({ {columns?.map((column, index) => ( - + {index < columns.length - 1 && } ))} - - + + + + Move row up + + + + Add column + - Remove row + Remove row - + + + Move row down + + ); }