From 0924b5154e9cc2c8094ff5fa048a67d031c6055b Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Sat, 18 Apr 2015 01:19:35 -0400
Subject: [PATCH] Replace ngTagsInput by md-chips + md-autocomplete

---
 UI/Templates/MailerUI/UIxMailEditor.wox       |  49 +++++--
 UI/Templates/MailerUI/UIxMailMainFrame.wox    |   3 +-
 UI/WebServerResources/Gruntfile.js            |   5 +-
 UI/WebServerResources/bower.json              |   1 -
 UI/WebServerResources/js/MailerUI.js          |  17 +--
 .../scss/components/ngTags/ng-tags-input.scss | 134 ------------------
 UI/WebServerResources/scss/styles.scss        |   4 -
 7 files changed, 46 insertions(+), 167 deletions(-)
 delete mode 100644 UI/WebServerResources/scss/components/ngTags/ng-tags-input.scss

diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index 9495724cc..f30bb8ddd 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -26,26 +26,45 @@
         <label class="pseudo-input-label">
           <var:string label:value="To"/>
         </label>
-
-          <tags-input type="text" name="to"
-                      ng-model="message.editable.to"
-                      label:placeholder="Add a recipient"
-                      ng-focus="angular.element().triggerHandler('focus')">
-            <auto-complete source="userFilter($query)"><!-- to --></auto-complete>
-          </tags-input>
-
+        <md-chips ng-model="message.editable.to">
+          <md-autocomplete
+              md-selected-item="autocomplete.to.selected"
+              md-search-text="autocomplete.to.searchText"
+              md-items="user in userFilter(autocomplete.to.searchText)"
+              label:placeholder="Add a recipient">
+            <span md-highlight-text="autocomplete.to.searchText">{{user}}</span>
+          </md-autocomplete>
+        </md-chips>
       </div>
+
       <div class="pseudo-input-container">
         <label class="pseudo-input-label">
           <var:string label:value="Cc"/>
         </label>
-        <div class="pseudo-input-inputLike">
-          <tags-input type="text" name="cc"
-                      ng-model="message.editable.cc"
-                      label:placeholder="Add a recipient">
-            <auto-complete source="userFilter($query)"><!-- to --></auto-complete>
-          </tags-input>
-        </div>
+        <md-chips ng-model="message.editable.cc">
+          <md-autocomplete
+              md-selected-item="autocomplete.cc.selected"
+              md-search-text="autocomplete.cc.searchText"
+              md-items="user in userFilter(autocomplete.cc.searchText)"
+              label:placeholder="Add a recipient">
+            <span md-highlight-text="autocomplete.cc.searchText">{{user}}</span>
+          </md-autocomplete>
+        </md-chips>
+      </div>
+
+      <div class="pseudo-input-container">
+        <label class="pseudo-input-label">
+          <var:string label:value="Bcc"/>
+        </label>
+        <md-chips ng-model="message.editable.bcc">
+          <md-autocomplete
+              md-selected-item="autocomplete.bcc.selected"
+              md-search-text="autocomplete.bcc.searchText"
+              md-items="user in userFilter(autocomplete.bcc.searchText)"
+              label:placeholder="Add a recipient">
+            <span md-highlight-text="autocomplete.bcc.searchText">{{user}}</span>
+          </md-autocomplete>
+        </md-chips>
       </div>
 
       <md-input-container>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 09e14f5f4..0c43aa57f 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -9,8 +9,7 @@
     title="title"
     const:userDefaultsKeys="SOGoMailMessageCheck,SOGoRefreshViewCheck,SOGoMailSortByThreads,SOGoMailListViewColumnsOrder,SOGoMailDisplayRemoteInlineImages,SOGoMailComposeMessageType,SOGoMailReplyPlacement"
     const:userSettingsKeys="Mail"
-    const:jsFiles="Common/resource.js, Common/user-model.js, Common/acl-model.js, Contacts/card-model.js, Contacts/addressbook-model.js, Mailer/message-model.js, Mailer/mailbox-model.js, Mailer/account-model.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/ng-tags-input.js, vendor/angular-file-upload.js">
-    <!--const:cssFiles="ng-tags-input.css">-->
+    const:jsFiles="Common/resource.js, Common/user-model.js, Common/acl-model.js, Contacts/card-model.js, Contacts/addressbook-model.js, Mailer/message-model.js, Mailer/mailbox-model.js, Mailer/account-model.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.js">
   <script type="text/javascript">
     var mailAccounts =<var:string value="mailAccounts" const:escapeHTML="NO" />;
     var userNames =<var:string value="userNames" const:escapeHTML="NO" />;
