chore(react/collections/table): bring back renaming columns

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

@@ -57,6 +57,27 @@ export default class BoardApi {
         this.saveConfig(this.viewConfig);
     }
 
+    async renameColumn(oldValue: string, newValue: string) {
+        const noteIds = this.byColumn?.get(oldValue)?.map(item => item.note.noteId) || [];
+
+        // Change the value in the notes.
+        await executeBulkActions(noteIds, [
+            {
+                name: "updateLabelValue",
+                labelName: this.statusAttribute,
+                labelValue: newValue
+            }
+        ]);
+
+        // Rename the column in the persisted data.
+        for (const column of this.viewConfig.columns || []) {
+            if (column.value === oldValue) {
+                column.value = newValue;
+            }
+        }
+        this.saveConfig(this.viewConfig);
+    }
+
     async insertRowAtPosition(
             column: string,
             relativeToBranchId: string,

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

@@ -54,6 +54,10 @@
   cursor: default;
 }
 
+.board-view-container .board-column h3.editing input {
+  padding: 0;
+}
+
 .board-view-container .board-column h3:hover {
   background-color: var(--hover-item-background-color);
   border-radius: 4px;

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

@@ -25,6 +25,8 @@ export interface BoardColumnData {
 
 interface BoardViewContextData {
     branchIdToEdit?: string;
+    columnNameToEdit?: string;
+    setColumnNameToEdit?: (column: string | undefined) => void;
 }
 
 const BoardViewContext = createContext<BoardViewContextData>({});
@@ -39,12 +41,15 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
     const [ draggedColumn, setDraggedColumn ] = useState<{ column: string, index: number } | null>(null);
     const [ columnDropPosition, setColumnDropPosition ] = useState<number | null>(null);
     const [ branchIdToEdit, setBranchIdToEdit ] = useState<string>();
+    const [ columnNameToEdit, setColumnNameToEdit ] = useState<string>();
     const api = useMemo(() => {
         return new Api(byColumn, columns ?? [], parentNote, statusAttribute, viewConfig ?? {}, saveConfig, setBranchIdToEdit );
     }, [ byColumn, columns, parentNote, statusAttribute, viewConfig, saveConfig, setBranchIdToEdit ]);
     const boardViewContext = useMemo<BoardViewContextData>(() => ({
-        branchIdToEdit
+        branchIdToEdit,
-    }), [ branchIdToEdit ]);
+        columnNameToEdit,
+        setColumnNameToEdit
+    }), [ branchIdToEdit, columnNameToEdit, setColumnNameToEdit ]);
 
     function refresh() {
         getBoardData(parentNote, statusAttribute, viewConfig ?? {}).then(({ byColumn, newPersistedData }) => {
@@ -214,6 +219,10 @@ function Column({
     isDraggingColumn: boolean,
     api: Api
 }) {
+    const context = useContext(BoardViewContext);
+    const isEditing = (context.columnNameToEdit === column);
+    const editorRef = useRef<HTMLInputElement>(null);
+
     const handleColumnDragStart = useCallback((e: DragEvent) => {
         e.dataTransfer!.effectAllowed = 'move';
         e.dataTransfer!.setData('text/plain', column);
@@ -301,10 +310,18 @@ function Column({
         setDraggedCard(null);
     }, [draggedCard, draggedColumn, dropPosition, columnItems, column, statusAttribute, setDraggedCard, setDropTarget, setDropPosition, onCardDrop]);
 
+    const handleEdit = useCallback(() => {
+        context.setColumnNameToEdit?.(column);
+    }, [column]);
+
     const handleContextMenu = useCallback((e: ContextMenuEvent) => {
         openColumnContextMenu(api, e, column);
     }, [ api, column ]);
 
+    useEffect(() => {
+        editorRef.current?.focus();
+    }, [ isEditing ]);
+
     return (
         <div
             className={`board-column ${dropTarget === column && draggedCard?.fromColumn !== column ? 'drag-over' : ''} ${isDraggingColumn ? 'column-dragging' : ''}`}
@@ -314,14 +331,47 @@ function Column({
             onContextMenu={handleContextMenu}
         >
             <h3
+                className={`${isEditing ? "editing" : ""}`}
                 draggable="true"
                 onDragStart={handleColumnDragStart}
                 onDragEnd={handleColumnDragEnd}
             >
+                {!isEditing ? (
+                    <>
                         <span>{column}</span>
                         <span
                             className="edit-icon icon bx bx-edit-alt"
-                    title="Click to edit column title" />
+                            title="Click to edit column title"
+                            onClick={handleEdit}
+                        />
+                    </>
+                ) : (
+                    <>
+                        <FormTextBox
+                            inputRef={editorRef}
+                            currentValue={column}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter") {
+                                    const newTitle = e.currentTarget.value;
+                                    if (newTitle !== column) {
+                                        api.renameColumn(column, newTitle);
+                                    }
+                                    context.setColumnNameToEdit?.(undefined);
+                                }
+
+                                if (e.key === "Escape") {
+                                    context.setColumnNameToEdit?.(undefined);
+                                }
+                            }}
+                            onBlur={(newTitle) => {
+                                if (newTitle !== column) {
+                                    api.renameColumn(column, newTitle);
+                                }
+                                context.setColumnNameToEdit?.(undefined);
+                            }}
+                        />
+                    </>
+                )}
             </h3>
 
             {(columnItems ?? []).map(({ note, branch }, index) => {
@@ -396,7 +446,7 @@ function Card({
 
     useEffect(() => {
         editorRef.current?.focus();
-    }, []);
+    }, [ isEditing ]);
 
     return (
         <div

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

@@ -29,27 +29,6 @@ export default class BoardApi {
         return this.byColumn.get(column);
     }
 
-    async renameColumn(oldValue: string, newValue: string, noteIds: string[]) {
-        // Change the value in the notes.
-        await executeBulkActions(noteIds, [
-            {
-                name: "updateLabelValue",
-                labelName: this._statusAttribute,
-                labelValue: newValue
-            }
-        ]);
-
-        // Rename the column in the persisted data.
-        for (const column of this.persistedData.columns || []) {
-            if (column.value === oldValue) {
-                column.value = newValue;
-            }
-        }
-        await this.viewStorage.store(this.persistedData);
-    }
-
-
-
     async reorderColumns(newColumnOrder: string[]) {
         // Update the co    lumn order in persisted data
         if (!this.persistedData.columns) {

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

@@ -135,15 +135,6 @@ export default class BoardView extends ViewMode<BoardData> {
         });
     }
 
-    private createTitleStructure(title: string): { $titleText: JQuery<HTMLElement>; $editIcon: JQuery<HTMLElement> } {
-        const $titleText = $("<span>").text(title);
-        const $editIcon = $("<span>")
-            .addClass("edit-icon icon bx bx-edit-alt")
-            .attr("title", "Click to edit column title");
-
-        return { $titleText, $editIcon };
-    }
-
     private startEditingColumnTitle($titleEl: JQuery<HTMLElement>, columnValue: string, columnItems: { branch: any; note: any; }[]) {
         if ($titleEl.hasClass("editing")) {
             return; // Already editing
@@ -261,8 +252,5 @@ export default class BoardView extends ViewMode<BoardData> {
         }
     }
 
-    private onSave() {
-        this.viewStorage.store(this.persistentData);
-    }
 
 }