Merge pull request #102 from 10gen/INT-533-clear-button

feature(refine-view): INT-533: added clear button

Author: imlucas

src/refine-view/index.jade

@@ -2,4 +2,5 @@
   form: .input-group(data-hook='refine-input-group')
     input.form-control.input-sm(type='text', data-hook='refine-input')
     span.input-group-btn
-      button.btn.btn-default.btn-sm(type='button', data-hook='refine-button') Refine
+      button.btn.btn-info.btn-sm(type='button', data-hook='refine-button') Apply
+      button.btn.btn-default.btn-sm(type='button', data-hook='reset-button') Reset

src/refine-view/index.js

@@ -12,11 +12,28 @@ module.exports = AmpersandView.extend({
       default: true
     }
   },
+  derived: {
+    notEmpty: {
+      deps: ['model.queryString'],
+      fn: function() {
+        return this.model.queryString !== '{}';
+      }
+    }
+  },
   bindings: {
     'model.queryString': {
       type: 'value',
       hook: 'refine-input'
     },
+    notEmpty: [{
+      type: 'toggle',
+      hook: 'reset-button'
+    }, {
+      type: 'booleanClass',
+      hook: 'refine-button',
+      yes: 'btn-info',
+      no: 'btn-default'
+    }],
     valid: [
       // red input border while query is invalid
       {
@@ -35,7 +52,8 @@ module.exports = AmpersandView.extend({
     ]
   },
   events: {
-    'click [data-hook=refine-button]': 'buttonClicked',
+    'click [data-hook=refine-button]': 'refineClicked',
+    'click [data-hook=reset-button]': 'resetClicked',
     'input [data-hook=refine-input]': 'inputChanged',
     'submit form': 'submit'
   },
@@ -68,7 +86,11 @@ module.exports = AmpersandView.extend({
     }
     this.valid = true;
   },
-  buttonClicked: function() {
+  resetClicked: function() {
+    this.model.query = new Query();
+    this.trigger('submit', this);
+  },
+  refineClicked: function() {
     var queryStr = this._cleanupInput(this.queryByHook('refine-input').value);
     var queryObj = new Query(EJSON.parse(queryStr), { parse: true });
     this.model.query = queryObj;

src/refine-view/index.less

@@ -10,6 +10,10 @@
     height: 28px;
     & + .input-group-btn {
       padding-left: 10px;
+
+      &:last-child > .btn {
+        margin-left: 2px;
+      }
     }
   }
 }