(js) Use more one-time bindings in Calendar module

UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox

@@ -5,17 +5,17 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
   <md-dialog flex="40" flex-md="60" flex-sm="80" flex-xs="100">
-    <md-toolbar ng-class="editor.component.getClassName('bg')">
+    <md-toolbar ng-class="::editor.component.getClassName('bg')">
       <div class="md-toolbar-tools">
         <md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
         <div class="sg-md-title md-flex">
           <!-- classification -->
-          <md-icon ng-if="editor.component.classification == 'confidential'">visibility_off</md-icon>
-          <md-icon ng-if="editor.component.classification == 'private'">vpn_key</md-icon>
-          <!-- summary -->
-          {{::editor.component.summary}}
+          <md-icon ng-if="::editor.component.classification == 'confidential'">visibility_off</md-icon>
+          <md-icon ng-if="::editor.component.classification == 'private'">vpn_key</md-icon>
           <!-- priority -->
-          <md-icon ng-repeat="i in ::editor.component.priority | range">star</md-icon>
+          <md-icon ng-if="::editor.highPriority()">priority_high</md-icon>
+          <!-- summary -->
+          <span ng-bind="::editor.component.summary"><!-- summary --></span>
         </div>
         <md-menu>
           <md-button label:aria-label="More options" class="md-icon-button" ng-click="$mdMenu.open($event)">
@@ -38,7 +38,7 @@
                     <md-menu-item>
                       <md-button class="sg-no-wrap"
                                  ng-click="editor.copySelectedComponent(calendar.id)">
-                        <span>{{calendar.name}}</span>
+                        <span ng-bind="::calendar.name"><!-- menu entry --></span>
                       </md-button>
                     </md-menu-item>
                   </div>
@@ -56,7 +56,7 @@
                       <md-button class="sg-no-wrap"
                                  ng-disabled="editor.component.destinationCalendar == calendar.id"
                                  ng-click="editor.moveSelectedComponent(calendar.id)">
-                        <span>{{calendar.name}}</span>
+                        <span ng-bind="::calendar.name"><!-- menu entry --></span>
                       </md-button>
                     </md-menu-item>
                   </div>
@@ -84,48 +84,48 @@
               <span class="sg-chip-color" style="z-index: 1">
                 <span ng-style="{ 'background-color': editor.service.$categories[$chip] }"><!-- color --></span>
               </span>
-              <span>{{$chip}}</span>
+              <span ng-bind="::$chip"><!-- category --></span>
             </md-chip-template>
           </md-chips>
         </md-list-item>
         <!-- location -->
         <md-list-item ng-show="editor.component.location">
           <md-icon>place</md-icon>
-          <p>{{::editor.component.location}}</p>
+          <p ng-bind="::editor.component.location"><!-- location --></p>
         </md-list-item>
         <!-- calendar -->
         <md-list-item>
           <md-icon>event</md-icon>
-          <p>{{editor.component.calendar}}</p>
+          <p ng-bind="::editor.component.calendar"><!-- calendar --></p>
         </md-list-item>
         <!-- start/end dates -->
         <md-list-item ng-class="{ 'md-2-line': editor.component.isAllDay, 'md-3-line': !editor.component.isAllDay }">
           <md-icon>access_time</md-icon>
           <div class="md-list-item-text" ng-show="editor.component.startDate">
             <label class="pseudo-input-label"><var:string label:value="Start"/></label>
-            <h3>{{::editor.component.localizedStartDate}}</h3>
-            <h3 ng-hide="editor.component.isAllDay">{{::editor.component.localizedStartTime}}</h3>
+            <h3 ng-bind="::editor.component.localizedStartDate"><!-- start date --></h3>
+            <h3 ng-hide="::editor.component.isAllDay" ng-bind="::editor.component.localizedStartTime"><!-- start time --></h3>
           </div>
           <div class="md-list-item-text" ng-show="editor.component.endDate">
             <label class="pseudo-input-label"><var:string label:value="End"/></label>
-            <h3>{{::editor.component.localizedEndDate}}</h3>
-            <h3 ng-hide="editor.component.isAllDay">{{::editor.component.localizedEndTime}}</h3>
+            <h3 ng-bind="::editor.component.localizedEndDate"><!-- end date --></h3>
+            <h3 ng-hide="::editor.component.isAllDay" ng-bind="::editor.component.localizedEndTime"><!-- end time --></h3>
           </div>
         </md-list-item>
         <!-- is transparent -->
