add moving tasks between boards via drag&drop

src/Model/Files/boardsAndTasksModel.ts

@@ -83,7 +83,11 @@ export default class BoardsAndTasksModel {
   // boards
   createBoard = (name: string): BoardInfoFileContent => {
     const boardInfoFileContent: BoardInfoFileContent =
-      BoardsAndTasksModel.createBoardInfoFileContent(v4(), name, Color.Standard);
+      BoardsAndTasksModel.createBoardInfoFileContent(
+        v4(),
+        name,
+        Color.Standard
+      );
     return boardInfoFileContent;
   };
 
@@ -133,11 +137,8 @@ export default class BoardsAndTasksModel {
 
   //tasks
   createTask = (boardId: string): TaskFileContent => {
-    const taskFileContent: TaskFileContent = BoardsAndTasksModel.createTaskFileContent(
-      v4(),
-      "",
-      boardId
-    );
+    const taskFileContent: TaskFileContent =
+      BoardsAndTasksModel.createTaskFileContent(v4(), "", boardId);
     return taskFileContent;
   };
 
@@ -152,6 +153,8 @@ export default class BoardsAndTasksModel {
   };
 
   storeTask = (taskFileContent: TaskFileContent): void => {
+    console.log(taskFileContent);
+
     // store info
     this.fileModel.storeFileContent(taskFileContent);
 
@@ -195,12 +198,16 @@ export default class BoardsAndTasksModel {
 
   deleteTask = (boardId: string, taskId: string): void => {
     const taskFilePath: string[] = this.getTaskFilePath(taskId);
+    this.storageModel.removeRecursively(taskFilePath);
+
+    this.deleteTaskReference(boardId, taskId);
+  };
+
+  deleteTaskReference = (boardId: string, taskId: string): void => {
     const taskReferencePath: string[] = this.getTaskReferencePath(
       boardId,
       taskId
     );
-
-    this.storageModel.removeRecursively(taskFilePath);
     this.storageModel.removeRecursively(taskReferencePath);
   };
 

src/View/ChatPages/boardKanbanPage.tsx

@@ -41,7 +41,7 @@ function KanbanBoard(categoryName: string, boardViewModel: BoardViewModel) {
         new TaskCategoryBulkChangeViewModel(taskViewModels, categoryName);
 
       function drop() {
-        boardViewModel.handleDrop(categoryName);
+        boardViewModel.handleDropWithinBoard(categoryName);
       }
 
       return (

src/View/ChatPages/boardStatusGridPage.tsx

@@ -177,7 +177,7 @@ function CategoryStatusColumn(
   });
 
   function drop() {
-    boardViewModel.handleDrop(categoryName, statusName);
+    boardViewModel.handleDropWithinBoard(categoryName, statusName);
   }
 
   return (

src/View/Components/boardEntry.tsx

@@ -1,15 +1,17 @@
 import * as React from "bloatless-react";
 
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
+import { allowDrop } from "../utility";
 
 export function BoardEntry(boardViewModel: BoardViewModel) {
   const view = (
     <button
       set:color={boardViewModel.color}
       class="tile colored-tile"
-
       toggle:selected={boardViewModel.isSelected}
       on:click={boardViewModel.select}
+      on:dragover={allowDrop}
+      on:drop={boardViewModel.handleDropBetweenBoards}
     >
       <span class="shadow" subscribe:innerText={boardViewModel.name}></span>
       <b subscribe:innerText={boardViewModel.name}></b>
@@ -23,8 +25,8 @@ export function BoardEntry(boardViewModel: BoardViewModel) {
   return view;
 }
 
-export const BoardViewModelToEntry: React.StateItemConverter<
-  BoardViewModel
-> = (boardViewModel: BoardViewModel) => {
+export const BoardViewModelToEntry: React.StateItemConverter<BoardViewModel> = (
+  boardViewModel: BoardViewModel
+) => {
   return BoardEntry(boardViewModel);
 };

src/ViewModel/Pages/boardViewModel.ts

@@ -14,7 +14,7 @@ import TaskViewModel from "./taskViewModel";
 
 export default class BoardViewModel {
   storageModel: StorageModel;
-  boardModel: BoardsAndTasksModel;
+  boardsAndTasksModel: BoardsAndTasksModel;
 
   taskPageViewModel: TaskPageViewModel;
 
@@ -76,12 +76,11 @@ export default class BoardViewModel {
 
   // methods
   createTask = (): void => {
-    const taskFileContent: TaskFileContent = this.boardModel.createTask(
-      this.boardInfo.fileId
-    );
+    const taskFileContent: TaskFileContent =
+      this.boardsAndTasksModel.createTask(this.boardInfo.fileId);
     const taskViewModel: TaskViewModel = new TaskViewModel(
       this.coreViewModel,
-      this.boardModel,
+      this.boardsAndTasksModel,
       this,
       taskFileContent
     );
@@ -94,12 +93,18 @@ export default class BoardViewModel {
     this.updateIndex();
   };
 
-  handleDrop = (category?: string, status?: string): void => {
+  handleDropWithinBoard = (category?: string, status?: string): void => {
     const draggedObject: any = this.coreViewModel.draggedObject.value;
     if (draggedObject instanceof TaskViewModel == false) return;
     draggedObject.setCategoryAndStatus(category, status);
   };
 
+  handleDropBetweenBoards = (): void => {
+    const draggedObject: any = this.coreViewModel.draggedObject.value;
+    if (draggedObject instanceof TaskViewModel == false) return;
+    draggedObject.setBoardId(this.boardInfo.fileId);
+  };
+
   // storage
   storeLastUsedView = (): void => {
     const path: string[] = this.getLastUsedBoardPath();
@@ -117,9 +122,19 @@ export default class BoardViewModel {
 
   // view
   showTaskInList = (taskFileContent: TaskFileContent): void => {
+    if (taskFileContent.boardId != this.boardInfo.fileId) {
+      // remove task that was moved to different board
+      this.boardsAndTasksModel.deleteTaskReference(
+        this.boardInfo.fileId,
+        taskFileContent.fileId
+      );
+      this.removeTaskFromList(taskFileContent.fileId);
+      return;
+    }
+
     const taskViewModel: TaskViewModel = new TaskViewModel(
       this.coreViewModel,
-      this.boardModel,
+      this.boardsAndTasksModel,
       this,
       taskFileContent
     );
@@ -193,19 +208,19 @@ export default class BoardViewModel {
   };
 
   loadTasks = (): void => {
-    const taskIds: string[] = this.boardModel.listTaskIds(
+    const taskIds: string[] = this.boardsAndTasksModel.listTaskIds(
       this.boardInfo.fileId
     );
     for (const taskId of taskIds) {
       if (this.taskViewModels.value.has(taskId)) return;
 
       const taskFileContent: TaskFileContent | null =
-        this.boardModel.getLatestTaskFileContent(taskId);
+        this.boardsAndTasksModel.getLatestTaskFileContent(taskId);
       if (taskFileContent == null) continue;
 
       const taskViewModel: TaskViewModel = new TaskViewModel(
         this.coreViewModel,
-        this.boardModel,
+        this.boardsAndTasksModel,
         this,
         taskFileContent
       );
@@ -230,7 +245,7 @@ export default class BoardViewModel {
   ) {
     // set
     this.storageModel = storageModel;
-    this.boardModel = boardModel;
+    this.boardsAndTasksModel = boardModel;
     this.taskPageViewModel = taskPageViewModel;
     this.boardInfo = boardInfo;
 

src/ViewModel/Pages/taskPageViewModel.ts

@@ -1,12 +1,15 @@
 import * as React from "bloatless-react";
 
-import BoardsAndTasksModel, { BoardInfoFileContent } from "../../Model/Files/boardsAndTasksModel";
+import BoardsAndTasksModel, {
+  BoardInfoFileContent,
+} from "../../Model/Files/boardsAndTasksModel";
 
 import BoardViewModel from "./boardViewModel";
 import ChatViewModel from "../Chat/chatViewModel";
 import CoreViewModel from "../Global/coreViewModel";
 import { IndexManager } from "../../Model/Utility/utility";
 import StorageModel from "../../Model/Global/storageModel";
+import TaskViewModel from "./taskViewModel";
 
 export default class TaskPageViewModel {
   storageModel: StorageModel;

src/ViewModel/Pages/taskViewModel.ts

@@ -9,7 +9,7 @@ import BoardViewModel from "./boardViewModel";
 import CoreViewModel from "../Global/coreViewModel";
 
 export default class TaskViewModel {
-  boardModel: BoardsAndTasksModel;
+  boardsAndTasksModel: BoardsAndTasksModel;
 
   boardViewModel: BoardViewModel;
 
@@ -36,12 +36,14 @@ export default class TaskViewModel {
 
   // paths
   getFilePath = (): string[] => {
-    return this.boardModel.getTaskFilePath(this.task.fileId);
+    return this.boardsAndTasksModel.getTaskFilePath(this.task.fileId);
   };
 
   // state
   index: React.State<number> = new React.State(0);
 
+  boardId: React.State<string> = new React.State("");
+
   name: React.State<string> = new React.State("");
   description: React.State<string> = new React.State("");
 
@@ -60,10 +62,15 @@ export default class TaskViewModel {
     this.coreViewModel.draggedObject.value = this;
   };
 
-  setCategoryAndStatus = (category?: string, status?: string) => {
+  setCategoryAndStatus = (category?: string, status?: string): void => {
     if (category != undefined) this.category.value = category;
     if (status != undefined) this.status.value = status;
     this.save();
+  };
+
+  setBoardId = (boardId: string): void => {
+    this.boardId.value = boardId;
+    this.save();
   }
 
   // view
@@ -94,6 +101,7 @@ export default class TaskViewModel {
         this.task.boardId
       );
 
+    newTaskFileContent.boardId = this.boardId.value;
     newTaskFileContent.description = this.description.value;
     newTaskFileContent.status = this.status.value;
     newTaskFileContent.category = this.category.value;
@@ -101,20 +109,20 @@ export default class TaskViewModel {
     newTaskFileContent.date = this.date.value;
     newTaskFileContent.time = this.time.value;
 
-    this.boardModel.updateTaskAndSend(newTaskFileContent);
+    this.boardsAndTasksModel.updateTaskAndSend(newTaskFileContent);
     this.boardViewModel.showTaskInList(newTaskFileContent);
     this.boardViewModel.updateTaskIndices();
   };
 
   deleteTask = (): void => {
     this.close();
-    this.boardModel.deleteTask(this.task.boardId, this.task.fileId);
+    this.boardsAndTasksModel.deleteTask(this.task.boardId, this.task.fileId);
     this.boardViewModel.removeTaskFromList(this.task.fileId);
   };
 
   // load
   loadVersionIds = (): void => {
-    const versionIds: string[] = this.boardModel.listTaskVersionIds(
+    const versionIds: string[] = this.boardsAndTasksModel.listTaskVersionIds(
       this.task.fileId
     );
     const sortedVersionIds = versionIds.sort(localeCompare).reverse();
@@ -124,7 +132,7 @@ export default class TaskViewModel {
 
   switchVersion = (versionId: string): void => {
     const taskFileContent: TaskFileContent | null =
-      this.boardModel.getSpecificTaskFileContent(this.task.fileId, versionId);
+      this.boardsAndTasksModel.getSpecificTaskFileContent(this.task.fileId, versionId);
     if (taskFileContent == null) return;
 
     this.task = taskFileContent;
@@ -137,6 +145,8 @@ export default class TaskViewModel {
   };
 
   loadTaskData = (): void => {
+    this.boardId.value = this.task.boardId;
+
     this.name.value = this.task.name;
     this.description.value = this.task.description ?? "";
 
@@ -157,7 +167,7 @@ export default class TaskViewModel {
     boardViewModel: BoardViewModel,
     taskFileContent: TaskFileContent
   ) {
-    this.boardModel = boardModel;
+    this.boardsAndTasksModel = boardModel;
     this.boardViewModel = boardViewModel;
 
     this.task = taskFileContent;