fix event sorting

src/View/ChatPages/calendarPage.tsx

@@ -4,6 +4,7 @@ import * as React from "bloatless-react";
 
 import CalendarPageViewModel from "../../ViewModel/Pages/calendarPageViewModel";
 import { MonthGrid } from "../Components/monthGrid";
+import { TaskSettingsModal } from "../Modals/taskSettingsModal";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { translations } from "../translations";
 
@@ -49,6 +50,19 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
     }
   );
 
+  const taskSettingsModal = React.createProxyState(
+    [calendarPageViewModel.selectedTaskViewModel],
+    () => {
+      if (calendarPageViewModel.selectedTaskViewModel.value == undefined) {
+        return <div></div>;
+      } else {
+        return TaskSettingsModal(
+          calendarPageViewModel.selectedTaskViewModel.value
+        );
+      }
+    }
+  );
+
   return (
     <div id="calendar-page">
       <div class="pane-wrapper">
@@ -131,6 +145,8 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
           <div class="content" children:set={sidePaneContent}></div>
         </div>
       </div>
+
+      <div children:set={taskSettingsModal}></div>
     </div>
   );
 }

src/View/Components/monthGrid.tsx

@@ -29,7 +29,15 @@ export function MonthGrid<T>(
   const converter: React.StateItemConverter<TaskViewModel> = (
     taskViewModel
   ) => {
-    return <span class="ellipsis secondary">{taskViewModel.task.name}</span>;
+    const view = (
+      <span class="ellipsis secondary">{taskViewModel.task.name}</span>
+    );
+
+    taskViewModel.index.subscribe((newIndex) => {
+      view.style.order = newIndex;
+    });
+
+    return view;
   };
 
   return (

src/ViewModel/Chat/chatViewModel.ts

@@ -101,7 +101,7 @@ export default class ChatViewModel {
       this.storageModel,
       this.chatModel.fileModel.boardsAndTasksModel.calendarModel,
       this.chatModel.fileModel.boardsAndTasksModel,
-      this
+      this,
     );
     this.taskPageViewModel = new TaskPageViewModel(
       this.coreViewModel,

src/ViewModel/Pages/boardViewModel.ts

@@ -9,10 +9,11 @@ import { Color } from "../../colors";
 import CoreViewModel from "../Global/coreViewModel";
 import { IndexManager } from "../../Model/Utility/utility";
 import StorageModel from "../../Model/Global/storageModel";
+import TaskContainingPageViewModel from "./taskContainingPageViewModel";
 import TaskPageViewModel from "./taskPageViewModel";
 import TaskViewModel from "./taskViewModel";
 
-export default class BoardViewModel {
+export default class BoardViewModel extends TaskContainingPageViewModel {
   storageModel: StorageModel;
   boardsAndTasksModel: BoardsAndTasksModel;
 
@@ -21,10 +22,6 @@ export default class BoardViewModel {
   // data
   boardInfo: BoardInfoFileContent;
 
-  taskIndexManager: IndexManager<TaskViewModel> = new IndexManager(
-    (taskViewModel: TaskViewModel) => taskViewModel.sortingString
-  );
-
   // state
   name: React.State<string> = new React.State("");
   color: React.State<Color> = new React.State<any>(Color.Standard);
@@ -34,14 +31,11 @@ export default class BoardViewModel {
   selectedPage: React.State<BoardPageType> = new React.State<any>(
     BoardPageType.List
   );
-  selectedTaskViewModel: React.State<TaskViewModel | undefined> =
-    new React.State<any>(undefined);
 
   isSelected: React.State<boolean>;
   isPresentingSettingsModal: React.State<boolean> = new React.State(false);
   isPresentingFilterModal: React.State<boolean> = new React.State(false);
 
-  taskViewModels: React.MapState<TaskViewModel> = new React.MapState();
   filteredTaskViewModels: React.ListState<TaskViewModel> =
     new React.ListState();
 
@@ -75,25 +69,6 @@ export default class BoardViewModel {
   };
 
   // methods
-  createTask = (): void => {
-    const taskFileContent: TaskFileContent =
-      this.boardsAndTasksModel.createTask(this.boardInfo.fileId);
-    const taskViewModel: TaskViewModel = new TaskViewModel(
-      this.coreViewModel,
-      this.boardsAndTasksModel,
-      this,
-      null,
-      taskFileContent
-    );
-    this.selectTask(taskViewModel);
-    this.updateTaskIndices();
-  };
-
-  removeTaskFromList = (taskId: string): void => {
-    this.taskViewModels.remove(taskId);
-    this.updateIndex();
-  };
-
   handleDropWithinBoard = (category?: string, status?: string): void => {
     const draggedObject: any = this.coreViewModel.draggedObject.value;
     if (draggedObject instanceof TaskViewModel == false) return;
@@ -122,14 +97,14 @@ export default class BoardViewModel {
   };
 
   // view
-  showTaskInList = (taskFileContent: TaskFileContent): void => {
+  showTask = (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);
+      this.removeTaskFromView(taskFileContent);
       return;
     }
 
@@ -137,12 +112,16 @@ export default class BoardViewModel {
       this.coreViewModel,
       this.boardsAndTasksModel,
       this,
-      null,
       taskFileContent
     );
     this.taskViewModels.set(taskFileContent.fileId, taskViewModel);
   };
 
+  removeTaskFromView = (taskFileContent: TaskFileContent): void => {
+    this.taskViewModels.remove(taskFileContent.fileId);
+    this.updateIndex();
+  };
+
   select = (): void => {
     this.taskPageViewModel.selectBoard(this);
   };
@@ -169,27 +148,12 @@ export default class BoardViewModel {
     this.isPresentingFilterModal.value = false;
   };
 
-  selectTask = (selectedTask: TaskViewModel): void => {
-    this.selectedTaskViewModel.value = selectedTask;
-  };
-
-  closeTask = () => {
-    this.selectedTaskViewModel.value = undefined;
-  };
-
   updateIndex = (): void => {
     const index: number =
       this.taskPageViewModel.boardIndexManager.getIndex(this);
     this.index.value = index;
   };
 
-  updateTaskIndices = (): void => {
-    this.taskIndexManager.update([...this.taskViewModels.value.values()]);
-    for (const boardViewModel of this.taskViewModels.value.values()) {
-      boardViewModel.updateIndex();
-    }
-  };
-
   // load
   loadListRelevantData = (): void => {
     this.name.value = this.boardInfo.name;
@@ -211,7 +175,6 @@ export default class BoardViewModel {
         this.coreViewModel,
         this.boardsAndTasksModel,
         this,
-        null,
         taskFileContent
       );
       this.taskViewModels.set(taskFileContent.fileId, taskViewModel);
@@ -229,13 +192,15 @@ export default class BoardViewModel {
   constructor(
     public coreViewModel: CoreViewModel,
     storageModel: StorageModel,
-    boardModel: BoardsAndTasksModel,
+    boardsAndTasksModel: BoardsAndTasksModel,
     taskPageViewModel: TaskPageViewModel,
     boardInfo: BoardInfoFileContent
   ) {
+    super(coreViewModel, boardsAndTasksModel);
+
     // set
     this.storageModel = storageModel;
-    this.boardsAndTasksModel = boardModel;
+    this.boardsAndTasksModel = boardsAndTasksModel;
     this.taskPageViewModel = taskPageViewModel;
     this.boardInfo = boardInfo;
 
@@ -259,10 +224,10 @@ export default class BoardViewModel {
     });
 
     // handlers
-    boardModel.taskHandlerManager.addHandler(
+    boardsAndTasksModel.taskHandlerManager.addHandler(
       (taskFileContent: TaskFileContent) => {
         if (taskFileContent.boardId != this.boardInfo.fileId) return;
-        this.showTaskInList(taskFileContent);
+        this.showTask(taskFileContent);
         this.updateTaskIndices();
       }
     );

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -8,9 +8,10 @@ import CalendarModel, { MonthGrid } from "../../Model/Files/calendarModel";
 import ChatViewModel from "../Chat/chatViewModel";
 import CoreViewModel from "../Global/coreViewModel";
 import StorageModel from "../../Model/Global/storageModel";
+import TaskContainingPageViewModel from "./taskContainingPageViewModel";
 import TaskViewModel from "./taskViewModel";
 
-export default class CalendarPageViewModel {
+export default class CalendarPageViewModel extends TaskContainingPageViewModel {
   storageModel: StorageModel;
   calendarModel: CalendarModel;
   boardsAndTasksModel: BoardsAndTasksModel;
@@ -38,8 +39,6 @@ export default class CalendarPageViewModel {
   monthGrid: React.State<MonthGrid<React.MapState<TaskViewModel>> | undefined> =
     new React.State<any>(undefined);
 
-  taskViewModelsToShow: React.ListState<TaskViewModel> = new React.ListState();
-
   // view
   getTaskMapState = (
     taskFileContent: TaskFileContent
@@ -65,19 +64,22 @@ export default class CalendarPageViewModel {
     const taskViewModel: TaskViewModel = new TaskViewModel(
       this.coreViewModel,
       this.boardsAndTasksModel,
-      null,
       this,
       taskFileContent
     );
     const mapState: React.MapState<TaskViewModel> | null =
       this.getTaskMapState(taskFileContent);
     mapState?.set(taskFileContent.fileId, taskViewModel);
+    
+    this.taskViewModels.set(taskFileContent.fileId, taskViewModel);
   };
 
   removeTaskFromView = (taskFileContent: TaskFileContent): void => {
     const mapState: React.MapState<TaskViewModel> | null =
       this.getTaskMapState(taskFileContent);
     mapState?.remove(taskFileContent.fileId);
+
+    this.taskViewModels.remove(taskFileContent.fileId);
   };
 
   showToday = (): void => {
@@ -105,8 +107,6 @@ export default class CalendarPageViewModel {
     }
   };
 
-  // storage
-
   // load
   loadMonthTasks = (): void => {
     this.monthGrid.value = this.calendarModel.generateMonthGrid(
@@ -122,6 +122,8 @@ export default class CalendarPageViewModel {
       if (taskFileContent == null) continue;
       this.showTask(taskFileContent);
     }
+
+    this.updateTaskIndices();
   };
 
   loadData = (): void => {
@@ -134,12 +136,14 @@ export default class CalendarPageViewModel {
     public coreViewModel: CoreViewModel,
     storageModel: StorageModel,
     calendarModel: CalendarModel,
-    boardAndTasksModel: BoardsAndTasksModel,
+    boardsAndTasksModel: BoardsAndTasksModel,
     chatViewModel: ChatViewModel
   ) {
+    super(coreViewModel, boardsAndTasksModel);
+
     this.storageModel = storageModel;
     this.calendarModel = calendarModel;
-    this.boardsAndTasksModel = boardAndTasksModel;
+    this.boardsAndTasksModel = boardsAndTasksModel;
 
     this.chatViewModel = chatViewModel;
 
@@ -148,7 +152,7 @@ export default class CalendarPageViewModel {
     });
 
     // handlers
-    boardAndTasksModel.taskHandlerManager.addHandler(
+    boardsAndTasksModel.taskHandlerManager.addHandler(
       (taskFileContent: TaskFileContent) => {
         this.showTask(taskFileContent);
       }

src/ViewModel/Pages/taskContainingPageViewModel.ts

@@ -0,0 +1,68 @@
+import * as React from "bloatless-react";
+
+import BoardsAndTasksModel, {
+  TaskFileContent,
+} from "../../Model/Files/boardsAndTasksModel";
+
+import BoardViewModel from "./boardViewModel";
+import CalendarPageViewModel from "./calendarPageViewModel";
+import CoreViewModel from "../Global/coreViewModel";
+import { IndexManager } from "../../Model/Utility/utility";
+import TaskViewModel from "./taskViewModel";
+
+export default class TaskContainingPageViewModel {
+  coreViewModel: CoreViewModel;
+  boardsAndTasksModel: BoardsAndTasksModel;
+
+  // state
+  taskIndexManager: IndexManager<TaskViewModel> = new IndexManager(
+    (taskViewModel: TaskViewModel) => taskViewModel.sortingString
+  );
+
+  selectedTaskViewModel: React.State<TaskViewModel | undefined> =
+    new React.State<any>(undefined);
+
+  taskViewModels: React.MapState<TaskViewModel> = new React.MapState();
+
+  // methods
+  createTask = (boardId: string): void => {
+    const taskFileContent: TaskFileContent =
+      this.boardsAndTasksModel.createTask(boardId);
+    const taskViewModel: TaskViewModel = new TaskViewModel(
+      this.coreViewModel,
+      this.boardsAndTasksModel,
+      this,
+      taskFileContent
+    );
+    this.selectTask(taskViewModel);
+    this.updateTaskIndices();
+  };
+
+  // view
+  showTask = (taskFileContent: TaskFileContent): void => {};
+  removeTaskFromView = (taskFileContent: TaskFileContent): void => {};
+
+  selectTask = (selectedTask: TaskViewModel): void => {
+    this.selectedTaskViewModel.value = selectedTask;
+  };
+
+  closeTask = () => {
+    this.selectedTaskViewModel.value = undefined;
+  };
+
+  updateTaskIndices = (): void => {
+    this.taskIndexManager.update([...this.taskViewModels.value.values()]);
+    for (const boardViewModel of this.taskViewModels.value.values()) {
+      boardViewModel.updateIndex();
+    }
+  };
+
+  // init
+  constructor(
+    coreViewModel: CoreViewModel,
+    boardsAndTasksModel: BoardsAndTasksModel
+  ) {
+    this.coreViewModel = coreViewModel;
+    this.boardsAndTasksModel = boardsAndTasksModel;
+  }
+}

src/ViewModel/Pages/taskViewModel.ts

@@ -5,16 +5,14 @@ import BoardsAndTasksModel, {
 } from "../../Model/Files/boardsAndTasksModel";
 import { localeCompare, padZero } from "../../Model/Utility/utility";
 
-import BoardViewModel from "./boardViewModel";
-import CalendarPageViewModel from "./calendarPageViewModel";
 import CoreViewModel from "../Global/coreViewModel";
+import TaskContainingPageViewModel from "./taskContainingPageViewModel";
 import { allowDrag } from "../../View/utility";
 
 export default class TaskViewModel {
   boardsAndTasksModel: BoardsAndTasksModel;
 
-  boardViewModel: BoardViewModel | null;
-  calendarPageViewModel: CalendarPageViewModel | null;
+  containingModel: TaskContainingPageViewModel;
 
   // data
   task: TaskFileContent;
@@ -79,11 +77,11 @@ export default class TaskViewModel {
 
   // view
   open = (): void => {
-    this.boardViewModel?.selectTask(this);
+    this.containingModel.selectTask(this);
   };
 
   close = (): void => {
-    this.boardViewModel?.closeTask();
+    this.containingModel.closeTask();
   };
 
   closeAndSave = (): void => {
@@ -92,8 +90,7 @@ export default class TaskViewModel {
   };
 
   updateIndex = (): void => {
-    if (this.boardViewModel == null) return;
-    const index: number = this.boardViewModel.taskIndexManager.getIndex(this);
+    const index: number = this.containingModel.taskIndexManager.getIndex(this);
     this.index.value = index;
   };
 
@@ -116,25 +113,14 @@ export default class TaskViewModel {
 
     this.boardsAndTasksModel.updateTaskAndSend(newTaskFileContent);
 
-    if (this.boardViewModel != null) {
-      this.boardViewModel.showTaskInList(newTaskFileContent);
-      this.boardViewModel.updateTaskIndices();
-    }
-    if (this.calendarPageViewModel != null) {
-      this.calendarPageViewModel.showTask(newTaskFileContent);
-    }
+    this.containingModel.showTask(newTaskFileContent);
+    this.containingModel.updateTaskIndices();
   };
 
   deleteTask = (): void => {
     this.close();
     this.boardsAndTasksModel.deleteTask(this.task.boardId, this.task.fileId);
-
-    if (this.boardViewModel != null) {
-      this.boardViewModel.removeTaskFromList(this.task.fileId);
-    }
-    if (this.calendarPageViewModel != null) {
-      this.calendarPageViewModel.removeTaskFromView(this.task);
-    }
+    this.containingModel.removeTaskFromView(this.task);
   };
 
   // load
@@ -184,13 +170,11 @@ export default class TaskViewModel {
   constructor(
     public coreViewModel: CoreViewModel,
     boardsAndTasksModel: BoardsAndTasksModel,
-    boardViewModel: BoardViewModel | null,
-    calendarPageViewModel: CalendarPageViewModel | null,
+    containingModel: TaskContainingPageViewModel,
     taskFileContent: TaskFileContent
   ) {
     this.boardsAndTasksModel = boardsAndTasksModel;
-    this.boardViewModel = boardViewModel;
-    this.calendarPageViewModel = calendarPageViewModel;
+    this.containingModel = containingModel;
 
     this.task = taskFileContent;
 
@@ -202,7 +186,7 @@ export default class TaskViewModel {
       this.switchVersion(selectedVersionId);
     });
   }
-  
+
   // utility
   static getStringsForFilter = (taskViewModel: TaskViewModel): string[] => {
     return [