Expand search functionality to search words as array

app/assets/javascripts/app/frontend/controllers/notes.js

@@ -102,7 +102,10 @@ angular.module('app.frontend')
       if(filterText.length == 0) {
         note.visible = true;
       } else {
-        note.visible = note.safeTitle().toLowerCase().includes(filterText) || note.safeText().toLowerCase().includes(filterText);
+        var words = filterText.split(" ");
+        var matchesTitle = words.every(function(word) { return  note.safeTitle().toLowerCase().indexOf(word) >= 0; });
+        var matchesBody = words.every(function(word) { return  note.safeText().toLowerCase().indexOf(word) >= 0; });
+        note.visible = matchesTitle || matchesBody;
       }
       return note.visible;
     }.bind(this)

app/assets/stylesheets/app/_notes.scss

@@ -35,6 +35,7 @@
     clear: left;
     height: 32px;
     margin-top: 20px;
+    position: relative;
 
     .filter-bar {
       background-color: $light-bg-color;
@@ -48,6 +49,28 @@
 
       border: none;
       width: 100%;
+      position: relative;
+    }
+
+    #search-clear-button {
+      border-radius: 50%;
+      width: 17px;
+      height: 17px;
+      color: white;
+      cursor: default;
+      background-color: gray;
+      font-size: 10px;
+      line-height: 17px;
+      text-align: center;
+      position: absolute;
+      top: 8px;
+      right: 8px;
+
+      transition: background-color 0.15s linear;
+
+      &:hover {
+        background-color: $blue-color;
+      }
     }
   }
 

app/assets/templates/frontend/notes.html.haml

@@ -6,6 +6,7 @@
       %br
       .filter-section
         %input.filter-bar{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search", "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true"}
+          #search-clear-button{"ng-if" => "ctrl.noteFilter.text", "ng-click" => "ctrl.noteFilter.text = ''; ctrl.filterTextChanged()"} ✕
       %ul.section-menu-bar#tag-menu-bar
         %li{"ng-class" => "{'selected' : ctrl.showMenu}"}
           %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"} Sort