-        <md-list-item ng-show="editor.component.isTransparent">
+        <md-list-item ng-show="::editor.component.isTransparent">
           <md-icon>event_available</md-icon>
           <p><var:string label:value="Show Time as Free"/></p>
         </md-list-item>
         <!-- send appointment notifications -->
-        <md-list-item ng-show="editor.component.sendAppointmentNotifications">
+        <md-list-item ng-show="::editor.component.sendAppointmentNotifications">
           <md-icon>send</md-icon>
           <p><var:string label:value="Send Appointment Notifications"/></p>
         </md-list-item>
         <!-- attach urls -->
-        <md-list-item ng-show="editor.component.attachUrls.length > 0">
+        <md-list-item ng-show="::(editor.component.attachUrls.length > 0)">
           <md-icon>link</md-icon>
-          <p ng-repeat="url in ::editor.component.attachUrls"><a target="_new" ng-href="{{url.value}}">{{url.value}}</a></p>
+          <p ng-repeat="url in ::editor.component.attachUrls"><a target="_new" ng-href="{{::url.value}}" ng-bind="::url.value"><!-- link --></a></p>
         </md-list-item>
         <!-- comment -->
         <md-list-item ng-show="::editor.component.comment">
@@ -133,20 +133,20 @@
           <p ng-bind-html="::editor.component.comment | txt2html"><!-- comment --></p>
         </md-list-item>
         <!-- repeat -->
-        <md-list-item ng-show="editor.component.$isRecurrent">
+        <md-list-item ng-show="::editor.component.$isRecurrent">
           <md-icon>repeat</md-icon>
-          <p>{{editor.component.repeatDescription()}}</p>
+          <p ng-bind="::editor.component.repeatDescription()"><!-- repeat --></p>
         </md-list-item>
         <!-- reminder -->
-        <md-list-item ng-hide="!editor.component.$hasAlarm || editor.component.userHasRSVP">
+        <md-list-item ng-hide="::(!editor.component.$hasAlarm || editor.component.userHasRSVP)">
           <md-icon>alarm_on</md-icon>
-          <p>{{editor.component.alarmDescription()}}</p>
+          <p ng-bind="::editor.component.alarmDescription()"><!-- alarm --></p>
         </md-list-item>
-        <md-list-item layout-align="start start" ng-show="editor.component.organizer">
+        <md-list-item layout-align="start start" ng-show="::editor.component.organizer">
           <md-icon>people</md-icon>
           <div layout="column" layout-fill="layout-fill">
             <!-- organizer -->
-            <div class="pseudo-input-container" ng-show="editor.component.organizer">
+            <div class="pseudo-input-container" ng-show="::editor.component.organizer">
               <label class="pseudo-input-label"><var:string label:value="Organizer"/></label>
               <md-chips class="md-contact-chips sg-readonly"
                         ng-model="::editor.organizer"
@@ -164,7 +164,7 @@
               </md-chips>
             </div>
             <!-- attendees -->
-            <div class="pseudo-input-container" ng-show="editor.component.attendees.length > 0">
+            <div class="pseudo-input-container" ng-show="::(editor.component.attendees.length > 0)">
               <label class="pseudo-input-label"><var:string label:value="Attendees"/></label>
               <!-- md-contact-chips don't support "readonly", so we build them using md-chips
                    in readonly mode and a template similar to the one of md-contact-chips -->
@@ -187,7 +187,7 @@
         </md-list-item>
       </md-list>
       <!-- invitation -->
-      <md-list ng-show="editor.component.userHasRSVP">
+      <md-list ng-show="::editor.component.userHasRSVP">
         <md-divider><!-- divider --></md-divider>
         <md-subheader class="md-no-sticky sg-padded--top"><var:string label:value="You are invited to participate"/></md-subheader>
         <!-- participation status -->
@@ -225,7 +225,7 @@
           </md-autocomplete>
         </md-list-item>
         <!-- reminder -->
-        <md-list-item ng-show="editor.component.userHasRSVP">
+        <md-list-item ng-show="::editor.component.userHasRSVP">
           <md-icon>alarm</md-icon>
           <p>
             <md-checkbox style="margin-bottom: 0"
@@ -234,7 +234,7 @@
           </p>
         </md-list-item>
       </md-list>
