Adjust PR #5389

* Convert $watch to ng-change and re-wrote test
* Removed unnecessary styles
* Use .form-control instead of class='form-control'

test/spec/filtersCtrlSpec.js

@@ -10,28 +10,30 @@ describe('Filters Controller', function() {
     $controller('FiltersCtrl', {$scope: scope, User: {user: user}});
   }));
 
-  it('creates a tag', function(){
-    scope._newTag = {name:'tagName'}
-    scope.createTag();
-    expect(user.tags).to.have.length(1);
-    expect(user.tags[0].name).to.eql('tagName');
-    expect(user.tags[0]).to.have.property('id');
+  describe('tags', function(){
+    it('creates a tag', function(){
+      scope._newTag = {name:'tagName'}
+      scope.createTag();
+      expect(user.tags).to.have.length(1);
+      expect(user.tags[0].name).to.eql('tagName');
+      expect(user.tags[0]).to.have.property('id');
+    });
+
+    it('toggles tag filtering', inject(function(Shared){
+      var tag = {id: Shared.uuid(), name: 'myTag'};
+      scope.toggleFilter(tag);
+      expect(user.filters[tag.id]).to.eql(true);
+      scope.toggleFilter(tag);
+      expect(user.filters[tag.id]).to.eql(false);
+    }));
   });
 
-  it('toggles tag filtering', inject(function(Shared){
-    var tag = {id: Shared.uuid(), name: 'myTag'};
-    scope.toggleFilter(tag);
-    expect(user.filters[tag.id]).to.eql(true);
-    scope.toggleFilter(tag);
-    expect(user.filters[tag.id]).to.eql(false);
-  }));
+  describe('updateTaskFilter', function(){
+    it('updatest user\'s filter query with the value of filterQuery', function () {
+      scope.filterQuery = 'task';
+      scope.updateTaskFilter();
 
-  it('updates user\'s filter query when filterQuery is changed', function () {
-      scope.$apply();
-
-      scope.filterQuery = 'foo';
-      scope.$apply();
-
-      expect(user.filterQuery).to.eql('foo');
+      expect(user.filterQuery).to.eql(scope.filterQuery);
+    });
   });
 });

website/public/css/filters.styl

@@ -36,13 +36,5 @@
     @extend $hrpg-button-with-input
     hrpg-button-color-mixin($color-options-submenu)
   .filters-search
-    float: left
-    margin-right: 5px
     margin-bottom: 0.618em
-    width: 180px
-    input
-      padding: 4.5px 6px !important
-      height: 29px !important
-    .input-group-addon
-      height: 29px !important
-      padding: 4.5px 10px !important
+    max-width: 180px

website/public/js/controllers/filtersCtrl.js

@@ -31,11 +31,9 @@ habitrpg.controller("FiltersCtrl", ['$scope', '$rootScope', 'User', 'Shared',
       // User.save();
     };
 
-    $scope.$watch('filterQuery', function (newValue, oldValue) {
-        if (newValue !== oldValue) {
-            user.filterQuery = newValue;
-        }
-    });
+    $scope.updateTaskFilter = function(){
+      user.filterQuery = $scope.filterQuery;
+    };
 
     $scope.createTag = function() {
       User.user.ops.addTag({body:{name:$scope._newTag.name, id:Shared.uuid()}});

website/views/main/filters.jade

@@ -2,9 +2,9 @@
   .row
     .filters(ng-controller='FiltersCtrl')
       .input-group.input-group-sm.filters-search.pull-right
-          input(type='text', class='form-control', placeholder=env.t('search'), ng-model='filterQuery')
-          .input-group-addon
-            .glyphicon.glyphicon-search
+        input.form-control(type='text', placeholder=env.t('search'), ng-model='filterQuery', ng-change='updateTaskFilter()', ng-model-options='{ debounce: 250 }')
+        .input-group-addon
+          .glyphicon.glyphicon-search
       ul.filters-controls
         li=env.t('tags')
         //- Edit button