LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

(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
Francis Lachapelle 2015-10-30 08:38:19 -04:00
parent 2bad5c0da4
commit 0b490a00c6
4 changed files with 108 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
View File

@ -103,8 +103,10 @@
</div>
<div layout="row" layout-align="start center" layout-wrap="layout-wrap">
<md-datepicker ng-model="editor.component.start"
label:md-placeholder="From"> <!-- date picker--></md-datepicker>
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"
label:md-placeholder="To"> <!-- date picker--></md-datepicker>
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>

12
UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
View File

@ -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>

23
UI/WebServerResources/js/Scheduler/Component.service.js
View File

@ -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)
this.start = new Date(this.startDate.substring(0,10) + ' ' + this.startDate.substring(11,16));
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)

103
UI/WebServerResources/js/Scheduler/ComponentController.js
View File

@ -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