-      <div class="sg-inset" ng-show="editor.component.userHasRSVP">
+      <div class="sg-inset" ng-show="::editor.component.userHasRSVP">
         <span ng-show="editor.component.$hasAlarm"><var:component className="UIxReminderEditor" /></span>
       </div>
     </md-dialog-content>
@@ -242,7 +242,7 @@
     <!-- actions -->
 
     <!-- editable but not recurrent -->
-    <md-dialog-actions ng-show="editor.component.isEditable()">
+    <md-dialog-actions ng-show="::editor.component.isEditable()">
       <md-button class="md-warn"
                  label:aria-label="Delete Event"
                  ng-click="editor.deleteAllOccurrences()">
@@ -254,7 +254,7 @@
       </md-button>
     </md-dialog-actions>
     <!-- editable and recurrent -->
-    <md-dialog-actions ng-show="editor.component.isEditableOccurrence()">
+    <md-dialog-actions ng-show="::editor.component.isEditableOccurrence()">
       <md-menu>
         <md-button class="md-warn"
                    label:aria-label="Delete Event"
@@ -303,7 +303,7 @@
       </md-menu>
     </md-dialog-actions>
     <!-- invitation but not recurrent -->
-    <md-dialog-actions ng-show="editor.component.isInvitation()">
+    <md-dialog-actions ng-show="::editor.component.isInvitation()">
       <md-button class="md-warn"
                  label:aria-label="Delete Event"
                  ng-click="editor.deleteAllOccurrences()">
@@ -317,7 +317,7 @@
       </md-button>
     </md-dialog-actions>
     <!-- invitation and recurrent -->
-    <md-dialog-actions ng-show="editor.component.isInvitationOccurrence()">
+    <md-dialog-actions ng-show="::editor.component.isInvitationOccurrence()">
       <md-menu>
         <md-button class="md-warn"
                    label:aria-label="Delete Event"

UI/Templates/SchedulerUI/UIxCalMainView.wox

@@ -65,9 +65,9 @@
               <p class="sg-item-name"
                  ng-dblclick="app.editFolder(calendar)"
                  ng-show="app.editMode != calendar.id">
-                {{calendar.name}}
-                <md-tooltip md-delay="1000" md-autohide="true">{{calendar.name}}</md-tooltip>
-                <span class="sg-counter-badge" ng-show="calendar.activeTasks">{{calendar.activeTasks}}</span>
+                <span ng-bind="calendar.name"><!-- name --></span>
+                <md-tooltip md-delay="1000" md-autohide="true" ng-bind="calendar.name"><!-- tooltip --></md-tooltip>
+                <span class="sg-counter-badge" ng-show="calendar.activeTasks" ng-bind="calendar.activeTasks"><!-- active tasks count --></span>
               </p>
               <md-input-container class="md-flex"
                                   ng-show="app.editMode == calendar.id">
@@ -75,7 +75,7 @@
                        label:aria-label="Name of the Calendar"
                        ng-model="calendar.name"
                        ng-blur="app.renameFolder(calendar)"
-                       sg-focus-on="calendarName_{{calendar.id}}"
+                       sg-focus-on="calendarName_{{::calendar.id}}"
                        sg-enter="app.renameFolder(calendar)"
                        sg-escape="app.revertEditing(calendar)"/>
               </md-input-container>
@@ -170,9 +170,9 @@
               <p class="sg-item-name"
                  ng-dblclick="app.editFolder(calendar)"
                  ng-show="app.editMode != calendar.id">
-                {{calendar.name}}
-                <md-tooltip md-delay="1000" md-autohide="true">{{calendar.name}}</md-tooltip>
-                <span class="sg-counter-badge" ng-show="calendar.activeTasks">{{calendar.activeTasks}}</span>
+                <span ng-bind="calendar.name"><!-- name --></span>
+                <md-tooltip md-delay="1000" md-autohide="true" ng-bind="calendar.name"><!-- tooltip --></md-tooltip>
+                <span class="sg-counter-badge" ng-show="calendar.activeTasks" ng-bind="calendar.activeTasks"><!-- active tasks count --></span>
               </p>
               <md-input-container class="md-flex"
                                   ng-show="app.editMode == calendar.id">
@@ -180,7 +180,7 @@
                        label:aria-label="Name of the Calendar"
                        ng-model="calendar.name"
                        ng-blur="app.renameFolder(calendar)"
