Merge branch 'TNick-calendar' into devel

CHANGELOG.md

@@ -2,7 +2,8 @@
 
 This release adds the following new features:
 
-- [Nested tasks](https://github.com/wekan/wekan/pull/1723).
+- [Nested tasks](https://github.com/wekan/wekan/pull/1723);
+- [Calendar improvements](https://github.com/wekan/wekan/pull/1752).
 
 and fixes the following bugs:
 

client/components/boards/boardBody.jade

@@ -26,4 +26,10 @@ template(name="boardBody")
       if isViewLists
         +listsGroup
       if isViewCalendar
-        +fullcalendar(calendarOptions)
+        +calendarView
+
+template(name="calendarView")
+  .calendar-view.swimlane
+    if currentCard
+      +cardDetails(currentCard)
+    +fullcalendar(calendarOptions)

client/components/boards/boardBody.js

@@ -113,38 +113,64 @@ BlazeComponent.extendComponent({
         .childComponents('addListForm')[0].open();
     }
   },
+  events() {
+    return [{
+      // XXX The board-overlay div should probably be moved to the parent
+      // component.
+      'mouseenter .board-overlay'() {
+        if (this.mouseHasEnterCardDetails) {
+          this.showOverlay.set(false);
+        }
+      },
+      'mouseup'() {
+        if (this._isDragging) {
+          this._isDragging = false;
+        }
+      },
+    }];
+  },
 
+  // XXX Flow components allow us to avoid creating these two setter methods by
+  // exposing a public API to modify the component state. We need to investigate
+  // best practices here.
+  setIsDragging(bool) {
+    this.draggingActive.set(bool);
+  },
+
+  scrollLeft(position = 0) {
+    const swimlanes = this.$('.js-swimlanes');
+    swimlanes && swimlanes.animate({
+      scrollLeft: position,
+    });
+  },
+
+}).register('boardBody');
+
+BlazeComponent.extendComponent({
+  onRendered() {
+    this.autorun(function(){
+      $('#calendar-view').fullCalendar('refetchEvents');
+    });
+  },
   calendarOptions() {
     return {
       id: 'calendar-view',
-      defaultView: 'basicWeek',
+      defaultView: 'agendaDay',
+      editable: true,
+      timezone: 'local',
       header: {
-        left: 'title',
+        left: 'title   today prev,next',
         center: 'agendaDay,listDay,timelineDay agendaWeek,listWeek,timelineWeek month,timelineMonth timelineYear',
-        right: 'today prev,next',
-      },
-      views: {
-        basic: {
-          // options apply to basicWeek and basicDay views
-        },
-        agenda: {
-          // options apply to agendaWeek and agendaDay views
-        },
-        week: {
-          // options apply to basicWeek and agendaWeek views
-        },
-        day: {
-          // options apply to basicDay and agendaDay views
-        },
+        right: '',
       },
-      themeSystem: 'jquery-ui',
-      height: 'parent',
+      // height: 'parent', nope, doesn't work as the parent might be small
+      height: 'auto',
       /* TODO: lists as resources: https://fullcalendar.io/docs/vertical-resource-view */
       navLinks: true,
       nowIndicator: true,
       businessHours: {
         // days of week. an array of zero-based day of week integers (0=Sunday)
-        dow: [ 1, 2, 3, 4, 5 ], // Monday - Thursday
+        dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
         start: '8:00',
         end: '18:00',
       },
@@ -154,10 +180,11 @@ BlazeComponent.extendComponent({
         const events = [];
         currentBoard.cardsInInterval(start.toDate(), end.toDate()).forEach(function(card){
           events.push({
-            id: card.id,
+            id: card._id,
             title: card.title,
             start: card.startAt,
             end: card.endAt,
+            allDay: Math.abs(card.endAt.getTime() - card.startAt.getTime()) / 1000 === 24*3600,
             url: FlowRouter.url('card', {
               boardId: currentBoard._id,
               slug: currentBoard.slug,
@@ -167,38 +194,33 @@ BlazeComponent.extendComponent({
         });
         callback(events);
       },
-    };
-  },
+      eventResize(event, delta, revertFunc) {
+        let isOk = false;
+        const card = Cards.findOne(event.id);
 
-  events() {
-    return [{
-      // XXX The board-overlay div should probably be moved to the parent
-      // component.
-      'mouseenter .board-overlay'() {
-        if (this.mouseHasEnterCardDetails) {
-          this.showOverlay.set(false);
+        if (card) {
+          card.setEnd(event.end.toDate());
+          isOk = true;
+        }
+        if (!isOk) {
+          revertFunc();
         }
       },
-      'mouseup'() {
-        if (this._isDragging) {
-          this._isDragging = false;
+      eventDrop(event, delta, revertFunc) {
+        let isOk = false;
+        const card = Cards.findOne(event.id);
+        if (card) {
+          // TODO: add a flag for allDay events
+          if (!event.allDay) {
+            card.setStart(event.start.toDate());
+            card.setEnd(event.end.toDate());
+            isOk = true;
+          }
+        }
+        if (!isOk) {
+          revertFunc();
         }
       },
-    }];
-  },
-
-  // XXX Flow components allow us to avoid creating these two setter methods by
-  // exposing a public API to modify the component state. We need to investigate
-  // best practices here.
-  setIsDragging(bool) {
-    this.draggingActive.set(bool);
-  },
-
-  scrollLeft(position = 0) {
-    const swimlanes = this.$('.js-swimlanes');
-    swimlanes && swimlanes.animate({
-      scrollLeft: position,
-    });
+    };
   },
-
-}).register('boardBody');
+}).register('calendarView');