prepare opening boards

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);
       }
     );
   }