implement creating and listing tasks

dist/index.js

@@ -1439,12 +1439,23 @@
     };
     // state
     name = new State("");
+    description = new State("");
     category = new State("");
     status = new State("");
-    description = new State("");
     priority = new State("");
     date = new State("");
     time = new State("");
+    // view
+    showSettings = () => {
+      this.boardViewModel.selectTask(this);
+    };
+    hideSettings = () => {
+      this.boardViewModel.closeTask();
+    };
+    hideSettingsAndSave = () => {
+      this.hideSettings();
+      this.save();
+    };
     // storage
     save = () => {
       const newTaskFileContent = BoardModel.createTaskFileContent(
@@ -1452,9 +1463,9 @@
         this.name.value,
         this.boardViewModel.boardInfo.fileId
       );
+      newTaskFileContent.description = this.description.value;
       newTaskFileContent.status = this.status.value;
       newTaskFileContent.category = this.category.value;
-      newTaskFileContent.description = this.description.value;
       newTaskFileContent.priority = this.priority.value;
       newTaskFileContent.date = this.date.value;
       newTaskFileContent.time = this.time.value;
@@ -1464,9 +1475,9 @@
     // load
     loadAllData = () => {
       this.name.value = this.task.name;
+      this.description.value = this.task.description ?? "";
       this.category.value = this.task.category ?? "";
       this.status.value = this.task.status ?? "";
-      this.description.value = this.task.description ?? "";
       this.priority.value = this.task.priority ?? "";
       this.date.value = this.task.date ?? "";
       this.time.value = this.task.time ?? "";
@@ -1490,15 +1501,15 @@
     // state
     name = new State("");
     color = new State("standard" /* Standard */);
-    isSelected;
+    index = new State(0);
-    isPresentingSettingsModal = new State(false);
+    taskViewModels = new MapState();
-    isPresentingFilterModal = new State(false);
-    isPresentingNewTaskModal = new State(false);
     selectedPage = new State(
       "list" /* List */
     );
-    index = new State(0);
+    selectedTaskViewModel = new State(void 0);
-    taskViewModels = new MapState();
+    isSelected;
+    isPresentingSettingsModal = new State(false);
+    isPresentingFilterModal = new State(false);
     // paths
     getBasePath = () => {
       return [...this.taskPageViewModel.getBoardViewPath(this.boardInfo.fileId)];
@@ -1506,6 +1517,49 @@
     getLastUsedBoardPath = () => {
       return [...this.getBasePath(), "last-used-view" /* LastUsedView */];
     };
+    // settings
+    saveSettings = () => {
+      const newBoardInfoFileContent = BoardModel.createBoardInfoFileContent(
+        this.boardInfo.fileId,
+        this.name.value,
+        this.color.value
+      );
+      this.taskPageViewModel.updateBoard(newBoardInfoFileContent);
+    };
+    applyColor = () => {
+      this.taskPageViewModel.chatViewModel.setDisplayedColor(this.color.value);
+    };
+    deleteBoard = () => {
+      this.taskPageViewModel.deleteBoard(this.boardInfo);
+      this.close();
+    };
+    // tasks
+    createTask = () => {
+      const taskFileContent = this.boardModel.createTask(
+        this.boardInfo.fileId
+      );
+      const taskViewModel = new TaskViewModel(
+        this.boardModel,
+        this,
+        taskFileContent
+      );
+      this.selectTask(taskViewModel);
+    };
+    trackTask = (taskViewModel) => {
+      this.taskViewModels.set(taskViewModel.task.fileId, taskViewModel);
+    };
+    // storage
+    storeLastUsedView = () => {
+      const path = this.getLastUsedBoardPath();
+      const lastUsedView = this.selectedPage.value;
+      this.storageModel.write(path, lastUsedView);
+    };
+    restoreLastUsedView = () => {
+      const path = this.getLastUsedBoardPath();
+      const lastUsedView = this.storageModel.read(path);
+      if (lastUsedView == null) return;
+      this.selectedPage.value = lastUsedView;
+    };
     // view
     select = () => {
       this.taskPageViewModel.selectBoard(this);
@@ -1526,53 +1580,16 @@
     hideFilterModal = () => {
       this.isPresentingFilterModal.value = false;
     };
-    showNewTaskModal = () => {
+    selectTask = (selectedTask) => {
-      this.isPresentingNewTaskModal.value = true;
+      this.selectedTaskViewModel.value = selectedTask;
     };
-    hideNewTaskModal = () => {
+    closeTask = () => {
-      this.isPresentingNewTaskModal.value = false;
+      this.selectedTaskViewModel.value = void 0;
     };
     updateIndex = () => {
       const index = this.taskPageViewModel.boardIndexManager.getIndex(this);
       this.index.value = index;
     };
-    // settings
-    saveSettings = () => {
-      const newBoardInfoFileContent = BoardModel.createBoardInfoFileContent(
-        this.boardInfo.fileId,
-        this.name.value,
-        this.color.value
-      );
-      this.taskPageViewModel.updateBoard(newBoardInfoFileContent);
-    };
-    applyColor = () => {
-      this.taskPageViewModel.chatViewModel.setDisplayedColor(this.color.value);
-    };
-    deleteBoard = () => {
-      this.taskPageViewModel.deleteBoard(this.boardInfo);
-      this.close();
-    };
-    // tasks
-    createTask = () => {
-      const taskFileContent = this.boardModel.createTask(this.boardInfo.fileId);
-      const taskViewModel = new TaskViewModel(this.boardModel, this, taskFileContent);
-      return taskViewModel;
-    };
-    trackTask = (taskViewModel) => {
-      this.taskViewModels.set(taskViewModel.task.fileId, taskViewModel);
-    };
-    // storage
-    storeLastUsedView = () => {
-      const path = this.getLastUsedBoardPath();
-      const lastUsedView = this.selectedPage.value;
-      this.storageModel.write(path, lastUsedView);
-    };
-    restoreLastUsedView = () => {
-      const path = this.getLastUsedBoardPath();
-      const lastUsedView = this.storageModel.read(path);
-      if (lastUsedView == null) return;
-      this.selectedPage.value = lastUsedView;
-    };
     // load
     loadListRelevantData = () => {
       this.name.value = this.boardInfo.name;
@@ -1910,10 +1927,11 @@
   // src/View/translations.ts
   var englishTranslations = {
     general: {
-      closeButton: "Close",
       deleteItemButtonAudioLabel: "delete item",
       abortButton: "Abort",
+      closeButton: "Close",
       confirmButton: "Confirm",
+      saveButton: "Save",
       setButton: "Set"
     },
     regional: {
@@ -2020,7 +2038,15 @@
         ///
         boardSettingsHeadline: "Board Settings",
         boardNameInputLabel: "Board name",
-        deleteBoardButton: "Delete board and all tasks"
+        deleteBoardButton: "Delete board and all tasks",
+        ///
+        taskNameLabel: "Title",
+        taskCategoryLabel: "Category",
+        taskStatusLabel: "Status",
+        taskPriorityLabel: "Priority",
+        taskDescriptionLabel: "Description",
+        taskDateLabel: "Date",
+        taskTimeLabel: "Time"
       }
     }
   };
@@ -2279,28 +2305,6 @@
     ))))));
   }
 