-                       sg-focus-on="calendarName_{{calendar.id}}"
+                       sg-focus-on="calendarName_{{::calendar.id}}"
                        sg-enter="app.renameFolder(calendar)"
                        sg-escape="app.revertEditing(calendar)"/>
               </md-input-container>
@@ -259,10 +259,10 @@
                  ng-show="app.editMode != calendar.id">
                 <span class="ng-hide" ng-show="calendar.$error">
                   <md-icon class="md-warn">warning</md-icon>
-                  <md-tooltip>{{ calendar.$error }}</md-tooltip>
+                  <md-tooltip ng-bind="calendar.$error"><!-- error as a tooltip --></md-tooltip>
                 </span>
-                <md-tooltip md-delay="1000" md-autohide="true">{{calendar.name}}</md-tooltip>
-                {{calendar.name}}
+                <md-tooltip md-delay="1000" md-autohide="true" ng-bind="calendar.name"><!-- tooltip --></md-tooltip>
+                <span ng-bind="calendar.name"><!-- name --></span>
               </p>
               <md-input-container class="md-flex"
                                   ng-show="app.editMode == calendar.id">
@@ -342,11 +342,6 @@
              ng-controller="CalendarListController as list">
       <md-toolbar class="toolbar-main" flex-none="flex-none" layout="row" layout-align="space-between center">
         <var:component className="UIxTopnavToolbar"/>
-        <!-- <div class="sg-toolbar-group-2">
-             <md-button class="sg-icon-button" label:aria-label="Search">
-             <md-icon>search</md-icon>
-             </md-button>
-             </div> -->
       </md-toolbar>
       <div layout="row" class="md-flex">
 
@@ -562,7 +557,7 @@
               <md-button class="sg-icon-button" ng-click="list.unselectComponents()">
                 <md-icon>arrow_back</md-icon>
               </md-button>
-              <label>{{list.component.$selectedCount()}} <var:string label:value="selected"/></label>
+              <label><span ng-bind="list.component.$selectedCount()"><!-- count --></span> <var:string label:value="selected"/></label>
               <div class="md-flex"><!-- spacer --></div>
               <md-button class="sg-icon-button" ng-click="list.selectAll()">
                 <md-tooltip md-direction="left"><var:string label:value="Select All"/></md-tooltip>
@@ -583,7 +578,7 @@
               <md-tab label:label="Events"
                       md-on-select="list.selectComponentType('events')">
                 <md-subheader>
-                  <span>{{list.filterpopup() | loc}}</span>
+                  <span ng-bind="list.filterpopup() | loc"><!-- active filter --></span>
                 </md-subheader>
                 <md-list class="sg-section-list"
                          ng-class="{ 'sg-list-selectable': list.mode.multiple }">
@@ -604,12 +599,12 @@
                     <div class="sg-tile-content">
                       <div class="sg-md-subhead">
                         <div>
-                          <span ng-show="::event.c_priority" class="sg-priority">{{::event.c_priority}}</span>
-                          {{::event.c_title}}
+                          <span ng-show="::event.c_priority" class="sg-priority" ng-bind="::event.c_priority"><!-- priority --></span>
+                          <span ng-bind="::event.c_title"><!-- title --></span>
                         </div>
                       </div>
                       <div class="sg-md-body">
-                        <div>{{::event.c_location}}</div>
+                        <div ng-bind="::event.c_location"><!-- location --></div>
                         <div class="sg-tile-date" ng-bind="::event.formatted_startdate"><!-- start --></div>
                       </div>
                     </div>

UI/Templates/SchedulerUI/UIxCalendarProperties.wox

@@ -78,7 +78,7 @@
           <var:string label:value="When I modify my calendar, send a mail to"/>
         </md-checkbox>
         <md-input-container flex-offset="5" md-no-float="md-no-float">
-          <input type="text"
+          <input type="email"
                  label:placeholder="Email Address"
                  ng-model="properties.calendar.notifications.notifiedUserOnPersonalModifications"
                  ng-disabled="!properties.calendar.notifications.notifyUserOnPersonalModifications"/>

UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox

@@ -5,17 +5,17 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
   <md-dialog flex="40" flex-md="60" flex-sm="80" flex-xs="100">
