add moving tasks between boards via drag&drop

dist/index.js

@@ -677,7 +677,11 @@
     };
     // boards
     createBoard = (name) => {
-      const boardInfoFileContent = _BoardsAndTasksModel.createBoardInfoFileContent(v4_default(), name, "standard" /* Standard */);
+      const boardInfoFileContent = _BoardsAndTasksModel.createBoardInfoFileContent(
+        v4_default(),
+        name,
+        "standard" /* Standard */
+      );
       return boardInfoFileContent;
     };
     updateBoard = (boardInfoFileContent) => {
@@ -715,11 +719,7 @@
     };
     //tasks
     createTask = (boardId) => {
-      const taskFileContent = _BoardsAndTasksModel.createTaskFileContent(
+      const taskFileContent = _BoardsAndTasksModel.createTaskFileContent(v4_default(), "", boardId);
-        v4_default(),
-        "",
-        boardId
-      );
       return taskFileContent;
     };
     updateTask = (taskFileContent) => {
@@ -731,6 +731,7 @@
       this.chatModel.sendMessage("", taskFileContent);
     };
     storeTask = (taskFileContent) => {
+      console.log(taskFileContent);
       this.fileModel.storeFileContent(taskFileContent);
       const taskReferencePath = this.getTaskReferencePath(
         taskFileContent.boardId,
@@ -761,11 +762,14 @@
     };
     deleteTask = (boardId, taskId) => {
       const taskFilePath = this.getTaskFilePath(taskId);
+      this.storageModel.removeRecursively(taskFilePath);
+      this.deleteTaskReference(boardId, taskId);
+    };
+    deleteTaskReference = (boardId, taskId) => {
       const taskReferencePath = this.getTaskReferencePath(
         boardId,
         taskId
       );
-      this.storageModel.removeRecursively(taskFilePath);
       this.storageModel.removeRecursively(taskReferencePath);
     };
     // init
@@ -1515,7 +1519,7 @@
     // init
     constructor(coreViewModel, boardModel, boardViewModel, taskFileContent) {
       this.coreViewModel = coreViewModel;
-      this.boardModel = boardModel;
+      this.boardsAndTasksModel = boardModel;
       this.boardViewModel = boardViewModel;
       this.task = taskFileContent;
       this.loadAllData();
@@ -1523,7 +1527,7 @@
         this.switchVersion(selectedVersionId);
       });
     }
-    boardModel;
+    boardsAndTasksModel;
     boardViewModel;
     // data
     task;
@@ -1541,10 +1545,11 @@
     }
     // paths
     getFilePath = () => {
-      return this.boardModel.getTaskFilePath(this.task.fileId);
+      return this.boardsAndTasksModel.getTaskFilePath(this.task.fileId);
     };
     // state
     index = new State(0);
+    boardId = new State("");
     name = new State("");
     description = new State("");
     category = new State("");
@@ -1563,6 +1568,10 @@
       if (status != void 0) this.status.value = status;
       this.save();
     };
+    setBoardId = (boardId) => {
+      this.boardId.value = boardId;
+      this.save();
+    };
     // view
     open = () => {
       this.boardViewModel.selectTask(this);
@@ -1585,24 +1594,25 @@
         this.name.value,
         this.task.boardId
       );
