Merge pull request #45 from 10gen/INT-196-filter-fields

feature(ui): INT-196 make schema fields filterable

Author: imlucas

scout-style/sidebar.less

@@ -92,8 +92,8 @@
     width: 218px;
     height: 174px;
     border-top: 2px solid @sidebar-border;
-    background: url(/images/fake-sidebar-controls.png) 0 0 no-repeat;
-    background-size: 218px 174px;
+    // background: url(/images/fake-sidebar-controls.png) 0 0 no-repeat;
+    // background-size: 218px 174px;
   }
 }
 

scout-ui/package.json

@@ -39,7 +39,7 @@
     "amp-result": "^1.1.0",
     "ampersand-app": "^1.0.3",
     "ampersand-collection": "^1.4.1",
-    "ampersand-collection-filterable": "^0.1.0",
+    "ampersand-collection-filterable": "^0.2.0",
     "ampersand-collection-lodash-mixin": "^2.0.1",
     "ampersand-collection-rest-mixin": "^3.0.0",
     "ampersand-model": "^4.0.0",

scout-ui/src/field-list/index.js

@@ -48,6 +48,9 @@ var BasicFieldView = View.extend({
   render: function() {
     this.renderWithTemplate(this);
     this.viewSwitcher = new ViewSwitcher(this.queryByHook('minichart-container'));
+    if (this.model.types.length > 0) {
+      this.switchView(this.model.types.at(0));
+    }
   },
   switchView: function(typeModel) {
     var type = typeModel.getId().toLowerCase();

scout-ui/src/home/collection.js

@@ -15,6 +15,9 @@ module.exports = AmpersandView.extend({
     open: {
       type: 'boolean',
       default: false
+    },
+    fieldListView: {
+      type: 'view'
     }
   },
   derived: {
@@ -79,11 +82,12 @@ module.exports = AmpersandView.extend({
       waitFor: 'schema.fields',
       hook: 'fields-subview',
       prepareView: function(el) {
-        return new FieldListView({
-            el: el,
-            parent: this,
-            collection: this.schema.fields
-          });
+        this.fieldListView = new FieldListView({
+          el: el,
+          parent: this,
+          collection: this.schema.fields
+        });
+        return this.fieldListView;
       }
     },
     refinebar: {

scout-ui/src/home/index.js

@@ -16,12 +16,34 @@ module.exports = AmpersandView.extend({
     model: models.Instance
   },
   props: {
+    switcher: {
+      type: 'object',
+      default: null
+    },
     ns: {
       type: 'string',
       allowNull: true,
       default: null
     }
   },
+  derived: {
+    currentCollection: {
+      deps: ['ns'],
+      fn: function () {
+        if (!this.ns) return null;
+        return this.model.collections.find({
+          _id: this.ns
+        });
+      }
+    },
+    currentCollectionView: {
+      cache: false,
+      fn: function() {
+        return this.switcher ?
+          this.switcher.current : null;
+      }
+    }
+  },
   initialize: function(options) {
     options = options || {};
     this.ns = options.ns;
@@ -30,13 +52,8 @@ module.exports = AmpersandView.extend({
 
     this.listenTo(this.model, 'sync', function() {
       if (!this.ns) return;
-
-      var current = this.model.collections.find({
-        _id: this.ns
-      });
-      if (!current) return;
-
-      this.showCollection(current);
+      if (!this.currentCollection) return;
+      this.showCollection(this.currentCollection);
     });
 
     this.once('change:rendered', this.onRendered);

scout-ui/src/models/index.js

@@ -12,7 +12,10 @@ var types = brain.types;
 var _ = require('underscore');
 var es = require('event-stream');
 var Schema = require('mongodb-schema').Schema;
+var FieldCollection = require('mongodb-schema').FieldCollection;
+var Field = require('mongodb-schema/lib/field');
 var QueryOptions = require('./query-options');
+var filterableMixin = require('ampersand-collection-filterable');
 
 // Yay!  Use the API from the devtools console.
 window.scout = client;
@@ -30,7 +33,31 @@ client.on('error', function(err) {
   console.error(err);
 });
 
+/**
+ * wrapping mongodb-schema's FieldCollection with a filterable mixin
+ */
+var FilterableFieldCollection = FieldCollection.extend(filterableMixin, {
+  // @note, this should be in mongodb-schema FieldCollection
+  // but FieldCollection will soon not be polymorphic anymore, so the
+  // problem will go away and we can remove this.
+  isModel: function (model) {
+    return model instanceof Field;
+  },
+  // @note: this should not be necessary, but the mixin doesn't currently
+  // reset its state between collections. @see
+  // https://github.com/mongodb-js/ampersand-collection-filterable/issues/1
+  initialize: function() {
+    this._filtered = [];
+  }
+});
+
 var SampledSchema = Schema.extend({
+  /**
+   * Our fields need to be filterable, adding a mixin
+   */
+  collections: {
+    fields: FilterableFieldCollection
+  },
   /**
    * Clear any data accumulated from sampling.
    */

scout-ui/src/sidebar/list-filter.jade renamed to scout-ui/src/sidebar/collection-filter.jade

@@ -1,5 +1,5 @@
 div
   .sidebar.panel
-    div(data-hook='collections-filter')
-    div(data-hook='collections')
-    .sidebar-controls
+    div(data-hook='collection-filter-subview')
+    div(data-hook='collection-list-subview')
+    div(data-hook='sidebar-control-subview')

scout-ui/src/sidebar/index.jade

@@ -1,31 +1,34 @@
 var View = require('ampersand-view');
 var debug = require('debug')('scout-ui:home');
-var models = require('../models');
 
-var ListFilter = View.extend({
+var CollectionFilterView = View.extend({
+  template: require('./collection-filter.jade'),
   props: {
     search: 'string'
   },
   initialize: function() {
     this.listenTo(this, 'change:search', this.applyFilter);
   },
-  template: require('./list-filter.jade'),
+  events: {
+    'input [data-hook=search]': 'handleInputChanged'
+  },
   render: function() {
     this.renderWithTemplate(this);
-    this.input = this.queryByHook('search');
+    this.cacheElements({
+      'input': '[data-hook=search]'
+    });
     this.input.addEventListener('input', this.handleInputChanged.bind(this), false);
   },
   handleInputChanged: function() {
     this.search = this.input.value.trim();
   },
   applyFilter: function() {
-    debug('search is now', this.search);
-    this.parent.filter(this.search);
+    this.parent.filterCollections(this.search);
   }
 });
 
 // @todo: Keyboard nav: up/down: change active item, right: -> show collection, left: -> hide collection
-var CollectionsList = View.extend({
+var CollectionListView = View.extend({
   template: '<ul class="list-group" data-hook="collections"></ul>',
   ItemView: View.extend({
     bindings: {
@@ -54,34 +57,60 @@ var CollectionsList = View.extend({
   }
 });
 
+
+var SidebarControlView = CollectionFilterView.extend({
+  template: require('./sidebar-controls.jade'),
+  applyFilter: function() {
+    this.parent.filterFields(this.search);
+  }
+});
+
+
 module.exports = View.extend({
-  filter: function(pattern) {
-    var re = new RegExp((pattern || '.*'));
-    this.collection.filter(function(model) {
-      return re.test(model.getId());
-    });
-  },
   template: require('./index.jade'),
   subviews: {
     collections_filter: {
-      hook: 'collections-filter',
+      hook: 'collection-filter-subview',
       prepareView: function(el) {
-        return new ListFilter({
+        return new CollectionFilterView({
             el: el,
             parent: this
           });
       }
     },
     collections: {
-      hook: 'collections',
+      hook: 'collection-list-subview',
       prepareView: function(el) {
-        var view = new CollectionsList({
+        var view = new CollectionListView({
           el: el,
           parent: this,
           collection: this.collection
         });
         return view;
       }
+    },
+    sidebar_control: {
+      hook: 'sidebar-control-subview',
+      prepareView: function(el) {
+        var view = new SidebarControlView({
+          el: el,
+        });
+        return view;
+      }
     }
+  },
+  filterCollections: function(pattern) {
+    var re = new RegExp((pattern || '.*'));
+    this.collection.filter(function(model) {
+      return re.test(model.getId());
+    });
+  },
+  filterFields: function(pattern) {
+    var re = new RegExp((pattern || '.*'));
+    // get current field list view
+    var fieldListView = this.parent.currentCollectionView.fieldListView;
+    fieldListView.collection.filter(function(model) {
+      return re.test(model.getId());
+    });
   }
 });

scout-ui/src/sidebar/index.js

@@ -0,0 +1,4 @@
+.sidebar-controls
+  .panel-heading.list-filter
+    i.search.octicon-search
+    input(type='search', placeholder='filter fields', data-hook='search')