-  // src/View/Components/boardEntry.tsx
-  function BoardEntry(boardViewModel) {
-    const view = /* @__PURE__ */ createElement(
-      "button",
-      {
-        "set:color": boardViewModel.color,
-        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 })
-    );
-    boardViewModel.index.subscribe((newIndex) => {
-      view.style.order = newIndex;
-    });
-    return view;
-  }
-  var BoardInfoToEntry = (boardViewModel) => {
-    return BoardEntry(boardViewModel);
-  };
-
   // src/View/Modals/boardSettingsModal.tsx
   function BoardSettingsModal(boardViewModel) {
     return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": boardViewModel.isPresentingSettingsModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.task.boardSettingsHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.boardNameInputLabel), /* @__PURE__ */ createElement(
@@ -2328,6 +2332,20 @@
     return RibbonButton(label, icon, isSelected, select);
   }
 
+  // src/View/Modals/taskSettingsModal.tsx
+  function TaskSettingsModal(taskViewModel) {
+    return /* @__PURE__ */ createElement("div", { class: "modal", open: true }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.task.boardSettingsHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskNameLabel), /* @__PURE__ */ createElement("input", { "bind:value": taskViewModel.name }))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "description"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskDescriptionLabel), /* @__PURE__ */ createElement("textarea", { rows: "10", "bind:value": taskViewModel.description }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskCategoryLabel), /* @__PURE__ */ createElement("input", { "bind:value": taskViewModel.category }))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "clock_loader_40"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskStatusLabel), /* @__PURE__ */ createElement("input", { "bind:value": taskViewModel.status }))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "priority_high"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskPriorityLabel), /* @__PURE__ */ createElement("input", { type: "number", "bind:value": taskViewModel.priority }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "calendar_month"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskDateLabel), /* @__PURE__ */ createElement("input", { type: "date", "bind:value": taskViewModel.date }))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskTimeLabel), /* @__PURE__ */ createElement("input", { type: "time", "bind:value": taskViewModel.time })))), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement("button", { class: "flex", "on:click": taskViewModel.hideSettings }, translations.general.closeButton), /* @__PURE__ */ createElement("button", { class: "flex primary", "on:click": taskViewModel.hideSettingsAndSave }, translations.general.saveButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "save")))));
+  }
+
+  // src/View/Components/taskEntry.tsx
+  function TaskEntry(taskViewModel) {
+    const view = /* @__PURE__ */ createElement("button", { class: "tile" }, /* @__PURE__ */ createElement("b", { "subscribe:innerText": taskViewModel.name }));
+    return view;
+  }
+  var TaskViewModelToEntry = (taskViewModel) => {
+    return TaskEntry(taskViewModel);
+  };
+
   // src/View/ChatPages/boardPage.tsx
   function BoardPage(boardViewModel) {
     boardViewModel.loadData();
@@ -2336,8 +2354,28 @@
       () => {
         switch (boardViewModel.selectedPage.value) {
           default: {
-            return /* @__PURE__ */ createElement("div", null);
+            return /* @__PURE__ */ createElement(
+              "div",
+              {
+                class: "grid gap",
+                style: "grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr))",
+                "children:append": [
+                  boardViewModel.taskViewModels,
+                  TaskViewModelToEntry
+                ]
               }
+            );
+          }
+        }
+      }
+    );
+    const taskSettingsModal = createProxyState(
+      [boardViewModel.selectedTaskViewModel],
+      () => {
+        if (boardViewModel.selectedTaskViewModel.value == void 0) {
+          return /* @__PURE__ */ createElement("div", null);
+        } else {
+          return TaskSettingsModal(boardViewModel.selectedTaskViewModel.value);
         }
       }
     );
