Simple search functionality

css/notes.css

@@ -14,6 +14,25 @@
     padding-left: 2px;
 }
 
+#app-navigation li .nav-entry {
+	display: block;
+	width: 100%;
+	line-height: 44px;
+	min-height: 44px;
+	padding: 0 12px;
+	overflow: hidden;
+	box-sizing: border-box;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	color: #000;
+	opacity: .57;
+}
+
+#app-navigation li:hover .nav-entry,
+#app-navigation li:focus .nav-entry {
+	opacity: 1;
+}
+
 #app-navigation #note-add:hover span,
 #app-navigation #note-add:focus span {
     display: inline;
@@ -52,6 +71,25 @@
     opacity: 1 !important;
 }
 
+.note-search span {
+    background-position: 0 center;
+    background-origin: content-box;
+}
+
+.note-search input {
+    width: 100%;
+    padding-left: 20px;
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+}
+
+.note-search input:active,
+.note-search input:focus,
+.note-search input:hover {
+    border-bottom: 1px solid grey;
+}
+
 .tooltip {
     text-shadow: none;
     text-transform: none;

js/app/controllers/appcontroller.js

@@ -15,4 +15,6 @@ app.controller('AppController', function ($scope, $location, is) {
             $location.path('/notes/' + lastViewedNote);
         }
     };
+
+    $scope.search = '';
 });

js/app/filters/and.js

@@ -0,0 +1,14 @@
+/**
+ * filter by multiple words (AND operation)
+ */
+app.filter('and', ['$filter', function ($filter) {
+	'use strict';
+	return function (items, searchString) {
+		var searchValues = searchString.split(' ');
+		var filtered = items;
+		for(var i in searchValues) {
+			filtered = $filter('filter')(filtered, searchValues[i]);
+		}
+		return filtered;
+	};
+}]);

js/tests/unit/filters/andfilterSpec.js

@@ -0,0 +1,36 @@
+describe('and filter', function() {
+	'use strict';
+
+	var result;
+	var $filter;
+
+	beforeEach(module('Notes'));
+
+	beforeEach(inject(function(_$filter_) {
+		$filter = _$filter_;
+	}));
+
+
+	it ('should do nothing if search string is empty', function() {
+		result = $filter('and')([], '');
+		expect(result).toEqual([]);
+
+		result = $filter('and')(['a', 'lot', 'of', 'strings'], '');
+		expect(result).toEqual(['a', 'lot', 'of', 'strings']);
+	});
+
+	it ('should match single words', function() {
+		result = $filter('and')(['a', 'ad', 'multiple words'], 'd');
+		expect(result).toEqual(['ad', 'multiple words']);
+	});
+
+	it ('should math multiple words', function() {
+		result = $filter('and')(['a b c', 'a c e', 'a d'], 'a c');
+		expect(result).toEqual(['a b c', 'a c e']);
+	});
+
+	it ('should return nothing if nothing matches', function() {
+		result = $filter('and')(['brown fox jumps over the lazy dog'], 'quick');
+		expect(result).toEqual([]);
+	});
+});

templates/main.php

@@ -36,13 +36,18 @@
 
     <div id="app-navigation" ng-controller="NotesController">
         <ul>
+            <li class="note-search">
+                <span class="nav-entry icon-search">
+                    <input type="text" ng-model="search" />
+                </span>
+            </li>
             <!-- new note button -->
             <li id="note-add" ng-click="create()"
                 oc-click-focus="{ selector: '#app-content textarea' }">
                 <a href='#'>+ <span><?php p($l->t('New note')); ?></span></a>
             </li>
             <!-- notes list -->
-            <li ng-repeat="note in notes|orderBy:['-favorite','-modified']"
+            <li ng-repeat="note in filteredNotes = (notes| and:search | orderBy:['-favorite','-modified'])"
                 ng-class="{ active: note.id == route.noteId }">
                 <a href="#/notes/{{ note.id }}">
                     {{ note.title | noteTitle }}
@@ -61,6 +66,11 @@
                         ng-class="{'icon-starred': note.favorite}"></button>
                 </span>
             </li>
+            <li ng-hide="filteredNotes.length">
+                <span class="nav-entry">
+                    <?php p($l->t('No notes found')); ?>
+                </span>
+            </li>
 
         </ul>
     </div>