(js) Disable submit btn while saving event or task

Fixes #3880
Alinto · Nov 4, 2016 · 7c02b4b · 7c02b4b
1 parent fb7a83f
commit 7c02b4b
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 26 deletions.
diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -192,13 +192,14 @@
               <md-icon ng-class="{'md-rotate-45': editor.showRecurrenceEditor}">add</md-icon>
             </md-button>
           </div>
-          <div ng-show="editor.showRecurrenceEditor" flex-offset="5">
+          <div flex-offset="5"
+               ng-show="editor.showRecurrenceEditor">
             <var:component className="UIxRecurrenceEditor" />
           </div>
           <!-- end repeat -->
-          <div layout="row">
-            <md-input-container class="md-block" flex="50" flex-xs="100"
-                                ng-show="editor.component.repeat.frequency != 'never'">
+          <div layout="row"
+               ng-show="editor.component.repeat.frequency != 'never'">
+            <md-input-container class="md-block" flex="50" flex-xs="100">
               <label><var:string label:value="End Repeat"/></label>
               <md-select ng-model="editor.component.repeat.end"
                          ng-disabled="editor.component.occurrenceId">
@@ -293,24 +294,26 @@
       </md-dialog-content>
       <!-- cancel/reset/save -->
       <md-dialog-actions ng-hide="editor.attendeeConflictError">
-        <md-button type="button" ng-click="editor.cancel()">
+        <md-button type="button" ng-click="editor.cancel(eventForm)">
           <var:string label:value="Cancel"/>
         </md-button>
-        <md-button type="button" ng-click="editor.component.$reset()">
+        <md-button type="button"
+                   ng-disabled="eventForm.$pristine"
+                   ng-click="editor.reset(eventForm)">
           <var:string label:value="Reset"/>
         </md-button>
         <md-button class="md-primary" type="submit"
-                   ng-disabled="eventForm.$invalid">
+                   ng-disabled="eventForm.$pristine || eventForm.$invalid || eventForm.$submitted">
           <var:string label:value="Save"/>
         </md-button>
       </md-dialog-actions>
 
       <!-- attendee availability conflict -->
       <md-dialog-content class="md-default-theme md-bg md-warn md-padding sg-dialog-message ng-hide"
                          ng-show="editor.attendeeConflictError.conflicts">
-        <div layout="row">
-          <div class="md-flex sg-padded--bottom"><var:string label:value="A time conflict exists with one or more attendees.\nWould you like to keep the current settings anyway?"/></div>
-          <md-button class="md-icon-button" ng-click="editor.attendeeConflictError = false">
+        <div layout="row" layout-align="space-between start" layout-fill="layout-fill">
+          <div class="sg-padded--bottom" ng-bind-html="::'A time conflict exists with one or more attendees.\nWould you like to keep the current settings anyway?' | loc | ln2br "><!-- warning --></div>
+          <md-button class="md-icon-button" ng-click="editor.edit(eventForm)">
             <md-icon label:aria-label="Close">close</md-icon>
           </md-button>
         </div>
@@ -332,11 +335,11 @@
         </div>
       </md-dialog-content>
       <md-dialog-actions ng-show="editor.attendeeConflictError.conflicts">
-        <md-button type="button" ng-click="editor.cancel()">
+        <md-button type="button" ng-click="editor.cancel(eventForm)">
           <var:string label:value="Cancel"/>
         </md-button>
         <md-button type="button"
-                   ng-click="editor.attendeeConflictError = false">
+                   ng-click="editor.edit(eventForm)">
           <var:string label:value="Edit"/>
         </md-button>
         <md-button class="md-warn" type="button"
@@ -350,16 +353,16 @@
       <md-dialog-content class="md-default-theme md-bg md-warn md-padding sg-dialog-message ng-hide" layout="row"
                          ng-show="editor.attendeeConflictError.reject">
         <div class="md-flex">{{editor.attendeeConflictError.reject}}</div>
-        <md-button class="md-icon-button" ng-click="editor.attendeeConflictError = false">
+        <md-button class="md-icon-button" ng-click="editor.edit(eventForm)">
           <md-icon label:aria-label="Close">close</md-icon>
         </md-button>
       </md-dialog-content>
       <md-dialog-actions ng-show="editor.attendeeConflictError.reject">
-        <md-button type="button" ng-click="editor.cancel()">
+        <md-button type="button" ng-click="editor.cancel(eventForm)">
           <var:string label:value="Cancel"/>
         </md-button>
         <md-button type="button"
-                   ng-click="editor.attendeeConflictError = false">
+                   ng-click="editor.edit(eventForm)">
           <var:string label:value="Edit"/>
         </md-button>
       </md-dialog-actions>

diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -764,7 +764,7 @@
       <md-dialog-content class="md-dialog-content"
                          ng-show="$AttendeeConflictDialogController.conflictError.attendee_email">
         <h2 class="md-title">{{ ::'Warning' | loc }}</h2>
-        <p>{{ ::'A time conflict exists with one or more attendees.\nWould you like to keep the current settings anyway?' | loc }}</p>
+        <p ng-bind-html="::'A time conflict exists with one or more attendees.\nWould you like to keep the current settings anyway?' | loc | ln2br"><!-- warning --></p>
         <md-list>
           <md-list-item>
             <md-icon>person</md-icon> {{$AttendeeConflictDialogController.conflictError.attendee_name}} ({{$AttendeeConflictDialogController.conflictError.attendee_email}})

diff --git a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
@@ -247,14 +247,16 @@
       </md-dialog-content>
       <!-- cancel/reset/save -->
       <md-dialog-actions>
-        <md-button type="button" ng-click="editor.cancel()">
+        <md-button type="button" ng-click="editor.cancel(eventForm)">
           <var:string label:value="Cancel"/>
         </md-button>
-        <md-button type="button" ng-click="editor.component.$reset()">
+        <md-button type="button"
+                   ng-disabled="eventForm.$pristine"
+                   ng-click="editor.reset(eventForm)">
           <var:string label:value="Reset"/>
         </md-button>
         <md-button class="md-primary md-hue-3" type="submit"
-                   ng-disabled="editor.eventForm.$invalid">
+                   ng-disabled="eventForm.$pristine || eventForm.$invalid || eventForm.$submitted">
           <var:string label:value="Save"/>
         </md-button>
       </md-dialog-actions>

diff --git a/UI/WebServerResources/js/Scheduler/Component.service.js b/UI/WebServerResources/js/Scheduler/Component.service.js
@@ -1114,7 +1114,7 @@
     component.completedDate = component.completed ? component.completed.format(dlp, '%Y-%m-%d') : '';
 
     // Update recurrence definition depending on selections
-    if (this.$hasCustomRepeat) {
+    if (this.hasCustomRepeat()) {
       if (this.repeat.frequency == 'monthly' && this.repeat.month.type && this.repeat.month.type == 'byday' ||
           this.repeat.frequency == 'yearly' && this.repeat.year.byday) {
         // BYDAY mask for a monthly or yearly recurrence
@@ -1130,7 +1130,7 @@
     else if (this.repeat.frequency && this.repeat.frequency != 'never') {
       component.repeat = { frequency: this.repeat.frequency };
     }
-    if (component.startDate && this.repeat.frequency) {
+    if (component.startDate && this.repeat.frequency && this.repeat.frequency != 'never') {
       if (this.repeat.end == 'until' && this.repeat.until)
         component.repeat.until = this.repeat.until.stringWithSeparator('-');
       else if (this.repeat.end == 'count' && this.repeat.count)

diff --git a/UI/WebServerResources/js/Scheduler/ComponentController.js b/UI/WebServerResources/js/Scheduler/ComponentController.js
@@ -225,7 +225,9 @@
     vm.removeAttendee = removeAttendee;
     vm.addAttachUrl = addAttachUrl;
     vm.priorityLevel = priorityLevel;
+    vm.reset = reset;
     vm.cancel = cancel;
+    vm.edit = edit;
     vm.save = save;
     vm.attendeeConflictError = false;
     vm.attendeesEditor = {
@@ -302,26 +304,35 @@
         vm.component.$save(options)
           .then(function(data) {
             $rootScope.$emit('calendars:list');
-            $mdDialog.hide();
             Alarm.getAlarms();
+            $mdDialog.hide();
           }, function(response) {
-            if (response.status == CalendarSettings.ConflictHTTPErrorCode &&
-                response.data && response.data.message &&
-                angular.isObject(response.data.message))
+            if (response.status == CalendarSettings.ConflictHTTPErrorCode)
               vm.attendeeConflictError = response.data.message;
           });
       }
     }
 
-    function cancel() {
+    function reset(form) {
       vm.component.$reset();
+      form.$setPristine();
+    }
+
+    function cancel(form) {
+      reset(form);
       if (vm.component.isNew) {
         // Cancelling the creation of a component
         vm.component = null;
       }
       $mdDialog.cancel();
     }
 
+    function edit(form) {
+      vm.attendeeConflictError = false;
+      form.$setPristine();
+      form.$setDirty();
+    }
+
     function getDays() {
       var days = [];