Add filter to quickly search the notebook from the list

### What is this PR for? Allows the user to instantly find the notebook from the list shown on the home page and in the Notebook main menu ### What type of PR is it? Improvement ### How should this be tested? Enter the search term in the filter input box ### Screenshots <img width="255" alt="screen shot 2016-01-20 at 3 22 32 pm" src="https://cloud.githubusercontent.com/assets/2031306/12445389/04f9cb46-bf8a-11e5-8e99-d04b122f7ce2.png"> <br> <img width="299" alt="screen shot 2016-01-20 at 3 22 26 pm" src="https://cloud.githubusercontent.com/assets/2031306/12445391/04ff3216-bf8a-11e5-8fc0-19bdfaa991e3.png"> <br> <img width="314" alt="screen shot 2016-01-20 at 3 21 58 pm" src="https://cloud.githubusercontent.com/assets/2031306/12445392/05004d86-bf8a-11e5-839f-ae9a8b4881b7.png"> <br> <img width="316" alt="screen shot 2016-01-20 at 3 22 11 pm" src="https://cloud.githubusercontent.com/assets/2031306/12445390/04faf6ba-bf8a-11e5-9ae9-fec1a201591a.png"> Author: Renjith Kamath <[email protected]> Closes apache#660 from r-kamath/NotenameFilter and squashes the following commits: 2298eb8 [Renjith Kamath] fix filter input width issue ed41d41 [Renjith Kamath] review update: fix search box padding to 6px 904518c [Renjith Kamath] fix ng-include path bade370 [Renjith Kamath] refactor filter code and use ng-include 325d71e [Renjith Kamath] add filter to the list of notebook names on homepage and under notebook menu
aib628 · Feb 8, 2016 · 51da658 · 51da658
1 parent 9b461ad
commit 51da658
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 5 deletions.
diff --git a/zeppelin-web/src/app/home/home.css b/zeppelin-web/src/app/home/home.css
@@ -126,6 +126,31 @@ a.navbar-brand:hover {
   outline: 0;
 }
 
+#notebook-list > .filter-names {
+  margin: 5px;
+  padding: 0px 10px;
+}
+
+#notebook-list .note-name-query {
+  width: 100%;
+}
+
+#notebook-names {
+  list-style: none;
+}
+
+#notebook-names > .filter-names {
+  margin: 5px 0;
+}
+
+.note-name-query {
+  padding: 6px;
+  color: #000;
+  height: 28px;
+  width: 200px;
+  font: normal normal normal 14px/1 FontAwesome;
+}
+
 @media (max-width: 767px) {
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
     color: #D3D3D3;

diff --git a/zeppelin-web/src/app/home/home.html b/zeppelin-web/src/app/home/home.html
@@ -26,7 +26,7 @@ <h1 class="box-heading" id="welcome">
 
       <div class="row">
         <div class="col-md-4">
-          <h4>Notebook 
+          <h4>Notebook
             <i ng-class="isReloadingNotes ? 'fa fa-refresh fa-spin' : 'fa fa-refresh'"
               ng-style="!isReloadingNotes && {'cursor': 'pointer'}" style="font-size: 13px;"
               ng-click="reloadNotebookList();">
@@ -38,8 +38,9 @@ <h5><a href="" data-toggle="modal" data-target="#noteImportModal" style="text-de
               <i style="font-size: 15px;" class="fa fa-upload"></i> Import note</a></h5>
             <h5><a href="" data-toggle="modal" data-target="#noteNameModal" style="text-decoration: none;">
               <i style="font-size: 15px;" class="icon-notebook"></i> Create new note</a></h5>
-            <ul style="list-style-type: none;">
-              <li ng-repeat="note in home.notes.list | orderBy:home.arrayOrderingSrv.notebookListOrdering track by $index">
+            <ul id="notebook-names">
+              <li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li>
+              <li ng-repeat="note in home.notes.list | filter:query | orderBy:home.arrayOrderingSrv.notebookListOrdering track by $index">
                 <i style="font-size: 10px;" class="icon-doc"></i>
                 <a style="text-decoration: none;" href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}}</a>
               </li>

diff --git a/zeppelin-web/src/components/filterNoteNames/filter-note-names.html b/zeppelin-web/src/components/filterNoteNames/filter-note-names.html
@@ -0,0 +1,14 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<input type="text" class="note-name-query form-control" ng-click="$event.stopPropagation()" placeholder="&#xf002 Filter" ng-model="$parent.query.name" />
diff --git a/zeppelin-web/src/components/navbar/navbar.html b/zeppelin-web/src/components/navbar/navbar.html
@@ -20,7 +20,7 @@
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#/">
-        <img style="margin-top: -7px;s" src="assets/images/zepLogoW.png" width="50" alt="I'm zeppelin"> Zeppelin
+        <img style="margin-top: -7px;" src="assets/images/zepLogoW.png" width="50" alt="I'm zeppelin"> Zeppelin
       </a>
     </div>
 
@@ -32,7 +32,8 @@
             <li><a href="" data-toggle="modal" data-target="#noteNameModal"><i class="fa fa-plus"></i> Create new note</a></li>
             <li class="divider"></li>
             <div id="notebook-list" class="scrollbar-container">
-              <li ng-repeat="note in navbar.notes.list | orderBy:navbar.arrayOrderingSrv.notebookListOrdering track by $index"
+              <li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li>
+              <li ng-repeat="note in navbar.notes.list | filter:query | orderBy:navbar.arrayOrderingSrv.notebookListOrdering track by $index"
                   ng-class="{'active' : navbar.isActive(note.id)}">
                 <a href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}} </a>
               </li>