(js) Allow to set an alarm on a dued task

NEWS

@@ -55,6 +55,7 @@ Bug fixes
  - [web] fixed decoding of spaces in URL-encoded parameters (+)
  - [web] fixed scrolling of message with Firefox (#4008, #4282, #4398)
  - [web] save original username in cookie when remembering login (#4363)
+ - [web] allow to set a reminder on a task with a due date
  - [eas] hebrew folders encoding problem using EAS (#4240)
  - [eas] avoid sync requests for shared folders every second (#4275)
  - [eas] we skip the organizer from the attendees list (#4402)

UI/Templates/SchedulerUI/UIxReminderEditor.wox

@@ -23,7 +23,9 @@
       </md-select>
     </md-input-container>
     <md-input-container>
-      <md-select label:aria-label="Reminder relation" ng-model="editor.component.alarm.relation">
+      <md-select label:aria-label="Reminder relation" name="alarmRelation"
+                 ng-model="editor.component.alarm.relation"
+                 ng-change="editor.changeAlarmRelation(eventForm)">
         <var:foreach list="relationsList" item="item">
           <md-option var:value="item"><var:string value="itemText"/></md-option>
         </var:foreach>

UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox

@@ -117,7 +117,7 @@
               <label class="pseudo-input-label"><var:string label:value="From"/></label>
             </div>
             <div layout="row" layout-align="start center" layout-wrap="layout-wrap">
-              <md-button class="md-icon-button" type="button" ng-click="editor.component.$deleteStartDate()">
+              <md-button class="md-icon-button" type="button" ng-click="editor.removeStartDate(eventForm)">
                 <md-icon>remove_circle</md-icon>
               </md-button>
               <md-datepicker ng-model="editor.component.start"
@@ -128,7 +128,7 @@
             </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.addStartDate()">
+            <md-button class="md-icon-button" type="button" ng-click="editor.addStartDate(eventForm)">
               <md-icon>add_circle</md-icon>
             </md-button>
             <label class="button-label"><var:string label:value="Add From"/></label>
@@ -139,7 +139,7 @@
               <label class="pseudo-input-label"><var:string label:value="Due"/></label>
             </div>
             <div layout="row" layout-align="start center" layout-wrap="layout-wrap">
-              <md-button class="md-icon-button" type="button" ng-click="editor.component.$deleteDueDate()">
+              <md-button class="md-icon-button" type="button" ng-click="editor.removeDueDate(eventForm)">
                 <md-icon>remove_circle</md-icon>
               </md-button>
               <md-datepicker ng-model="editor.component.due"
@@ -150,7 +150,7 @@
             </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.addDueDate()">
+            <md-button class="md-icon-button" type="button" ng-click="editor.addDueDate(eventForm)">
               <md-icon>add_circle</md-icon>
             </md-button>
             <label class="button-label"><var:string label:value="Add Due"/></label>
@@ -233,7 +233,7 @@
           </div>
         </div>
         <div class="sg-form-section"
-             ng-show="editor.component.start">
+             ng-show="editor.component.start || editor.component.due">
           <!-- reminder -->
           <md-checkbox ng-model="editor.component.$hasAlarm"
                        label:aria-label="Reminder">

UI/WebServerResources/js/Scheduler/ComponentController.js

@@ -229,6 +229,7 @@
     vm.removeAttendee = removeAttendee;
     vm.addAttachUrl = addAttachUrl;
     vm.priorityLevel = priorityLevel;
+    vm.changeAlarmRelation = changeAlarmRelation;
     vm.reset = reset;
     vm.cancel = cancel;
     vm.edit = edit;
@@ -239,7 +240,9 @@
       hours: getHours()
     };
     vm.addStartDate = addStartDate;
+    vm.removeStartDate = removeStartDate;
     vm.addDueDate = addDueDate;
+    vm.removeDueDate = removeDueDate;
 
     // Synchronize start and end dates
     vm.adjustStartTime = adjustStartTime;
@@ -353,6 +356,17 @@
       }
     }
 
+    function changeAlarmRelation(form) {
+      if (vm.component.type == 'task' &&
+          ((!vm.component.start && vm.component.alarm.relation == 'START') ||
+           (!vm.component.due   && vm.component.alarm.relation == 'END'))) {
+        form.alarmRelation.$setValidity('alarm', false);
+      }
+      else {
+        form.alarmRelation.$setValidity('alarm', true);
+      }
+    }
+
     function save(form, options) {
       if (form.$valid) {
         vm.component.$save(options)
@@ -410,14 +424,38 @@
       return hours;
     }
 
-    function addStartDate() {
+    function addStartDate(form) {
       vm.component.$addStartDate();
       oldStartDate = new Date(vm.component.start.getTime());
+      if (!vm.component.due) {
+        vm.component.alarm.relation = 'START';
+      }
+      changeAlarmRelation(form);
     }
 
-    function addDueDate() {
+    function removeStartDate(form) {
+      vm.component.$deleteStartDate();
+      if (vm.component.due) {
+        vm.component.alarm.relation = 'END';
+      }
+      changeAlarmRelation(form);
+    }
+
+    function addDueDate(form) {
       vm.component.$addDueDate();
       oldDueDate = new Date(vm.component.due.getTime());
+      if (!vm.component.start) {
+        vm.component.alarm.relation = 'END';
+      }
+      changeAlarmRelation(form);
+    }
+
+    function removeDueDate(form) {
+      vm.component.$deleteDueDate();
+      if (vm.component.start) {
+        vm.component.alarm.relation = 'START';
+      }
+      changeAlarmRelation(form);
     }
 
     function adjustStartTime() {