feat(views/board): store new columns into config

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

@@ -0,0 +1,7 @@
+interface BoardColumnData {
+    value: string;
+}
+
+export interface BoardData {
+    columns?: BoardColumnData[];
+}

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

@@ -1,18 +1,42 @@
 import FBranch from "../../../entities/fbranch";
 import FNote from "../../../entities/fnote";
+import { BoardData } from "./config";
 
 type ColumnMap = Map<string, {
     branch: FBranch;
     note: FNote;
 }[]>;
 
-export async function getBoardData(parentNote: FNote, groupByColumn: string) {
+export async function getBoardData(parentNote: FNote, groupByColumn: string, persistedData: BoardData) {
     const byColumn: ColumnMap = new Map();
 
     await recursiveGroupBy(parentNote.getChildBranches(), byColumn, groupByColumn);
 
+    let newPersistedData: BoardData | undefined;
+    if (persistedData) {
+        // Check if we have new columns.
+        const existingColumns = persistedData.columns?.map(c => c.value) || [];
+        for (const column of existingColumns) {
+            if (!byColumn.has(column)) {
+                byColumn.set(column, []);
+            }
+        }
+
+        const newColumns = [...byColumn.keys()]
+            .filter(column => !existingColumns.includes(column))
+            .map(column => ({ value: column }));
+
+        if (newColumns.length > 0) {
+            newPersistedData = {
+                ...persistedData,
+                columns: [...(persistedData.columns || []), ...newColumns]
+            };
+        }
+    }
+
     return {
-        byColumn
+        byColumn,
+        newPersistedData
     };
 }
 

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

@@ -5,6 +5,8 @@ import attributeService from "../../../services/attributes";
 import branchService from "../../../services/branches";
 import noteCreateService from "../../../services/note_create";
 import appContext, { EventData } from "../../../components/app_context";
+import { BoardData } from "./config";
+import SpacedUpdate from "../../../services/spaced_update";
 
 const TPL = /*html*/`
 <div class="board-view">
@@ -115,17 +117,15 @@ const TPL = /*html*/`
 </div>
 `;
 
-export interface StateInfo {
+export default class BoardView extends ViewMode<BoardData> {
-
-};
-
-export default class BoardView extends ViewMode<StateInfo> {
 
     private $root: JQuery<HTMLElement>;
     private $container: JQuery<HTMLElement>;
+    private spacedUpdate: SpacedUpdate;
     private draggedNote: any = null;
     private draggedBranch: any = null;
     private draggedNoteElement: JQuery<HTMLElement> | null = null;
+    private persistentData: BoardData;
 
     constructor(args: ViewModeArgs) {
         super(args, "board");
@@ -133,6 +133,10 @@ export default class BoardView extends ViewMode<StateInfo> {
         this.$root = $(TPL);
         setupHorizontalScrollViaWheel(this.$root);
         this.$container = this.$root.find(".board-view-container");
+        this.spacedUpdate = new SpacedUpdate(() => this.onSave(), 5_000);
+        this.persistentData = {
+            columns: []
+        };
 
         args.$parent.append(this.$root);
     }
@@ -145,7 +149,12 @@ export default class BoardView extends ViewMode<StateInfo> {
     }
 
     private async renderBoard(el: HTMLElement) {
-        const data = await getBoardData(this.parentNote, "status");
+        const data = await getBoardData(this.parentNote, "status", this.persistentData);
+
+        if (data.newPersistedData) {
+            this.persistentData = data.newPersistedData;
+            this.viewStorage.store(this.persistentData);
+        }
 
         for (const column of data.byColumn.keys()) {
             const columnItems = data.byColumn.get(column);
@@ -421,4 +430,8 @@ export default class BoardView extends ViewMode<StateInfo> {
         return false;
     }
 
+    private onSave() {
+        this.viewStorage.store(this.persistentData);
+    }
+
 }