From 8822f1ae53972d6cb40759e74cf1b217c915331e Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 6 Nov 2018 09:30:10 -0500
Subject: [PATCH] (js,css) Show source addressbook of matching cards

Fixes #4579
---
 NEWS                                          |  6 ++
 .../UIxAppointmentEditorTemplate.wox          | 16 ++--
 UI/WebServerResources/js/Common/Common.app.js |  8 ++
 .../js/Scheduler/Component.service.js         |  2 +-
 .../components/autocomplete/autocomplete.scss | 73 +++++++++++++++++++
 5 files changed, 95 insertions(+), 10 deletions(-)

diff --git a/NEWS b/NEWS
index 4b6f9b76a..ddd6f0a46 100644
--- a/NEWS
+++ b/NEWS
@@ -1,3 +1,9 @@
+4.0.5 (2018-MM-DD)
+------------------
+
+Enhancements
+ - [web] show source addressbook of matching contacts in appointment editor (#4579)
+
 4.0.4 (2018-10-23)
 ------------------
 
diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
index be723e67f..51d8caed9 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -234,9 +234,10 @@
             <md-icon>search</md-icon>
             <md-autocomplete
                 class="md-flex"
+                md-menu-class="md-3-line"
                 label:md-floating-label="Invite Attendees"
                 md-search-text="editor.searchText"
-                md-selected-item-change="editor.addAttendee(card)"
+                md-selected-item-change="editor.addAttendee(card, editor.searchText)"
                 md-items="card in editor.cardFilter(editor.searchText)"
                 md-item-text="card.empty"
                 var:md-min-length="minimumSearchLength"
@@ -244,14 +245,11 @@
                 md-no-cache="true"
                 sg-enter="editor.addAttendee(editor.searchText)">
               <md-item-template>
-                <div class="md-contact-suggestion">
-                  <span class="md-contact-name"
-                        md-highlight-text="editor.searchText"
-                        md-highlight-flags="^i">{{card.$$fullname}}</span>
-                  <span class="md-contact-email"
-                        md-highlight-text="editor.searchText"
-                        md-highlight-flags="^i">{{card.$$email}}</span>
-                </div>
+                  <div class="md-list-item-text" layout="column">
+                    <h3 md-highlight-text="editor.searchText" md-highlight-flags="^i">{{ card.$$fullname }}</h3>
+                    <h4 md-highlight-text="editor.searchText" md-highlight-flags="^i">{{ card.$$email }}</h4>
+                    <p>{{ card.containername }}</p>
+                  </div>
               </md-item-template>
             </md-autocomplete>
             <md-button type="button" class="sg-icon-button"
diff --git a/UI/WebServerResources/js/Common/Common.app.js b/UI/WebServerResources/js/Common/Common.app.js
index eb1e13d0d..30a74b23b 100644
--- a/UI/WebServerResources/js/Common/Common.app.js
+++ b/UI/WebServerResources/js/Common/Common.app.js
@@ -224,6 +224,14 @@
       })
       .backgroundPalette('sogo-grey');
 
+
+    // Register custom stylesheet for md-autocomplete
+    $mdThemingProvider.registerStyles([
+      '.md-autocomplete-suggestions.md-3-line li p {',
+      '  color: \'{{foreground-2}}\';',
+      '}',
+    ].join(''));
+
     // Register custom stylesheet for sgTimepicker
     $mdThemingProvider.registerStyles([
       '.sg-time-selection-indicator.sg-time-selected,',
diff --git a/UI/WebServerResources/js/Scheduler/Component.service.js b/UI/WebServerResources/js/Scheduler/Component.service.js
index 1971527c4..a479a6e3a 100644
--- a/UI/WebServerResources/js/Scheduler/Component.service.js
+++ b/UI/WebServerResources/js/Scheduler/Component.service.js
@@ -972,7 +972,7 @@
           _.forEach(list.refs, function(ref) {
             attendee = {
               name: ref.c_cn,
-              email: ref.$preferredEmail(),
+              email: ref.$preferredEmail(options? options.partial : undefined),
               role: 'req-participant',
               partstat: 'needs-action',
               uid: ref.c_uid,
diff --git a/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss b/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss
index dc2795602..1e892560b 100644
--- a/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss
+++ b/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss
@@ -1,5 +1,78 @@
 @import "extends";
 
+/**
+ * Format suggestions on three lines, in dense mode
+ *
+ * From angular-material/src/components/list/list.scss
+ */
+
+$dense-baseline-grid: $baseline-grid / 2 !default;
+
+$list-h3-margin: 0 0 0px 0 !default;
+$list-h4-margin: 3px 0 1px 0 !default;
+$list-h4-font-weight: 400 !default;
+$list-header-line-height: 1.2em !default;
+$list-p-margin: 0 0 0 0 !default;
+$list-p-line-height: 1.6em !default;
+
+$list-item-dense-three-line-height: 19 * $dense-baseline-grid !default;
+$list-item-dense-header-font-size: round($subhead-font-size-base * 0.8) !default;
+$list-item-dense-font-size: round($body-font-size-base * 0.85) !default;
+$list-item-dense-line-height: 1.05 !default;
+
+
+.md-autocomplete-suggestions.md-3-line {
+  li {
+    line-height: $list-item-dense-line-height;
+    height: $list-item-dense-three-line-height;
+    min-height: $list-item-dense-three-line-height;
+    @include ie11-min-height-flexbug($list-item-dense-three-line-height);
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+
+
+    .md-list-item-text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    h3,
+    h4,
+    p {
+      line-height: $list-item-dense-line-height;
+      font-size: $list-item-dense-font-size;
+    }
+    h3 {
+      font-size: $list-item-dense-header-font-size;
+    }
+    h3 {
+      font-weight: 400;
+      letter-spacing: 0.010em;
+      margin: $list-h3-margin;
+      line-height: $list-header-line-height;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    h4 {
+      letter-spacing: 0.010em;
+      margin: $list-h4-margin;
+      font-weight: $list-h4-font-weight;
+      line-height: $list-header-line-height;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    p {
+      font-weight: 500;
+      letter-spacing: 0.010em;
+      margin: $list-p-margin;
+      line-height: $list-p-line-height;
+    }
+  }
+}
+
 @media (max-width: $layout-breakpoint-xs) {
   // Enlarge the autocompletion menu on small devices to fit the entire screen
   .md-autocomplete-suggestions-container {