(js) Improve dates adjustments in editors
The main issue to resolve was to handle the time reset by the datepicker when changing dates.pull/110/head
parent
2bad5c0da4
commit
0b490a00c6
|
@ -103,8 +103,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
|
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
|
||||||
<md-datepicker ng-model="editor.component.start"
|
<md-datepicker ng-model="editor.component.start"
|
||||||
|
ng-change="editor.updateStartTime()"
|
||||||
label:md-placeholder="From"><!-- date picker --></md-datepicker>
|
label:md-placeholder="From"><!-- date picker --></md-datepicker>
|
||||||
<sg-timepicker ng-model="editor.component.start"
|
<sg-timepicker ng-model="editor.component.start"
|
||||||
|
ng-change="editor.adjustStartTime()"
|
||||||
ng-hide="editor.component.isAllDay"><!-- time picker --></sg-timepicker>
|
ng-hide="editor.component.isAllDay"><!-- time picker --></sg-timepicker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -114,8 +116,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
|
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
|
||||||
<md-datepicker ng-model="editor.component.end"
|
<md-datepicker ng-model="editor.component.end"
|
||||||
|
ng-change="editor.updateEndTime()"
|
||||||
label:md-placeholder="To"><!-- date picker --></md-datepicker>
|
label:md-placeholder="To"><!-- date picker --></md-datepicker>
|
||||||
<sg-timepicker ng-model="editor.component.end"
|
<sg-timepicker ng-model="editor.component.end"
|
||||||
|
ng-change="editor.adjustEndTime()"
|
||||||
ng-hide="editor.component.isAllDay"><!-- time picker --></sg-timepicker>
|
ng-hide="editor.component.isAllDay"><!-- time picker --></sg-timepicker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -86,15 +86,17 @@
|
||||||
</div>
|
</div>
|
||||||
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
|
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
|
||||||
<md-datepicker ng-model="editor.component.start"
|
<md-datepicker ng-model="editor.component.start"
|
||||||
|
ng-change="editor.updateStartTime()"
|
||||||
label:md-placeholder="From"> <!-- date picker--></md-datepicker>
|
label:md-placeholder="From"> <!-- date picker--></md-datepicker>
|
||||||
<sg-timepicker ng-model="editor.component.start"><!-- time picker --></sg-timepicker>
|
<sg-timepicker ng-model="editor.component.start"
|
||||||
|
ng-change="editor.adjustStartTime()"><!-- time picker --></sg-timepicker>
|
||||||
<md-button class="md-icon-button" type="button" ng-click="editor.component.$deleteStartDate()">
|
<md-button class="md-icon-button" type="button" ng-click="editor.component.$deleteStartDate()">
|
||||||
<md-icon>remove_circle</md-icon>
|
<md-icon>remove_circle</md-icon>
|
||||||
</md-button>
|
</md-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-layout-margin" layout="row" layout-align="start center" ng-hide="editor.component.start">
|
<div class="md-layout-margin" layout="row" layout-align="start center" ng-hide="editor.component.start">
|
||||||
<md-button class="md-icon-button" type="button" ng-click="editor.component.$addStartDate()">
|
<md-button class="md-icon-button" type="button" ng-click="editor.addStartDate()">
|
||||||
<md-icon>add_circle</md-icon>
|
<md-icon>add_circle</md-icon>
|
||||||
</md-button>
|
</md-button>
|
||||||
<label class="button-label"><var:string label:value="Add From"/></label>
|
<label class="button-label"><var:string label:value="Add From"/></label>
|
||||||
|
@ -106,15 +108,17 @@
|
||||||
</div>
|
</div>
|
||||||
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
|
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
|
||||||
<md-datepicker ng-model="editor.component.due"
|
<md-datepicker ng-model="editor.component.due"
|
||||||
|
ng-change="editor.updateDueTime()"
|
||||||
label:md-placeholder="Due"> <!-- date picker--></md-datepicker>
|
label:md-placeholder="Due"> <!-- date picker--></md-datepicker>
|
||||||
<sg-timepicker ng-model="editor.component.due"><!-- time picker --></sg-timepicker>
|
<sg-timepicker ng-model="editor.component.due"
|
||||||
|
ng-change="editor.adjustDueTime()"><!-- time picker --></sg-timepicker>
|
||||||
<md-button class="md-icon-button" type="button" ng-click="editor.component.$deleteDueDate()">
|
<md-button class="md-icon-button" type="button" ng-click="editor.component.$deleteDueDate()">
|
||||||
<md-icon>remove_circle</md-icon>
|
<md-icon>remove_circle</md-icon>
|
||||||
</md-button>
|
</md-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-layout-margin" layout="row" layout-align="start center" ng-hide="editor.component.due">
|
<div class="md-layout-margin" layout="row" layout-align="start center" ng-hide="editor.component.due">
|
||||||
<md-button class="md-icon-button" type="button" ng-click="editor.component.$addDueDate()">
|
<md-button class="md-icon-button" type="button" ng-click="editor.addDueDate()">
|
||||||
<md-icon>add_circle</md-icon>
|
<md-icon>add_circle</md-icon>
|
||||||
</md-button>
|
</md-button>
|
||||||
<label class="button-label"><var:string label:value="Add Due"/></label>
|
<label class="button-label"><var:string label:value="Add Due"/></label>
|
||||||
|
|
|
@ -391,6 +391,7 @@
|
||||||
this.repeat = {};
|
this.repeat = {};
|
||||||
this.alarm = { action: 'display', quantity: 5, unit: 'MINUTES', reference: 'BEFORE', relation: 'START' };
|
this.alarm = { action: 'display', quantity: 5, unit: 'MINUTES', reference: 'BEFORE', relation: 'START' };
|
||||||
this.status = 'not-specified';
|
this.status = 'not-specified';
|
||||||
|
this.delta = 60;
|
||||||
angular.extend(this, data);
|
angular.extend(this, data);
|
||||||
|
|
||||||
Component.$Preferences.ready().then(function() {
|
Component.$Preferences.ready().then(function() {
|
||||||
|
@ -401,21 +402,33 @@
|
||||||
Component.$Preferences.defaults['SOGoCalendar' + type + 'DefaultClassification'].toLowerCase();
|
Component.$Preferences.defaults['SOGoCalendar' + type + 'DefaultClassification'].toLowerCase();
|
||||||
});
|
});
|
||||||
|
|
||||||
this.delta = 60;
|
if (this.component == 'vevent')
|
||||||
|
this.type = 'appointment';
|
||||||
|
else if (this.component == 'vtoto')
|
||||||
|
this.type = 'task';
|
||||||
|
|
||||||
if (this.startDate)
|
if (this.startDate) {
|
||||||
|
if (angular.isString(this.startDate))
|
||||||
|
// Ex: 2015-10-25T22:34:51+00:00
|
||||||
this.start = new Date(this.startDate.substring(0,10) + ' ' + this.startDate.substring(11,16));
|
this.start = new Date(this.startDate.substring(0,10) + ' ' + this.startDate.substring(11,16));
|
||||||
|
else
|
||||||
|
// Date object
|
||||||
|
this.start = this.startDate;
|
||||||
|
}
|
||||||
else if (this.type == 'appointment') {
|
else if (this.type == 'appointment') {
|
||||||
this.start = new Date();
|
this.start = new Date();
|
||||||
this.start.setMinutes(Math.round(this.start.getMinutes()/15)*15);
|
this.start.setMinutes(Math.round(this.start.getMinutes()/15)*15);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.endDate)
|
if (this.endDate) {
|
||||||
this.end = new Date(this.endDate.substring(0,10) + ' ' + this.endDate.substring(11,16));
|
this.end = new Date(this.endDate.substring(0,10) + ' ' + this.endDate.substring(11,16));
|
||||||
|
this.delta = Math.floor((Math.abs(this.end - this.start)/1000)/60);
|
||||||
|
}
|
||||||
else if (this.type == 'appointment') {
|
else if (this.type == 'appointment') {
|
||||||
this.end = new Date();
|
this.end = new Date(this.start.getTime());
|
||||||
this.end.setMinutes(Math.round(this.end.getMinutes()/15)*15);
|
this.end.setMinutes(Math.round(this.end.getMinutes()/15)*15);
|
||||||
this.end.addMinutes(this.delta);
|
this.end.addMinutes(this.delta);
|
||||||
|
//this.end.addMinutes(this.delta);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.dueDate)
|
if (this.dueDate)
|
||||||
|
|
|
@ -146,7 +146,7 @@
|
||||||
*/
|
*/
|
||||||
ComponentEditorController.$inject = ['$rootScope', '$scope', '$log', '$timeout', '$mdDialog', 'User', 'Calendar', 'Component', 'AddressBook', 'Card', 'Alarm', 'stateComponent'];
|
ComponentEditorController.$inject = ['$rootScope', '$scope', '$log', '$timeout', '$mdDialog', 'User', 'Calendar', 'Component', 'AddressBook', 'Card', 'Alarm', 'stateComponent'];
|
||||||
function ComponentEditorController($rootScope, $scope, $log, $timeout, $mdDialog, User, Calendar, Component, AddressBook, Card, Alarm, stateComponent) {
|
function ComponentEditorController($rootScope, $scope, $log, $timeout, $mdDialog, User, Calendar, Component, AddressBook, Card, Alarm, stateComponent) {
|
||||||
var vm = this, component;
|
var vm = this, component, oldStartDate, oldEndDate, oldDueDate;
|
||||||
|
|
||||||
vm.calendars = Calendar.$calendars;
|
vm.calendars = Calendar.$calendars;
|
||||||
vm.component = stateComponent;
|
vm.component = stateComponent;
|
||||||
|
@ -162,36 +162,28 @@
|
||||||
vm.cancel = cancel;
|
vm.cancel = cancel;
|
||||||
vm.save = save;
|
vm.save = save;
|
||||||
vm.attendeesEditor = {
|
vm.attendeesEditor = {
|
||||||
startDate: vm.component.startDate,
|
// startDate: vm.component.startDate,
|
||||||
endDate: vm.component.endDate,
|
// endDate: vm.component.endDate,
|
||||||
days: getDays(),
|
// days: getDays(),
|
||||||
hours: getHours()
|
hours: getHours()
|
||||||
};
|
};
|
||||||
|
vm.addStartDate = addStartDate;
|
||||||
|
vm.addDueDate = addDueDate;
|
||||||
|
|
||||||
$scope.$watch('editor.component.start', function(newStartDate, oldStartDate) {
|
// Synchronize start and end dates
|
||||||
if (vm.component.type == 'appointment') {
|
vm.updateStartTime = updateStartTime;
|
||||||
vm.component.end = new Date(vm.component.start);
|
vm.adjustStartTime = adjustStartTime;
|
||||||
vm.component.end.addMinutes(vm.component.delta);
|
vm.updateEndTime = updateEndTime;
|
||||||
vm.component.freebusy = vm.component.updateFreeBusyCoverage();
|
vm.adjustEndTime = adjustEndTime;
|
||||||
vm.attendeesEditor.days = getDays();
|
vm.updateDueTime = updateDueTime;
|
||||||
}
|
vm.adjustDueTime = adjustDueTime;
|
||||||
});
|
|
||||||
|
|
||||||
$scope.$watch('editor.component.end', function(newEndDate, oldEndDate) {
|
if (vm.component.start)
|
||||||
if (newEndDate.getDate() !== oldEndDate.getDate() ||
|
oldStartDate = new Date(vm.component.start.getTime());
|
||||||
newEndDate.getMonth() !== oldEndDate.getMonth() ||
|
if (vm.component.end)
|
||||||
newEndDate.getFullYear() !== oldEndDate.getFullYear())
|
oldEndDate = new Date(vm.component.end.getTime());
|
||||||
vm.component.end.addMinutes(oldEndDate.getHours() * 60 + oldEndDate.getMinutes());
|
if (vm.component.due)
|
||||||
|
oldDueDate = new Date(vm.component.due.getTime());
|
||||||
if (newEndDate <= vm.component.start) {
|
|
||||||
vm.component.end = oldEndDate;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
vm.component.delta = Math.floor((Math.abs(vm.component.end - vm.component.start)/1000)/60);
|
|
||||||
vm.component.freebusy = vm.component.updateFreeBusyCoverage();
|
|
||||||
vm.attendeesEditor.days = getDays();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function addAttachUrl() {
|
function addAttachUrl() {
|
||||||
var i = vm.component.addAttachUrl('');
|
var i = vm.component.addAttachUrl('');
|
||||||
|
@ -268,6 +260,63 @@
|
||||||
}
|
}
|
||||||
return hours;
|
return hours;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addStartDate() {
|
||||||
|
vm.component.$addStartDate();
|
||||||
|
oldStartDate = new Date(vm.component.start.getTime());
|
||||||
|
}
|
||||||
|
|
||||||
|
function addDueDate() {
|
||||||
|
vm.component.$addDueDate();
|
||||||
|
oldDueDate = new Date(vm.component.due.getTime());
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateStartTime() {
|
||||||
|
// When using the datepicker, the time is reset to 00:00; restore it
|
||||||
|
vm.component.start.addMinutes(oldStartDate.getHours() * 60 + oldStartDate.getMinutes());
|
||||||
|
adjustStartTime();
|
||||||
|
}
|
||||||
|
|
||||||
|
function adjustStartTime() {
|
||||||
|
// Preserve the delta between the start and end dates
|
||||||
|
var delta;
|
||||||
|
delta = oldStartDate.valueOf() - vm.component.start.valueOf();
|
||||||
|
if (delta !== 0) {
|
||||||
|
oldStartDate = new Date(vm.component.start.getTime());
|
||||||
|
if (vm.component.type === 'appointment') {
|
||||||
|
vm.component.end = new Date(vm.component.start.getTime());
|
||||||
|
vm.component.end.addMinutes(vm.component.delta);
|
||||||
|
oldEndDate = new Date(vm.component.end.getTime());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateEndTime() {
|
||||||
|
// When using the datepicker, the time is reset to 00:00; restore it
|
||||||
|
vm.component.end.addMinutes(oldEndDate.getHours() * 60 + oldEndDate.getMinutes());
|
||||||
|
adjustEndTime();
|
||||||
|
}
|
||||||
|
|
||||||
|
function adjustEndTime() {
|
||||||
|
// The end date must be after the start date
|
||||||
|
var delta = vm.component.end.valueOf() - vm.component.start.valueOf();
|
||||||
|
if (delta < 0)
|
||||||
|
vm.component.end = new Date(oldEndDate.getTime());
|
||||||
|
else {
|
||||||
|
vm.component.delta = Math.floor((Math.abs(vm.component.end - vm.component.start)/1000)/60);
|
||||||
|
oldEndDate = new Date(vm.component.end.getTime());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateDueTime() {
|
||||||
|
// When using the datepicker, the time is reset to 00:00; restore it
|
||||||
|
vm.component.due.addMinutes(oldDueDate.getHours() * 60 + oldDueDate.getMinutes());
|
||||||
|
adjustDueTime();
|
||||||
|
}
|
||||||
|
|
||||||
|
function adjustDueTime() {
|
||||||
|
oldDueDate = new Date(vm.component.due.getTime());
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
angular
|
angular
|
||||||
|
|
Loading…
Reference in New Issue