diff --git a/apps/client/src/widgets/view_widgets/board_view/index.ts b/apps/client/src/widgets/view_widgets/board_view/index.ts index 0589845d2..45be8a654 100644 --- a/apps/client/src/widgets/view_widgets/board_view/index.ts +++ b/apps/client/src/widgets/view_widgets/board_view/index.ts @@ -8,17 +8,26 @@ const TPL = /*html*/` overflow: hidden; position: relative; height: 100%; + padding: 1em; user-select: none; } .board-view-container { height: 100%; + display: flex; + gap: 1em; + } + + .board-view-container .board-column { + min-width: 200px; + } + + .board-view-container .board-column h3 { + font-size: 1.2em; } -
- Board view goes here. -
+
`; @@ -40,14 +49,32 @@ export default class BoardView extends ViewMode { } async renderList(): Promise | undefined> { - // this.$container.empty(); + this.$container.empty(); this.renderBoard(this.$container[0]); + return this.$root; } private async renderBoard(el: HTMLElement) { const data = await getBoardData(this.noteIds, "status"); - console.log("Board data:", data); + + for (const column of data.byColumn.keys()) { + const columnNotes = data.byColumn.get(column); + if (!columnNotes) { + continue; + } + + const $columnEl = $("
") + .addClass("board-column") + .append($("

").text(column)); + + for (const note of columnNotes) { + const $noteEl = $("
").addClass("board-note").text(note.title); // Assuming FNote has a title property + $columnEl.append($noteEl); + } + + $(el).append($columnEl); + } } }