(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 layout="row" layout-align="start center" layout-wrap="layout-wrap">
|
||||
<md-datepicker ng-model="editor.component.start"
|
||||
ng-change="editor.updateStartTime()"
|
||||
label:md-placeholder="From"><!-- date picker --></md-datepicker>
|
||||
<sg-timepicker ng-model="editor.component.start"
|
||||
ng-change="editor.adjustStartTime()"
|
||||
ng-hide="editor.component.isAllDay"><!-- time picker --></sg-timepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -114,8 +116,10 @@
|
|||
</div>
|
||||
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
|
||||
<md-datepicker ng-model="editor.component.end"
|
||||
ng-change="editor.updateEndTime()"
|
||||
label:md-placeholder="To"><!-- date picker --></md-datepicker>
|
||||
<sg-timepicker ng-model="editor.component.end"
|
||||
ng-change="editor.adjustEndTime()"
|
||||
ng-hide="editor.component.isAllDay"><!-- time picker --></sg-timepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -86,15 +86,17 @@
|
|||
</div>
|
||||
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
|
||||
<md-datepicker ng-model="editor.component.start"
|
||||
ng-change="editor.updateStartTime()"
|
||||
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-icon>remove_circle</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
<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-button>
|
||||
<label class="button-label"><var:string label:value="Add From"/></label>
|
||||
|
@ -106,15 +108,17 @@
|
|||
</div>
|
||||
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
|
||||
<md-datepicker ng-model="editor.component.due"
|
||||
ng-change="editor.updateDueTime()"
|
||||
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-icon>remove_circle</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
<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-button>
|
||||
<label class="button-label"><var:string label:value="Add Due"/></label>
|
||||
|
|
|
@ -391,6 +391,7 @@
|
|||
this.repeat = {};
|
||||
this.alarm = { action: 'display', quantity: 5, unit: 'MINUTES', reference: 'BEFORE', relation: 'START' };
|
||||
this.status = 'not-specified';
|
||||
this.delta = 60;
|
||||
angular.extend(this, data);
|
||||
|
||||
Component.$Preferences.ready().then(function() {
|
||||
|
@ -401,21 +402,33 @@
|
|||
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));
|
||||
else
|
||||
// Date object
|
||||
this.start = this.startDate;
|
||||
}
|
||||
else if (this.type == 'appointment') {
|
||||
this.start = new Date();
|
||||
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.delta = Math.floor((Math.abs(this.end - this.start)/1000)/60);
|
||||
}
|
||||
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.addMinutes(this.delta);
|
||||
//this.end.addMinutes(this.delta);
|
||||
}
|
||||
|
||||
if (this.dueDate)
|
||||
|
|
|
@ -146,7 +146,7 @@
|
|||
*/
|
||||
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) {
|
||||
var vm = this, component;
|
||||
var vm = this, component, oldStartDate, oldEndDate, oldDueDate;
|
||||
|
||||
vm.calendars = Calendar.$calendars;
|
||||
vm.component = stateComponent;
|
||||
|
@ -162,36 +162,28 @@
|
|||
vm.cancel = cancel;
|
||||
vm.save = save;
|
||||
vm.attendeesEditor = {
|
||||
startDate: vm.component.startDate,
|
||||
endDate: vm.component.endDate,
|
||||
days: getDays(),
|
||||
// startDate: vm.component.startDate,
|
||||
// endDate: vm.component.endDate,
|
||||
// days: getDays(),
|
||||
hours: getHours()
|
||||
};
|
||||
vm.addStartDate = addStartDate;
|
||||
vm.addDueDate = addDueDate;
|
||||
|
||||
$scope.$watch('editor.component.start', function(newStartDate, oldStartDate) {
|
||||
if (vm.component.type == 'appointment') {
|
||||
vm.component.end = new Date(vm.component.start);
|
||||
vm.component.end.addMinutes(vm.component.delta);
|
||||
vm.component.freebusy = vm.component.updateFreeBusyCoverage();
|
||||
vm.attendeesEditor.days = getDays();
|
||||
}
|
||||
});
|
||||
// Synchronize start and end dates
|
||||
vm.updateStartTime = updateStartTime;
|
||||
vm.adjustStartTime = adjustStartTime;
|
||||
vm.updateEndTime = updateEndTime;
|
||||
vm.adjustEndTime = adjustEndTime;
|
||||
vm.updateDueTime = updateDueTime;
|
||||
vm.adjustDueTime = adjustDueTime;
|
||||
|
||||
$scope.$watch('editor.component.end', function(newEndDate, oldEndDate) {
|
||||
if (newEndDate.getDate() !== oldEndDate.getDate() ||
|
||||
newEndDate.getMonth() !== oldEndDate.getMonth() ||
|
||||
newEndDate.getFullYear() !== oldEndDate.getFullYear())
|
||||
vm.component.end.addMinutes(oldEndDate.getHours() * 60 + oldEndDate.getMinutes());
|
||||
|
||||
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();
|
||||
}
|
||||
});
|
||||
if (vm.component.start)
|
||||
oldStartDate = new Date(vm.component.start.getTime());
|
||||
if (vm.component.end)
|
||||
oldEndDate = new Date(vm.component.end.getTime());
|
||||
if (vm.component.due)
|
||||
oldDueDate = new Date(vm.component.due.getTime());
|
||||
|
||||
function addAttachUrl() {
|
||||
var i = vm.component.addAttachUrl('');
|
||||
|
@ -268,6 +260,63 @@
|
|||
}
|
||||
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
|
||||
|
|
Loading…
Reference in New Issue