diff --git a/UI/WebServerResources/Gruntfile.js b/UI/WebServerResources/Gruntfile.js
index 2d4a8ea3e..7952eb17e 100644
--- a/UI/WebServerResources/Gruntfile.js
+++ b/UI/WebServerResources/Gruntfile.js
@@ -108,7 +108,6 @@ module.exports = function(grunt) {
       '<%= src %>/angular-recursion/angular-recursion{,.min}.js',
       '<%= src %>/angular-vs-repeat/src/angular-vs-repeat{,.min}.js',
       '<%= src %>/angular-file-upload/angular-file-upload{,.min}.js{,map}',
-      '<%= src %>/ng-tags-input/ng-tags-input{,.min}.js',
       '<%= src %>/underscore/underscore-min.{js,map}'
     ];
     for (var j = 0; j < js.length; j++) {
@@ -123,7 +122,6 @@ module.exports = function(grunt) {
     }
     grunt.log.subhead('Copying font files');
     var fonts = [
-      //'<%= src %>/ionic/release/fonts/ionicons.*',
       '<%= src %>/material-design-iconic-font/fonts/Material-Design-Iconic-Font.*'
     ];
     for (var j = 0; j < fonts.length; j++) {
@@ -136,9 +134,9 @@ module.exports = function(grunt) {
         grunt.log.ok("copy " + src + " => " + dest);
       }
     }
+    /*
     grunt.log.subhead('Copying CSS files');
     var css = [
-      //'<%= src %>/ng-tags-input/ng-tags-input*.css' // This is no longer needed, ng-tags css is integrated to scss
     ];
     for (var j = 0; j < css.length; j++) {
       var files = grunt.file.expand(grunt.template.process(css[j], {data: options}));
@@ -150,6 +148,7 @@ module.exports = function(grunt) {
         grunt.log.ok("copy " + src + " => " + dest);
       }
     }
+    */
   });
   grunt.task.registerTask('build', ['static', 'sass', 'postcss:dist']);
   grunt.task.registerTask('default', ['build', 'watch']);
diff --git a/UI/WebServerResources/bower.json b/UI/WebServerResources/bower.json
index 94d805f1a..0e2cbc367 100644
--- a/UI/WebServerResources/bower.json
+++ b/UI/WebServerResources/bower.json
@@ -11,7 +11,6 @@
     "angular-file-upload": "latest",
     "angular-material": "master",
     "material-design-iconic-font": "latest",
-    "ng-tags-input": "latest",
     "compass-mixins": "latest",
     "underscore": "latest",
     "breakpoint-slicer": "~1.3.6"
diff --git a/UI/WebServerResources/js/MailerUI.js b/UI/WebServerResources/js/MailerUI.js
index 5fa370f07..35af34323 100644
--- a/UI/WebServerResources/js/MailerUI.js
+++ b/UI/WebServerResources/js/MailerUI.js
@@ -7,7 +7,7 @@
   angular.module('SOGo.Common', []);
   angular.module('SOGo.ContactsUI', []);
 
-  angular.module('SOGo.MailerUI', ['ngSanitize', 'ui.router', 'vs-repeat', 'ck', 'ngTagsInput', 'angularFileUpload', 'SOGo.Common', 'SOGo.UI', 'SOGo.UIDesktop', 'SOGo.ContactsUI', 'ngAnimate'])
+  angular.module('SOGo.MailerUI', ['ngSanitize', 'ui.router', 'vs-repeat', 'ck', 'angularFileUpload', 'SOGo.Common', 'SOGo.UI', 'SOGo.UIDesktop', 'SOGo.ContactsUI', 'ngAnimate'])
 
     .constant('sgSettings', {
       baseURL: ApplicationBaseURL,
@@ -20,7 +20,7 @@
       }
    })
 
