add kanban view

src/View/ChatPages/boardKanbanPage.tsx

@@ -1,14 +1,71 @@
 import * as React from "bloatless-react";
 
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
+import { FilteredList } from "../Components/filteredList";
 import { PropertyValueList } from "../Components/propertyList";
+import { TaskCategoryBulkChangeViewModel } from "../../ViewModel/Pages/taskPropertyBulkChangeViewModel";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
+import { TaskViewModelToEntry } from "../Components/taskEntry";
+import { translations } from "../translations";
 
 export function BoardKanbanPage(boardViewModel: BoardViewModel) {
+  const categoryNameConverter: React.StateItemConverter<string> = (
+    categoryName: string
+  ) => {
+    return KanbanBoard(categoryName, boardViewModel);
+  };
+
   return PropertyValueList(
     "category",
     (taskViewModel: TaskViewModel) => taskViewModel.task,
     boardViewModel.taskViewModels,
-    () => <div></div>
+    (categories: React.ListState<string>) => {
+      return (
+        <div
+          class="kanban-board-wrapper"
+          children:append={[categories, categoryNameConverter]}
+        ></div>
+      );
+    }
+  );
+}
+
+function KanbanBoard(categoryName: string, boardViewModel: BoardViewModel) {
+  return FilteredList(
+    { category: categoryName },
+    (taskViewModel: TaskViewModel) => taskViewModel.task,
+    boardViewModel.taskViewModels,
+    (taskViewModels: React.ListState<TaskViewModel>) => {
+      const viewModel: TaskCategoryBulkChangeViewModel =
+        new TaskCategoryBulkChangeViewModel(taskViewModels, categoryName);
+
+      return (
+        <div class="flex-column flex-no" style="width: 18rem; min-width: 18rem">
+          <div class="flex-row width-input">
+            <input
+              placeholder={
+                translations.chatPage.task.renameCategoryInputPlaceholder
+              }
+              bind:value={viewModel.inputValue}
+              on:enter={viewModel.set}
+            ></input>
+            <button
+              class="primary"
+              on:click={viewModel.set}
+              toggle:disabled={viewModel.cannotSet}
+            >
+              <span class="icon">check</span>
+            </button>
+          </div>
+
+          <hr></hr>
+
+          <div
+            class="flex-column gap"
+            children:append={[taskViewModels, TaskViewModelToEntry]}
+          ></div>
+        </div>
+      );
+    }
   );
 }

src/View/ChatPages/boardPage.tsx

@@ -103,7 +103,7 @@ export function BoardPage(boardViewModel: BoardViewModel) {
           </button>
         </span>
       </div>
-      <div class="content" children:set={mainContent}></div>
+      <div class="content main-content" children:set={mainContent}></div>
 
       {BoardSettingsModal(boardViewModel)}
       <div children:set={taskSettingsModal}></div>

src/View/ChatPages/taskPage.css

@@ -1,30 +1,51 @@
-#task-page .task-grid {
+#chat-page > div > #main > #task-page > .pane-wrapper > .pane > .main-content {
+  width: 100%;
+  max-width: 100%;
+
+  padding: 0px;
+}
+
+#chat-page > div > #main > #task-page .task-grid {
   display: flex;
   flex-direction: column;
   gap: var(--gap-between-tiles);
+
+  padding: var(--content-padding);
+}
+
+#chat-page > div > #main > #task-page .kanban-board-wrapper {
+  display: flex;
+  gap: var(--large-gap);
+
+  width: 100%;
+  height: 100%;
+
+  overflow: auto;
+
+  padding: var(--content-padding);
 }
 
 @media (min-width: 640px) {
-  #task-page .task-grid {
+  #chat-page > div > #main > #task-page .task-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
   }
 }
 
 @media (max-width: 1024px) {
-  #task-page #board-list {
+  #chat-page > div > #main > #task-page #board-list {
     display: false;
   }
 
-  #task-page #board-content {
+  #chat-page > div > #main > #task-page #board-content {
     display: none;
   }
 
-  #task-page[isshowingboard] #board-list {
+  #chat-page > div > #main > #task-page[isshowingboard] #board-list {
     display: none;
   }
 
-  #task-page[isshowingboard] #board-content {
+  #chat-page > div > #main > #task-page[isshowingboard] #board-content {
     display: flex;
   }
 }

src/View/Components/taskEntry.tsx

@@ -13,7 +13,7 @@ export function TaskEntry(taskViewModel: TaskViewModel) {
   };
 
   const view = (
-    <button class="tile" on:click={taskViewModel.open}>
+    <button class="tile flex-no" on:click={taskViewModel.open}>
       <div>
         <b subscribe:innerText={taskViewModel.name}></b>
         <hr></hr>

src/View/chatPage.css

@@ -66,6 +66,7 @@ body[showing-chat] #chat-page-wrapper {
   scroll-snap-align: center;
 
   min-width: 100%;
+  overflow: hidden;
 }
 
 #chat-page > div > #main > div > .pane-wrapper > .pane:not(.side),
@@ -79,6 +80,8 @@ body[showing-chat] #chat-page-wrapper {
   }
 
   #chat-page > div > #main > div > .pane-wrapper.side {
+    width: 18rem;
+    min-width: 18rem;
     max-width: 18rem;
   }
 }

src/View/translations.ts

@@ -174,6 +174,10 @@ const englishTranslations = {
       taskTimeLabel: "Time",
 
       deleteTaskButton: "Delete task",
+
+      ///
+
+      renameCategoryInputPlaceholder: "Rename category,"
     },
   },
 };