From 429aa1a91d4f32c1c389f03ca8b585ec2e675e25 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 16 Jun 2016 16:08:21 -0400
Subject: [PATCH] Improve attendees display in event editor

Fixes #3730
---
 .../UIxAppointmentEditorTemplate.wox          | 40 ++++++++++---------
 .../js/Scheduler/ComponentController.js       |  4 +-
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
index 557003471..3499ca09d 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -251,25 +251,27 @@
               <md-icon ng-class="{'md-rotate-180': editor.showAttendeesEditor}">expand_more</md-icon>
             </md-button>
           </div>
-          <!-- 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 -->
-          <md-chips class="ng-hide md-contact-chips sg-readonly attendees-chips"
-                    ng-model="editor.component.attendees"
-                    ng-hide="editor.showAttendeesEditor"
-                    readonly="true">
-            <md-chip-template>
-              <div class="md-contact-avatar">
-                <sg-avatar-image sg-email="$chip.email" size="32"><!-- avatar --></sg-avatar-image>
-              </div>
-              <div class="md-contact-name">{{$chip.name || $chip.email}}</div>
-              <md-icon ng-class="'icon-' + $chip.status"><!-- partstat --></md-icon>
-              <md-icon class="sg-chip-remove"
-                       label:aria-label="Delete"
-                       ng-click="editor.removeAttendee($chip)">close</md-icon>
-            </md-chip-template>
-          </md-chips>
-          <div class="ng-hide attendees" ng-show="editor.showAttendeesEditor">
-            <var:component className="UIxAttendeesEditor" />
+          <div ng-show="editor.component.attendees.length">
+            <!-- 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 -->
+            <md-chips class="ng-hide md-contact-chips sg-readonly attendees-chips"
+                      ng-model="editor.component.attendees"
+                      ng-hide="editor.showAttendeesEditor"
+                      readonly="true">
+              <md-chip-template>
+                <div class="md-contact-avatar">
+                  <sg-avatar-image sg-email="$chip.email" size="32"><!-- avatar --></sg-avatar-image>
+                </div>
+                <div class="md-contact-name">{{$chip.name || $chip.email}}</div>
+                <md-icon ng-class="'icon-' + $chip.status"><!-- partstat --></md-icon>
+                <md-icon class="sg-chip-remove"
+                         label:aria-label="Delete"
+                         ng-click="editor.removeAttendee($chip)">close</md-icon>
+              </md-chip-template>
+            </md-chips>
+            <div class="ng-hide attendees" ng-show="editor.showAttendeesEditor">
+              <var:component className="UIxAttendeesEditor" />
+            </div>
           </div>
         </div>
         <div class="sg-form-section">
diff --git a/UI/WebServerResources/js/Scheduler/ComponentController.js b/UI/WebServerResources/js/Scheduler/ComponentController.js
index 53c6d02af..ac7373f49 100644
--- a/UI/WebServerResources/js/Scheduler/ComponentController.js
+++ b/UI/WebServerResources/js/Scheduler/ComponentController.js
@@ -218,7 +218,7 @@
     vm.categories = {};
     vm.showRecurrenceEditor = vm.component.$hasCustomRepeat;
     vm.toggleRecurrenceEditor = toggleRecurrenceEditor;
-    vm.showAttendeesEditor = angular.isDefined(vm.component.attendees);
+    vm.showAttendeesEditor = false;
     vm.toggleAttendeesEditor = toggleAttendeesEditor;
     //vm.searchText = null;
     vm.cardFilter = cardFilter;
@@ -276,13 +276,11 @@
         // User pressed "Enter" in search field, adding a non-matching card
         if (card.isValidEmail()) {
           vm.component.addAttendee(new Card({ emails: [{ value: card }] }));
-          vm.showAttendeesEditor = true;
           vm.searchText = '';
         }
       }
       else {
         vm.component.addAttendee(card);
-        vm.showAttendeesEditor = true;
       }
     }