-    <md-toolbar ng-class="editor.component.getClassName('bg')">
+    <md-toolbar ng-class="::editor.component.getClassName('bg')">
       <div class="md-toolbar-tools">
         <md-icon class="material-icons sg-icon-toolbar-bg">assignment_turned_in</md-icon>
         <div class="sg-md-title md-flex">
           <!-- classification -->
-          <md-icon ng-if="editor.component.classification == 'confidential'">visibility_off</md-icon>
-          <md-icon ng-if="editor.component.classification == 'private'">vpn_key</md-icon>
-          <!-- summary -->
-          {{::editor.component.summary}}
+          <md-icon ng-if="::editor.component.classification == 'confidential'">visibility_off</md-icon>
+          <md-icon ng-if="::editor.component.classification == 'private'">vpn_key</md-icon>
           <!-- priority -->
-          <md-icon ng-repeat="i in ::editor.component.priority | range">star</md-icon>
+          <md-icon ng-if="::editor.highPriority()">priority_high</md-icon>
+          <!-- summary -->
+          <span ng-bind="::editor.component.summary"><!-- summary --></span>
         </div>
         <md-menu>
           <md-button label:aria-label="More options" class="sg-icon-button" ng-click="$mdMenu.open($event)">
@@ -38,77 +38,77 @@
     <md-dialog-content>
       <md-list>
         <!-- categories -->
-        <md-list-item ng-show="editor.component.categories.length > 0">
+        <md-list-item ng-show="::(editor.component.categories.length > 0)">
           <md-chips class="sg-readonly" ng-model="::editor.component.categories" readonly="true">
             <md-chip-template>
               <span class="sg-chip-color" style="z-index: 1">
                 <span ng-style="{ 'background-color': editor.service.$categories[$chip] }"><!-- color --></span>
               </span>
-              <span>{{$chip}}</span>
+              <span ng-bind="$chip"><!-- category --></span>
             </md-chip-template>
           </md-chips>
         </md-list-item>
         <!-- location -->
-        <md-list-item ng-show="editor.component.location">
+        <md-list-item ng-show="::editor.component.location">
           <md-icon>place</md-icon>
-          <p>{{::editor.component.location}}</p>
+          <p ng-bind="::editor.component.location"><!-- location --></p>
         </md-list-item>
         <!-- calendar -->
         <md-list-item>
           <md-icon>event</md-icon>
-          <p>{{editor.component.calendar}}</p>
+          <p ng-bind="::editor.component.calendar"><!-- calendar --></p>
         </md-list-item>
         <!-- start/due dates -->
         <md-list-item ng-class="{ 'md-2-line': editor.component.isAllDay, 'md-3-line': !editor.component.isAllDay }"
-                      ng-show="editor.component.startDate || editor.component.dueDate">
+                      ng-show="::(editor.component.startDate || editor.component.dueDate)">
           <md-icon>access_time</md-icon>
-          <div class="md-list-item-text" ng-show="editor.component.startDate">
+          <div class="md-list-item-text" ng-show="::editor.component.startDate">
             <label class="pseudo-input-label"><var:string label:value="Start"/></label>
-            <h3>{{::editor.component.localizedStartDate}}</h3>
-            <h3 ng-hide="editor.component.isAllDay"> {{::editor.component.localizedStartTime}}</h3>
+            <h3 ng-bind="::editor.component.localizedStartDate"><!-- start date --></h3>
+            <h3 ng-hide="editor.component.isAllDay" ng-bind="::editor.component.localizedStartTime"><!-- start time --></h3>
           </div>
-          <div class="md-list-item-text" ng-show="editor.component.dueDate">
+          <div class="md-list-item-text" ng-show="::editor.component.dueDate">
             <label class="pseudo-input-label"><var:string label:value="Due Date"/></label>
-            <h3>{{::editor.component.localizedDueDate}}</h3>
-            <h3 ng-hide="editor.component.isAllDay">{{::editor.component.localizedDueTime}}</h3>
+            <h3 ng-bind="::editor.component.localizedDueDate"><!-- due date --></h3>
+            <h3 ng-hide="::editor.component.isAllDay" ng-bind="::editor.component.localizedDueTime"><!-- due time --></h3>
           </div>
         </md-list-item>
         <!-- status -->
-        <md-list-item ng-show="editor.component.status == 'completed'">
+        <md-list-item ng-show="::(editor.component.status == 'completed')">
           <md-icon>check</md-icon>
