(js) Fix DnD in multicolumn calendars view
parent
3404ae8105
commit
8ff6fc8c1f
|
@ -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">
|
||||
<div class="hourCells">
|
||||
<var:foreach list="hoursToDisplay" item="currentTableHour">
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue