feat(view/calendar): refresh calendar when entities change

src/public/app/services/note_list_renderer.ts

@@ -7,7 +7,7 @@ import type ViewMode from "../widgets/view_widgets/view_mode.js";
 export default class NoteListRenderer {
 
     private viewType: string;
-    private viewMode: ViewMode | null;
+    public viewMode: ViewMode | null;
 
     constructor($parent: JQuery<HTMLElement>, parentNote: FNote, noteIds: string[], showNotePath: boolean = false) {
         this.viewType = this.#getViewType(parentNote);

src/public/app/widgets/note_list.ts

@@ -2,6 +2,7 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js";
 import NoteListRenderer from "../services/note_list_renderer.js";
 import type FNote from "../entities/fnote.js";
 import type { EventData } from "../components/app_context.js";
+import type ViewMode from "./view_widgets/view_mode.js";
 
 const TPL = `
 <div class="note-list-widget">
@@ -26,6 +27,7 @@ export default class NoteListWidget extends NoteContextAwareWidget {
     private isIntersecting?: boolean;
     private noteIdRefreshed?: string;
     private shownNoteId?: string | null;
+    private viewMode?: ViewMode | null;
 
     isEnabled() {
         return super.isEnabled() && this.noteContext?.hasNoteList();
@@ -67,6 +69,7 @@ export default class NoteListWidget extends NoteContextAwareWidget {
     async renderNoteList(note: FNote) {
         const noteListRenderer = new NoteListRenderer(this.$content, note, note.getChildNoteIds());
         await noteListRenderer.renderList();
+        this.viewMode = noteListRenderer.viewMode;
     }
 
     async refresh() {
@@ -102,11 +105,15 @@ export default class NoteListWidget extends NoteContextAwareWidget {
         }
     }
 
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId && attr.name && ["viewType", "expanded", "pageSize"].includes(attr.name))) {
+    entitiesReloadedEvent(e: EventData<"entitiesReloaded">) {
+        if (e.loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId && attr.name && ["viewType", "expanded", "pageSize"].includes(attr.name))) {
             this.shownNoteId = null; // force render
 
             this.checkRenderStatus();
         }
+
+        if (this.viewMode) {
+            this.viewMode.entitiesReloadedEvents(e);
+        }
     }
 }

src/public/app/widgets/view_widgets/calendar_view.ts

@@ -1,4 +1,4 @@
-import type { DateSelectArg, EventChangeArg, EventDropArg, EventSourceInput, PluginDef } from "@fullcalendar/core";
+import type { Calendar, DateSelectArg, EventChangeArg, EventDropArg, EventSourceInput, PluginDef } from "@fullcalendar/core";
 import froca from "../../services/froca.js";
 import ViewMode, { type ViewModeArgs } from "./view_mode.js";
 import type FNote from "../../entities/fnote.js";
@@ -8,6 +8,7 @@ import { t } from "../../services/i18n.js";
 import options from "../../services/options.js";
 import dialogService from "../../services/dialog.js";
 import attributes from "../../services/attributes.js";
+import type { EventData } from "../../components/app_context.js";
 
 const TPL = `
 <div class="calendar-view">
@@ -60,6 +61,7 @@ export default class CalendarView extends ViewMode {
     private $calendarContainer: JQuery<HTMLElement>;
     private noteIds: string[];
     private parentNote: FNote;
+    private calendar?: Calendar;
 
     constructor(args: ViewModeArgs) {
         super(args);
@@ -86,7 +88,7 @@ export default class CalendarView extends ViewMode {
         const calendar = new Calendar(this.$calendarContainer[0], {
             plugins,
             initialView: "dayGridMonth",
-            events: await CalendarView.#buildEvents(this.noteIds),
+            events: async () => await CalendarView.#buildEvents(this.noteIds),
             editable: isEditable,
             selectable: isEditable,
             select: (e) => this.#onCalendarSelection(e),
@@ -95,6 +97,7 @@ export default class CalendarView extends ViewMode {
             locale: await CalendarView.#getLocale()
         });
         calendar.render();
+        this.calendar = calendar;
 
         return this.$root;
     }
@@ -173,6 +176,17 @@ export default class CalendarView extends ViewMode {
         CalendarView.#setAttribute(note, "label", "endDate", endDate);
     }
 
+    entitiesReloadedEvents({ loadResults }: EventData<"entitiesReloaded">): void {
+        // Refresh note IDs if they got changed.
+        if (loadResults.getBranchRows().some((branch) => branch.parentNoteId == this.parentNote.noteId)) {
+            this.noteIds = this.parentNote.getChildNoteIds();
+        }
+
+        if (this.calendar && loadResults.getAttributeRows().some((a) => this.noteIds.includes(a.noteId ?? ""))) {
+            this.calendar.refetchEvents();
+        }
+    }
+
     static async #buildEvents(noteIds: string[]) {
         const notes = await froca.getNotes(noteIds);
         const events: EventSourceInput = [];

src/public/app/widgets/view_widgets/view_mode.ts

@@ -1,3 +1,4 @@
+import type { EventData } from "../../components/app_context.js";
 import type FNote from "../../entities/fnote.js";
 
 export interface ViewModeArgs {
@@ -16,4 +17,8 @@ export default abstract class ViewMode {
 
     abstract renderList(): Promise<JQuery<HTMLElement> | undefined>;
 
+    entitiesReloadedEvents(e: EventData<"entitiesReloaded">) {
+        // Do nothing by default.
+    }
+
 }