implement creating and listing tasks

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">
-          <button class="flex-1" on:click={taskViewModal.hideSettings}>
+        <div class="flex-row width-100">
+          <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>