From 9ed63ca5ba2020cb92410816eef66c4bb9480799 Mon Sep 17 00:00:00 2001 From: Matthew Dillon Date: Thu, 12 Nov 2015 15:43:35 -0700 Subject: [PATCH 1/5] deps --- bower.json | 4 +++- ember-cli-build.js | 6 ++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/bower.json b/bower.json index db98942..7b06dc4 100644 --- a/bower.json +++ b/bower.json @@ -21,6 +21,8 @@ "quill": "~0.19.14", "pretender": "~0.10.1", "lodash": "~3.7.0", - "Faker": "~3.0.0" + "Faker": "~3.0.0", + "selectize": "~0.12.1", + "jQuery UI Sortable": "jquery-ui-sortable#*" } } diff --git a/ember-cli-build.js b/ember-cli-build.js index 3ae8de0..6716197 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -14,6 +14,8 @@ module.exports = function(defaults) { // quill app.import('bower_components/quill/dist/quill.base.css'); app.import('bower_components/quill/dist/quill.snow.css'); + // selectize + app.import('bower_components/selectize/dist/css/selectize.default.css'); // LIBS //////////////////////////////////////////////////////////////////////// // flakes (and deps) @@ -25,6 +27,10 @@ module.exports = function(defaults) { app.import('bower_components/moment/moment.js'); // quill app.import('bower_components/quill/dist/quill.min.js'); + // jquery ui sortable + app.import('bower_components/jQuery UI Sortable/jquery-ui-sortable.min.js'); + // selectize + app.import('bower_components/selectize/dist/js/standalone/selectize.min.js'); return app.toTree(); }; From dbcc51c80d7fd92461f383b4da2764499bdd19ed Mon Sep 17 00:00:00 2001 From: Matthew Dillon Date: Thu, 12 Nov 2015 15:43:44 -0700 Subject: [PATCH 2/5] WIP --- app/helpers/get-property.js | 10 ++--- app/pods/components/x-select/component.js | 39 +++++++++++++++++++ app/pods/components/x-select/template.hbs | 6 +++ app/pods/protected/compare/results/route.js | 8 ++-- .../compare/select-form/component.js | 13 +++++-- .../compare/select-form/template.hbs | 12 +++--- 6 files changed, 69 insertions(+), 19 deletions(-) create mode 100644 app/pods/components/x-select/component.js create mode 100644 app/pods/components/x-select/template.hbs diff --git a/app/helpers/get-property.js b/app/helpers/get-property.js index 6b2308d..9801d7b 100644 --- a/app/helpers/get-property.js +++ b/app/helpers/get-property.js @@ -1,8 +1,8 @@ import Ember from 'ember'; -// This will be unneccesary when ember 2.0 lands -export function getProperty(params) { - return Ember.get(params[0], params[1]); -} +const { get, Helper: { helper } } = Ember; -export default Ember.HTMLBars.makeBoundHelper(getProperty); +// This will be unneccesary when ember 2.0 lands +export default helper(function(params) { + return get(params[0], params[1]); +}); diff --git a/app/pods/components/x-select/component.js b/app/pods/components/x-select/component.js new file mode 100644 index 0000000..eada7b0 --- /dev/null +++ b/app/pods/components/x-select/component.js @@ -0,0 +1,39 @@ +import Ember from 'ember'; + +const { Component } = Ember; + +export default Component.extend({ + tagName: 'select', + + value: null, + nameAttr: null, + listItems: null, + placeholder: null, + selected: null, + selectize: null, + + attributeBindings: [ + 'multiple', + ], + + change: function() { + this.attrs["update"](this.get('selectize').getValue()); + }, + + didReceiveAttrs: function() { + this._super(...arguments); + + if (!this.attrs.update) { + throw new Error(`You must provide an \`update\` action.`); + } + }, + + didInsertElement: function() { + this.$().selectize({ + plugins: ['drag_drop'], + items: this.get('selected'), + }); + this.set('selectize', this.$()[0].selectize); + }, + +}); diff --git a/app/pods/components/x-select/template.hbs b/app/pods/components/x-select/template.hbs new file mode 100644 index 0000000..093ed1e --- /dev/null +++ b/app/pods/components/x-select/template.hbs @@ -0,0 +1,6 @@ +{{#if placeholder}} + +{{/if}} +{{#each listItems as |option|}} + +{{/each}} diff --git a/app/pods/protected/compare/results/route.js b/app/pods/protected/compare/results/route.js index 4ae7fd0..72c01f2 100644 --- a/app/pods/protected/compare/results/route.js +++ b/app/pods/protected/compare/results/route.js @@ -30,8 +30,8 @@ export default Route.extend({ } const compare = this.controllerFor('protected.compare'); - compare.set('selectedStrains', params.strain_ids); - compare.set('selectedCharacteristics', params.characteristic_ids); + compare.set('selectedStrains', params.strain_ids.split(',')); + compare.set('selectedCharacteristics', params.characteristic_ids.split(',')); return this.get('ajax').request('/compare', { data: params }); }, @@ -45,14 +45,14 @@ export default Route.extend({ const compare = this.controllerFor('protected.compare'); const strains = []; - const strain_ids = compare.get('selectedStrains').split(','); + const strain_ids = compare.get('selectedStrains'); strain_ids.forEach((id) => { strains.push(this.store.peekRecord('strain', id)); }); controller.set('strains', strains); const characteristics = []; - const characteristic_ids = compare.get('selectedCharacteristics').split(','); + const characteristic_ids = compare.get('selectedCharacteristics'); characteristic_ids.forEach((id) => { characteristics.push(this.store.peekRecord('characteristic', id)); }); diff --git a/app/pods/protected/compare/select-form/component.js b/app/pods/protected/compare/select-form/component.js index db58626..f98999d 100644 --- a/app/pods/protected/compare/select-form/component.js +++ b/app/pods/protected/compare/select-form/component.js @@ -13,10 +13,10 @@ export default Component.extend({ selectedStrains: null, selectedCharacteristics: null, - updateStrains: function(selection) { - this.set('selectedStrains', selection); - this.attrs['update-strains'](this.get('selectedStrains')); - }, + // updateStrains: function(selection) { + // this.set('selectedStrains', selection); + // this.attrs['update-strains'](this.get('selectedStrains')); + // }, updateCharacteristics: function(selection) { this.set('selectedCharacteristics', selection); @@ -57,5 +57,10 @@ export default Component.extend({ deselectAllCharacteristics: function() { this.updateCharacteristics(""); }, + + updateStrainSelection: function(selection) { + this.set('selectedStrains', selection); + this.attrs["update-strains"](selection); + }, }, }); diff --git a/app/pods/protected/compare/select-form/template.hbs b/app/pods/protected/compare/select-form/template.hbs index 61a07a5..5068a7c 100644 --- a/app/pods/protected/compare/select-form/template.hbs +++ b/app/pods/protected/compare/select-form/template.hbs @@ -5,13 +5,13 @@
  • {{ - select-2 + x-select + listItems=strains + nameAttr="fullNameMU" + update=(action "updateStrainSelection") + placeholder="Select one ore more strains" multiple=true - content=strains - value=selectedStrains - optionValuePath="id" - optionLabelPath="fullNameMU" - placeholder="Select one or more strains" + selected=selectedStrains }}
  • From a4fc06d22d55d16a24f1422a1be01b8cd5b0f6c6 Mon Sep 17 00:00:00 2001 From: Matthew Dillon Date: Thu, 12 Nov 2015 16:33:51 -0700 Subject: [PATCH 3/5] compare/strains works --- app/pods/components/x-select/component.js | 22 +++++++++++++++++-- .../compare/select-form/component.js | 15 ++++++------- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/app/pods/components/x-select/component.js b/app/pods/components/x-select/component.js index eada7b0..e4274b6 100644 --- a/app/pods/components/x-select/component.js +++ b/app/pods/components/x-select/component.js @@ -1,16 +1,16 @@ import Ember from 'ember'; -const { Component } = Ember; +const { Component, isEmpty } = Ember; export default Component.extend({ tagName: 'select', - value: null, nameAttr: null, listItems: null, placeholder: null, selected: null, selectize: null, + multiple: false, attributeBindings: [ 'multiple', @@ -29,11 +29,29 @@ export default Component.extend({ }, didInsertElement: function() { + this._super(...arguments); + this.$().selectize({ + closeAfterSelect: true, + selectOnTab: true, plugins: ['drag_drop'], items: this.get('selected'), }); + this.set('selectize', this.$()[0].selectize); }, + didRender: function() { + this._super(...arguments); + + const selected = this.get('selected'); + if (!isEmpty(selected)) { + this.get('selected').forEach((item) => { + this.get('selectize').addItem(item, true); + }); + } else { + this.get('selectize').clear(true); + } + }, + }); diff --git a/app/pods/protected/compare/select-form/component.js b/app/pods/protected/compare/select-form/component.js index f98999d..9c1687d 100644 --- a/app/pods/protected/compare/select-form/component.js +++ b/app/pods/protected/compare/select-form/component.js @@ -13,10 +13,10 @@ export default Component.extend({ selectedStrains: null, selectedCharacteristics: null, - // updateStrains: function(selection) { - // this.set('selectedStrains', selection); - // this.attrs['update-strains'](this.get('selectedStrains')); - // }, + updateStrains: function(selection) { + this.set('selectedStrains', selection); + this.attrs["update-strains"](selection); + }, updateCharacteristics: function(selection) { this.set('selectedCharacteristics', selection); @@ -38,11 +38,11 @@ export default Component.extend({ strains.forEach((strain) => { strain_ids.push(strain.get('id')); }); - this.updateStrains(strain_ids.join(",")); + this.updateStrains(strain_ids); }, deselectAllStrains: function() { - this.updateStrains(""); + this.updateStrains([]); }, selectAllCharacteristics: function() { @@ -59,8 +59,7 @@ export default Component.extend({ }, updateStrainSelection: function(selection) { - this.set('selectedStrains', selection); - this.attrs["update-strains"](selection); + this.updateStrains(selection); }, }, }); From 6f15bc940d117f6e61392ba6f6054ef291a302ab Mon Sep 17 00:00:00 2001 From: Matthew Dillon Date: Thu, 12 Nov 2015 16:39:02 -0700 Subject: [PATCH 4/5] Add characteristics. Select All blocks for way too long. --- app/pods/protected/compare/select-form/component.js | 10 +++++++--- app/pods/protected/compare/select-form/template.hbs | 12 ++++++------ 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/app/pods/protected/compare/select-form/component.js b/app/pods/protected/compare/select-form/component.js index 9c1687d..6c7d0ae 100644 --- a/app/pods/protected/compare/select-form/component.js +++ b/app/pods/protected/compare/select-form/component.js @@ -20,7 +20,7 @@ export default Component.extend({ updateCharacteristics: function(selection) { this.set('selectedCharacteristics', selection); - this.attrs['update-characteristics'](this.get('selectedCharacteristics')); + this.attrs['update-characteristics'](selection); }, actions: { @@ -51,15 +51,19 @@ export default Component.extend({ chars.forEach((char) => { char_ids.push(char.get('id')); }); - this.updateCharacteristics(char_ids.join(",")); + this.updateCharacteristics(char_ids); }, deselectAllCharacteristics: function() { - this.updateCharacteristics(""); + this.updateCharacteristics([]); }, updateStrainSelection: function(selection) { this.updateStrains(selection); }, + + updateCharacteristicSelection: function(selection) { + this.updateCharacteristics(selection); + }, }, }); diff --git a/app/pods/protected/compare/select-form/template.hbs b/app/pods/protected/compare/select-form/template.hbs index 5068a7c..6bf7985 100644 --- a/app/pods/protected/compare/select-form/template.hbs +++ b/app/pods/protected/compare/select-form/template.hbs @@ -25,13 +25,13 @@
  • {{ - select-2 + x-select + listItems=characteristics + nameAttr="characteristicName" + update=(action "updateCharacteristicSelection") + placeholder="Select one ore more characteristics" multiple=true - content=characteristics - value=selectedCharacteristics - optionValuePath="id" - optionLabelPath="characteristicName" - placeholder="Select one or more characteristics" + selected=selectedCharacteristics }}
  • From f0167c858d9bd057cd7761fc3cef9b55389845c9 Mon Sep 17 00:00:00 2001 From: Matthew Dillon Date: Fri, 13 Nov 2015 08:16:53 -0700 Subject: [PATCH 5/5] Checkin. From what I can tell, the bottleneck is in selectize itself. Will drop this and work on select2. --- app/pods/components/x-select/component.js | 31 +++++++------------ app/pods/protected/compare/controller.js | 2 ++ .../compare/select-form/component.js | 5 --- 3 files changed, 14 insertions(+), 24 deletions(-) diff --git a/app/pods/components/x-select/component.js b/app/pods/components/x-select/component.js index e4274b6..129b943 100644 --- a/app/pods/components/x-select/component.js +++ b/app/pods/components/x-select/component.js @@ -17,41 +17,34 @@ export default Component.extend({ ], change: function() { - this.attrs["update"](this.get('selectize').getValue()); + this.attrs["update"](this.$()[0].selectize.getValue()); }, didReceiveAttrs: function() { this._super(...arguments); + console.log('didReceiveAttrs'); if (!this.attrs.update) { throw new Error(`You must provide an \`update\` action.`); } + + Ember.run.schedule('actions', this, () => { + console.log('before adding'); + this.$()[0].selectize.setValue(this.get('selected'), true); + console.log('after adding') + }); }, didInsertElement: function() { - this._super(...arguments); - - this.$().selectize({ + console.log('didInsertElement'); + const options = { closeAfterSelect: true, selectOnTab: true, plugins: ['drag_drop'], items: this.get('selected'), - }); - - this.set('selectize', this.$()[0].selectize); - }, - - didRender: function() { - this._super(...arguments); - - const selected = this.get('selected'); - if (!isEmpty(selected)) { - this.get('selected').forEach((item) => { - this.get('selectize').addItem(item, true); - }); - } else { - this.get('selectize').clear(true); } + + this.$().selectize(options); }, }); diff --git a/app/pods/protected/compare/controller.js b/app/pods/protected/compare/controller.js index 0ba05a4..7e0d72d 100644 --- a/app/pods/protected/compare/controller.js +++ b/app/pods/protected/compare/controller.js @@ -12,10 +12,12 @@ export default Controller.extend({ }, updateStrainSelection: function(selection) { + console.log(selection); this.set('selectedStrains', selection); }, updateCharacteristicSelection: function(selection) { + console.log(selection); this.set('selectedCharacteristics', selection); }, } diff --git a/app/pods/protected/compare/select-form/component.js b/app/pods/protected/compare/select-form/component.js index 6c7d0ae..8c90170 100644 --- a/app/pods/protected/compare/select-form/component.js +++ b/app/pods/protected/compare/select-form/component.js @@ -10,16 +10,11 @@ export default Component.extend({ "update-strains": null, "update-characteristics": null, - selectedStrains: null, - selectedCharacteristics: null, - updateStrains: function(selection) { - this.set('selectedStrains', selection); this.attrs["update-strains"](selection); }, updateCharacteristics: function(selection) { - this.set('selectedCharacteristics', selection); this.attrs['update-characteristics'](selection); },