more fixes for calendarBox to preserve selection when view changes.

1 files changed, 41 insertions, 15 deletions

diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx
index 9452cc10a..678b7dd0b 100644
--- a/src/client/views/nodes/calendarBox/CalendarBox.tsx
+++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx
@@ -1,7 +1,8 @@
-import { Calendar, EventClickArg, EventSourceInput } from '@fullcalendar/core';
+import { Calendar, DateInput, EventClickArg, EventSourceInput } from '@fullcalendar/core';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import multiMonthPlugin from '@fullcalendar/multimonth';
 import timeGrid from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
 import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -26,6 +27,7 @@ export class CalendarBox extends CollectionSubView() {
     _oldWheel: HTMLElement | null = null;
     _observer: ResizeObserver | undefined;
     _eventsDisposer: IReactionDisposer | undefined;
+    _selectDisposer: IReactionDisposer | undefined;
 
     constructor(props: SubCollectionViewProps) {
         super(props);
@@ -38,18 +40,32 @@ export class CalendarBox extends CollectionSubView() {
     componentDidMount(): void {
         this._props.setContentViewBox?.(this);
         this._eventsDisposer = reaction(
-            () => this.calendarEvents,
-            events => this._calendar?.setOption('events', events),
+            () => ({ events: this.calendarEvents }),
+            ({ events }) => this._calendar?.setOption('events', events),
+            { fireImmediately: true }
+        );
+        this._selectDisposer = reaction(
+            () => ({ initialDate: this.dateSelect }),
+            ({ initialDate }) => {
+                const state = this._calendar?.getCurrentData();
+                state &&
+                    this._calendar?.dispatch({
+                        type: 'CHANGE_DATE',
+                        dateMarker: state.dateEnv.createMarker(initialDate.start),
+                    });
+                setTimeout(() => (initialDate.start.toISOString() !== initialDate.end.toISOString() ? this._calendar?.select(initialDate.start, initialDate.end) : this._calendar?.select(initialDate.start)));
+            },
             { fireImmediately: true }
         );
     }
     componentWillUnmount(): void {
         this._eventsDisposer?.();
+        this._selectDisposer?.();
     }
 
     @computed get calendarEvents(): EventSourceInput | undefined {
         return this.childDocs.map(doc => {
-            const { startDate: start, endDate: end } = dateRangeStrToDates(StrCast(doc.date_range));
+            const { start, end } = dateRangeStrToDates(StrCast(doc.date_range));
             return {
                 title: StrCast(doc.title),
                 start,
@@ -61,6 +77,7 @@ export class CalendarBox extends CollectionSubView() {
                 classNames: ['mother'], // will determine the style
                 editable: true, // subject to change in the future
                 backgroundColor: this.eventToColor(doc),
+                borderColor: this.eventToColor(doc),
                 color: 'white',
                 extendedProps: {
                     description: StrCast(doc.description),
@@ -72,20 +89,23 @@ export class CalendarBox extends CollectionSubView() {
     @computed get dateRangeStrDates() {
         return dateRangeStrToDates(StrCast(this.Document.date_range));
     }
+    get dateSelect() {
+        return dateRangeStrToDates(StrCast(this.Document.date));
+    }
 
     // Choose a calendar view based on the date range
     @computed get calendarViewType(): CalendarView {
         if (this.dataDoc[this.fieldKey + '_calendarType']) return StrCast(this.dataDoc[this.fieldKey + '_calendarType']) as CalendarView;
         if (this.isMultiMonth) return 'multiMonth';
-        const { startDate, endDate } = this.dateRangeStrDates;
-        if (startDate.getFullYear() !== endDate.getFullYear() || startDate.getMonth() !== endDate.getMonth()) return 'multiMonth';
-        if (Math.abs(startDate.getDay() - endDate.getDay()) > 7) return 'dayGridMonth';
+        const { start, end } = this.dateRangeStrDates;
+        if (start.getFullYear() !== end.getFullYear() || start.getMonth() !== end.getMonth()) return 'multiMonth';
+        if (Math.abs(start.getDay() - end.getDay()) > 7) return 'dayGridMonth';
         return 'timeGridWeek';
     }
 
     // TODO: Return a different color based on the event type
     eventToColor(event: Doc): string {
-        return 'blue';
+        return 'red';
     }
 
     internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData) {
@@ -116,32 +136,39 @@ export class CalendarBox extends CollectionSubView() {
         const cal = !this._calendarRef
             ? null
             : (this._calendar = new Calendar(this._calendarRef, {
-                  plugins: [multiMonthPlugin, dayGridPlugin, timeGrid],
+                  plugins: [multiMonthPlugin, dayGridPlugin, timeGrid, interactionPlugin],
                   headerToolbar: {
                       left: 'prev,next today',
                       center: 'title',
                       right: 'multiMonth dayGridMonth timeGridWeek timeGridDay',
                   },
+                  selectable: true,
                   initialView: this.calendarViewType === 'multiMonth' ? undefined : this.calendarViewType,
-                  initialDate: this.dateRangeStrDates.startDate,
+                  initialDate: this.dateSelect.start,
                   navLinks: true,
                   editable: false,
                   displayEventTime: false,
                   displayEventEnd: false,
+                  select: info => {
+                      const start = dateRangeStrToDates(info.startStr).start.toISOString();
+                      const end = dateRangeStrToDates(info.endStr).start.toISOString();
+                      this.dataDoc.date = start + '|' + end;
+                  },
                   aspectRatio: NumCast(this.Document.width) / NumCast(this.Document.height),
                   events: this.calendarEvents,
                   eventClick: this.handleEventClick,
               }));
         cal?.render();
+        setTimeout(() => cal?.view.calendar.select(this.dateSelect.start, this.dateSelect.end));
     };
 
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
     render() {
         return (
             <div
-                key={StrCast(this.dataDoc[this.fieldKey + '_calendarType'])}
+                key={this.calendarViewType}
                 className="calendarBox"
-                onPointerDown={e =>
+                onPointerDown={e => {
                     setTimeout(
                         action(() => {
                             const cname = (e.nativeEvent.target as HTMLButtonElement)?.className ?? '';
@@ -150,13 +177,12 @@ export class CalendarBox extends CollectionSubView() {
                             if (cname.includes('timeGridWeek')) this.dataDoc[this.fieldKey + '_calendarType'] = 'timeGridWeek';
                             if (cname.includes('timeGridDay')) this.dataDoc[this.fieldKey + '_calendarType'] = 'timeGridDay';
                         })
-                    )
-                }
+                    );
+                }}
                 style={{
                     width: this._props.PanelWidth() / this._props.ScreenToLocalTransform().Scale,
                     height: this._props.PanelHeight() / this._props.ScreenToLocalTransform().Scale,
                     transform: `scale(${this._props.ScreenToLocalTransform().Scale})`,
-                    transformOrigin: 'top left',
                 }}
                 ref={r => {
                     this.createDashEventsTarget(r);