Merge branch 'moreUpgrading' into dataViz-annotations

1 files changed, 134 insertions, 0 deletions

diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx
new file mode 100644
index 000000000..989feb774
--- /dev/null
+++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx
@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { observer } from "mobx-react";
+import { Doc } from "../../../../fields/Doc";
+import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps, ViewBoxBaseComponent } from '../../DocComponent';
+import { FieldView, FieldViewProps } from '../FieldView';
+import { StrCast } from '../../../../fields/Types';
+import { makeObservable } from 'mobx';
+import { dateRangeStrToDates } from '../../../../Utils';
+import { Calendar, EventClickArg, EventSourceInput } from '@fullcalendar/core'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import multiMonthPlugin from '@fullcalendar/multimonth'
+import { faListNumeric } from '@fortawesome/free-solid-svg-icons';
+
+type CalendarView = 'month' | 'multi-month' | 'week';
+
+@observer
+export class CalendarBox extends ViewBoxBaseComponent<FieldViewProps>(){
+    public static LayoutString(fieldKey: string = 'calendar') {
+        return FieldView.LayoutString(CalendarBox, fieldKey);
+    }
+
+    componentDidMount(): void {
+        
+    }
+
+    componentWillUnmount(): void {
+        
+    }
+
+    _calendarRef = React.createRef<HTMLElement>()
+
+    get dateRangeStr (){
+        return StrCast(this.Document.date_range);
+    }
+
+    // Choose a calendar view based on the date range 
+    get calendarViewType (): CalendarView {
+        const [fromDate, toDate] = dateRangeStrToDates(this.dateRangeStr);
+
+        if (fromDate.getFullYear() !== toDate.getFullYear() || fromDate.getMonth() !== toDate.getMonth()) return 'multi-month';
+
+        if (Math.abs(fromDate.getDay() - toDate.getDay()) > 7) return 'month';
+        return 'week';
+    }
+
+    get calendarStartDate () {
+        return this.dateRangeStr.split("|")[0];
+    }
+
+    get calendarToDate () {
+        return this.dateRangeStr.split("|")[1];
+    }
+
+    get childDocs (): Doc[] {
+        return this.childDocs; // get all sub docs for a calendar
+    }
+
+    docBackgroundColor (type: string): string {
+        // TODO: Return a different color based on the event type
+        return 'blue';
+    }
+
+    get calendarEvents (): EventSourceInput | undefined {
+        if (this.childDocs.length === 0) return undefined;
+        return this.childDocs.map((doc, idx) => {
+            const docTitle = StrCast(doc.title);
+            const docDateRange = StrCast(doc.date_range);
+            const [startDate, endDate] = dateRangeStrToDates(docDateRange);
+            const docType = doc.type;
+            const docDescription = doc.description ? StrCast(doc.description): "";
+
+            return {
+                title: docTitle,
+                start: startDate,
+                end: endDate,
+                allDay: false,
+                classNames:[StrCast(docType)], // will determine the style 
+                editable: false, // subject to change in the future
+                backgroundColor: this.docBackgroundColor(StrCast(doc.type)),
+                color: 'white',
+                extendedProps: {
+                    description: docDescription
+                },
+                
+            }
+
+        })
+    }
+
+    handleEventClick = (arg: EventClickArg) => {
+        // TODO: open popover with event description, option to open CalendarManager and change event date, delete event, etc.
+    }
+
+    calendarEl: HTMLElement = document.getElementById('calendar-box-v1')!;
+
+    // https://fullcalendar.io
+    get calendar() {
+        return new Calendar(this.calendarEl, 
+            {
+                plugins: [this.calendarViewType === 'multi-month' ? multiMonthPlugin : dayGridPlugin],
+                headerToolbar: {
+                    left: 'prev,next today',
+                    center: 'title',
+                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
+                },
+                initialDate: this.calendarStartDate,
+                navLinks: true,
+                editable: false,
+                displayEventTime: false,
+                displayEventEnd: false,
+                events: this.calendarEvents,
+                eventClick: this.handleEventClick
+            }
+        )
+        
+    }
+
+
+    constructor(props: any){
+        super(props);
+        makeObservable(this);
+    }
+
+    render(){
+        return (
+            <div className='calendar-box-conatiner'>
+                <div id='calendar-box-v1'>
+
+                </div>
+            </div>  
+        );
+        
+    }
+}
\ No newline at end of file