Merge pull request #306 from icgc-dcc/feature/DCCPRTL-170-AS-Create-F…

…acet-Pane-Search-Filter DCCPRTL 170 AS Facet pane search filter
icgc-dcc · Jan 9, 2017 · 5f25c7a · 5f25c7a
2 parents 175dc69 + 2479839
commit 5f25c7a
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 8 deletions.
diff --git a/dcc-portal-ui/app/scripts/advanced/views/advanced.facets.genes.html b/dcc-portal-ui/app/scripts/advanced/views/advanced.facets.genes.html
@@ -48,5 +48,5 @@ <h3 data-ng-if="!AdvancedCtrl.Gene.genes" class="loading loading-icon">
     </li>
 
     <li data-location-facet data-type="gene" data-facet-name="location" data-label="{{'Location' | translate}}"
-        data-placeholder="{{'Enter gene location' | translate}}" data-example="{{'e.g. chr12:43566-3457633' | translate}}"></li>
+        data-placeholder="{{'e.g. chr12:43566-3457633' | translate}}"></li>
 </ul>
diff --git a/dcc-portal-ui/app/scripts/advanced/views/advanced.facets.mutations.html b/dcc-portal-ui/app/scripts/advanced/views/advanced.facets.mutations.html
@@ -34,6 +34,6 @@
            data-facet="AdvancedCtrl.Mutation.mutations.facets.verificationStatus"></terms>
 
     <li data-location-facet data-type="mutation" data-facet-name="location" data-label="{{'Location' | translate}}"
-        data-placeholder="{{'Enter mutation location' | translate}}" data-example="{{'e.g. chr12:43566-3457633' | translate}}"></li>
+        data-placeholder="{{'e.g. chr12:43566-3457633' | translate}}" ></li>
 </ul>
 
diff --git a/dcc-portal-ui/app/scripts/facets/js/terms.js b/dcc-portal-ui/app/scripts/facets/js/terms.js
@@ -24,6 +24,7 @@
     function ($scope, $filter, Facets, HighchartsService, ProjectCache, ValueTranslator, LocationService) {
 
       $scope.resetPaginationOnChange = _.isUndefined($scope.resetPaginationOnChange) ? true : $scope.resetPaginationOnChange;  
+      $scope.search = {};
 
     // Translation on UI is slow, do in here
     function addTranslations (terms, facetName, missingText) {
@@ -180,7 +181,10 @@
         iconGetter: '&iconGetter',
         showWhenEmpty: '<',
 
-        resetPaginationOnChange: '<'
+        resetPaginationOnChange: '<',
+
+        //Search Config
+        searchIconShowLimit : '@'
       },
       transclude: true,
       templateUrl: '/scripts/facets/views/terms.html',

diff --git a/dcc-portal-ui/app/scripts/facets/styles/_facets.scss b/dcc-portal-ui/app/scripts/facets/styles/_facets.scss
@@ -21,10 +21,25 @@ $foregroundRed: #ff654b;
     size: 1.1rem;
     weight: 300;
   }
+
+  .t_facets_facet_search_icon{
+    i{
+      font-size: 1.5rem;
+    }
+  }
+
+  .t_facets__facet__search{
+    input{
+      font-size: 1rem;
+    }
+  }
 }
 
 .t_facets__facet__title_active {
   border-left-color: $orangeLight;
+  .t_facets_facet_search_icon{
+    margin-right: -.5rem;
+  }
 }
 
 .t_facets__facet__title__label {
@@ -317,5 +332,5 @@ $togglerFontSize: 10px;
 }
 
 .t_facet_location_search{
-  margin: 0px 0px 10px 0px;
+  margin: 10px 0px 10px 0px;
 }
diff --git a/dcc-portal-ui/app/scripts/facets/views/terms.html b/dcc-portal-ui/app/scripts/facets/views/terms.html
@@ -7,6 +7,19 @@
         <span data-ng-if="actives.length" class="t_facets__facet__terms__inactive__reset t_tools">
             <span data-ng-click="removeFacet()" class="t_tools__tool"><i class="icon-undo"></i></span>
         </span>
+        <span class="t_tools t_facets_facet_search_icon" 
+            data-ng-show="(inactives.length > (searchIconShowLimit || 5)) && !collapsed">
+            <span data-ng-click="showSearch = !showSearch" class="t_tools__tool"><i class="icon-search"></i></span>
+        </span>
+        <div class="t_facets__facet__search t_facets__facet__input" data-ng-if="showSearch && !collapsed">
+            <input class="t_input__block" type="search" placeholder="Filter values" ng-model="search.query" autofocus>
+            <i class="t_suggest__embedded t_suggest__embedded__right t_suggest__embedded__clear icon-cancel"
+                data-ng-click="search.query = ''"
+                data-ng-show="search.query"></i>
+        </div>
+    </li>
+    <li class="t_facets__facet__search" data-ng-show="showSearch">
+
     </li>
     <li class="t_facets__facet__terms">
         <ul class="t_facets__facet__terms__active">
@@ -41,7 +54,7 @@
         </ul>
 
         <ul data-ng-hide="collapsed || inactives.length == 0" class="t_facets__facet__terms__inactive">
-            <li data-ng-repeat="item in inactives | limitTo: (collapsed? 0 : displayLimit)"
+            <li data-ng-repeat="item in inactives | filter: search.query | limitTo: (collapsed? 0 : displayLimit)"
                 class="t_facets__facet__terms__inactive__term">
 
                 <span data-ng-hide="hideCount" data-ng-style="bar(item.count)" class="t_facets__facet__terms__inactive__term__bar"></span>
@@ -58,11 +71,11 @@
                 <span data-ng-if="hideCount" class="t_facets__facet__terms__inactive__term__count t_facets__facet__term__na">{{hideText}}</span>
 
             </li>
-            <li data-ng-show="inactives.length > displayLimit || expanded" class="t_sh__toggle">
+            <li data-ng-show="(inactives | filter: search.query).length > displayLimit || expanded" class="t_sh__toggle">
                 <a data-ng-click="toggle()" href="" class="t_tools__tool">
                   <span>
                      <i class="{{ expanded? 'icon-caret-up': 'icon-caret-down' }}"></i>
-                     {{ expanded? "less" : (inactives.length - displayLimit) + " more" }}
+                     {{ expanded? "less" : ((inactives | filter: search.query).length - displayLimit) + " more" }}
                   </span>
                 </a>
             </li>

diff --git a/dcc-portal-ui/app/scripts/ui/js/table.js b/dcc-portal-ui/app/scripts/ui/js/table.js
@@ -361,7 +361,7 @@ angular.module('icgc.ui.table.filter', [])
         class: '@'
       },
       template: '<span class="t_suggest t_suggest__header table-filter {{class}}">' +
-        '<input type="text" class="t_suggest__input form-control" placeholder="' + gettextCatalog.getString('Table filter') + 
+        '<input type="text" class="t_suggest__input form-control" placeholder="' + gettextCatalog.getString('Filter table') + 
         '" data-ng-change="currentPage = 1;" data-ng-model="filterModel" />' + 
         '<i class="t_suggest__embedded t_suggest__embedded__left t_suggest__embedded__search icon-search">' +
         '</i>'+