diff --git a/apps/client/src/widgets/collections/board/api.ts b/apps/client/src/widgets/collections/board/api.ts index e937f1735..a3b67ab0a 100644 --- a/apps/client/src/widgets/collections/board/api.ts +++ b/apps/client/src/widgets/collections/board/api.ts @@ -3,6 +3,7 @@ import FNote from "../../../entities/fnote"; import attributes from "../../../services/attributes"; import { executeBulkActions } from "../../../services/bulk_action"; import note_create from "../../../services/note_create"; +import server from "../../../services/server"; import { ColumnMap } from "./data"; export default class BoardApi { @@ -13,7 +14,8 @@ export default class BoardApi { private parentNote: FNote, private statusAttribute: string, private viewConfig: BoardViewData, - private saveConfig: (newConfig: BoardViewData) => void + private saveConfig: (newConfig: BoardViewData) => void, + private setBranchIdToEdit: (branchId: string | undefined) => void ) {}; async createNewItem(column: string) { @@ -22,17 +24,14 @@ export default class BoardApi { const parentNotePath = this.parentNote.noteId; // Create a new note as a child of the parent note - const { note: newNote } = await note_create.createNote(parentNotePath, { + const { note: newNote, branch: newBranch } = await note_create.createNote(parentNotePath, { activate: false, title: "New item" }); if (newNote) { - // Set the status label to place it in the correct column await this.changeColumn(newNote.noteId, column); - - // Start inline editing of the newly created card - //this.startInlineEditingCard(newNote.noteId); + this.setBranchIdToEdit(newBranch?.branchId); } } catch (error) { console.error("Failed to create new item:", error); @@ -57,5 +56,13 @@ export default class BoardApi { this.saveConfig(this.viewConfig); } + dismissEditingTitle() { + this.setBranchIdToEdit(undefined); + } + + renameCard(noteId: string, newTitle: string) { + return server.put(`notes/${noteId}/title`, { title: newTitle.trim() }); + } + } diff --git a/apps/client/src/widgets/collections/board/index.tsx b/apps/client/src/widgets/collections/board/index.tsx index a7ba46fbc..b9a59a259 100644 --- a/apps/client/src/widgets/collections/board/index.tsx +++ b/apps/client/src/widgets/collections/board/index.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks"; +import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks"; import { ViewModeProps } from "../interface"; import "./index.css"; import { ColumnMap, getBoardData } from "./data"; @@ -12,6 +12,7 @@ import FormTextBox from "../../react/FormTextBox"; import branchService from "../../../services/branches"; import { openColumnContextMenu, openNoteContextMenu } from "./context_menu"; import { ContextMenuEvent } from "../../../menus/context_menu"; +import { createContext } from "preact"; export interface BoardViewData { columns?: BoardColumnData[]; @@ -21,6 +22,12 @@ export interface BoardColumnData { value: string; } +interface BoardViewContextData { + branchIdToEdit?: string; +} + +const BoardViewContext = createContext({}); + export default function BoardView({ note: parentNote, noteIds, viewConfig, saveConfig }: ViewModeProps) { const [ statusAttribute ] = useNoteLabelWithDefault(parentNote, "board:groupBy", "status"); const [ byColumn, setByColumn ] = useState(); @@ -30,9 +37,13 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC const [ dropPosition, setDropPosition ] = useState<{ column: string, index: number } | null>(null); const [ draggedColumn, setDraggedColumn ] = useState<{ column: string, index: number } | null>(null); const [ columnDropPosition, setColumnDropPosition ] = useState(null); + const [ branchIdToEdit, setBranchIdToEdit ] = useState(); const api = useMemo(() => { - return new Api(byColumn, columns ?? [], parentNote, statusAttribute, viewConfig ?? {}, saveConfig); - }, [ byColumn, columns, parentNote, statusAttribute, viewConfig, saveConfig ]); + return new Api(byColumn, columns ?? [], parentNote, statusAttribute, viewConfig ?? {}, saveConfig, setBranchIdToEdit ); + }, [ byColumn, columns, parentNote, statusAttribute, viewConfig, saveConfig, setBranchIdToEdit ]); + const boardViewContext = useMemo(() => ({ + branchIdToEdit + }), [ branchIdToEdit ]); function refresh() { getBoardData(parentNote, statusAttribute, viewConfig ?? {}).then(({ byColumn, newPersistedData }) => { @@ -126,41 +137,43 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC return (
-
- {byColumn && columns?.map((column, index) => ( - <> - {columnDropPosition === index && draggedColumn?.column !== column && ( -
- )} - - - ))} - {columnDropPosition === columns?.length && draggedColumn && ( -
- )} + +
+ {byColumn && columns?.map((column, index) => ( + <> + {columnDropPosition === index && draggedColumn?.column !== column && ( +
+ )} + + + ))} + {columnDropPosition === columns?.length && draggedColumn && ( +
+ )} - -
+ +
+
) } @@ -359,6 +372,7 @@ function Card({ setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void, isDragging: boolean }) { + const { branchIdToEdit } = useContext(BoardViewContext); const colorClass = note.getColorClass() || ''; const handleDragStart = useCallback((e: DragEvent) => { @@ -383,8 +397,26 @@ function Card({ onDragEnd={handleDragEnd} onContextMenu={handleContextMenu} > - - {note.title} + {branch.branchId !== branchIdToEdit ? ( + <> + + {note.title} + + ) : ( + { + if (e.key === "Enter") { + api.renameCard(note.noteId, e.currentTarget.value); + api.dismissEditingTitle(); + } + + if (e.key === "Escape") { + api.dismissEditingTitle(); + } + }} + /> + )}
) } diff --git a/apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts b/apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts index 54658f6ee..430629637 100644 --- a/apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts +++ b/apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts @@ -447,8 +447,7 @@ export class DifferentialBoardRenderer { try { // Update the note title using the board view's server call import('../../../services/server').then(async ({ default: server }) => { - await server.put(`notes/${noteId}/title`, { title: newTitle.trim() }); - finalTitle = newTitle.trim(); + }); } catch (error) { console.error("Failed to update note title:", error);