Enable filtering for tasks and custom rewards

Add search input box next to the tags. When user changes the value of
the input box then it's propagated to the user service as filterQuery
string. filterQuery string is then used in the tasks template to filter
tasks by text.

common/locales/en_GB/tasks.json

@@ -54,6 +54,7 @@
     "newReward": "New Reward",
     "newRewardBulk": "New Rewards (one per line)",
     "price": "Price",
+    "search": "Search",
     "tags": "Tags",
     "editTags": "Edit",
     "newTag": "New Tag",
@@ -79,4 +80,4 @@
     "pushTaskToBottom": "Push task to bottom",
     "emptyTask": "Enter the task's title first.",
     "dailiesRestingInInn": "You're Resting in the Inn! Your Dailies will NOT hurt you tonight, but they WILL still refresh every day. If you're in a quest, you won't deal damage/collect items until you check out of the Inn, but you can still be injured by a Boss if your Party mates skip their own Dailies."
-}
+}

test/spec/filtersCtrlSpec.js

@@ -24,5 +24,14 @@ describe('Filters Controller', function() {
     expect(user.filters[tag.id]).to.eql(true);
     scope.toggleFilter(tag);
     expect(user.filters[tag.id]).to.eql(false);
-  }))
+  }));
+
+  it('updates user\'s filter query when filterQuery is changed', function () {
+      scope.$apply();
+
+      scope.filterQuery = 'foo';
+      scope.$apply();
+
+      expect(user.filterQuery).to.eql('foo');
+  });
 });

website/public/css/filters.styl

@@ -35,3 +35,16 @@
     margin-right: 0.618em
     @extend $hrpg-button-with-input
     hrpg-button-color-mixin($color-options-submenu)
+  .filters-search
+    float: left
+    margin-right: 10px
+    height: 24px
+    padding: 13.5px 5px
+    border: 1px solid #ccc
+    border-radius: 0.382em
+    color: #3b4f59
+    &:hover
+      border-color: #649696
+    &:focus
+      border-color: #3c5a5a
+      outline: none;

website/public/js/controllers/filtersCtrl.js

@@ -1,10 +1,11 @@
 "use strict";
 
-habitrpg.controller("FiltersCtrl", ['$scope', '$rootScope', 'User', 'Shared',
-  function($scope, $rootScope, User, Shared) {
+habitrpg.controller("FiltersCtrl", ['$scope', '$rootScope', 'User', 'Shared', '$timeout',
+  function($scope, $rootScope, User, Shared, $timeout) {
     var user = User.user;
     $scope._editing = false;
     $scope._newTag = {name:''};
+    $scope.filterQuery = '';
 
     var tagsSnap; // used to compare which tags need updating
 
@@ -30,6 +31,12 @@ habitrpg.controller("FiltersCtrl", ['$scope', '$rootScope', 'User', 'Shared',
       // User.save();
     };
 
+    $scope.$watch('filterQuery', function (newValue, oldValue) {
+        if (newValue !== oldValue) {
+            user.filterQuery = newValue;
+        }
+    });
+
     $scope.createTag = function() {
       User.user.ops.addTag({body:{name:$scope._newTag.name, id:Shared.uuid()}});
       $scope._newTag.name = '';

website/views/main/filters.jade

@@ -1,6 +1,7 @@
 .container-fluid
   .row
     .filters(ng-controller='FiltersCtrl')
+      input.filters-search(type='text', placeholder=env.t('search'), ng-model='filterQuery')
       ul.filters-controls
         li=env.t('tags')
         //- Edit button

website/views/shared/tasks/task.jade

@@ -1,4 +1,4 @@
-li(bindonce='list', id='task-{{::task.id}}', ng-repeat='task in obj[list.type+"s"] | conditionalOrderBy: list.view=="dated":"date"', class='task {{Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main)}}', ng-click='spell && (list.type != "reward") && castEnd(task, "task", $event)', ng-class='{"cast-target":spell && (list.type != "reward"), "locked-task":obj._locked === true}', popover-trigger='mouseenter', data-popover-html="{{task.popoverOpen ? '' : task.notes | markdown}}", popover-placement="top", popover-append-to-body='{{::modal ? "false":"true"}}', ng-show='shouldShow(task, list, user.preferences)')
+li(bindonce='list', id='task-{{::task.id}}', ng-repeat='task in obj[list.type+"s"] | filter:{text: obj.filterQuery} | conditionalOrderBy: list.view=="dated":"date"', class='task {{Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main)}}', ng-click='spell && (list.type != "reward") && castEnd(task, "task", $event)', ng-class='{"cast-target":spell && (list.type != "reward"), "locked-task":obj._locked === true}', popover-trigger='mouseenter', data-popover-html="{{task.popoverOpen ? '' : task.notes | markdown}}", popover-placement="top", popover-append-to-body='{{::modal ? "false":"true"}}', ng-show='shouldShow(task, list, user.preferences)')
   // right-hand side control buttons
   .task-meta-controls