implement filtering functionality

davidsulc · Oct 22, 2013 · eb55e34 · eb55e34
1 parent 6ccc578
commit eb55e34
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/assets/js/apps/contacts/list/list_controller.js b/assets/js/apps/contacts/list/list_controller.js
@@ -10,8 +10,26 @@ ContactManager.module("ContactsApp.List", function(List, ContactManager, Backbon
       var contactsListPanel = new List.Panel();
 
       $.when(fetchingContacts).done(function(contacts){
+        var filteredContacts = ContactManager.Entities.FilteredCollection({
+          collection: contacts,
+          filterFunction: function(filterCriterion){
+            var criterion = filterCriterion.toLowerCase();
+            return function(contact){
+              if(contact.get("firstName").toLowerCase().indexOf(criterion) !== -1
+                || contact.get("lastName").toLowerCase().indexOf(criterion) !== -1
+                || contact.get("phoneNumber").toLowerCase().indexOf(criterion) !== -1){
+                  return contact;
+              }
+            };
+          }
+        });
+
         var contactsListView = new List.Contacts({
-          collection: contacts
+          collection: filteredContacts
+        });
+
+        contactsListPanel.on("contacts:filter", function(filterCriterion){
+          filteredContacts.filter(filterCriterion);
         });
 
         contactsListLayout.on("show", function(){
@@ -32,7 +50,12 @@ ContactManager.module("ContactsApp.List", function(List, ContactManager, Backbon
             if(newContact.save(data)){
               contacts.add(newContact);
               view.trigger("dialog:close");
-              contactsListView.children.findByModel(newContact).flash("success");
+              var newContactView = contactsListView.children.findByModel(newContact);
+              // check whether the new contact view is displayed (it could be
+              // invisible due to the current filter criterion)
+              if(newContactView){
+                newContactView.flash("success");
+              }
             }
             else{
               view.triggerMethod("form:data:invalid", newContact.validationError);

diff --git a/assets/js/apps/contacts/list/list_view.js b/assets/js/apps/contacts/list/list_view.js
@@ -13,6 +13,16 @@ ContactManager.module("ContactsApp.List", function(List, ContactManager, Backbon
 
     triggers: {
       "click button.js-new": "contact:new"
+    },
+
+    events: {
+      "submit #filter-form": "filterContacts"
+    },
+
+    filterContacts: function(e){
+      e.preventDefault();
+      var criterion = this.$(".js-filter-criterion").val();
+      this.trigger("contacts:filter", criterion);
     }
   });
 

diff --git a/index.html b/index.html
@@ -99,6 +99,12 @@ <h1><%= title %></h1>
 
     <script type="text/template" id="contact-list-panel">
       <button class="btn btn-primary js-new">New contact</button>
+      <form id="filter-form" class="form-search form-inline pull-right">
+        <div class="input-append">
+          <input type="text" class="span2 search-query js-filter-criterion">
+          <button type="submit" class="btn">Filter contacts</button>
+        </div>
+      </form>
     </script>
 
     <script src="./assets/js/vendor/jquery.js"></script>
@@ -115,6 +121,7 @@ <h1><%= title %></h1>
     <script src="./assets/js/apps/config/marionette/regions/dialog.js"></script>
     <script src="./assets/js/app.js"></script>
     <script src="./assets/js/apps/config/storage/localstorage.js"></script>
+    <script src="./assets/js/entities/common.js"></script>
     <script src="./assets/js/entities/contact.js"></script>
     <script src="./assets/js/common/views.js"></script>