(Calendar) Add owner in attendees editor

NEWS

@@ -3,6 +3,7 @@
 
 New features
  - [core] can now invite attendees to exceptions only (#2561)
+ - [web] display freebusy information of owner in appointment editor
 
 Enhancements
  -

UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox

@@ -33,7 +33,8 @@
             <!-- calendar -->
             <md-input-container flex="50" flex-xs="100">
               <label><var:string label:value="Calendar"/></label>
-              <md-select ng-model="editor.component.destinationCalendar">
+              <md-select ng-model="editor.component.destinationCalendar"
+                         ng-change="editor.changeCalendar()">
                 <md-option ng-repeat="calendar in editor.service.$findAll(null, true)"
                            ng-value="calendar.id">{{calendar.name}}</md-option>
               </md-select>

UI/Templates/SchedulerUI/UIxAttendeesEditor.wox

@@ -16,6 +16,21 @@
       <md-list-item>
         <div class="md-tile-left"><!-- empty --></div>
       </md-list-item>
+      <!-- organizer -->
+      <md-list-item>
+        <div class="md-button md-icon-button">
+          <md-icon>person</md-icon>
+        </div>
+        <sg-avatar-image class="md-avatar"
+                         sg-email="editor.component.organizer.email"
+                         size="40">person</sg-avatar-image>
+        <div class="sg-tile-content">
+          <div class="sg-md-subhead"><div>{{editor.component.organizer.name}}</div></div>
+          <div class="sg-md-body"><div>{{editor.component.organizer.email}}</div></div>
+        </div>
+        <md-divider><!-- divider --></md-divider>
+      </md-list-item>
+      <!-- attendees -->
       <md-list-item ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email">
         <md-button class="md-icon-button"
                    label:aria-label="Delete"
@@ -35,6 +50,7 @@
     <!-- freebusy -->
     <md-list class="day"
              ng-repeat="day in editor.attendeesEditor.days">
+      <!-- timeline -->
       <md-list-item layout-align="start end">
         <div layout="column" layout-align="end start">
           <div>{{day.stringWithSeparator}}</div>
@@ -43,6 +59,27 @@
           </div>
         </div>
       </md-list-item>
+      <!-- organizer freebusy -->
+      <md-list-item>
+        <div class="hour"
+             ng-class="{'sg-no-freebusy': !editor.component.organizer.uid}"
+             ng-repeat="hour in ::editor.attendeesEditor.hours">
+          <div class="quarter" ng-class="{event: editor.component.coversFreeBusy(day.getDayString, hour, 0)}">
+            <div class="busy" ng-show="editor.component.organizer.freebusy[day.getDayString][hour][0]"><!-- 15 minutes --></div>
+          </div>
+          <div class="quarter" ng-class="{event: editor.component.coversFreeBusy(day.getDayString, hour, 1)}">
+            <div class="busy" ng-show="editor.component.organizer.freebusy[day.getDayString][hour][1]"><!-- 15 minutes --></div>
+          </div>
+          <div class="quarter" ng-class="{event: editor.component.coversFreeBusy(day.getDayString, hour, 2)}">
+            <div class="busy" ng-show="editor.component.organizer.freebusy[day.getDayString][hour][2]"><!-- 15 minutes --></div>
+          </div>
+          <div class="quarter" ng-class="{event: editor.component.coversFreeBusy(day.getDayString, hour, 3)}">
+            <div class="busy" ng-show="editor.component.organizer.freebusy[day.getDayString][hour][3]"><!-- 15 minutes --></div>
+          </div>
+        </div>
+        <md-divider><!-- divider --></md-divider>
+      </md-list-item>
+      <!-- attendees freebusy -->
       <md-list-item ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email">
         <div class="hour"
              ng-class="{'sg-no-freebusy': !currentAttendee.uid}"

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

@@ -31,13 +31,15 @@
    * @desc The factory we'll use to register with Angular
    * @returns the Component constructor
    */
-  Component.$factory = ['$q', '$timeout', '$log', '$rootScope', 'sgSettings', 'sgComponent_STATUS', 'Preferences', 'Card', 'Gravatar', 'Resource', function($q, $timeout, $log, $rootScope, Settings, Component_STATUS, Preferences, Card, Gravatar, Resource) {
+  Component.$factory = ['$q', '$timeout', '$log', '$rootScope', 'sgSettings', 'sgComponent_STATUS', 'Preferences', 'User', 'Card', 'Gravatar', 'Resource', function($q, $timeout, $log, $rootScope, Settings, Component_STATUS, Preferences, User, Card, Gravatar, Resource) {
     angular.extend(Component, {
       STATUS: Component_STATUS,
       $q: $q,
       $timeout: $timeout,
       $log: $log,
       $rootScope: $rootScope,
+      $settings: Settings,
+      $User: User,
       $Preferences: Preferences,
       $Card: Card,
       $gravatar: Gravatar,
@@ -616,6 +618,39 @@
     this.selected = false;
   };
 
+
+  /**
+   * @function initOrganizer
+   * @memberof Component.prototype
+   * @desc Extend instance with organizer including her freebusy information.
+   * @param {object} calendar - Calendar instance associated to current component
+   */
+  Component.prototype.initOrganizer = function(calendar) {
+    var _this = this, promise;
+    if (calendar && calendar.isSubscription) {
+      promise = Component.$User.$filter(calendar.owner).then(function(results) {
+        var owner = results[0];
+        _this.organizer = {
+          uid: owner.uid,
+          name: owner.cn,
+          email: owner.c_email
+        };
+      });
+    }
+    else {
+      this.organizer = {
+        uid: Component.$settings.activeUser('login'),
+        name: Component.$settings.activeUser('identification'),
+        email: Component.$settings.activeUser('email')
+      };
+      promise = Component.$q.when();
+    }
+    // Fetch organizer's freebusy
+    promise.then(function() {
+      _this.updateFreeBusyAttendee(_this.organizer);
+    });
+  };
+
   /**
    * @function hasCustomRepeat
    * @memberof Component.prototype
@@ -769,6 +804,8 @@
     this.freebusy = this.updateFreeBusyCoverage();
 
     if (this.attendees) {
+      if (this.organizer)
+        this.updateFreeBusyAttendee(this.organizer);
       _.forEach(this.attendees, function(attendee) {
         _this.updateFreeBusyAttendee(attendee);
       });
@@ -871,9 +908,13 @@
    * @desc Add an attendee and fetch his freebusy info.
    * @param {Object} card - an Card object instance to be added to the attendees list
    */
-  Component.prototype.addAttendee = function(card) {
+  Component.prototype.addAttendee = function(card, options) {
     var _this = this, attendee, list, url, params;
     if (card) {
+      if (!this.attendees || (options && options.organizerCalendar)) {
+        // No attendee yet; initialize the organizer
+        this.initOrganizer(options? options.organizerCalendar : undefined);
+      }
       if (card.$isList({expandable: true})) {
         // Decompose list members
         list = Component.$Card.$find(card.container, card.c_name);

UI/WebServerResources/js/Scheduler/ComponentController.js

@@ -222,6 +222,7 @@
     vm.showAttendeesEditor = vm.component.attendees && vm.component.attendees.length;
     vm.toggleAttendeesEditor = toggleAttendeesEditor;
     //vm.searchText = null;
+    vm.changeCalendar = changeCalendar;
     vm.cardFilter = cardFilter;
     vm.addAttendee = addAttendee;
     vm.removeAttendee = removeAttendee;
@@ -271,6 +272,12 @@
         vm.component.repeat.month.type == 'bymonthday';
     }
 
+    function changeCalendar() {
+      var updateRequired = (vm.component.attendees && vm.component.attendees.length > 0);
+      if (updateRequired)
+        vm.component.initOrganizer(Calendar.$get(vm.component.destinationCalendar));
+    }
+
     // Autocomplete cards for attendees
     function cardFilter($query) {
       AddressBook.$filterAll($query);
@@ -278,18 +285,20 @@
     }
 
     function addAttendee(card) {
-      var automaticallyExapand = (!vm.component.attendees || vm.component.attendees.length === 0);
+      var initOrganizer = (!vm.component.attendees || vm.component.attendees.length === 0),
+          destinationCalendar = Calendar.$get(vm.component.destinationCalendar),
+          options = initOrganizer? { organizerCalendar: destinationCalendar } : {};
       if (angular.isString(card)) {
         // User pressed "Enter" in search field, adding a non-matching card
         if (card.isValidEmail()) {
-          vm.component.addAttendee(new Card({ emails: [{ value: card }] }));
-          vm.showAttendeesEditor |= automaticallyExapand;
+          vm.component.addAttendee(new Card({ emails: [{ value: card }] }), options);
+          vm.showAttendeesEditor |= initOrganizer;
           vm.searchText = '';
         }
       }
       else {
-        vm.component.addAttendee(card);
-        vm.showAttendeesEditor |= automaticallyExapand;
+        vm.component.addAttendee(card, options);
+        vm.showAttendeesEditor |= initOrganizer;
       }
     }