prepare opening boards

dist/index.js

@@ -1383,6 +1383,14 @@
     boardInfo;
     name = new State("");
     color = new State("standard" /* Standard */);
+    isSelected;
+    // view
+    select = () => {
+      this.taskPageViewModel.selectBoard(this);
+    };
+    close = () => {
+      this.taskPageViewModel.closeBoard();
+    };
     // load
     loadListRelevantData = () => {
       this.name.value = this.boardInfo.name;
@@ -1395,6 +1403,10 @@
       this.taskPageViewModel = taskPageViewModel;
       this.boardInfo = boardInfo;
       this.loadListRelevantData();
+      this.isSelected = createProxyState(
+        [this.taskPageViewModel.selectedBoard],
+        () => this.taskPageViewModel.selectedBoard.value == this
+      );
     }
   };
 
@@ -1404,6 +1416,7 @@
     // state
     newBoardNameInput = new State("");
     boardViewModels = new MapState();
+    selectedBoard = new State(void 0);
     // guards
     cannotCreateBoard = createProxyState(
       [this.newBoardNameInput],
@@ -1413,20 +1426,26 @@
     handleFileContent = (fileContent) => {
       if (checkMatchesObjectStructure(fileContent, BoardInfoFileContentReference) == false)
         return;
-      this.showBoard(fileContent);
+      this.showBoardInList(fileContent);
     };
     // methods
     createBoard = () => {
       if (this.cannotCreateBoard.value == true) return;
       const boardInfoFileContent = this.taskModel.createBoard(this.newBoardNameInput.value);
       this.newBoardNameInput.value = "";
-      this.showBoard(boardInfoFileContent);
+      this.showBoardInList(boardInfoFileContent);
     };
     // view
-    showBoard = (boardInfo) => {
+    showBoardInList = (boardInfo) => {
       const boardViewModel = new BoardViewModel(this, boardInfo);
       this.boardViewModels.set(boardInfo.fileId, boardViewModel);
     };
+    selectBoard = (boardViewModel) => {
+      this.selectedBoard.value = boardViewModel;
+    };
+    closeBoard = () => {
+      this.selectedBoard.value = void 0;
+    };
     // load
     loadData = () => {
       this.boardViewModels.clear();
@@ -1434,7 +1453,7 @@
       for (const boardId of boardIds) {
         const boardInfo = this.taskModel.getBoardInfo(boardId);
         if (boardInfo == null) continue;
-        this.showBoard(boardInfo);
+        this.showBoardInList(boardInfo);
       }
     };
     // init
@@ -1442,7 +1461,7 @@
       this.taskModel = taskModel;
       taskModel.boardHandlerManager.addHandler(
         (boardInfoFileContent) => {
-          this.showBoard(boardInfoFileContent);
+          this.showBoardInList(boardInfoFileContent);
         }
       );
     }
@@ -1953,7 +1972,9 @@
       "button",
       {
         "set:color": boardViewModel.color,
-        class: "tile colored-tile"
+        class: "tile colored-tile",
+        "toggle:selected": boardViewModel.isSelected,
+        "on:click": boardViewModel.select
       },
       /* @__PURE__ */ createElement("span", { class: "shadow", "subscribe:innerText": boardViewModel.name }),
       /* @__PURE__ */ createElement("b", { "subscribe:innerText": boardViewModel.name })

src/View/Components/boardEntry.tsx

@@ -7,6 +7,9 @@ export function BoardEntry(boardViewModel: BoardViewModel) {
     <button
       set:color={boardViewModel.color}
       class="tile colored-tile"
+
+      toggle:selected={boardViewModel.isSelected}
+      on:click={boardViewModel.select}
     >
       <span class="shadow" subscribe:innerText={boardViewModel.name}></span>
       <b subscribe:innerText={boardViewModel.name}></b>

src/ViewModel/Pages/boardViewModel.ts

@@ -13,19 +13,38 @@ export default class BoardViewModel {
   name: React.State<string> = new React.State("");
   color: React.State<Color> = new React.State<Color>(Color.Standard);
 
+  isSelected: React.State<boolean>;
+
+  // view
+  select = (): void => {
+    this.taskPageViewModel.selectBoard(this);
+  };
+
+  close = (): void => {
+    this.taskPageViewModel.closeBoard();
+  };
+
   // load
   loadListRelevantData = (): void => {
     this.name.value = this.boardInfo.name;
     this.color.value = this.boardInfo.color;
-  }
+  };
 
-  loadData = (): void => {}
+  loadData = (): void => {};
 
   // init
-  constructor(taskPageViewModel: TaskPageViewModel, boardInfo: BoardInfoFileContent) {
+  constructor(
+    taskPageViewModel: TaskPageViewModel,
+    boardInfo: BoardInfoFileContent
+  ) {
     this.taskPageViewModel = taskPageViewModel;
     this.boardInfo = boardInfo;
 
     this.loadListRelevantData();
+
+    this.isSelected = React.createProxyState(
+      [this.taskPageViewModel.selectedBoard],
+      () => this.taskPageViewModel.selectedBoard.value == this
+    );
   }
 }

src/ViewModel/Pages/taskPageViewModel.ts

@@ -18,6 +18,10 @@ export default class TaskPageViewModel {
 
   boardViewModels: React.MapState<BoardViewModel> = new React.MapState();
 
+  selectedBoard: React.State<BoardViewModel | undefined> = new React.State<
+    BoardViewModel | undefined
+  >(undefined);
+
   // guards
   cannotCreateBoard: React.State<boolean> = React.createProxyState(
     [this.newBoardNameInput],
@@ -31,7 +35,7 @@ export default class TaskPageViewModel {
       false
     )
       return;
-    this.showBoard(fileContent as BoardInfoFileContent);
+    this.showBoardInList(fileContent as BoardInfoFileContent);
   };
 
   // methods
@@ -42,15 +46,23 @@ export default class TaskPageViewModel {
       this.taskModel.createBoard(this.newBoardNameInput.value);
     this.newBoardNameInput.value = "";
 
-    this.showBoard(boardInfoFileContent);
+    this.showBoardInList(boardInfoFileContent);
   };
 
   // view
-  showBoard = (boardInfo: BoardInfoFileContent): void => {
+  showBoardInList = (boardInfo: BoardInfoFileContent): void => {
     const boardViewModel: BoardViewModel = new BoardViewModel(this, boardInfo);
     this.boardViewModels.set(boardInfo.fileId, boardViewModel);
   };
 
+  selectBoard = (boardViewModel: BoardViewModel): void => {
+    this.selectedBoard.value = boardViewModel;
+  };
+
+  closeBoard = (): void => {
+    this.selectedBoard.value = undefined;
+  };
+
   // load
   loadData = (): void => {
     this.boardViewModels.clear();
@@ -61,7 +73,7 @@ export default class TaskPageViewModel {
         this.taskModel.getBoardInfo(boardId);
       if (boardInfo == null) continue;
 
-      this.showBoard(boardInfo);
+      this.showBoardInList(boardInfo);
     }
   };
 
@@ -72,7 +84,7 @@ export default class TaskPageViewModel {
     // handlers
     taskModel.boardHandlerManager.addHandler(
       (boardInfoFileContent: BoardInfoFileContent) => {
-        this.showBoard(boardInfoFileContent);
+        this.showBoardInList(boardInfoFileContent);
       }
     );
   }