add BoardViewModel

dist/index.js

@@ -1390,12 +1390,34 @@
     }
   };
 
+  // src/ViewModel/Pages/boardViewModel.ts
+  var BoardViewModel = class {
+    taskPageViewModel;
+    // data
+    boardInfo;
+    name = new State("");
+    color = new State("standard" /* Standard */);
+    // load
+    loadListRelevantData = () => {
+      this.name.value = this.boardInfo.name;
+      this.color.value = this.boardInfo.color;
+    };
+    loadData = () => {
+    };
+    // init
+    constructor(taskPageViewModel, boardInfo) {
+      this.taskPageViewModel = taskPageViewModel;
+      this.boardInfo = boardInfo;
+      this.loadListRelevantData();
+    }
+  };
+
   // src/ViewModel/Pages/taskPageViewModel.ts
   var TaskPageViewModel = class {
     taskModel;
     // state
     newBoardNameInput = new State("");
-    boards = new ListState();
+    boardViewModels = new ListState();
     // guards
     cannotCreateBoard = createProxyState(
       [this.newBoardNameInput],
@@ -1412,15 +1434,16 @@
       if (this.cannotCreateBoard.value == true) return;
       const boardInfoFileContent = this.taskModel.createBoard(this.newBoardNameInput.value);
       this.newBoardNameInput.value = "";
-      this.boards.add(boardInfoFileContent);
+      this.showBoard(boardInfoFileContent);
     };
     // view
     showBoard = (boardInfo) => {
-      this.boards.add(boardInfo);
+      const boardViewModel = new BoardViewModel(this, boardInfo);
+      this.boardViewModels.add(boardViewModel);
     };
     // load
     loadData = () => {
-      this.boards.clear();
+      this.boardViewModels.clear();
       const boardIds = this.taskModel.listBoardIds();
       for (const boardId of boardIds) {
         const boardInfo = this.taskModel.getBoardInfo(boardId);
@@ -1951,20 +1974,20 @@
   }
 
   // src/View/Components/boardEntry.tsx
-  function BoardEntry(boardInfo) {
+  function BoardEntry(boardViewModel) {
     const view = /* @__PURE__ */ createElement(
       "button",
       {
-        color: boardInfo.color,
+        "set:color": boardViewModel.color,
         class: "tile colored-tile"
       },
-      /* @__PURE__ */ createElement("span", { class: "shadow" }, boardInfo.name),
-      /* @__PURE__ */ createElement("b", null, boardInfo.name)
+      /* @__PURE__ */ createElement("span", { class: "shadow", "subscribe:innerText": boardViewModel.name }),
+      /* @__PURE__ */ createElement("b", { "subscribe:innerText": boardViewModel.name })
     );
     return view;
   }
-  var BoardInfoToEntry = (boardInfo) => {
-    return BoardEntry(boardInfo);
+  var BoardInfoToEntry = (boardViewModel) => {
+    return BoardEntry(boardViewModel);
   };
 
   // src/View/ChatPages/taskPage.tsx
@@ -1991,7 +2014,7 @@
       {
         class: "grid gap",
         style: "grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))",
-        "children:append": [taskPageViewModel.boards, BoardInfoToEntry]
+        "children:append": [taskPageViewModel.boardViewModels, BoardInfoToEntry]
       }
     ))), /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }), /* @__PURE__ */ createElement("div", { class: "content" })));
   }

src/View/ChatPages/taskPage.tsx

@@ -34,7 +34,7 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
           <div
             class="grid gap"
             style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
-            children:append={[taskPageViewModel.boards, BoardInfoToEntry]}
+            children:append={[taskPageViewModel.boardViewModels, BoardInfoToEntry]}
           ></div>
         </div>
       </div>

src/View/Components/boardEntry.tsx

@@ -1,15 +1,15 @@
 import * as React from "bloatless-react";
 
