diff --git a/README.md b/README.md index c6d35f6..099d7dc 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,10 @@ Its usage should be very similar to `Ember.Select`, but with additional features selection Ember-selectize will set this property to the selection that was made. Usually some property on a model, for example. If multiple is true, then it should be an array. + + updateSelection + Ember-selectize will update the bound options when you select-item/add-item/remove-item. Setting this option to false will prevent selectize from updating the selection directly. The default value for updateSelection starts as true so override with false. Example: false + value Ember-selectize will set this property to the *value of the selection* that was made. It is not currently supported in multiple selection mode. diff --git a/addon/components/ember-selectize.js b/addon/components/ember-selectize.js index a759975..64b63eb 100644 --- a/addon/components/ember-selectize.js +++ b/addon/components/ember-selectize.js @@ -20,6 +20,7 @@ export default Ember.Component.extend({ autocomplete: 'off', multiple: false, + updateSelection: true, maxItems: computed('multiple', function() { return this.get('multiple') ? null : 1; }), @@ -200,6 +201,7 @@ export default Ember.Component.extend({ } var options = { + updateSelection: this.get('updateSelection'), plugins: this.plugins, labelField: 'label', valueField: 'value', @@ -364,7 +366,10 @@ export default Ember.Component.extend({ * In addition to emitting the selection object, a selection value is sent via `select-value` based on `optionValuePath` */ _updateSelection(selection) { - this.set('selection', selection); + var updateSelection = this.get('updateSelection'); + if(updateSelection) { + this.set('selection', selection); + } // allow the observers and computed properties to run first Ember.run.schedule('actions', this, function() { @@ -378,7 +383,10 @@ export default Ember.Component.extend({ var _valuePath = this.get('_valuePath'); var val = Ember.get(obj, _valuePath); - this.get('selection').addObject(obj); + var updateSelection = this.get('updateSelection'); + if(updateSelection) { + this.get('selection').addObject(obj); + } Ember.run.schedule('actions', this, function() { this.sendAction('add-item', obj); @@ -390,7 +398,10 @@ export default Ember.Component.extend({ let _valuePath = this.get('_valuePath'); let val = Ember.get(obj, _valuePath); - this.get('selection').removeObject(obj); + var updateSelection = this.get('updateSelection'); + if(updateSelection) { + this.get('selection').removeObject(obj); + } Ember.run.schedule('actions', this, function() { this.sendAction('remove-item', obj); diff --git a/package.json b/package.json index 50e2fa4..bafc893 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "ember-cli-content-security-policy": "0.4.0", "ember-cli-dependency-checker": "^1.0.0", "ember-cli-htmlbars": "0.7.9", - "ember-cli-htmlbars-inline-precompile": "^0.1.1", + "ember-cli-htmlbars-inline-precompile": "^0.2.0", "ember-cli-ic-ajax": "0.2.1", "ember-cli-inject-live-reload": "^1.3.0", "ember-cli-qunit": "0.3.15", diff --git a/tests/dummy/app/components/issue-detail-multi.js b/tests/dummy/app/components/issue-detail-multi.js new file mode 100644 index 0000000..86e5a56 --- /dev/null +++ b/tests/dummy/app/components/issue-detail-multi.js @@ -0,0 +1,12 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + actions: { + add: function() { + //do nothing here on purpose + }, + remove: function() { + //do nothing here on purpose + } + } +}); diff --git a/tests/dummy/app/components/issue-detail.js b/tests/dummy/app/components/issue-detail.js new file mode 100644 index 0000000..0044e61 --- /dev/null +++ b/tests/dummy/app/components/issue-detail.js @@ -0,0 +1,10 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + actions: { + selected: function(status) { + let issue = this.get('model'); + issue.change_collection(status.get('id')); + } + } +}); diff --git a/tests/dummy/app/models/issue.js b/tests/dummy/app/models/issue.js new file mode 100644 index 0000000..7f34d5b --- /dev/null +++ b/tests/dummy/app/models/issue.js @@ -0,0 +1,17 @@ +import Ember from 'ember'; + +var Issue = Ember.Object.extend({ + subject: '', + init: function() { + this.collection = Ember.A([]); + }, + change_collection: function(the_status_id) { + let issue_id = this.get('id'); + if(the_status_id) { + let collection = this.get('collection') || []; + this.set('collection', collection.concat(issue_id)); + } + } +}); + +export default Issue; diff --git a/tests/dummy/app/models/status.js b/tests/dummy/app/models/status.js new file mode 100644 index 0000000..f474494 --- /dev/null +++ b/tests/dummy/app/models/status.js @@ -0,0 +1,7 @@ +import Ember from 'ember'; + +var Status = Ember.Object.extend({ + name: '' +}); + +export default Status; diff --git a/tests/dummy/app/templates/components/issue-detail-multi.hbs b/tests/dummy/app/templates/components/issue-detail-multi.hbs new file mode 100644 index 0000000..3b72110 --- /dev/null +++ b/tests/dummy/app/templates/components/issue-detail-multi.hbs @@ -0,0 +1,13 @@ +{{ember-selectize + required=true + updateSelection=false + multiple=true + content=statuses + optionValuePath="content.id" + optionLabelPath="content.name" + selection=model.collection + add-item="add" + remove-item="remove" + class="x-status-select" + placeholder="select one status" +}} diff --git a/tests/dummy/app/templates/components/issue-detail.hbs b/tests/dummy/app/templates/components/issue-detail.hbs new file mode 100644 index 0000000..e08add8 --- /dev/null +++ b/tests/dummy/app/templates/components/issue-detail.hbs @@ -0,0 +1,10 @@ +{{ember-selectize + content=statuses + updateSelection=false + optionValuePath="content.id" + optionLabelPath="content.name" + selection=model.collection + select-item="selected" + class="x-status-select" + placeholder="select one status" +}} diff --git a/tests/integration/components/issue-detail-test.js b/tests/integration/components/issue-detail-test.js new file mode 100644 index 0000000..e75f141 --- /dev/null +++ b/tests/integration/components/issue-detail-test.js @@ -0,0 +1,63 @@ +import Ember from 'ember'; +import hbs from 'htmlbars-inline-precompile'; +import { moduleForComponent, test } from 'ember-qunit'; +import Issue from 'dummy/models/issue'; +import Status from 'dummy/models/status'; + +let issue, one, two, statuses; + +moduleForComponent('issue-detail', 'integration: issue-detail test', { + integration: true, + setup() { + issue = Issue.create({id: 1, subject: 'Broken'}); + one = Status.create({id: 8, name: 'Open', issues: []}); + two = Status.create({id: 9, name: 'Closed', issues: [1]}); + statuses = Ember.A([one, two]); + } +}); + +test('select-item will not modify the selection when updateSelection is false', function(assert) { + this.set('model', issue); + this.set('statuses', statuses); + this.render(hbs`{{issue-detail model=model statuses=statuses}}`); + let selector = 'select.x-status-select:eq(0) + .selectize-control'; + let $component = this.$(selector); + assert.equal($component.find('div.item').length, 0); + assert.equal($component.find('div.option').length, 2); + this.$(`${selector} > .selectize-input`).trigger('click'); + Ember.run(() => { + this.$(`${selector} > .selectize-dropdown div.option:eq(0)`).trigger('click').trigger('change'); + }); + assert.equal(issue.get('collection.length'), 1); + assert.equal(issue.get('collection')[0], 1); +}); + +test('add-item will not modify the selection when updateSelection is false', function(assert) { + this.set('model', issue); + this.set('statuses', statuses); + this.render(hbs`{{issue-detail-multi model=model statuses=statuses}}`); + let selector = 'select.x-status-select:eq(0) + .selectize-control'; + let $component = this.$(selector); + assert.equal($component.find('div.item').length, 0); + assert.equal($component.find('div.option').length, 2); + this.$(`${selector} > .selectize-input`).trigger('click'); + Ember.run(() => { + this.$(`${selector} > .selectize-dropdown div.option:eq(0)`).trigger('click').trigger('change'); + }); + assert.equal(issue.get('collection.length'), 0); +}); + +test('remove-item will not modify the selection when updateSelection is false', function(assert) { + issue.set('collection', Ember.A([one])); + this.set('model', issue); + this.set('statuses', statuses); + this.render(hbs`{{issue-detail-multi model=model statuses=statuses}}`); + let selector = 'select.x-status-select:eq(0) + .selectize-control'; + let $component = this.$(selector); + assert.equal($component.find('div.item').length, 1); + assert.equal($component.find('div.option').length, 1); + Ember.run(() => { + $component.find('div.item .remove').trigger('click').trigger('change'); + }); + assert.equal(issue.get('collection.length'), 1); +});