From bd3950c56159f411ff6c66bc08a23d323f999a30 Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Fri, 26 Jun 2015 17:27:37 +1000 Subject: [PATCH 1/3] filterable fields WIP: does not re-render minicharts yet. --- scout-style/sidebar.less | 4 +- scout-ui/src/home/collection.js | 14 +++-- scout-ui/src/home/index.js | 31 ++++++--- scout-ui/src/models/index.js | 21 +++++++ ...ist-filter.jade => collection-filter.jade} | 0 scout-ui/src/sidebar/index.jade | 6 +- scout-ui/src/sidebar/index.js | 63 ++++++++++++++----- scout-ui/src/sidebar/sidebar-controls.jade | 4 ++ 8 files changed, 109 insertions(+), 34 deletions(-) rename scout-ui/src/sidebar/{list-filter.jade => collection-filter.jade} (100%) create mode 100644 scout-ui/src/sidebar/sidebar-controls.jade diff --git a/scout-style/sidebar.less b/scout-style/sidebar.less index d4591c77c3b..3578e9b9dab 100644 --- a/scout-style/sidebar.less +++ b/scout-style/sidebar.less @@ -88,8 +88,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/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..9c99c247679 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,25 @@ client.on('error', function(err) { console.error(err); }); +/** + * wrapping mongodb-schema's FieldCollection with a filterable mixin + */ +var FilterableFieldCollection = FieldCollection.extend(filterableMixin, { + // @todo, 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; + } +}); + 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') From 6634eee7e0863e2e44588a34cd094eaf5fe99b62 Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Fri, 26 Jun 2015 17:46:56 +1000 Subject: [PATCH 2/3] render minicharts and reset filterableMixin on new collection --- scout-ui/src/field-list/index.js | 3 +++ scout-ui/src/models/index.js | 8 +++++++- 2 files changed, 10 insertions(+), 1 deletion(-) 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/models/index.js b/scout-ui/src/models/index.js index 9c99c247679..4ae11b58f66 100644 --- a/scout-ui/src/models/index.js +++ b/scout-ui/src/models/index.js @@ -37,11 +37,17 @@ client.on('error', function(err) { * wrapping mongodb-schema's FieldCollection with a filterable mixin */ var FilterableFieldCollection = FieldCollection.extend(filterableMixin, { - // @todo, this should be in mongodb-schema FieldCollection + // @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 = []; } }); From fe24c62fac7a6a327303f662e1e380e1db6c0261 Mon Sep 17 00:00:00 2001 From: Lucas Hrabovsky Date: Tue, 30 Jun 2015 10:02:14 -0400 Subject: [PATCH 3/3] fix(ui): Bump ampersand-collection-filterable 0.2.0 fixes bug --- scout-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scout-ui/package.json b/scout-ui/package.json index 69a6586cad4..56a10686859 100644 --- a/scout-ui/package.json +++ b/scout-ui/package.json @@ -43,7 +43,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",