diff --git a/scout-style/sidebar.less b/scout-style/sidebar.less index ea30cb19e4c..ec190f65943 100644 --- a/scout-style/sidebar.less +++ b/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; } } diff --git a/scout-ui/package.json b/scout-ui/package.json index c14a3567ed3..e5a6213797e 100644 --- a/scout-ui/package.json +++ b/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", diff --git a/scout-ui/src/field-list/index.js b/scout-ui/src/field-list/index.js index e8f565d1408..c821a439a77 100644 --- a/scout-ui/src/field-list/index.js +++ b/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(); diff --git a/scout-ui/src/home/collection.js b/scout-ui/src/home/collection.js index d318e222910..995a827a0d3 100644 --- a/scout-ui/src/home/collection.js +++ b/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: { diff --git a/scout-ui/src/home/index.js b/scout-ui/src/home/index.js index 03333ef9a90..eb61e990dba 100644 --- a/scout-ui/src/home/index.js +++ b/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); diff --git a/scout-ui/src/models/index.js b/scout-ui/src/models/index.js index 74daf03228e..4ae11b58f66 100644 --- a/scout-ui/src/models/index.js +++ b/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. */ diff --git a/scout-ui/src/sidebar/list-filter.jade b/scout-ui/src/sidebar/collection-filter.jade similarity index 100% rename from scout-ui/src/sidebar/list-filter.jade rename to scout-ui/src/sidebar/collection-filter.jade diff --git a/scout-ui/src/sidebar/index.jade b/scout-ui/src/sidebar/index.jade index 7f00fa0e764..c537fff5b62 100644 --- a/scout-ui/src/sidebar/index.jade +++ b/scout-ui/src/sidebar/index.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') diff --git a/scout-ui/src/sidebar/index.js b/scout-ui/src/sidebar/index.js index e4f19136343..0c21b70cbd1 100644 --- a/scout-ui/src/sidebar/index.js +++ b/scout-ui/src/sidebar/index.js @@ -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: '', 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()); + }); } }); diff --git a/scout-ui/src/sidebar/sidebar-controls.jade b/scout-ui/src/sidebar/sidebar-controls.jade new file mode 100644 index 00000000000..437ba0ce60c --- /dev/null +++ b/scout-ui/src/sidebar/sidebar-controls.jade @@ -0,0 +1,4 @@ +.sidebar-controls + .panel-heading.list-filter + i.search.octicon-search + input(type='search', placeholder='filter fields', data-hook='search')