chore(react/collections/board): get new items to be created

apps/client/src/widgets/collections/board/api.ts

@@ -0,0 +1,31 @@
+import FNote from "../../../entities/fnote";
+import attributes from "../../../services/attributes";
+import note_create from "../../../services/note_create";
+
+export async function createNewItem(parentNote: FNote, column: string) {
+    try {
+        // Get the parent note path
+        const parentNotePath = parentNote.noteId;
+        const statusAttribute = parentNote.getLabelValue("board:groupBy") ?? "status";
+
+        // Create a new note as a child of the parent note
+        const { note: newNote } = await note_create.createNote(parentNotePath, {
+            activate: false,
+            title: "New item"
+        });
+
+        if (newNote) {
+            // Set the status label to place it in the correct column
+            await changeColumn(newNote.noteId, column, statusAttribute);
+
+            // Start inline editing of the newly created card
+            //this.startInlineEditingCard(newNote.noteId);
+        }
+    } catch (error) {
+        console.error("Failed to create new item:", error);
+    }
+}
+
+async function changeColumn(noteId: string, newColumn: string, statusAttribute: string) {
+    await attributes.setLabel(noteId, statusAttribute, newColumn);
+}

apps/client/src/widgets/collections/board/index.tsx

@@ -5,6 +5,9 @@ import { ColumnMap, getBoardData } from "./data";
 import { useNoteLabel } from "../../react/hooks";
 import FNote from "../../../entities/fnote";
 import FBranch from "../../../entities/fbranch";
+import Icon from "../../react/Icon";
+import { t } from "../../../services/i18n";
+import { createNewItem } from "./api";
 
 export interface BoardViewData {
     columns?: BoardColumnData[];
@@ -40,14 +43,18 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
         <div className="board-view">
             <div className="board-view-container">
                 {byColumn && columns?.map(column => (
-                    <Column column={column} columnItems={byColumn.get(column)} />
+                    <Column
+                        column={column}
+                        columnItems={byColumn.get(column)}
+                        parentNote={parentNote}
+                    />
                 ))}
             </div>
         </div>
     )
 }
 
-function Column({ column, columnItems }: { column: string, columnItems?: { note: FNote, branch: FBranch }[] }) {
+function Column({ parentNote, column, columnItems }: { parentNote: FNote, column: string, columnItems?: { note: FNote, branch: FBranch }[] }) {
     return (
         <div className="board-column">
             <h3>
@@ -60,6 +67,11 @@ function Column({ column, columnItems }: { column: string, columnItems?: { note:
             {(columnItems ?? []).map(({ note, branch }) => (
                 <Card note={note} branch={branch} column={column} />
             ))}
+
+            <div className="board-new-item" onClick={() => createNewItem(parentNote, column)}>
+                <Icon icon="bx bx-plus" />{" "}
+                {t("board_view.new-item")}
+            </div>
         </div>
     )
 }

apps/client/src/widgets/view_widgets/board_view/api.ts

@@ -29,10 +29,6 @@ export default class BoardApi {
         return this.byColumn.get(column);
     }
 
-    async changeColumn(noteId: string, newColumn: string) {
-        await attributes.setLabel(noteId, this._statusAttribute, newColumn);
-    }
-
     openNote(noteId: string) {
         appContext.triggerCommand("openInPopup", { noteIdOrPath: noteId });
     }

apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts

@@ -349,9 +349,8 @@ export class DifferentialBoardRenderer {
         const $newItemEl = $("<div>")
             .addClass("board-new-item")
             .attr("data-column", column)
-            .html(`<span class="icon bx bx-plus"></span> ${t("board_view.new-item")}`);
+            .html(`<span class="icon bx bx-plus"></span> ${}`);
 
-        $newItemEl.on("click", () => this.onCreateNewItem(column));
         $columnEl.append($newItemEl);
 
         return $columnEl;

apps/client/src/widgets/view_widgets/board_view/index.ts

@@ -64,7 +64,6 @@ export default class BoardView extends ViewMode<BoardData> {
             this.$container,
             this.api,
             this.dragHandler,
-            (column: string) => this.createNewItem(column),
             this.parentNote,
             this.viewStorage,
             () => this.refreshApi()
@@ -220,32 +219,6 @@ export default class BoardView extends ViewMode<BoardData> {
         }
     }
 
-    private async createNewItem(column: string) {
-        try {
-            // Get the parent note path
-            const parentNotePath = this.parentNote.noteId;
-
-            // Create a new note as a child of the parent note
-            const { note: newNote } = await noteCreateService.createNote(parentNotePath, {
-                activate: false,
-                title: "New item"
-            });
-
-            if (newNote) {
-                // Set the status label to place it in the correct column
-                await this.api?.changeColumn(newNote.noteId, column);
-
-                // Refresh the board to show the new item
-                await this.renderList();
-
-                // Start inline editing of the newly created card
-                this.startInlineEditingCard(newNote.noteId);
-            }
-        } catch (error) {
-            console.error("Failed to create new item:", error);
-        }
-    }
-
     async insertItemAtPosition(column: string, relativeToBranchId: string, direction: "before" | "after"): Promise<void> {
         try {
             // Create the note without opening it