From 0b490a00c651491fae6d2cb024380e1afb7ada2b Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 30 Oct 2015 08:38:19 -0400
Subject: [PATCH] (js) Improve dates adjustments in editors

The main issue to resolve was to handle the time reset by the datepicker
when changing dates.
---
 .../UIxAppointmentEditorTemplate.wox          |   8 +-
 .../SchedulerUI/UIxTaskEditorTemplate.wox     |  12 +-
 .../js/Scheduler/Component.service.js         |  23 +++-
 .../js/Scheduler/ComponentController.js       | 103 +++++++++++++-----
 4 files changed, 108 insertions(+), 38 deletions(-)

diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
index 5261f343e..39974263e 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -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>
diff --git a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
index 3b65ca7af..8631b3eb7 100644
--- a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
@@ -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>
diff --git a/UI/WebServerResources/js/Scheduler/Component.service.js b/UI/WebServerResources/js/Scheduler/Component.service.js
index 5033b8116..111902161 100644
--- a/UI/WebServerResources/js/Scheduler/Component.service.js
+++ b/UI/WebServerResources/js/Scheduler/Component.service.js
@@ -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)
diff --git a/UI/WebServerResources/js/Scheduler/ComponentController.js b/UI/WebServerResources/js/Scheduler/ComponentController.js
index 2fd0669f8..552590675 100644
--- a/UI/WebServerResources/js/Scheduler/ComponentController.js
+++ b/UI/WebServerResources/js/Scheduler/ComponentController.js
@@ -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