From da821ea6c78372364af9d63798110fb742e3b1bc Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 25 Aug 2015 22:17:57 -0400
Subject: [PATCH] (js) Improve recipient auto-completion

---
 UI/Templates/MailerUI/UIxMailEditor.wox       | 78 ++++++++++++++-----
 .../js/Mailer/MessageEditorController.js      | 20 +++--
 .../scss/components/chips/chips.scss          |  4 +
 3 files changed, 77 insertions(+), 25 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index ef350632a..928e446b6 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -6,15 +6,17 @@
     xmlns:label="OGo:label">
 
   <md-dialog flex="80" flex-sm="100">
-    <md-toolbar class="md-padding">
+    <md-toolbar class="sg-padded--right">
       <div class="md-toolbar-tools">
         <md-icon class="material-icons sg-icon-toolbar-bg">edit</md-icon>
-        <!-- FROM -->
-        <sg-avatar-image class="md-tile-left" hide-sm="hide-sm" sg-email="editor.message.editable.from" size="32"><!-- avatar --></sg-avatar-image>
+        <!-- from -->
+        <sg-avatar-image class="md-tile-left" hide-sm="hide-sm"
+                         sg-email="editor.message.editable.from"
+                         size="32"><!-- avatar --></sg-avatar-image>
         <md-input-container flex="flex">
           <label><var:string label:value="From"/></label>
           <md-select name="from"
-                         ng-model="editor.message.editable.from">
+                     ng-model="editor.message.editable.from">
             <md-option ng-value="identity" ng-repeat="identity in editor.identities">{{identity}}</md-option>
           </md-select>
         </md-input-container>
@@ -22,71 +24,107 @@
         <md-button class="sg-icon-button" ng-click="editor.send()">
           <md-icon>send</md-icon>
         </md-button>
-        <md-button class="sg-icon-button " ng-click="editor.message.$save()">
+        <md-button class="sg-icon-button" ng-click="editor.message.$save()">
           <md-icon>save</md-icon>
         </md-button>
-        <md-button class="sg-icon-button " ng-click="editor.cancel()">
+        <md-button class="sg-icon-button" ng-click="editor.cancel()">
           <md-icon>close</md-icon>
         </md-button>
-        </div>
+      </div>
     </md-toolbar>
 
     <md-dialog-content>
         <header>
-          <!-- TO / CC/ BCC / SUBJECT / ATTACHMENTS -->
           <div class="msg-header-content">
 
+            <!-- to -->
             <div class="pseudo-input-container">
               <label class="pseudo-input-label">
                 <var:string label:value="To"/>
               </label>
-              <md-chips ng-model="editor.message.editable.to">
+              <md-chips ng-model="editor.message.editable.to"
+                        md-on-append="editor.addRecipient($chip)">
                 <md-autocomplete
-                    md-selected-item="editor.autocomplete.to.selected"
+                    class="sg-chips-autocomplete"
                     md-search-text="editor.autocomplete.to.searchText"
+                    md-selected-item="editor.autocomplete.to.selected"
                     md-items="user in editor.contactFilter(editor.autocomplete.to.searchText)"
+                    md-min-length="3"
+                    md-delay="300"
+                    md-no-cache="true"
                     label:placeholder="Add a recipient">
-                  <span md-highlight-text="editor.autocomplete.to.searchText"
-                        md-highlight-flags="^i">{{user}}</span>
+                  <md-item-template>
+                    <span class="md-contact-suggestion">
+                      <span class="md-contact-name"
+                            md-highlight-text="editor.autocomplete.to.searchText"
+                            md-highlight-flags="^i">{{user.$$fullname}}</span>
+                      <span class="md-contact-email"
+                            md-highlight-text="editor.autocomplete.to.searchText"
+                            md-highlight-flags="^i">{{user.$$email}}</span>
+                    </span>
+                  </md-item-template>
                 </md-autocomplete>
                 <md-chip-template>{{$chip}}</md-chip-template>
               </md-chips>
             </div>
 
+            <!-- cc -->
             <div class="pseudo-input-container" ng-hide="editor.hideCc">
               <label class="pseudo-input-label">
                 <var:string label:value="Cc"/>
               </label>
-              <md-chips ng-model="editor.message.editable.cc">
+              <md-chips ng-model="editor.message.editable.cc"
+                        md-on-append="editor.addRecipient($chip)">
                 <md-autocomplete
-                    md-selected-item="editor.autocomplete.cc.selected"
+                    class="sg-chips-autocomplete"
                     md-search-text="editor.autocomplete.cc.searchText"
+                    md-selected-item="editor.autocomplete.cc.selected"
                     md-items="user in editor.contactFilter(editor.autocomplete.cc.searchText)"
                     label:placeholder="Add a recipient">
