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..129b943
--- /dev/null
+++ b/app/pods/components/x-select/component.js
@@ -0,0 +1,50 @@
+import Ember from 'ember';
+
+const { Component, isEmpty } = Ember;
+
+export default Component.extend({
+ tagName: 'select',
+
+ nameAttr: null,
+ listItems: null,
+ placeholder: null,
+ selected: null,
+ selectize: null,
+ multiple: false,
+
+ attributeBindings: [
+ 'multiple',
+ ],
+
+ change: function() {
+ 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() {
+ console.log('didInsertElement');
+ const options = {
+ closeAfterSelect: true,
+ selectOnTab: true,
+ plugins: ['drag_drop'],
+ items: this.get('selected'),
+ }
+
+ this.$().selectize(options);
+ },
+
+});
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/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/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..8c90170 100644
--- a/app/pods/protected/compare/select-form/component.js
+++ b/app/pods/protected/compare/select-form/component.js
@@ -10,17 +10,12 @@ 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'](this.get('selectedStrains'));
+ this.attrs["update-strains"](selection);
},
updateCharacteristics: function(selection) {
- this.set('selectedCharacteristics', selection);
- this.attrs['update-characteristics'](this.get('selectedCharacteristics'));
+ this.attrs['update-characteristics'](selection);
},
actions: {
@@ -38,11 +33,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() {
@@ -51,11 +46,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 61a07a5..6bf7985 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
}}
@@ -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
}}
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();
};