From a166d1b4cfbe0ef227fce6a98e3224d5429fc93f Mon Sep 17 00:00:00 2001
From: Ludovic Marcotte <lmarcotte@inverse.ca>
Date: Mon, 27 Apr 2015 13:18:05 -0400
Subject: [PATCH] Using chips for adding/viewing contact categories

---
 UI/Contacts/UIxContactView.m                  |  2 +-
 .../ContactsUI/UIxContactEditorTemplate.wox   | 42 +++++++------------
 .../ContactsUI/UIxContactViewTemplate.wox     | 10 +++--
 .../js/Contacts/card-model.js                 | 18 +++++++-
 UI/WebServerResources/js/ContactsUI.js        |  5 +--
 5 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/UI/Contacts/UIxContactView.m b/UI/Contacts/UIxContactView.m
index 393ce9259..9c608c726 100644
--- a/UI/Contacts/UIxContactView.m
+++ b/UI/Contacts/UIxContactView.m
@@ -161,7 +161,7 @@
   contactCategories = [card categories];
   if (contactCategories)
     {
-      newCats = [cats mergedArrayWithArray: contactCategories];
+      newCats = [cats mergedArrayWithArray: [contactCategories trimmedComponents]];
       if ([newCats count] != [cats count])
         {
           cats = [newCats sortedArrayUsingSelector:
diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index d2887e86b..29ea41745 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -6,9 +6,7 @@
       <div class="editor md-padding">
         <hgroup class="header">
           <h1 class="sg-md-display-2--light" ng-bind-html="card.$fullname()"><!-- fullname --></h1>
-          <h6 class="sg-md-display-2-subheader">{{card.$description()}}
-            <span ng-repeat="category in card.categories">{{category.value}}</span>
-          </h6>
+          <h6 class="sg-md-display-2-subheader">{{card.$description()}}</h6>
         </hgroup>
         
         <!-- contact editor -->
@@ -120,29 +118,20 @@
           </md-input-container>
 
           <!-- categories -->
-          <div class="attr" ng-repeat="category in card.categories">
-            <div layout="row" layout-align="center end">
-              <md-input-container>
-                <label class="pseudo-input-label">
-                  <var:string label:value="Category"/>
-                </label>
-                <input type="text" ng-model="category.value"
-                       sg-focus-on="category_{{$index}}"/>
-                <!--typeahead="cat for cat in card.allCategories | filter:$viewValue"/>-->
-              </md-input-container>
-              <md-button class="iconButton" ng-click="card.$delete('categories', $index)">
-                <i class="md-icon-remove-circle"><!-- remove --></i>
-              </md-button>
-            </div>
-          </div>
-          <!-- New category button-group -->
-          <div class="md-layout-margin" layout="row" layout-align="start center">
-            <md-button class="iconButton" type="button" ng-click="addCategory()">
-              <i class="md-icon-add"><!-- new --></i>
-            </md-button>
-            <label class="button-label">
-              <var:string label:value="New Category"/>
-            </label>
+          <div class="pseudo-input-container">
+            <md-chips ng-model="card.categories">
+              <md-chip-template>
+                {{$chip.value}}
+              </md-chip-template>
+              <md-autocomplete
+                  md-selected-item="categories.selected"
+                  md-selected-item-change="card.$addCategory(category)"
+                  md-search-text="categories.searchText"
+                  md-items="category in card.constructor.filterCategories(categories.searchText)"
+                  label:placeholder="Add a category">
+                <span md-highlight-text="categories.searchText">{{category}}</span>
+              </md-autocomplete>
+            </md-chips>
           </div>
 
           <!-- phones -->
@@ -287,7 +276,6 @@
             <textarea ng-model="card.note"><!-- note --></textarea>
           </md-input-container>
 
-
           <div class="fieldset md-layout-margin" layout="row" layout-align="end center">
             <md-button type="button" ng-click="cancel()">
               <var:string label:value="Cancel"/>
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index d0aece3af..1d0b4b134 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -17,9 +17,13 @@
         </div>
         <div class="msg-header-content">
           <h1 class="sg-md-display-2--light" ng-bind-html="card.$fullname()"><!-- fullname --></h1>
-          <h6 class="sg-md-display-2-subheader">{{card.$description()}}
-            <span class="label radius" ng-repeat="category in card.categories">{{category.value}}</span>
-          </h6>
+          <h6 class="sg-md-display-2-subheader">{{card.$description()}}</h6>
+          <md-chips ng-model="card.categories"
+                    readonly="true">
+            <md-chip-template>
+              {{$chip.value}}
+            </md-chip-template>
+          </md-chips>
         </div>
         <div class="sg-icon-bar--vertical">
           <md-button class="iconButton" aria-label="Edit" ng-show="currentFolder.isEditable" ui-sref="app.addressbook.card.editor({addressbookId: currentFolder.id, cardId: card.id})">
diff --git a/UI/WebServerResources/js/Contacts/card-model.js b/UI/WebServerResources/js/Contacts/card-model.js
index a4bf0ac02..69b0a2703 100644
--- a/UI/WebServerResources/js/Contacts/card-model.js
+++ b/UI/WebServerResources/js/Contacts/card-model.js
@@ -48,7 +48,8 @@
   Card.$factory = ['$timeout', 'sgSettings', 'sgResource', function($timeout, Settings, Resource) {
     angular.extend(Card, {
       $$resource: new Resource(Settings.activeUser.folderURL + 'Contacts', Settings.activeUser),
-      $timeout: $timeout
+      $timeout: $timeout,
+      $categories: window.UserDefaults.SOGoContactsCategories
     });
 
     return Card; // return constructor
@@ -103,6 +104,20 @@
     return Card.$unwrapCollection(futureCardData); // a collection of cards
   };
 
+  /**
+   * @function filterCategories
+   * @memberof Card.prototype
+   * @desc Search for categories matching some criterias
+   * @param {string} search - the search string to match
+   * @returns a collection of strings
+   */
+  Card.filterCategories = function(query) {
+    var re = new RegExp(query, 'i');
+    return _.filter(Card.$categories, function(category) {
+      return category.search(re) != -1;
+    });
+  };
+
   /**
    * @memberof Card
    * @desc Unwrap to a collection of Card instances.
@@ -301,7 +316,6 @@
       if (i == this.categories.length)
         this.categories.push({value: category});
     }
-    return this.categories.length - 1;
   };
 
   Card.prototype.$addEmail = function(type) {
diff --git a/UI/WebServerResources/js/ContactsUI.js b/UI/WebServerResources/js/ContactsUI.js
index b4a479c55..c533f3992 100644
--- a/UI/WebServerResources/js/ContactsUI.js
+++ b/UI/WebServerResources/js/ContactsUI.js
@@ -350,15 +350,12 @@
       $scope.allTelTypes = Card.$TEL_TYPES;
       $scope.allUrlTypes = Card.$URL_TYPES;
       $scope.allAddressTypes = Card.$ADDRESS_TYPES;
+      $scope.categories = {};
 
       $scope.addOrgUnit = function() {
         var i = $scope.card.$addOrgUnit('');
         focus('orgUnit_' + i);
       };
-      $scope.addCategory = function() {
-        var i = $scope.card.$addCategory('');
-        focus('category_' + i);
-      };
       $scope.addEmail = function() {
         var i = $scope.card.$addEmail('');
         focus('email_' + i);