+      newTaskFileContent.boardId = this.boardId.value;
       newTaskFileContent.description = this.description.value;
       newTaskFileContent.status = this.status.value;
       newTaskFileContent.category = this.category.value;
       newTaskFileContent.priority = this.priority.value;
       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 = () => {
       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 = () => {
-      const versionIds = this.boardModel.listTaskVersionIds(
+      const versionIds = this.boardsAndTasksModel.listTaskVersionIds(
         this.task.fileId
       );
       const sortedVersionIds = versionIds.sort(localeCompare).reverse();
@@ -1610,7 +1620,7 @@
       this.versionIds.add(...sortedVersionIds);
     };
     switchVersion = (versionId) => {
-      const taskFileContent = this.boardModel.getSpecificTaskFileContent(this.task.fileId, versionId);
+      const taskFileContent = this.boardsAndTasksModel.getSpecificTaskFileContent(this.task.fileId, versionId);
       if (taskFileContent == null) return;
       this.task = taskFileContent;
       this.loadTaskData();
@@ -1620,6 +1630,7 @@
       this.loadVersionIds();
     };
     loadTaskData = () => {
+      this.boardId.value = this.task.boardId;
       this.name.value = this.task.name;
       this.description.value = this.task.description ?? "";
       this.category.value = this.task.category ?? "";
@@ -1637,7 +1648,7 @@
     constructor(coreViewModel, storageModel2, boardModel, taskPageViewModel, boardInfo) {
       this.coreViewModel = coreViewModel;
       this.storageModel = storageModel2;
-      this.boardModel = boardModel;
+      this.boardsAndTasksModel = boardModel;
       this.taskPageViewModel = taskPageViewModel;
       this.boardInfo = boardInfo;
       this.loadListRelevantData();
@@ -1661,7 +1672,7 @@
       );
     }
     storageModel;
-    boardModel;
+    boardsAndTasksModel;
     taskPageViewModel;
     // data
     boardInfo;
@@ -1706,12 +1717,10 @@
     };
     // methods
     createTask = () => {
-      const taskFileContent = this.boardModel.createTask(
+      const taskFileContent = this.boardsAndTasksModel.createTask(this.boardInfo.fileId);
-        this.boardInfo.fileId
-      );
       const taskViewModel = new TaskViewModel(
         this.coreViewModel,
-        this.boardModel,
+        this.boardsAndTasksModel,
         this,
         taskFileContent
       );
@@ -1722,11 +1731,16 @@
       this.taskViewModels.remove(taskId);
       this.updateIndex();
     };
-    handleDrop = (category, status) => {
+    handleDropWithinBoard = (category, status) => {
       const draggedObject = this.coreViewModel.draggedObject.value;
       if (draggedObject instanceof TaskViewModel == false) return;
       draggedObject.setCategoryAndStatus(category, status);
     };
+    handleDropBetweenBoards = () => {
+      const draggedObject = this.coreViewModel.draggedObject.value;
+      if (draggedObject instanceof TaskViewModel == false) return;
+      draggedObject.setBoardId(this.boardInfo.fileId);
+    };
     // storage
     storeLastUsedView = () => {
       const path = this.getLastUsedBoardPath();
@@ -1741,9 +1755,17 @@
     };
     // view
     showTaskInList = (taskFileContent) => {
+      if (taskFileContent.boardId != this.boardInfo.fileId) {
+        this.boardsAndTasksModel.deleteTaskReference(
+          this.boardInfo.fileId,
+          taskFileContent.fileId
+        );
+        this.removeTaskFromList(taskFileContent.fileId);
+        return;
+      }
       const taskViewModel = new TaskViewModel(
         this.coreViewModel,
-        this.boardModel,
+        this.boardsAndTasksModel,
         this,
         taskFileContent
       );
@@ -1803,16 +1825,16 @@
       this.color.value = this.boardInfo.color;
     };
     loadTasks = () => {
-      const taskIds = this.boardModel.listTaskIds(
+      const taskIds = this.boardsAndTasksModel.listTaskIds(
         this.boardInfo.fileId
       );
       for (const taskId of taskIds) {
         if (this.taskViewModels.value.has(taskId)) return;
-        const taskFileContent = this.boardModel.getLatestTaskFileContent(taskId);
+        const taskFileContent = this.boardsAndTasksModel.getLatestTaskFileContent(taskId);
         if (taskFileContent == null) continue;
         const taskViewModel = new TaskViewModel(
           this.coreViewModel,
-          this.boardModel,
+          this.boardsAndTasksModel,
           this,
           taskFileContent
         );
@@ -2686,7 +2708,7 @@
       (taskViewModels) => {
         const viewModel = new TaskCategoryBulkChangeViewModel(taskViewModels, categoryName);
         function drop() {
-          boardViewModel.handleDrop(categoryName);
+          boardViewModel.handleDropWithinBoard(categoryName);
         }
         return /* @__PURE__ */ createElement("div", { class: "flex-column flex-no", "on:dragover": allowDrop, "on:drop": drop }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
           "input",
@@ -2852,7 +2874,7 @@
       });
     });
     function drop() {
-      boardViewModel.handleDrop(categoryName, statusName);
+      boardViewModel.handleDropWithinBoard(categoryName, statusName);
     }
     return /* @__PURE__ */ createElement(
       "div",
@@ -3103,7 +3125,9 @@
         "set:color": boardViewModel.color,
         class: "tile colored-tile",
         "toggle:selected": boardViewModel.isSelected,
-        "on:click": boardViewModel.select
+        "on:click": boardViewModel.select,
+        "on:dragover": allowDrop,
+        "on:drop": boardViewModel.handleDropBetweenBoards
       },
       /* @__PURE__ */ createElement("span", { class: "shadow", "subscribe:innerText": boardViewModel.name }),
       /* @__PURE__ */ createElement("b", { "subscribe:innerText": boardViewModel.name })

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(
+    const taskFileContent: TaskFileContent =
-      v4(),
+      BoardsAndTasksModel.createTaskFileContent(v4(), "", boardId);
-      "",
-      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<
+export const BoardViewModelToEntry: React.StateItemConverter<BoardViewModel> = (
-  BoardViewModel
+  boardViewModel: 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(
+    const taskFileContent: TaskFileContent =
-      this.boardInfo.fileId
+      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;