From d527ff02792bba5bae95380af50219e28cbd2a54 Mon Sep 17 00:00:00 2001
From: Christine Yu <christine.yu@oicr.on.ca>
Date: Tue, 3 Feb 2015 17:31:00 -0500
Subject: [PATCH] feat(tableicious): search filter to dropdown

Closes #243
---
 .../tables/templates/arrange-columns.html     | 26 ++++++++++++++-----
 app/styles/tables.less                        |  6 +++--
 app/styles/utils.less                         |  4 +++
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/app/scripts/components/tables/templates/arrange-columns.html b/app/scripts/components/tables/templates/arrange-columns.html
index 44f8e5c61..74d75c6eb 100644
--- a/app/scripts/components/tables/templates/arrange-columns.html
+++ b/app/scripts/components/tables/templates/arrange-columns.html
@@ -6,21 +6,33 @@
     </button>
 
     <ul dnd-list="listMap" class="dropdown-menu pull-right" role="menu">
-        <li ng-repeat="item in listMap"
-            ng-class="{'selected': models.selected === item}"
-            ng-if="item.canReorder"
+        <li class="column-heading">
+        <div class="input-group input-group-sm">
+          <span class="input-group-addon" id="sizing-addon3">
+            <i class="fa fa-search"></i>
+          </span>
+          <input type="text" class="form-control" placeholder="Search" aria-describedby="sizing-addon3"
+                 data-ng-click="$event.stopPropagation()"
+                 data-ng-model="search.displayName" />
+        </div>
+        </li>
+        <li data-ng-repeat="item in listMap | filter:search:strict"
+            data-ng-class="{'selected': models.selected === item}"
+            data-ng-if="item.canReorder"
             class="column-heading">
 
             <a dnd-draggable="item"
                dnd-moved="onMoved($index)"
-               dnd-effect-allowed="move"
+               effect-allowed="move"
+               dnd-disable-if="search.displayName.length > 0"
+               data-ng-if="true"
                tabindex=0
                dnd-selected="models.selected = item">
-                <i class="fa fa-bars fa-stack fa-lg"></i>
-                {{item.displayName | ellipsicate:18}}
+                <i class="fa fa-bars fa-stack fa-lg" data-ng-class="{ 'fa-disabled': search.displayName }"></i>
+                {{ item.displayName | humanify | ellipsicate:18 }}
                 <i class="fa fa-stack fa-{{item.hidden ? 'eye-slash' : 'eye'}} fa-lg pull-right" ng-click="item.hidden = !item.hidden"></i>
             </a>
 
         </li>
     </ul>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/styles/tables.less b/app/styles/tables.less
index 1056c466b..e236b255a 100644
--- a/app/styles/tables.less
+++ b/app/styles/tables.less
@@ -27,7 +27,9 @@ ul[dnd-list] {
     min-height: 42px;
   }
 
-
+  .input-group {
+    padding: 3px 20px;
+  }
 
   li.column-heading {
 //    min-height: 42px;
@@ -82,4 +84,4 @@ ul[dnd-list] {
   }
 
 
-}
\ No newline at end of file
+}
diff --git a/app/styles/utils.less b/app/styles/utils.less
index e2b20c80b..4bdf6f850 100644
--- a/app/styles/utils.less
+++ b/app/styles/utils.less
@@ -101,6 +101,10 @@
   vertical-align: middle;
 }
 
+.fa-disabled {
+  color: @grey
+}
+
 .btn-group {
   min-width: 65px;
 }