fixed calendar to update doc when event is dragged. added event context menu.

1 files changed, 39 insertions, 7 deletions

diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx
index d38cb5423..c1f6f5859 100644
--- a/src/client/views/nodes/calendarBox/CalendarBox.tsx
+++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx
@@ -1,4 +1,4 @@
-import { Calendar, EventClickArg, EventSourceInput } from '@fullcalendar/core';
+import { Calendar, EventClickArg, EventDropArg, EventSourceInput } from '@fullcalendar/core';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import multiMonthPlugin from '@fullcalendar/multimonth';
 import timeGrid from '@fullcalendar/timegrid';
@@ -6,7 +6,7 @@ import interactionPlugin from '@fullcalendar/interaction';
 import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { dateRangeStrToDates } from '../../../../ClientUtils';
+import { dateRangeStrToDates, simulateMouseClick } from '../../../../ClientUtils';
 import { Doc } from '../../../../fields/Doc';
 import { BoolCast, NumCast, StrCast } from '../../../../fields/Types';
 import { CollectionSubView, SubCollectionViewProps } from '../../collections/CollectionSubView';
@@ -17,6 +17,7 @@ import { DocumentView } from '../DocumentView';
 import { OpenWhere } from '../OpenWhere';
 import { DragManager } from '../../../util/DragManager';
 import { DocData } from '../../../../fields/DocSymbols';
+import { ContextMenu } from '../../ContextMenu';
 
 type CalendarView = 'multiMonth' | 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay';
 
@@ -104,32 +105,44 @@ export class CalendarBox extends CollectionSubView() {
     }
 
     // TODO: Return a different color based on the event type
-    eventToColor(event: Doc): string {
+    eventToColor = (event: Doc): string => {
         return 'red';
-    }
+    };
 
-    internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData) {
+    internalDocDrop = (e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData) => {
         if (!super.onInternalDrop(e, de)) return false;
         de.complete.docDragData?.droppedDocuments.forEach(doc => {
             const today = new Date().toISOString();
             if (!doc.date_range) doc[DocData].date_range = `${today}|${today}`;
         });
         return true;
-    }
+    };
 
     onInternalDrop = (e: Event, de: DragManager.DropEvent): boolean => {
         if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData);
         return false;
     };
 
+    handleEventDrop = (arg: EventDropArg) => {
+        const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? '');
+        doc && arg.event.start && (doc.date_range = arg.event.start?.toString() + '|' + (arg.event.end ?? arg.event.start).toString());
+    };
+
     handleEventClick = (arg: EventClickArg) => {
         const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? '');
-        DocumentView.DeselectAll();
         if (doc) {
             DocumentView.showDocument(doc, { openLocation: OpenWhere.lightboxAlways });
             arg.jsEvent.stopPropagation();
         }
     };
+    handleEventContextMenu = (pageX: number, pageY: number, docid: string) => {
+        const doc = DocServer.GetCachedRefField(docid ?? '');
+        if (doc) {
+            const cm = ContextMenu.Instance;
+            cm.addItem({ description: 'Show Metadata', event: () => this._props.addDocTab(doc, OpenWhere.addRightKeyvalue), icon: 'table-columns' });
+            cm.displayMenu(pageX - 15, pageY - 15, undefined, undefined);
+        }
+    };
 
     // https://fullcalendar.io
     renderCalendar = () => {
@@ -157,6 +170,25 @@ export class CalendarBox extends CollectionSubView() {
                   aspectRatio: NumCast(this.Document.width) / NumCast(this.Document.height),
                   events: this.calendarEvents,
                   eventClick: this.handleEventClick,
+                  eventDrop: this.handleEventDrop,
+                  eventDidMount: arg => {
+                      arg.el.addEventListener('pointerdown', ev => {
+                          ev.button && ev.stopPropagation();
+                      });
+                      if (navigator.userAgent.includes('Macintosh')) {
+                          arg.el.addEventListener('pointerup', ev => {
+                              ev.button && ev.stopPropagation();
+                              ev.button && this.handleEventContextMenu(ev.pageX, ev.pageY, arg.event._def.groupId);
+                          });
+                      }
+                      arg.el.addEventListener('contextmenu', ev => {
+                          if (!navigator.userAgent.includes('Macintosh')) {
+                              this.handleEventContextMenu(ev.pageX, ev.pageY, arg.event._def.groupId);
+                          }
+                          ev.stopPropagation();
+                          ev.preventDefault();
+                      });
+                  },
               }));
         cal?.render();
         setTimeout(() => cal?.view.calendar.select(this.dateSelect.start, this.dateSelect.end));