restructure, allow changing board of task through settings modal

src/Model/Files/boardsAndTasksModel.ts

@@ -140,6 +140,12 @@ export default class BoardsAndTasksModel {
     return boardInfoFileContentOrNull;
   };
 
+  getBoardName = (boardId: string): string => {
+    const boardInfo: BoardInfoFileContent|null = this.getBoardInfo(boardId);
+    if (boardInfo == null) return "";
+    return boardInfo.name;
+  }
+
   //tasks
   createTask = (boardId: string): TaskFileContent => {
     const taskFileContent: TaskFileContent =

src/View/Components/option.tsx

@@ -14,6 +14,12 @@ export const StringToOption: React.StateItemConverter<string> = (
   return Option(string, string, false);
 };
 
+export const EntryToOption: React.StateItemConverter<Entry> = (
+  entry: Entry
+) => {
+  return Option(entry[1], entry[0], false);
+};
+
 export const VersionIdToOption: React.StateItemConverter<string> = (
   versionId: string
 ) => {
@@ -22,3 +28,5 @@ export const VersionIdToOption: React.StateItemConverter<string> = (
   const readableName = `${date} ${time}`;
   return Option(readableName, versionId, false);
 };
+
+export type Entry = [string, string];

src/View/Modals/taskSettingsModal.tsx

@@ -1,6 +1,10 @@
 import * as React from "bloatless-react";
 
-import { StringToOption, VersionIdToOption } from "../Components/option";
+import {
+  EntryToOption,
+  StringToOption,
+  VersionIdToOption,
+} from "../Components/option";
 
 import { DangerousActionButton } from "../Components/dangerousActionButton";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
@@ -39,6 +43,21 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
             </div>
           </label>
 
+          <label class="tile flex-no">
+            <span class="icon">category</span>
+            <div>
+              <span>{translations.chatPage.task.taskBoardLabel}</span>
+              <select
+                bind:value={taskViewModel.boardId}
+                children:append={[
+                  taskViewModel.chatViewModel.taskBoardSuggestions,
+                  EntryToOption,
+                ]}
+              ></select>
+              <span class="icon">arrow_drop_down</span>
+            </div>
+          </label>
+
           <label class="tile flex-no">
             <span class="icon">description</span>
             <div>

src/View/translations.ts

@@ -214,6 +214,7 @@ const englishTranslations = {
       taskSettingsHeadline: "Edit Task",
 
       taskNameLabel: "Title",
+      taskBoardLabel: "Board",
 
       taskCategoryLabel: "Category",
       taskStatusLabel: "Status",
@@ -456,6 +457,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
         taskSettingsHeadline: "Aufgabe bearbeiten",
 
         taskNameLabel: "Titel",
+        taskBoardLabel: "Board",
 
         taskCategoryLabel: "Kategorie",
         taskStatusLabel: "Status",
@@ -683,6 +685,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
         taskSettingsHeadline: "Editar Tarea",
 
         taskNameLabel: "Título",
+        taskBoardLabel: "Tablero",
 
         taskCategoryLabel: "Categoría",
         taskStatusLabel: "Estado",

src/ViewModel/Chat/chatViewModel.ts

@@ -10,6 +10,7 @@ import CalendarPageViewModel from "../Pages/calendarPageViewModel";
 import ChatListViewModel from "./chatListViewModel";
 import { Color } from "../../colors";
 import CoreViewModel from "../Global/coreViewModel";
+import { Entry } from "../../View/Components/option";
 import MessagePageViewModel from "../Pages/messagePageViewModel";
 import SettingsPageViewModel from "../Pages/settingsPageViewModel";
 import SettingsViewModel from "../Global/settingsViewModel";
@@ -35,6 +36,8 @@ export default class ChatViewModel {
   index: React.State<number> = new React.State(0);
   hasUnreadMessages: React.State<boolean> = new React.State(false);
 
+  taskBoardSuggestions: React.MapState<Entry> = new React.MapState();
+
   // view
   open = (): void => {
     this.chatListViewModel.openChat(this);
@@ -109,16 +112,16 @@ export default class ChatViewModel {
     // page viewModels
     this.calendarViewModel = new CalendarPageViewModel(
       coreViewModel,
+      this,
       this.storageModel,
       this.chatModel.fileModel.boardsAndTasksModel.calendarModel,
-      this.chatModel.fileModel.boardsAndTasksModel,
-      this
+      this.chatModel.fileModel.boardsAndTasksModel
     );
     this.taskPageViewModel = new TaskPageViewModel(
       this.coreViewModel,
+      this,
       this.storageModel,
-      this.chatModel.fileModel.boardsAndTasksModel,
-      this
+      this.chatModel.fileModel.boardsAndTasksModel
     );
     this.messagePageViewModel = new MessagePageViewModel(
       this.coreViewModel,

src/ViewModel/Global/coreViewModel.ts

@@ -1,10 +1,11 @@
 import * as React from "bloatless-react";
 
 export default class CoreViewModel {
-  // drag&drop
+  // DRAG & DROP
   draggedObject: React.State<any> = new React.State<any>(undefined);
 
-  // suggestions
+  // SUGGESTIONS
+  // boards & tasks
   boardSearchSuggestions: React.ListState<string> = new React.ListState();
   
   taskCategorySuggestions: React.ListState<string> = new React.ListState();

src/ViewModel/Pages/boardViewModel.ts

@@ -5,6 +5,7 @@ import BoardsAndTasksModel, {
   TaskFileContent,
 } from "../../Model/Files/boardsAndTasksModel";
 
+import ChatViewModel from "../Chat/chatViewModel";
 import { Color } from "../../colors";
 import CoreViewModel from "../Global/coreViewModel";
 import SearchViewModel from "../Utility/searchViewModel";
@@ -16,7 +17,7 @@ import TaskViewModel from "./taskViewModel";
 export default class BoardViewModel extends TaskContainingPageViewModel {
   storageModel: StorageModel;
   boardsAndTasksModel: BoardsAndTasksModel;
-
+  
   taskPageViewModel: TaskPageViewModel;
 
   // data
@@ -137,6 +138,7 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
 
     const taskViewModel: TaskViewModel = new TaskViewModel(
       this.coreViewModel,
+      this.chatViewModel,
       this.boardsAndTasksModel,
       this,
       taskFileContent
@@ -200,6 +202,7 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
 
       const taskViewModel: TaskViewModel = new TaskViewModel(
         this.coreViewModel,
+        this.chatViewModel,
         this.boardsAndTasksModel,
         this,
         taskFileContent
@@ -233,12 +236,13 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
   // init
   constructor(
     public coreViewModel: CoreViewModel,
+    public chatViewModel: ChatViewModel,
     storageModel: StorageModel,
     boardsAndTasksModel: BoardsAndTasksModel,
     taskPageViewModel: TaskPageViewModel,
     boardInfo: BoardInfoFileContent
   ) {
-    super(coreViewModel, boardsAndTasksModel);
+    super(coreViewModel, chatViewModel, boardsAndTasksModel);
 
     // set
     this.storageModel = storageModel;

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -16,8 +16,6 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
   calendarModel: CalendarModel;
   boardsAndTasksModel: BoardsAndTasksModel;
 
-  chatViewModel: ChatViewModel;
-
   // data
   get monthString(): string {
     return CalendarModel.getMonthString(
@@ -51,6 +49,7 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
 
     const taskViewModel: TaskViewModel = new TaskViewModel(
       this.coreViewModel,
+      this.chatViewModel,
       this.boardsAndTasksModel,
       this,
       taskFileContent
@@ -99,6 +98,7 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
 
     const taskViewModel: TaskViewModel = new TaskViewModel(
       this.coreViewModel,
+      this.chatViewModel,
       this.boardsAndTasksModel,
       this,
       taskFileContent
@@ -181,12 +181,12 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
   // init
   constructor(
     public coreViewModel: CoreViewModel,
+    public chatViewModel: ChatViewModel,
     storageModel: StorageModel,
     calendarModel: CalendarModel,
     boardsAndTasksModel: BoardsAndTasksModel,
-    chatViewModel: ChatViewModel
   ) {
-    super(coreViewModel, boardsAndTasksModel);
+    super(coreViewModel, chatViewModel, boardsAndTasksModel);
 
     this.storageModel = storageModel;
     this.calendarModel = calendarModel;

src/ViewModel/Pages/taskContainingPageViewModel.ts

@@ -4,14 +4,12 @@ import BoardsAndTasksModel, {
   TaskFileContent,
 } from "../../Model/Files/boardsAndTasksModel";
 
-import BoardViewModel from "./boardViewModel";
-import CalendarPageViewModel from "./calendarPageViewModel";
+import ChatViewModel from "../Chat/chatViewModel";
 import CoreViewModel from "../Global/coreViewModel";
 import { IndexManager } from "../../Model/Utility/utility";
 import TaskViewModel from "./taskViewModel";
 
 export default class TaskContainingPageViewModel {
-  coreViewModel: CoreViewModel;
   boardsAndTasksModel: BoardsAndTasksModel;
 
   // state
@@ -30,6 +28,7 @@ export default class TaskContainingPageViewModel {
       this.boardsAndTasksModel.createTask(boardId);
     const taskViewModel: TaskViewModel = new TaskViewModel(
       this.coreViewModel,
+      this.chatViewModel,
       this.boardsAndTasksModel,
       this,
       taskFileContent
@@ -59,10 +58,10 @@ export default class TaskContainingPageViewModel {
 
   // init
   constructor(
-    coreViewModel: CoreViewModel,
+    public coreViewModel: CoreViewModel,
+    public chatViewModel: ChatViewModel,
     boardsAndTasksModel: BoardsAndTasksModel
   ) {
-    this.coreViewModel = coreViewModel;
     this.boardsAndTasksModel = boardsAndTasksModel;
   }
 }

src/ViewModel/Pages/taskPageViewModel.ts

@@ -14,8 +14,6 @@ export default class TaskPageViewModel {
   storageModel: StorageModel;
   boardsAndTasksModel: BoardsAndTasksModel;
 
-  chatViewModel: ChatViewModel;
-
   // data
   boardIndexManager: IndexManager<BoardViewModel> = new IndexManager(
     (boardViewModel: BoardViewModel) => boardViewModel.name.value
@@ -77,12 +75,18 @@ export default class TaskPageViewModel {
   showBoardInList = (boardInfo: BoardInfoFileContent): void => {
     const boardViewModel: BoardViewModel = new BoardViewModel(
       this.coreViewModel,
+      this.chatViewModel,
       this.storageModel,
       this.boardsAndTasksModel,
       this,
       boardInfo
     );
     this.boardViewModels.set(boardInfo.fileId, boardViewModel);
+
+    this.chatViewModel.taskBoardSuggestions.set(boardInfo.fileId, [
+      boardInfo.fileId,
+      this.boardsAndTasksModel.getBoardName(boardInfo.fileId),
+    ]);
   };
 
   selectBoard = (boardViewModel: BoardViewModel): void => {
@@ -145,9 +149,9 @@ export default class TaskPageViewModel {
   // init
   constructor(
     public coreViewModel: CoreViewModel,
+    public chatViewModel: ChatViewModel,
     storageModel: StorageModel,
-    boardModel: BoardsAndTasksModel,
-    chatViewModel: ChatViewModel
+    boardModel: BoardsAndTasksModel
   ) {
     this.storageModel = storageModel;
     this.boardsAndTasksModel = boardModel;

src/ViewModel/Pages/taskViewModel.ts

@@ -5,6 +5,7 @@ import BoardsAndTasksModel, {
 } from "../../Model/Files/boardsAndTasksModel";
 import { localeCompare, padZero } from "../../Model/Utility/utility";
 
+import ChatViewModel from "../Chat/chatViewModel";
 import CoreViewModel from "../Global/coreViewModel";
 import TaskContainingPageViewModel from "./taskContainingPageViewModel";
 import { allowDrag } from "../../View/utility";
@@ -195,6 +196,7 @@ export default class TaskViewModel {
   // init
   constructor(
     public coreViewModel: CoreViewModel,
+    public chatViewModel: ChatViewModel,
     boardsAndTasksModel: BoardsAndTasksModel,
     containingModel: TaskContainingPageViewModel,
     taskFileContent: TaskFileContent