-    .config(['$stateProvider', '$urlRouterProvider', 'tagsInputConfigProvider', function($stateProvider, $urlRouterProvider, tagsInputConfigProvider) {
+    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
       $stateProvider
         .state('mail', {
           url: '/Mail',
@@ -159,11 +159,11 @@
       $urlRouterProvider.otherwise('/Mail');
 
       // Set default configuration for tags input
-      tagsInputConfigProvider.setDefaults('tagsInput', {
-        addOnComma: false,
-        replaceSpacesWithDashes: false,
-        allowedTagsPattern: /([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+@((((([a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{2,})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)/i
-      });
+      // tagsInputConfigProvider.setDefaults('tagsInput', {
+      //   addOnComma: false,
+      //   replaceSpacesWithDashes: false,
+      //   allowedTagsPattern: /([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+@((((([a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{2,})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)/i
+      // });
     }])
 
     .run(function($rootScope) {
@@ -258,6 +258,7 @@
     }])
 
     .controller('MessageEditorCtrl', ['$scope', '$rootScope', '$stateParams', '$state', '$q', 'FileUploader', 'stateAccounts', 'stateMessage', '$timeout', 'encodeUriFilter', 'sgFocus', 'sgDialog', 'sgAccount', 'sgMailbox', 'sgAddressBook', function($scope, $rootScope, $stateParams, $state, $q, FileUploader, stateAccounts, stateMessage, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox, AddressBook) {
+      $scope.autocomplete = {to: {}, cc: {}, bcc: {}};
       if ($stateParams.actionName == 'reply') {
         stateMessage.$reply().then(function(msgObject) {
           $scope.message = msgObject;
@@ -294,7 +295,7 @@
       $scope.userFilter = function($query) {
         var deferred = $q.defer();
         AddressBook.$filterAll($query).then(function(results) {
-          deferred.resolve(_.invoke(results, '$shortFormat'));
+          deferred.resolve(_.invoke(results, '$shortFormat', $query));
         });
         return deferred.promise;
       };
diff --git a/UI/WebServerResources/scss/components/ngTags/ng-tags-input.scss b/UI/WebServerResources/scss/components/ngTags/ng-tags-input.scss
deleted file mode 100644
index 3d7762a9d..000000000
--- a/UI/WebServerResources/scss/components/ngTags/ng-tags-input.scss
+++ /dev/null
@@ -1,134 +0,0 @@
-/// ng-tags-input.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
-tags-input {
-  display: block;
-}
-tags-input *, tags-input *:before, tags-input *:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-tags-input .host {
-  position: relative;
-
-}
-tags-input .host:active {
-  outline: none;
-}
-
-tags-input .tags {
-  @extend .pseudo-input-field;
-  padding: 0;
-  line-height: 2 * $mg;
-  word-wrap: break-word;
-  cursor: text;
-  border-bottom: 1px solid $colorGrayLighter;
-  transition: $swift-ease-out;
-}
-tags-input .tags.focused {
-  border-bottom: 2px solid sg-color($sogoBlue, 500);
-}
-
-tags-input/deep/#inner-editor {
-  color: $colorGrayLight;
-  line-height: inherit;
-}
-:root/deep/#placeholder,
-:root/deep/::-webkit-input-placeholder {
-  color: $colorGrayLight;
-  height: $mg;
-  font: inherit;
-  line-height: inherit;
-  padding: 0;
-}
-tags-input .tags .tag-list {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-// Trying to make it chip-like
-tags-input .tags .tag-item {
-  margin: 2px;
-  padding: $line $mg;
-  display: inline-block;
-  float: left;
-  height: (4 * $line);
-  font-size: sg-size(body);
-  line-height: (2 * $line);
-  border: none;
-  border-radius: (2 * $line);
-  background-color: sg-color($sogoPaper, 100);
-}
-tags-input .tags .tag-item.selected {
-
-}
-tags-input .tags .tag-item .remove-button {
-  margin: 0 0 0 5px;
-  padding: 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  vertical-align: middle;
-  color: #585858;
-}
-tags-input .tags .tag-item .remove-button:active {
-  color: red;
-}
-tags-input .tags .input {
-  border: 0;
-  outline: none;
-  font: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-tags-input .tags .input.invalid-tag {
-  color: red;
-}
-tags-input .tags .input::-ms-clear {
-  display: none;
-}
-tags-input.ng-invalid .tags {
-  -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
-  -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
-  box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
-}
-
-tags-input .autocomplete {
-  margin-top: 0;
-  position: absolute;
-  padding: 5px 0;
-  z-index: 999;
-  width: 100%;
-  background-color: white;
-  border: none;
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  top: 100%;
-}
-tags-input .autocomplete .suggestion-list {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-tags-input .autocomplete .suggestion-item {
-  padding: 5px 10px;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: black;
-  background-color: white;
-}
-tags-input .autocomplete .suggestion-item.selected {
-  color: white;
-  background-color: sg-color($sogoBlue, 300);
-}
-tags-input .autocomplete .suggestion-item.selected em {
-  color: white;
-  background-color: sg-color($sogoBlue, 700);
-}
-tags-input .autocomplete .suggestion-item em {
-  color: $colorGrayDark;
-  background-color: white;
-}
diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss
index f2346b991..99d5a9930 100755
--- a/UI/WebServerResources/scss/styles.scss
+++ b/UI/WebServerResources/scss/styles.scss
@@ -89,10 +89,6 @@
 @import 'components/pseudo-input/pseudo-input';
 @import 'views/view';
 
-// Ng-tags styles for re-skinning
-// ------------------------------------------------------------------------------
-@import 'components/ngTags/ng-tags-input';
-
 // core styles - need to be after components till settings are correctly implemented
 // ------------------------------------------------------------------------------
 @import 'core/base_styles/base_style';