-import { BoardInfoFileContent } from "../../Model/Files/taskModel";
+import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 
-export function BoardEntry(boardInfo: BoardInfoFileContent) {
+export function BoardEntry(boardViewModel: BoardViewModel) {
   const view = (
     <button
-      color={boardInfo.color}
+      set:color={boardViewModel.color}
       class="tile colored-tile"
     >
-      <span class="shadow">{boardInfo.name}</span>
-      <b>{boardInfo.name}</b>
+      <span class="shadow" subscribe:innerText={boardViewModel.name}></span>
+      <b subscribe:innerText={boardViewModel.name}></b>
     </button>
   );
 
@@ -17,7 +17,7 @@ export function BoardEntry(boardInfo: BoardInfoFileContent) {
 }
 
 export const BoardInfoToEntry: React.StateItemConverter<
-  BoardInfoFileContent
-> = (boardInfo: BoardInfoFileContent) => {
-  return BoardEntry(boardInfo);
+  BoardViewModel
+> = (boardViewModel: BoardViewModel) => {
+  return BoardEntry(boardViewModel);
 };

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -1,5 +1,3 @@
-// this file is responsible for managing individual chat messages.
-
 import * as React from "bloatless-react";
 
 import { ChatMessage, ChatMessageStatus } from "../../Model/Chat/chatModel";

src/ViewModel/Pages/boardViewModel.ts

@@ -0,0 +1,31 @@
+import * as React from "bloatless-react";
+
+import { BoardInfoFileContent } from "../../Model/Files/taskModel";
+import { Color } from "../../colors";
+import TaskPageViewModel from "./taskPageViewModel";
+
+export default class BoardViewModel {
+  taskPageViewModel: TaskPageViewModel;
+
+  // data
+  boardInfo: BoardInfoFileContent;
+
+  name: React.State<string> = new React.State("");
+  color: React.State<Color> = new React.State<Color>(Color.Standard);
+
+  // load
+  loadListRelevantData = (): void => {
+    this.name.value = this.boardInfo.name;
+    this.color.value = this.boardInfo.color;
+  }
+
+  loadData = (): void => {}
+
+  // init
+  constructor(taskPageViewModel: TaskPageViewModel, boardInfo: BoardInfoFileContent) {
+    this.taskPageViewModel = taskPageViewModel;
+    this.boardInfo = boardInfo;
+
+    this.loadListRelevantData();
+  }
+}

src/ViewModel/Pages/taskPageViewModel.ts

@@ -5,6 +5,7 @@ import TaskModel, {
   BoardInfoFileContentReference,
 } from "../../Model/Files/taskModel";
 
+import BoardViewModel from "./boardViewModel";
 import { FileContent } from "../../Model/Files/fileModel";
 import StorageModel from "../../Model/Global/storageModel";
 import { checkMatchesObjectStructure } from "../../Model/Utility/typeSafety";
@@ -15,7 +16,7 @@ export default class TaskPageViewModel {
   // state
   newBoardNameInput: React.State<string> = new React.State("");
 
-  boards: React.ListState<BoardInfoFileContent> = new React.ListState();
+  boardViewModels: React.ListState<BoardViewModel> = new React.ListState();
 
   // guards
   cannotCreateBoard: React.State<boolean> = React.createProxyState(
@@ -41,17 +42,18 @@ export default class TaskPageViewModel {
       this.taskModel.createBoard(this.newBoardNameInput.value);
     this.newBoardNameInput.value = "";
 
-    this.boards.add(boardInfoFileContent);
+    this.showBoard(boardInfoFileContent);
   };
 
   // view
   showBoard = (boardInfo: BoardInfoFileContent): void => {
-    this.boards.add(boardInfo);
+    const boardViewModel: BoardViewModel = new BoardViewModel(this, boardInfo);
+    this.boardViewModels.add(boardViewModel);
   };
 
   // load
   loadData = (): void => {
-    this.boards.clear();
+    this.boardViewModels.clear();
 
     const boardIds: string[] = this.taskModel.listBoardIds();
     for (const boardId of boardIds) {