-          <p>{{editor.component.localizedCompletedDate}} {{editor.component.localizedCompletedTime}}</p>
+          <p>{{::editor.component.localizedCompletedDate}} {{::editor.component.localizedCompletedTime}}</p>
         </md-list-item>
-        <md-list-item ng-show="editor.component.enablePercentComplete()">
+        <md-list-item ng-show="::editor.component.showPercentComplete()">
           <md-icon>timelapse</md-icon>
-          <p>{{editor.component.percentComplete}} %</p>
+          <p>{{::editor.component.percentComplete}} %</p>
         </md-list-item>
-        <md-list-item ng-show="editor.component.status == 'cancelled'">
+        <md-list-item ng-show="::(editor.component.status == 'cancelled')">
           <md-icon>close</md-icon>
           <p><var:string label:value="status_CANCELLED"/></p>
         </md-list-item>
-        <md-list-item ng-show="editor.component.status == 'needs-action'">
+        <md-list-item ng-show="::(editor.component.status == 'needs-action')">
           <md-icon>error_outline</md-icon>
           <p><var:string label:value="status_NEEDS-ACTION"/></p>
         </md-list-item>
         <!-- attach urls -->
         <md-list-item  ng-repeat="url in ::editor.component.attachUrls">
           <md-icon>link</md-icon>
-          <p><a ng-href="{{url.value}}" target="_new">{{url.value}}</a></p>
+          <p><a ng-href="{{::url.value}}" target="_new" ng-bind="::url.value"><!-- link --></a></p>
         </md-list-item>
         <!-- comment -->
         <md-list-item ng-show="::editor.component.comment">
           <md-icon>mode_comment</md-icon>
-          <p ng-bind-html="::editor.component.comment | txt2html"></p>
+          <p ng-bind-html="::editor.component.comment | txt2html"><!-- comment --></p>
         </md-list-item>
         <!-- repeat -->
-        <md-list-item ng-show="editor.component.$isRecurrent">
+        <md-list-item ng-show="::editor.component.$isRecurrent">
           <md-icon>repeat</md-icon>
-          <p>{{editor.component.repeatDescription()}}</p>
+          <p ng-bind="::editor.component.repeatDescription()"><!-- repeat --></p>
         </md-list-item>
         <!-- reminder -->
-        <md-list-item ng-show="editor.component.$hasAlarm">
+        <md-list-item ng-show="::editor.component.$hasAlarm">
           <md-icon>alarm_on</md-icon>
-          <p>{{editor.component.alarmDescription()}}</p>
+          <p ng-bind="::editor.component.alarmDescription()"><!-- alarm --></p>
         </md-list-item>
       </md-list>
     </md-dialog-content>
@@ -116,7 +116,7 @@
     <!-- actions -->
 
     <!-- editable but not recurrent -->
-    <md-dialog-actions ng-show="editor.component.isEditable()">
+    <md-dialog-actions ng-show="::editor.component.isEditable()">
       <md-button class="md-warn" label:aria-label="Delete Task"
                  ng-click="editor.deleteAllOccurrences()">
         <var:string label:value="Delete"/>
@@ -127,7 +127,7 @@
       </md-button>
     </md-dialog-actions>
     <!-- editable and recurrent -->
-    <md-dialog-actions ng-show="editor.component.isEditableOccurrence()">
+    <md-dialog-actions ng-show="::editor.component.isEditableOccurrence()">
       <md-menu>
         <md-button class="md-warn"
                    label:aria-label="Delete Task"

UI/WebServerResources/js/Scheduler/CalendarListController.js

@@ -6,8 +6,8 @@
   /**
    * @ngInject
    */
