From 8ff6fc8c1ff666e8d1ac19f338997d541df56241 Mon Sep 17 00:00:00 2001 From: Francis Lachapelle Date: Tue, 15 Dec 2015 22:55:02 -0500 Subject: [PATCH] (js) Fix DnD in multicolumn calendars view --- UI/Templates/SchedulerUI/UIxCalDayTable.wox | 1 + .../js/Scheduler/CalendarListController.js | 9 ++++- .../js/Scheduler/sgCalendarDay.directive.js | 21 +++++++++-- .../js/Scheduler/sgCalendarGhost.directive.js | 28 ++++++++++++-- .../sgDraggableCalendarBlock.directive.js | 37 ++++++++++++++++--- 5 files changed, 83 insertions(+), 13 deletions(-) diff --git a/UI/Templates/SchedulerUI/UIxCalDayTable.wox b/UI/Templates/SchedulerUI/UIxCalDayTable.wox index b151e8608..90ee643cb 100644 --- a/UI/Templates/SchedulerUI/UIxCalDayTable.wox +++ b/UI/Templates/SchedulerUI/UIxCalDayTable.wox @@ -95,6 +95,7 @@ var:sg-day-number="currentDayNumber" var:sg-day="currentTableDay.shortDateString" var:sg-day-string="currentTableDay.iso8601DateString" + sg-calendar="{{view.id}}" ng-repeat="view in calendar.views">
diff --git a/UI/WebServerResources/js/Scheduler/CalendarListController.js b/UI/WebServerResources/js/Scheduler/CalendarListController.js index 26a9144bd..27adb606e 100644 --- a/UI/WebServerResources/js/Scheduler/CalendarListController.js +++ b/UI/WebServerResources/js/Scheduler/CalendarListController.js @@ -146,7 +146,7 @@ // Adjust component or create new component through drag'n'drop function updateComponentFromGhost($event) { - var component, pointerHandler, coordinates, delta, params; + var component, pointerHandler, coordinates, delta, params, calendarNumber, activeCalendars; component = Component.$ghost.component; pointerHandler = Component.$ghost.pointerHandler; @@ -170,6 +170,13 @@ start: delta.start * 15, duration: delta.duration * 15 }; + if (pointerHandler.originalCalendar && delta.dayNumber !== 0) { + // The day number actually represents the destination calendar among the active calendars + calendarNumber = pointerHandler.currentEventCoordinates.dayNumber; + activeCalendars = _.filter(Calendar.$findAll(), { active: 1 }); + params.destination = activeCalendars[calendarNumber].id; + params.days = 0; + } if (component.isException || !component.occurrenceId) // Component is an exception to a recurrence or is not recurrent; // Immediately perform the adjustments diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarDay.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarDay.directive.js index 841039ee6..66fa5373c 100644 --- a/UI/WebServerResources/js/Scheduler/sgCalendarDay.directive.js +++ b/UI/WebServerResources/js/Scheduler/sgCalendarDay.directive.js @@ -27,7 +27,8 @@ scope: { day: '@sgDay', dayNumber: '@sgDayNumber', - dayString: '@sgDayString' + dayString: '@sgDayString', + calendar: '@sgCalendar' }, controller: sgCalendarDayController }; @@ -36,13 +37,27 @@ /** * @ngInject */ - sgCalendarDayController.$inject = ['$scope']; - function sgCalendarDayController($scope) { + sgCalendarDayController.$inject = ['$scope', 'Calendar']; + function sgCalendarDayController($scope, Calendar) { // Expose some scope variables to the controller // See the sgCalendarDayTable directive this.day = $scope.day; this.dayNumber = $scope.dayNumber; this.dayString = $scope.dayString; + this.calendarData = function() { + var pid, index, activeCalendars; + if ($scope.calendar) { + // A calendar is associated to the day; identify its index among active calendars + pid = $scope.calendar; + activeCalendars = _.filter(Calendar.$findAll(), { active: 1 }); + index = _.findIndex(activeCalendars, function(calendar) { + return calendar.id == pid; + }); + return { pid: pid, index: index }; + } + + return null; + }; } angular diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarGhost.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarGhost.directive.js index e4c9e957c..4f647945f 100644 --- a/UI/WebServerResources/js/Scheduler/sgCalendarGhost.directive.js +++ b/UI/WebServerResources/js/Scheduler/sgCalendarGhost.directive.js @@ -24,11 +24,12 @@ }; function link(scope, iElement, attrs, ctrls) { - var domElement, calendarDayCtrl, scrollViewCtrl; + var domElement, calendarDayCtrl, scrollViewCtrl, calendarNumber, originalCalendarNumber; domElement = iElement[0]; calendarDayCtrl = ctrls[0]; scrollViewCtrl = ctrls[1]; + calendarNumber = -1; iElement.addClass('sg-event--ghost md-whiteframe-3dp ng-hide'); @@ -45,10 +46,24 @@ }); function initGhost() { + var pid, calendarData; + // Expose ghost block to the scope scope.block = Component.$ghost; + + calendarData = calendarDayCtrl.calendarData(); + if (calendarData) { + // A calendar is associated to the day; this is a special multicolumn day view + calendarNumber = calendarData.index; + pid = calendarData.pid; + originalCalendarNumber = scope.block.pointerHandler.originalCalendar.index; + } + + if (!pid) + pid = scope.block.component.pid; + // Set background color - iElement.addClass('bg-folder' + scope.block.component.pid); + iElement.addClass('bg-folder' + pid); } function hideGhost() { @@ -91,7 +106,14 @@ delete scope.startHour; delete scope.endHour; - if (currentDay > -1 && currentDay == calendarDayCtrl.dayNumber) { + if (currentDay > -1 && // pointer is inside viewport + ((calendarNumber < 0 && // day is not associated to a calendar + currentDay == calendarDayCtrl.dayNumber) || // pointer is inside ghost's day + currentDay == calendarNumber && // pointer is inside ghost's calendar + (originalCalendarNumber == calendarNumber || // still inside original calendar + !scope.block.component.isException) // not an exception, event can be moved to a + // different calendar + )) { // This ghost block (day) is the first of the dragging event showGhost = true; if (!isRelative) { diff --git a/UI/WebServerResources/js/Scheduler/sgDraggableCalendarBlock.directive.js b/UI/WebServerResources/js/Scheduler/sgDraggableCalendarBlock.directive.js index 373da3bd1..054a30a63 100644 --- a/UI/WebServerResources/js/Scheduler/sgDraggableCalendarBlock.directive.js +++ b/UI/WebServerResources/js/Scheduler/sgDraggableCalendarBlock.directive.js @@ -113,12 +113,14 @@ } function dragStart(ev) { - var block, dragMode, eventType, isHourCell, isMonthly, startDate, newData, newComponent, pointerHandler; + var block, dragMode, eventType, isHourCell, isMonthly, startDate, newData, newComponent, pointerHandler, calendarData; isHourCell = element.hasClass('clickableHourCell'); isMonthly = (element[0].parentNode.tagName == 'SG-CALENDAR-MONTH-DAY') || element.hasClass('clickableDayCell'); + calendarData = calendarDayCtrl.calendarData(); + if (scope.block && scope.block.component) { // Move or resize existing component block = scope.block; @@ -130,7 +132,7 @@ calendarDayCtrl.dayString.substring(11,16)); newData = { type: 'appointment', - pid: Calendar.$defaultCalendar(), + pid: calendarData? calendarData.pid : Calendar.$defaultCalendar(), summary: l('New Event'), startDate: startDate, isAllDay: isHourCell? 0 : 1 @@ -160,12 +162,16 @@ pointerHandler = Component.$ghost.pointerHandler; pointerHandler.prepareWithEventType(eventType); pointerHandler.initFromBlock(block); + if (calendarData) + // When the day is associated to a calendar, the day number becomes the calendar index + // among the active calendars + pointerHandler.initFromCalendar(calendarData); // Update Component.$ghost Component.$ghost.starthour = block.starthour; Component.$ghost.component = block.component; - $log.debug('emit calendar:dragstart'); + $log.debug('emit calendar:dragstart ' + eventType + ' ' + dragMode); $rootScope.$emit('calendar:dragstart'); } @@ -196,7 +202,7 @@ } // Unmark all blocks as being dragged - if (block) + if (block && block.component) _.forEach(block.component.blocks, function(b) { b.dragging = false; }); @@ -271,6 +277,10 @@ this.dayNumber = block.component.blocks[0].dayNumber; }, + initFromCalendar: function(calendarNumber) { + this.dayNumber = calendarNumber; + }, + getDelta: function(otherCoordinates) { var delta = new SOGoEventDragEventCoordinates(); delta.dayNumber = (this.dayNumber - otherCoordinates.dayNumber); @@ -331,6 +341,8 @@ originalEventCoordinates: null, currentEventCoordinates: null, + originalCalendar: null, + dragHasStarted: false, // Function to return the day and quarter coordinates of the pointer cursor @@ -349,6 +361,12 @@ this.originalCoordinates = this.currentCoordinates.clone(); }, + initFromCalendar: function SEDPH_initFromCalendar(calendarData) { + this.originalCalendar = calendarData; + this.currentEventCoordinates.initFromCalendar(calendarData.index); + this.originalEventCoordinates.initFromCalendar(calendarData.index); + }, + // Method continuously called while dragging updateFromEvent: function SEDPH_updateFromEvent(event) { // Event here is a DOM event, not a calendar event! @@ -509,9 +527,16 @@ var daysOffset = view.daysOffset; coordinates.x = Math.floor((pxCoordinates.x - daysOffset) / dayWidth); + var minX = 0; var maxX = Calendar.$view.maxX; - if (coordinates.x < 0) - coordinates.x = 0; + if (this.dragMode != 'move-event') { + var calendarData = calendarDayCtrl.calendarData(); + if (calendarData) + // Resizing an event can't span a different day when in multicolumn view + minX = maxX = calendarData.index; + } + if (coordinates.x < minX) + coordinates.x = minX; else if (coordinates.x > maxX) coordinates.x = maxX; coordinates.y = 0;