@@ -2385,12 +2423,34 @@
       {
         class: "ghost",
         "aria-label": translations.chatPage.task.createTaskButtonAudioLabel,
-        "on:click": boardViewModel.showNewTaskModal
+        "on:click": boardViewModel.createTask
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "add")
-    ))), /* @__PURE__ */ createElement("div", { class: "content", "children:set": mainContent }), BoardSettingsModal(boardViewModel));
+    ))), /* @__PURE__ */ createElement("div", { class: "content", "children:set": mainContent }), BoardSettingsModal(boardViewModel), /* @__PURE__ */ createElement("div", { "children:set": taskSettingsModal }));
   }
 
+  // src/View/Components/boardEntry.tsx
+  function BoardEntry(boardViewModel) {
+    const view = /* @__PURE__ */ createElement(
+      "button",
+      {
+        "set:color": boardViewModel.color,
+        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 })
+    );
+    boardViewModel.index.subscribe((newIndex) => {
+      view.style.order = newIndex;
+    });
+    return view;
+  }
+  var BoardViewModelToEntry = (boardViewModel) => {
+    return BoardEntry(boardViewModel);
+  };
+
   // src/View/ChatPages/taskPage.tsx
   function TaskPage(taskPageViewModel) {
     taskPageViewModel.loadData();
@@ -2442,7 +2502,7 @@
           style: "grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))",
           "children:append": [
             taskPageViewModel.boardViewModels,
-            BoardInfoToEntry
+            BoardViewModelToEntry
           ]
         }
       )))

src/View/ChatPages/boardPage.tsx

