From cdd449fec9f384f0d6f5fefc63302161080695b2 Mon Sep 17 00:00:00 2001
From: Ludovic Marcotte <lmarcotte@inverse.ca>
Date: Mon, 20 Jul 2015 15:03:29 -0400
Subject: [PATCH] (feat) search capabilities in the addressbook module

---
 .../ContactsUI/UIxContactFoldersView.wox      | 56 ++++++++++++-------
 .../js/Contacts/AddressBookController.js      |  8 ++-
 2 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index a2296cedd..9321aa050 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -274,19 +274,14 @@
       <div class="md-toolbar-tools md-toolbar-tools-bottom"
            layout="row" layout-align="space-between center"
            ng-show="addressbook.selectedFolder.$selectedCount() == 0">
-        <div class="view-list sg-padded" layout="row" layout-align="space-between center"
-             sg-search="addressbook.selectedFolder.$filter(searchText, { search: searchField })">
-          <md-input-container class="sg-search-field-container">
-            <label style="color: white"><md-icon>search</md-icon><var:string label:value="Search"/></label>
-            <input name="folderSearch" type="search" style="color: white"/>
-          </md-input-container>
 
+        <div class="view-list" layout="row" layout-align="space-between center"
+             ng-hide="addressbook.mode.search">
           <div class="sg-toolbar-group">
-            <md-select class="sg-toolbar-sort md-contrast-light">
-              <md-option value="name_or_address"><var:string label:value="Name or Email"/></md-option>
-              <md-option value="category"><var:string label:value="Category"/></md-option>
-              <md-option value="organization"><var:string label:value="Organization"/></md-option>
-            </md-select>
+            <md-button class="sg-icon-button" label:aria-label="Search"
+                       ng-click="addressbook.mode.search = true">
+              <md-icon>search</md-icon>
+            </md-button>
           </div>
           <div class="sg-toolbar-group-last">
             <md-menu>
@@ -328,20 +323,41 @@
                       label:value="Preferred Phone"/>
                   </md-button>
                 </md-menu-item>
-              <md-menu-divider> <!-- divider --></md-menu-divider>
-              <md-menu-item >
-                <md-button ng-click="addressbook.sort()">
-                  <md-checkbox
-                      ng-model="addressbook.selectedFolder.$query.asc"
-                      ng-true-value="0"
-                      ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
-                </md-button>
-              </md-menu-item>
+                <md-menu-divider> <!-- divider --></md-menu-divider>
+                <md-menu-item >
+                  <md-button ng-click="addressbook.sort()">
+                    <md-checkbox
+                        ng-model="addressbook.selectedFolder.$query.asc"
+                        ng-true-value="0"
+                        ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
+                  </md-button>
+                </md-menu-item>
               </md-menu-content>
             </md-menu>
           </div>
         </div>
+        <!-- search mode -->
+        <div class="view-list sg-padded--right sg-toolbar-search" layout="row" layout-align="space-between center"
+             ng-show="addressbook.mode.search"
+             sg-search="addressbook.selectedFolder.$filter(searchText, { search: searchField })">
+          <md-button class="sg-icon-button"
+                     sg-search-cancel="addressbook.cancelSearch()"
+                     label:aria-label="Back">
+            <md-icon>arrow_back</md-icon>
+          </md-button>
+          <md-input-container>
+            <input name="folderSearch" type="search" />
+          </md-input-container>
+          <md-input-container>
+            <md-select>
+              <md-option value="name_or_address" selected="selected"><var:string label:value="Name or Email"/></md-option>
+              <md-option value="category"><var:string label:value="Category"/></md-option>
+              <md-option value="organization"><var:string label:value="Organization"/></md-option>
+          </md-select>
+          </md-input-container>
+        </div>
       </div>
+
       <div layout="row" layout-align="start center" ng-show="addressbook.selectedFolder.$selectedCount() > 0">
         <md-button class="sg-icon-button" ng-click="addressbook.unselectCards()">
           <md-icon>arrow_back</md-icon>
diff --git a/UI/WebServerResources/js/Contacts/AddressBookController.js b/UI/WebServerResources/js/Contacts/AddressBookController.js
index 359b2a158..3c05c8237 100644
--- a/UI/WebServerResources/js/Contacts/AddressBookController.js
+++ b/UI/WebServerResources/js/Contacts/AddressBookController.js
@@ -20,7 +20,8 @@
     vm.confirmDeleteSelectedCards = confirmDeleteSelectedCards;
     vm.sort = sort;
     vm.sortedBy = sortedBy;
-
+    vm.cancelSearch = cancelSearch;
+    vm.mode = { search: false };
     
     function selectCard(card) {
       $state.go('app.addressbook.card.view', {addressbookId: stateAddressbook.id, cardId: card.id});
@@ -91,6 +92,11 @@
     function sortedBy(field) {
       return vm.selectedFolder.$query.sort == field;
     }
+
+    function cancelSearch() {
+      vm.mode.search = false;
+      vm.selectedFolder.$filter('');
+    }
   }
 
   angular