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();
+}

src/ViewModel/Global/coreViewModel.ts

@@ -1,7 +1,5 @@
 import * as React from "bloatless-react";
 
 export default class CoreViewModel {
-  draggedFile: React.State<File | undefined> = new React.State<
-    File | undefined
-  >(undefined);
+  draggedObject: React.State<any> = new React.State<any>(undefined);
 }

src/ViewModel/Pages/boardViewModel.ts

@@ -94,6 +94,12 @@ export default class BoardViewModel {
     this.updateIndex();
   };
 
+  handleDrop = (category?: string, status?: string): void => {
+    const draggedObject: any = this.coreViewModel.draggedObject.value;
+    if (draggedObject instanceof TaskViewModel == false) return;
+    draggedObject.setCategoryAndStatus(category, status);
+  };
+
   // storage
   storeLastUsedView = (): void => {
     const path: string[] = this.getLastUsedBoardPath();

src/ViewModel/Pages/taskViewModel.ts

@@ -1,6 +1,8 @@
 import * as React from "bloatless-react";
 
-import BoardsAndTasksModel, { TaskFileContent } from "../../Model/Files/boardsAndTasksModel";
+import BoardsAndTasksModel, {
+  TaskFileContent,
+} from "../../Model/Files/boardsAndTasksModel";
 import { localeCompare, padZero } from "../../Model/Utility/utility";
 
 import BoardViewModel from "./boardViewModel";
@@ -53,6 +55,17 @@ export default class TaskViewModel {
   selectedVersionId: React.State<string> = new React.State("");
   versionIds: React.ListState<string> = new React.ListState();
 
+  // methods
+  dragStart = (): void => {
+    this.coreViewModel.draggedObject.value = this;
+  };
+
+  setCategoryAndStatus = (category?: string, status?: string) => {
+    if (category != undefined) this.category.value = category;
+    if (status != undefined) this.status.value = status;
+    this.save();
+  }
+
   // view
   open = (): void => {
     this.boardViewModel.selectTask(this);