-  CalendarListController.$inject = ['$rootScope', '$scope', '$timeout', '$state', '$mdDialog', 'sgHotkeys', 'sgFocus', 'Dialog', 'Preferences', 'CalendarSettings', 'Calendar', 'Component', 'Alarm'];
-  function CalendarListController($rootScope, $scope, $timeout, $state, $mdDialog, sgHotkeys, focus, Dialog, Preferences, CalendarSettings, Calendar, Component, Alarm) {
+  CalendarListController.$inject = ['$rootScope', '$scope', '$q', '$timeout', '$state', '$mdDialog', 'sgHotkeys', 'sgFocus', 'Dialog', 'Preferences', 'CalendarSettings', 'Calendar', 'Component', 'Alarm'];
+  function CalendarListController($rootScope, $scope, $q, $timeout, $state, $mdDialog, sgHotkeys, focus, Dialog, Preferences, CalendarSettings, Calendar, Component, Alarm) {
     var vm = this, hotkeys = [], type;
 
     vm.component = Component;
@@ -148,20 +148,30 @@
 
     function openComponent($event, component, type) {
       if (component.viewable) {
-        // UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox or
-        // UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
-        var templateUrl = 'UIx' + type.capitalize() + 'ViewTemplate';
-        $mdDialog.show({
-          parent: angular.element(document.body),
-          targetEvent: $event,
-          clickOutsideToClose: true,
-          escapeToClose: true,
-          templateUrl: templateUrl,
-          controller: 'ComponentController',
-          controllerAs: 'editor',
-          locals: {
-            stateComponent: component
-          }
+        var promise = $q.when();
+
+        // Load component before opening dialog
+        if (angular.isUndefined(component.$futureComponentData)) {
+          component = Calendar.$get(component.pid).$getComponent(component.id, component.occurrenceId);
+          promise = component.$futureComponentData;
+        }
+
+        promise.then(function() {
+          // UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox or
+          // UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
+          var templateUrl = 'UIx' + type.capitalize() + 'ViewTemplate';
+          $mdDialog.show({
+            parent: angular.element(document.body),
+            targetEvent: $event,
+            clickOutsideToClose: true,
+            escapeToClose: true,
+            templateUrl: templateUrl,
+            controller: 'ComponentController',
+            controllerAs: 'editor',
+            locals: {
+              stateComponent: component
+            }
+          });
         });
       }
     }

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

@@ -672,6 +672,19 @@
     return (this.occurrenceId && this.userHasRSVP);
   };
 
+  /**
+   * @function showPercentComplete
+   * @memberof Component.prototype
+   * @desc Check if the percent completion should be displayed with respect to the
+   *       component's type and status.
+   * @returns true if the percent completion should be displayed
+   */
+  Component.prototype.showPercentComplete = function() {
+    return (this.type == 'task' &&
+            this.percentComplete > 0 &&
+            this.status != 'cancelled');
+  };
+
   /**
    * @function enablePercentComplete
    * @memberof Component.prototype
@@ -681,7 +694,7 @@
    */
   Component.prototype.enablePercentComplete = function() {
     return (this.type == 'task' &&
-            this.percentComplete > 0 &&
+            this.status != 'not-specified' &&
             this.status != 'cancelled');
   };
 

UI/WebServerResources/js/Scheduler/ComponentController.js

@@ -14,6 +14,7 @@
     vm.service = Component;
     vm.component = stateComponent;
     vm.close = close;
+    vm.highPriority = highPriority;
     vm.cardFilter = cardFilter;
     vm.newMessageWithAllRecipients = newMessageWithAllRecipients;
     vm.newMessageWithRecipient = newMessageWithRecipient;
@@ -27,19 +28,19 @@
     vm.copySelectedComponent = copySelectedComponent;
     vm.moveSelectedComponent = moveSelectedComponent;
 
-    // Load all attributes of component
-    if (angular.isUndefined(vm.component.$futureComponentData)) {
-      component = Calendar.$get(vm.component.pid).$getComponent(vm.component.id, vm.component.occurrenceId);
-      component.$futureComponentData.then(function() {
-        vm.component = component;
-        vm.organizer = [vm.component.organizer];
-      });
-    }
+    // Put organizer in an array to display it as an mdChip
+    vm.organizer = [stateComponent.organizer];
 
     function close() {
       $mdDialog.hide();
     }
 
+    function highPriority() {
+      return (vm.component &&
+              vm.component.priority &&
+              vm.component.priority < 5);
+    }
+
     // Autocomplete cards for attendees
     function cardFilter($query) {
       return AddressBook.$filterAll($query);
@@ -302,11 +303,11 @@
     function priorityLevel() {
       if (vm.component && vm.component.priority) {
         if (vm.component.priority > 5)
-          return l('low');
+          return l('low');                   // 6-7-8-9
         else if (vm.component.priority > 4)
-          return l('normal');
+          return l('normal');                // 5
         else
-          return l('high');
+          return l('high');                  // 1-2-3-4
       }
     }