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