implement drag&drop for kanban

src/View/ChatPages/boardKanbanPage.tsx

@@ -6,6 +6,7 @@ import { PropertyValueList } from "../Components/propertyList";
 import { TaskCategoryBulkChangeViewModel } from "../../ViewModel/Utility/taskPropertyBulkChangeViewModel";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
+import { allowDrop } from "../utility";
 import { translations } from "../translations";
 
 export function BoardKanbanPage(boardViewModel: BoardViewModel) {
@@ -39,8 +40,12 @@ function KanbanBoard(categoryName: string, boardViewModel: BoardViewModel) {
       const viewModel: TaskCategoryBulkChangeViewModel =
         new TaskCategoryBulkChangeViewModel(taskViewModels, categoryName);
 
+      function drop() {
+        boardViewModel.handleDrop(categoryName);
+      }
+
       return (
-        <div class="flex-column flex-no">
+        <div class="flex-column flex-no" on:dragover={allowDrop} on:drop={drop}>
           <div class="flex-row width-input">
             <input
               placeholder={

src/View/Components/chatEntry.tsx

@@ -5,8 +5,8 @@ import ChatViewModel from "../../ViewModel/Chat/chatViewModel";
 export function ChatEntry(chatViewModel: ChatViewModel) {
   const view = (
     <button
-      set:color={chatViewModel.settingsPageViewModel.color}
       class="tile colored-tile"
+      set:color={chatViewModel.settingsPageViewModel.color}
       style="height: 8rem"
       on:click={chatViewModel.open}
     >

src/View/Components/taskEntry.tsx

@@ -14,8 +14,10 @@ export function TaskEntry(taskViewModel: TaskViewModel) {
 
   const view = (
     <button
+      draggable="true"
       class="tile flex-no"
       on:click={taskViewModel.open}
+      on:dragstart={taskViewModel.dragStart}
     >
       <div>
         <b subscribe:innerText={taskViewModel.name}></b>

src/View/utility.ts

@@ -0,0 +1,3 @@
+export function allowDrop(event: DragEvent) {
+  event.preventDefault();
+}