prepare task settings modal

src/Model/Files/boardModel.ts

@@ -243,12 +243,12 @@ export interface TaskFileContent extends FileContent<"task"> {
   name: string;
   boardId: string;
 
-  category?: string;
-  status?: string;
-
   description?: string;
 
+  category?: string;
+  status?: string;
   priority?: string;
+
   date?: string;
   time?: string;
 }

src/View/Modals/taskSettingsModal.tsx

@@ -0,0 +1,87 @@
+import * as React from "bloatless-react";
+
+import { DangerousActionButton } from "../Components/dangerousActionButton";
+import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
+import { translations } from "../translations";
+
+export function TaskSettingsModal(taskViewModal: TaskViewModel) {
+  return (
+    <div class="modal" toggle:open={taskViewModal.isPresentingSettingsModal}>
+      <div>
+        <main>
+          <h2>{translations.chatPage.task.boardSettingsHeadline}</h2>
+
+          <div class="tile flex-no">
+            <span class="icon">label</span>
+            <div>
+              <span>{translations.chatPage.task.taskNameLabel}</span>
+              <input bind:value={taskViewModal.name}></input>
+            </div>
+          </div>
+
+          <div class="tile flex-no">
+            <span class="icon">description</span>
+            <div>
+              <span>{translations.chatPage.task.taskDescriptionLabel}</span>
+              <input bind:value={taskViewModal.description}></input>
+            </div>
+          </div>
+
+          <hr></hr>
+
+          <div class="tile flex-no">
+            <span class="icon">category</span>
+            <div>
+              <span>{translations.chatPage.task.taskCategoryLabel}</span>
+              <input bind:value={taskViewModal.category}></input>
+            </div>
+          </div>
+
+          <div class="tile flex-no">
+            <span class="icon">clock_loader_40</span>
+            <div>
+              <span>{translations.chatPage.task.taskStatusLabel}</span>
+              <input bind:value={taskViewModal.status}></input>
+            </div>
+          </div>
+
+          <div 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>
+            </div>
+          </div>
+
+          <hr></hr>
+
+          <div 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>
+            </div>
+          </div>
+
+          <div class="tile flex-no">
+            <span class="icon">schedule</span>
+            <div>
+              <span>{translations.chatPage.task.taskTimeLabel}</span>
+              <input type="time" bind:value={taskViewModal.time}></input>
+            </div>
+          </div>
+        </main>
+        <div class="flex-row">
+          <button class="flex-1" on:click={taskViewModal.hideSettings}>
+            {translations.general.closeButton}
+            <span class="icon">close</span>
+          </button>
+          <button class="flex-1" on:click={taskViewModal.hideSettingsAndSave}>
+            {translations.general.saveButton}
+            <span class="icon">save</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/View/translations.ts

@@ -1,10 +1,12 @@
 const englishTranslations = {
   general: {
-    closeButton: "Close",
     deleteItemButtonAudioLabel: "delete item",
-    abortButton: "Abort",
-    confirmButton: "Confirm",
     
+    abortButton: "Abort",
+    closeButton: "Close",
+    
+    confirmButton: "Confirm",
+    saveButton: "Save",
     setButton: "Set",
   },
 
@@ -151,10 +153,21 @@ const englishTranslations = {
       ///
 
       boardSettingsHeadline: "Board Settings",
-
       boardNameInputLabel: "Board name",
-
       deleteBoardButton: "Delete board and all tasks",
+
+      ///
+
+      taskNameLabel: "Title",
+
+      taskCategoryLabel: "Category",
+      taskStatusLabel: "Status",
+      taskPriorityLabel: "Priority",
+
+      taskDescriptionLabel: "Description",
+
+      taskDateLabel: "Date",
+      taskTimeLabel: "Time",
     },
   },
 };

src/ViewModel/Pages/taskViewModel.ts

@@ -1,8 +1,6 @@
 import * as React from "bloatless-react";
 
-import BoardModel, {
-  TaskFileContent,
-} from "../../Model/Files/boardModel";
+import BoardModel, { TaskFileContent } from "../../Model/Files/boardModel";
 
 import BoardViewModel from "./boardViewModel";
 
@@ -22,15 +20,31 @@ export default class TaskViewModel {
   // state
   name: React.State<string> = new React.State("");
 
-  category: React.State<string> = new React.State("");
-  status: React.State<string> = new React.State("");
-
   description: React.State<string> = new React.State("");
 
+  category: React.State<string> = new React.State("");
+  status: React.State<string> = new React.State("");
   priority: React.State<string> = new React.State("");
+
   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;
+  };
+
+  hideSettings = (): void => {
+    this.isPresentingSettingsModal.value = false;
+  };
+
+  hideSettingsAndSave = (): void => {
+    this.hideSettings();
+    this.save();
+  };
+
   // storage
   save = (): void => {
     const newTaskFileContent: TaskFileContent =
@@ -40,9 +54,9 @@ export default class TaskViewModel {
         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;
@@ -54,13 +68,12 @@ export default class TaskViewModel {
   // load
   loadAllData = (): void => {
     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 ?? "";
   };