add month grid

src/ViewModel/Chat/chatListViewModel.ts

@@ -23,9 +23,9 @@ export default class ChatListViewModel {
   newChatPrimaryChannel: React.State<string> = new React.State("");
   chatViewModels: React.ListState<ChatViewModel> = new React.ListState();
 
-  selectedChat: React.State<ChatViewModel | undefined> = new React.State<
-    ChatViewModel | undefined
-  >(undefined);
+  selectedChat: React.State<ChatViewModel | undefined> = new React.State<any>(
+    undefined
+  );
 
   // guards
   cannotCreateChat = React.createProxyState(

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -14,11 +14,11 @@ export default class ChatMessageViewModel {
   sender: string;
   dateSent: string;
   body: React.State<string> = new React.State("");
-  status: React.State<ChatMessageStatus | any> = new React.State<
-    ChatMessageStatus | undefined
-  >(undefined);
+  status: React.State<ChatMessageStatus | any> = new React.State<any>(
+    undefined
+  );
   sentByUser: boolean;
-  
+
   // state
   isPresentingInfoModal: React.State<boolean> = new React.State(false);
 
@@ -36,11 +36,11 @@ export default class ChatMessageViewModel {
   // view
   showInfoModal = (): void => {
     this.isPresentingInfoModal.value = true;
-  }
+  };
 
   hideInfoModal = (): void => {
     this.isPresentingInfoModal.value = false;
-  }
+  };
 
   // load
   loadData = (): void => {

src/ViewModel/Chat/chatViewModel.ts

@@ -27,8 +27,8 @@ export default class ChatViewModel {
   settingsPageViewModel: SettingsPageViewModel;
 
   // state
-  displayedColor: React.State<Color> = new React.State<Color>(Color.Standard);
-  selectedPage: React.State<ChatPageType> = new React.State<ChatPageType>(
+  displayedColor: React.State<Color> = new React.State<any>(Color.Standard);
+  selectedPage: React.State<ChatPageType> = new React.State<any>(
     ChatPageType.Messages
   );
 
@@ -99,7 +99,7 @@ export default class ChatViewModel {
     this.calendarViewModel = new CalendarPageViewModel(
       coreViewModel,
       this.storageModel,
-      this.chatModel.fileModel.calendarModel,
+      this.chatModel.fileModel.boardsAndTasksModel.calendarModel,
       this.chatModel.fileModel.boardsAndTasksModel
     );
     this.taskPageViewModel = new TaskPageViewModel(

src/ViewModel/Pages/boardViewModel.ts

@@ -27,15 +27,15 @@ export default class BoardViewModel {
 
   // state
   name: React.State<string> = new React.State("");
-  color: React.State<Color> = new React.State<Color>(Color.Standard);
+  color: React.State<Color> = new React.State<any>(Color.Standard);
 
   index: React.State<number> = new React.State(0);
 
-  selectedPage: React.State<BoardPageType> = new React.State<BoardPageType>(
+  selectedPage: React.State<BoardPageType> = new React.State<any>(
     BoardPageType.List
   );
   selectedTaskViewModel: React.State<TaskViewModel | undefined> =
-    new React.State<TaskViewModel | undefined>(undefined);
+    new React.State<any>(undefined);
 
   isSelected: React.State<boolean>;
   isPresentingSettingsModal: React.State<boolean> = new React.State(false);
@@ -190,19 +190,6 @@ export default class BoardViewModel {
     }
   };
 
-  // filter
-  getStringsFromTaskViewModel = (taskViewModel: TaskViewModel): string[] => {
-    return [
-      taskViewModel.task.name,
-      taskViewModel.task.description ?? "",
-      taskViewModel.task.category ?? "",
-      taskViewModel.task.status ?? "",
-      taskViewModel.task.priority ?? "",
-      taskViewModel.task.date ?? "",
-      taskViewModel.task.time ?? "",
-    ];
-  };
-
   // load
   loadListRelevantData = (): void => {
     this.name.value = this.boardInfo.name;

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -3,8 +3,8 @@ import * as React from "bloatless-react";
 import BoardsAndTasksModel, {
   TaskFileContent,
 } from "../../Model/Files/boardsAndTasksModel";
+import CalendarModel, { MonthGrid } from "../../Model/Files/calendarModel";
 
-import CalendarModel from "../../Model/Files/calendarModel";
 import CoreViewModel from "../Global/coreViewModel";
 import StorageModel from "../../Model/Global/storageModel";
 import TaskViewModel from "./taskViewModel";
@@ -12,7 +12,15 @@ import TaskViewModel from "./taskViewModel";
 export default class CalendarPageViewModel {
   storageModel: StorageModel;
   calendarModel: CalendarModel;
-  boardAndTasksModel: BoardsAndTasksModel;
+  boardsAndTasksModel: BoardsAndTasksModel;
+
+  // data
+  get monthString(): string {
+    return CalendarModel.getMonthString(
+      this.selectedYear.value.toString(),
+      this.selectedMonth.value.toString()
+    );
+  }
 
   // paths
   getBasePath = (): string[] => {
@@ -20,35 +28,106 @@ export default class CalendarPageViewModel {
   };
 
   // state
-  taskViewModels: React.MapState<TaskViewModel> = new React.MapState();
+  selectedYear: React.State<number> = new React.State(0);
+  selectedMonth: React.State<number> = new React.State(0);
+
+  monthGrid: React.State<MonthGrid<React.MapState<TaskViewModel>> | undefined> =
+    new React.State<any>(undefined);
 
   // view
+  getTaskMapState = (
+    taskFileContent: TaskFileContent
+  ): React.MapState<TaskViewModel> | null => {
+    if (this.monthGrid.value == null) return null;
+
+    const dateString: string | undefined = CalendarModel.isoToDateString(
+      taskFileContent.date ?? ""
+    );
+    if (dateString == undefined) return null;
+    return this.monthGrid.value.days[dateString];
+  };
+
   showTask = (taskFileContent: TaskFileContent): void => {
     const taskViewModel: TaskViewModel = new TaskViewModel(
       this.coreViewModel,
-      this.boardAndTasksModel,
+      this.boardsAndTasksModel,
       null,
       this,
       taskFileContent
     );
-    this.taskViewModels.set(taskFileContent.fileId, taskViewModel);
+    const mapState: React.MapState<TaskViewModel> | null =
+      this.getTaskMapState(taskFileContent);
+    mapState?.set(taskFileContent.fileId, taskViewModel);
+  };
+
+  removeTaskFromList = (taskFileContent: TaskFileContent): void => {
+    const mapState: React.MapState<TaskViewModel> | null =
+      this.getTaskMapState(taskFileContent);
+    mapState?.remove(taskFileContent.fileId);
+  };
+
+  showToday = (): void => {
+    const today: Date = new Date();
+    this.selectedYear.value = today.getFullYear();
+    this.selectedMonth.value = today.getMonth() + 1;
+  };
+
+  showPreviousMonth = (): void => {
+    this.selectedMonth.value -= 1;
+
+    if (this.selectedMonth.value <= 0) {
+      this.selectedYear.value -= 1;
+      this.selectedMonth.value = 12;
+    }
+  };
+
+  showNextMonth = (): void => {
+    this.selectedMonth.value += 1;
+
+    if (this.selectedMonth.value >= 13) {
+      this.selectedYear.value += 1;
+      this.selectedMonth.value = 1;
+    }
   };
 
   // storage
 
   // load
-  loadData = (): void => {}
+  loadTasks = (): void => {
+    this.monthGrid.value = this.calendarModel.generateMonthGrid(
+      this.selectedYear.value,
+      this.selectedMonth.value,
+      () => new React.MapState()
+    );
+    const taskIds: string[] = this.calendarModel.listTaskIds(this.monthString);
+
+    for (const taskId of taskIds) {
+      const taskFileContent: TaskFileContent | null =
+        this.boardsAndTasksModel.getLatestTaskFileContent(taskId);
+      if (taskFileContent == null) continue;
+      this.showTask(taskFileContent);
+    }
+  };
+
+  loadData = (): void => {
+    this.loadTasks();
+    this.showToday();
+  };
 
   // init
   constructor(
     public coreViewModel: CoreViewModel,
     storageModel: StorageModel,
     calendarModel: CalendarModel,
-    boardAndTasksModel: BoardsAndTasksModel,
+    boardAndTasksModel: BoardsAndTasksModel
   ) {
     this.storageModel = storageModel;
     this.calendarModel = calendarModel;
-    this.boardAndTasksModel = boardAndTasksModel;
+    this.boardsAndTasksModel = boardAndTasksModel;
+
+    React.bulkSubscribe([this.selectedYear, this.selectedMonth], () => {
+      this.loadTasks();
+    });
   }
 }
 

src/ViewModel/Pages/settingsPageViewModel.ts

@@ -21,7 +21,7 @@ export default class SettingsPageViewModel {
       this.shouldShowEncryptionKey.value == true ? "text" : "password"
     );
 
-  color: React.State<Color> = new React.State<Color>(Color.Standard);
+  color: React.State<Color> = new React.State<any>(Color.Standard);
 
   // guards
   cannotSetPrimaryChannel: React.State<boolean> = React.createProxyState(

src/ViewModel/Pages/taskPageViewModel.ts

@@ -39,9 +39,9 @@ export default class TaskPageViewModel {
 
   boardViewModels: React.MapState<BoardViewModel> = new React.MapState();
 
-  selectedBoardId: React.State<string | undefined> = new React.State<
-    string | undefined
-  >(undefined);
+  selectedBoardId: React.State<string | undefined> = new React.State<any>(
+    undefined
+  );
 
   // guards
   cannotCreateBoard: React.State<boolean> = React.createProxyState(

src/ViewModel/Pages/taskViewModel.ts

@@ -200,4 +200,17 @@ export default class TaskViewModel {
       this.switchVersion(selectedVersionId);
     });
   }
+  
+  // utility
+  static getStringsForFilter = (taskViewModel: TaskViewModel): string[] => {
+    return [
+      taskViewModel.task.name,
+      taskViewModel.task.description ?? "",
+      taskViewModel.task.category ?? "",
+      taskViewModel.task.status ?? "",
+      taskViewModel.task.priority ?? "",
+      taskViewModel.task.date ?? "",
+      taskViewModel.task.time ?? "",
+    ];
+  };
 }