feat(tableicious): search filter to dropdown

Closes #243
NCI-GDC · Feb 4, 2015 · d527ff0 · d527ff0
1 parent f9ef581
commit d527ff0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git 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>
+</div>
diff --git 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] {
   }
 
 
-}
+}
diff --git 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;
 }