-                  <span md-highlight-text="editor.autocomplete.cc.searchText"
-                        md-highlight-flags="^i">{{user}}</span>
+                   <md-item-template>
+                    <span class="md-contact-suggestion">
+                      <span class="md-contact-name"
+                            md-highlight-text="editor.autocomplete.to.searchText"
+                            md-highlight-flags="^i">{{user.$$fullname}}</span>
+                      <span class="md-contact-email"
+                            md-highlight-text="editor.autocomplete.to.searchText"
+                            md-highlight-flags="^i">{{user.$$email}}</span>
+                    </span>
+                  </md-item-template>
                 </md-autocomplete>
                 <md-chip-template>{{$chip}}</md-chip-template>
               </md-chips>
             </div>
 
+            <!-- bcc -->
             <div class="pseudo-input-container" ng-hide="editor.hideBcc">
               <label class="pseudo-input-label">
                 <var:string label:value="Bcc"/>
               </label>
-              <md-chips ng-model="editor.message.editable.bcc">
+              <md-chips ng-model="editor.message.editable.bcc"
+                        md-on-append="editor.addRecipient($chip)">
                 <md-autocomplete
+                    class="sg-chips-autocomplete"
                     md-selected-item="editor.autocomplete.bcc.selected"
                     md-search-text="editor.autocomplete.bcc.searchText"
                     md-items="user in editor.contactFilter(editor.autocomplete.bcc.searchText)"
                     label:placeholder="Add a recipient">
-                  <span md-highlight-text="editor.autocomplete.bcc.searchText"
-                        md-highlight-flags="^i">{{user}}</span>
+                  <md-item-template>
+                    <span class="md-contact-suggestion">
+                      <span class="md-contact-name"
+                            md-highlight-text="editor.autocomplete.to.searchText"
+                            md-highlight-flags="^i">{{user.$$fullname}}</span>
+                      <span class="md-contact-email"
+                            md-highlight-text="editor.autocomplete.to.searchText"
+                            md-highlight-flags="^i">{{user.$$email}}</span>
+                    </span>
+                  </md-item-template>
                 </md-autocomplete>
                 <md-chip-template>{{$chip}}</md-chip-template>
               </md-chips>
             </div>
 
+            <!-- subject -->
             <md-input-container>
               <label>
                 <var:string label:value="Subject"/>
@@ -95,7 +133,7 @@
             </md-input-container>
           </div>
 
-          <!-- TOOLBAR TO SHOW CC/BCC/ATTACHMENT FIELDS -->
+          <!-- toolbar to show cc/bcc/attachment fields -->
           <div layout="column" layout-align="start end">
             <md-button class="sg-icon-button " ng-show="editor.hideCc" ng-click="editor.hideCc = false">Cc</md-button>
             <md-button class="sg-icon-button " ng-show="editor.hideBcc" ng-click="editor.hideBcc = false">Bcc</md-button>
diff --git a/UI/WebServerResources/js/Mailer/MessageEditorController.js b/UI/WebServerResources/js/Mailer/MessageEditorController.js
index b9905893b..1b0ce054c 100644
--- a/UI/WebServerResources/js/Mailer/MessageEditorController.js
+++ b/UI/WebServerResources/js/Mailer/MessageEditorController.js
@@ -10,6 +10,7 @@
   function MessageEditorController($stateParams, $state, $q, $mdDialog, FileUploader, stateAccounts, stateMessage, stateRecipients, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox, AddressBook, Preferences) {
     var vm = this;
 
+    vm.addRecipient = addRecipient;
     vm.autocomplete = {to: {}, cc: {}, bcc: {}};
     vm.autosave = null;
     vm.autosaveDrafts = autosaveDrafts;
@@ -90,11 +91,20 @@
     }
 
     function contactFilter($query) {
-      var deferred = $q.defer();
-      AddressBook.$filterAll($query).then(function(results) {
-        deferred.resolve(_.invoke(results, '$shortFormat', $query));
-      });
-      return deferred.promise;
+      return AddressBook.$filterAll($query);
+    }
+
+    function addRecipient(user) {
+      var recipient = [];
+
+      if (angular.isString(user))
+        return user;
+      if (user.$$fullname)
+        recipient.push(user.$$fullname);
+      if (user.$$email)
+        recipient.push('<' + user.$$email + '>');
+
+      return recipient.join(' ');
     }
 
     // Drafts autosaving
diff --git a/UI/WebServerResources/scss/components/chips/chips.scss b/UI/WebServerResources/scss/components/chips/chips.scss
index c7330a608..1f07ce437 100644
--- a/UI/WebServerResources/scss/components/chips/chips.scss
+++ b/UI/WebServerResources/scss/components/chips/chips.scss
@@ -14,4 +14,8 @@ md-chips {
       }
     }
   }
+}
+
+.sg-chips-autocomplete {
+  width: (3 * $contact-chip-name-width);
 }
\ No newline at end of file