@@ -6,6 +6,8 @@ import BoardViewModel, {
 
 import { BoardSettingsModal } from "../Modals/boardSettingsModal";
 import { BoardViewToggleButton } from "../Components/boardViewToggleButton";
+import { TaskSettingsModal } from "../Modals/taskSettingsModal";
+import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { translations } from "../translations";
 
 export function BoardPage(boardViewModel: BoardViewModel) {
@@ -16,12 +18,32 @@ export function BoardPage(boardViewModel: BoardViewModel) {
     () => {
       switch (boardViewModel.selectedPage.value) {
         default: {
-          return <div></div>;
+          return (
+            <div
+              class="grid gap"
+              style="grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr))"
+              children:append={[
+                boardViewModel.taskViewModels,
+                TaskViewModelToEntry,
+              ]}
+            ></div>
+          );
         }
       }
     }
   );
 
+  const taskSettingsModal = React.createProxyState(
+    [boardViewModel.selectedTaskViewModel],
+    () => {
+      if (boardViewModel.selectedTaskViewModel.value == undefined) {
+        return <div></div>;
+      } else {
+        return TaskSettingsModal(boardViewModel.selectedTaskViewModel.value);
+      }
+    }
+  );
+
   return (
     <div class="pane">
       <div class="toolbar">
@@ -72,7 +94,7 @@ export function BoardPage(boardViewModel: BoardViewModel) {
           <button
             class="ghost"
             aria-label={translations.chatPage.task.createTaskButtonAudioLabel}
-            on:click={boardViewModel.showNewTaskModal}
+            on:click={boardViewModel.createTask}
           >
             <span class="icon">add</span>
           </button>
@@ -81,6 +103,7 @@ export function BoardPage(boardViewModel: BoardViewModel) {
       <div class="content" children:set={mainContent}></div>
 
       {BoardSettingsModal(boardViewModel)}
+      <div children:set={taskSettingsModal}></div>
     </div>
   );
 }

src/View/ChatPages/taskPage.tsx

@@ -2,8 +2,8 @@ import "./taskPage.css";
 
 import * as React from "bloatless-react";
 
-import { BoardInfoToEntry } from "../Components/boardEntry";
 import { BoardPage } from "./boardPage";
+import { BoardViewModelToEntry } from "../Components/boardEntry";
 import TaskPageViewModel from "../../ViewModel/Pages/taskPageViewModel";
 import { translations } from "../translations";
 
@@ -77,7 +77,7 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
               style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
               children:append={[
                 taskPageViewModel.boardViewModels,
-                BoardInfoToEntry,
+                BoardViewModelToEntry,
               ]}
             ></div>
           </div>

src/View/Components/boardEntry.tsx

@@ -23,7 +23,7 @@ export function BoardEntry(boardViewModel: BoardViewModel) {
   return view;
 }
 
-export const BoardInfoToEntry: React.StateItemConverter<
+export const BoardViewModelToEntry: React.StateItemConverter<
   BoardViewModel
 > = (boardViewModel: BoardViewModel) => {
   return BoardEntry(boardViewModel);

src/View/Components/taskEntry.tsx

@@ -0,0 +1,19 @@
+import * as React from "bloatless-react";
+
+import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
+
+export function TaskEntry(taskViewModel: TaskViewModel) {
+  const view = (
+    <button class="tile">
+      <b subscribe:innerText={taskViewModel.name}></b>
+    </button>
+  );
+
+  return view;
+}
+
+export const TaskViewModelToEntry: React.StateItemConverter<TaskViewModel> = (
+  taskViewModel: TaskViewModel
+) => {
+  return TaskEntry(taskViewModel);
+};

src/View/Modals/taskSettingsModal.tsx

@@ -4,79 +4,78 @@ import { DangerousActionButton } from "../Components/dangerousActionButton";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { translations } from "../translations";
 
-export function TaskSettingsModal(taskViewModal: TaskViewModel) {
+export function TaskSettingsModal(taskViewModel: TaskViewModel) {
   return (
-    <div class="modal" toggle:open={taskViewModal.isPresentingSettingsModal}>
+    <div class="modal" open>
       <div>
         <main>
           <h2>{translations.chatPage.task.boardSettingsHeadline}</h2>
 
-          <div class="tile flex-no">
+          <label class="tile flex-no">
             <span class="icon">label</span>
             <div>
               <span>{translations.chatPage.task.taskNameLabel}</span>
-              <input bind:value={taskViewModal.name}></input>
+              <input bind:value={taskViewModel.name}></input>
-            </div>
             </div>
+          </label>
 
-          <div class="tile flex-no">
+          <label class="tile flex-no">
             <span class="icon">description</span>
             <div>
               <span>{translations.chatPage.task.taskDescriptionLabel}</span>
-              <input bind:value={taskViewModal.description}></input>
+              <textarea rows="10" bind:value={taskViewModel.description}></textarea>
-            </div>
             </div>
+          </label>
 
           <hr></hr>
 
-          <div class="tile flex-no">
+          <label class="tile flex-no">
             <span class="icon">category</span>
             <div>
               <span>{translations.chatPage.task.taskCategoryLabel}</span>
-              <input bind:value={taskViewModal.category}></input>
+              <input bind:value={taskViewModel.category}></input>
-            </div>
             </div>
+          </label>
 
-          <div class="tile flex-no">
+          <label class="tile flex-no">
             <span class="icon">clock_loader_40</span>
             <div>
               <span>{translations.chatPage.task.taskStatusLabel}</span>
-              <input bind:value={taskViewModal.status}></input>
+              <input bind:value={taskViewModel.status}></input>
-            </div>
             </div>
+          </label>
 
-          <div class="tile flex-no">
+          <label class="tile flex-no">
             <span class="icon">priority_high</span>
             <div>
               <span>{translations.chatPage.task.taskPriorityLabel}</span>
-              <input type="number" bind:value={taskViewModal.priority}></input>
+              <input type="number" bind:value={taskViewModel.priority}></input>
-            </div>
             </div>
+          </label>
 
           <hr></hr>
 
-          <div class="tile flex-no">
+          <label class="tile flex-no">
             <span class="icon">calendar_month</span>
             <div>
               <span>{translations.chatPage.task.taskDateLabel}</span>
-              <input type="date" bind:value={taskViewModal.date}></input>
+              <input type="date" bind:value={taskViewModel.date}></input>
-            </div>
             </div>
+          </label>
 
-          <div class="tile flex-no">
+          <label class="tile flex-no">
             <span class="icon">schedule</span>
             <div>
               <span>{translations.chatPage.task.taskTimeLabel}</span>
-              <input type="time" bind:value={taskViewModal.time}></input>
+              <input type="time" bind:value={taskViewModel.time}></input>
-            </div>
             </div>
+          </label>
         </main>
-        <div class="flex-row">
+        <div class="flex-row width-100">
-          <button class="flex-1" on:click={taskViewModal.hideSettings}>
+          <button class="flex" on:click={taskViewModel.hideSettings}>
             {translations.general.closeButton}
-            <span class="icon">close</span>
           </button>
-          <button class="flex-1" on:click={taskViewModal.hideSettingsAndSave}>
+          <button class="flex primary" on:click={taskViewModel.hideSettingsAndSave}>
             {translations.general.saveButton}
             <span class="icon">save</span>
           </button>

src/ViewModel/Pages/boardViewModel.ts

@@ -23,18 +23,19 @@ 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>;
+  index: React.State<number> = new React.State(0);
-  isPresentingSettingsModal: React.State<boolean> = new React.State(false);
+
-  isPresentingFilterModal: React.State<boolean> = new React.State(false);
+  taskViewModels: React.MapState<TaskViewModel> = new React.MapState();
-  isPresentingNewTaskModal: React.State<boolean> = new React.State(false);
 
   selectedPage: React.State<BoardPageType> = new React.State<BoardPageType>(
     BoardPageType.List
   );
+  selectedTaskViewModel: React.State<TaskViewModel | undefined> =
+    new React.State<TaskViewModel | undefined>(undefined);
 
-  index: React.State<number> = new React.State(0);
+  isSelected: React.State<boolean>;
-
+  isPresentingSettingsModal: React.State<boolean> = new React.State(false);
-  taskViewModels: React.MapState<TaskViewModel> = new React.MapState();
+  isPresentingFilterModal: React.State<boolean> = new React.State(false);
 
   // paths
   getBasePath = (): string[] => {
@@ -45,6 +46,58 @@ export default class BoardViewModel {
     return [...this.getBasePath(), BoardViewModelSubPaths.LastUsedView];
   };
 
+  // settings
+  saveSettings = (): void => {
+    const newBoardInfoFileContent: BoardInfoFileContent =
+      BoardModel.createBoardInfoFileContent(
+        this.boardInfo.fileId,
+        this.name.value,
+        this.color.value
+      );
+    this.taskPageViewModel.updateBoard(newBoardInfoFileContent);
+  };
+
+  applyColor = (): void => {
+    this.taskPageViewModel.chatViewModel.setDisplayedColor(this.color.value);
+  };
+
+  deleteBoard = (): void => {
+    this.taskPageViewModel.deleteBoard(this.boardInfo);
+    this.close();
+  };
+
+  // tasks
+  createTask = (): void => {
+    const taskFileContent: TaskFileContent = this.boardModel.createTask(
+      this.boardInfo.fileId
+    );
+    const taskViewModel: TaskViewModel = new TaskViewModel(
+      this.boardModel,
+      this,
+      taskFileContent
+    );
+    this.selectTask(taskViewModel);
+  };
+
+  trackTask = (taskViewModel: TaskViewModel): void => {
+    this.taskViewModels.set(taskViewModel.task.fileId, taskViewModel);
+  };
+
+  // storage
+  storeLastUsedView = (): void => {
+    const path: string[] = this.getLastUsedBoardPath();
+    const lastUsedView: string = this.selectedPage.value;
+    this.storageModel.write(path, lastUsedView);
+  };
+
+  restoreLastUsedView = (): void => {
+    const path: string[] = this.getLastUsedBoardPath();
+    const lastUsedView: string | null = this.storageModel.read(path);
+    if (lastUsedView == null) return;
+
+    this.selectedPage.value = lastUsedView as BoardPageType;
+  };
+
   // view
   select = (): void => {
     this.taskPageViewModel.selectBoard(this);
@@ -71,12 +124,12 @@ export default class BoardViewModel {
     this.isPresentingFilterModal.value = false;
   };
 
-  showNewTaskModal = (): void => {
+  selectTask = (selectedTask: TaskViewModel): void => {
-    this.isPresentingNewTaskModal.value = true;
+    this.selectedTaskViewModel.value = selectedTask;
   };
 
-  hideNewTaskModal = (): void => {
+  closeTask = () => {
-    this.isPresentingNewTaskModal.value = false;
+    this.selectedTaskViewModel.value = undefined;
   };
 
   updateIndex = (): void => {
@@ -85,52 +138,6 @@ export default class BoardViewModel {
     this.index.value = index;
   };
 
-  // settings
-  saveSettings = (): void => {
-    const newBoardInfoFileContent: BoardInfoFileContent =
-      BoardModel.createBoardInfoFileContent(
-        this.boardInfo.fileId,
-        this.name.value,
-        this.color.value
-      );
-    this.taskPageViewModel.updateBoard(newBoardInfoFileContent);
-  };
-
-  applyColor = (): void => {
-    this.taskPageViewModel.chatViewModel.setDisplayedColor(this.color.value);
-  };
-
-  deleteBoard = (): void => {
-    this.taskPageViewModel.deleteBoard(this.boardInfo);
-    this.close();
-  };
-
-  // tasks
-  createTask = (): TaskViewModel => {
-    const taskFileContent: TaskFileContent = this.boardModel.createTask(this.boardInfo.fileId);
-    const taskViewModel: TaskViewModel = new TaskViewModel(this.boardModel, this, taskFileContent);
-    return taskViewModel;
-  }
-
-  trackTask = (taskViewModel: TaskViewModel): void => {
-    this.taskViewModels.set(taskViewModel.task.fileId, taskViewModel);
-  }
-
-  // storage
-  storeLastUsedView = (): void => {
-    const path: string[] = this.getLastUsedBoardPath();
-    const lastUsedView: string = this.selectedPage.value;
-    this.storageModel.write(path, lastUsedView);
-  };
-
-  restoreLastUsedView = (): void => {
-    const path: string[] = this.getLastUsedBoardPath();
-    const lastUsedView: string | null = this.storageModel.read(path);
-    if (lastUsedView == null) return;
-
-    this.selectedPage.value = lastUsedView as BoardPageType;
-  };
-
   // load
   loadListRelevantData = (): void => {
     this.name.value = this.boardInfo.name;

src/ViewModel/Pages/taskViewModel.ts

@@ -29,15 +29,13 @@ export default class TaskViewModel {
   date: React.State<string> = new React.State("");
   time: React.State<string> = new React.State("");
 
-  isPresentingSettingsModal: React.State<boolean> = new React.State(false);
-
   // view
   showSettings = (): void => {
-    this.isPresentingSettingsModal.value = true;
+    this.boardViewModel.selectTask(this);
   };
 
   hideSettings = (): void => {
-    this.isPresentingSettingsModal.value = false;
+    this.boardViewModel.closeTask();
   };
 
   hideSettingsAndSave = (): void => {