(js) Fix display and refresh of freebusy

UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox

@@ -259,18 +259,18 @@
         </div>
       </md-dialog-content>
       <!-- cancel/reset/save -->
-      <div class="md-actions">
+      <md-dialog-actions>
         <md-button type="button" ng-click="editor.cancel()">
           <var:string label:value="Cancel"/>
         </md-button>
         <md-button type="button" ng-click="editor.component.$reset()">
           <var:string label:value="Reset"/>
         </md-button>
-        <md-button class="md-primary md-hue-3" type="submit"
+        <md-button class="md-primary" type="submit"
                    ng-disabled="editor.eventForm.$invalid">
           <var:string label:value="Save"/>
         </md-button>
-      </div>
+      </md-dialog-actions>
     </form>
   </md-dialog>
 </container>

UI/WebServerResources/js/Scheduler/Component.service.js

@@ -522,19 +522,12 @@
     // Allow the component to be moved to a different calendar
     this.destinationCalendar = this.pid;
 
-    if (this.organizer && this.organizer.email) {
-      this.organizer.$image = Component.$gravatar(this.organizer.email, 32);
-    }
+    // if (this.organizer && this.organizer.email) {
+    //   this.organizer.$image = Component.$gravatar(this.organizer.email, 32);
+    // }
 
     // Load freebusy of attendees
-    this.freebusy = this.updateFreeBusyCoverage();
-
-    if (this.attendees) {
-      _.each(this.attendees, function(attendee) {
-        attendee.image = Component.$gravatar(attendee.email, 32);
-        _this.updateFreeBusy(attendee);
-      });
-    }
+    this.updateFreeBusy();
 
     this.selected = false;
   };
@@ -677,6 +670,24 @@
     }
   };
 
+  /**
+   * @function updateFreeBusy
+   * @memberof Component.prototype
+   * @desc Update the freebusy coverage representation and the attendees freebusy information
+   */
+  Component.prototype.updateFreeBusy = function() {
+    var _this = this;
+
+    this.freebusy = this.updateFreeBusyCoverage();
+
+    if (this.attendees) {
+      _.each(this.attendees, function(attendee) {
+        attendee.image = Component.$gravatar(attendee.email, 32);
+        _this.updateFreeBusyAttendee(attendee);
+      });
+    }
+  };
+
   /**
    * @function setDelta
    * @memberof Component.prototype
@@ -691,12 +702,12 @@
   };
 
   /**
-   * @function updateFreeBusy
+   * @function updateFreeBusyAttendee
    * @memberof Component.prototype
    * @desc Update the freebusy information for the component's period for a specific attendee.
    * @param {Object} card - an Card object instance of the attendee
    */
-  Component.prototype.updateFreeBusy = function(attendee) {
+  Component.prototype.updateFreeBusyAttendee = function(attendee) {
     var params, url, days;
     if (attendee.uid) {
       params =
@@ -775,7 +786,7 @@
           this.attendees.push(attendee);
         else
           this.attendees = [attendee];
-        this.updateFreeBusy(attendee);
+        this.updateFreeBusyAttendee(attendee);
       }
     }
   };

UI/WebServerResources/js/Scheduler/ComponentController.js

@@ -162,9 +162,7 @@
     vm.cancel = cancel;
     vm.save = save;
     vm.attendeesEditor = {
-      // startDate: vm.component.startDate,
-      // endDate: vm.component.endDate,
-      // days: getDays(),
+      days: getDays(),
       hours: getHours()
     };
     vm.addStartDate = addStartDate;
@@ -289,6 +287,7 @@
           oldEndDate = new Date(vm.component.end.getTime());
         }
       }
+      updateFreeBusy();
     }
 
     function updateEndTime() {
@@ -306,6 +305,7 @@
         vm.component.delta = delta;
         oldEndDate = new Date(vm.component.end.getTime());
       }
+      updateFreeBusy();
     }
 
     function updateDueTime() {
@@ -317,6 +317,11 @@
     function adjustDueTime() {
       oldDueDate = new Date(vm.component.due.getTime());
     }
+
+    function updateFreeBusy() {
+      vm.attendeesEditor.days = getDays();
+      vm.component.updateFreeBusy();
+    }
   }
 
   angular

UI/WebServerResources/scss/views/SchedulerUI.scss

@@ -479,8 +479,14 @@ $block_margin: 2%; // See sgCalendarDayBlock.directive.js
     //      img {
     //        margin-right: $mg/4;
     //      }
+    > .md-avatar {
+      // Overwrite default margin to gain some space and match 48px
+      margin-top: $baseline-grid/2;
+      margin-bottom: $baseline-grid/2;
+    }
   }
   .md-tile-left {
+    // Use in the top-left empty cell, which is in the first item of the attendees list
     height: initial;
     min-height: 48px;
     width: initial;