diff --git a/core/client/app/components/gh-selectize.js b/core/client/app/components/gh-selectize.js index 5286ac33ad..fedda43960 100644 --- a/core/client/app/components/gh-selectize.js +++ b/core/client/app/components/gh-selectize.js @@ -3,6 +3,14 @@ import EmberSelectizeComponent from 'ember-cli-selectize/components/ember-select export default EmberSelectizeComponent.extend({ + selectizeOptions: Ember.computed(function () { + const options = this._super(...arguments); + + options.onChange = Ember.run.bind(this, '_onChange'); + + return options; + }), + _dontOpenWhenBlank: Ember.on('didInsertElement', function () { var openOnFocus = this.get('openOnFocus'); @@ -59,6 +67,37 @@ export default EmberSelectizeComponent.extend({ this.sendAction('add-item', obj); this.sendAction('add-value', val); }); + }, + + _onChange: function (args) { + const selection = Ember.get(this, 'selection'), + valuePath = Ember.get(this, '_valuePath'); + + if (!args || !selection || !Ember.isArray(selection) || args.length !== selection.length) { + return; + } + + let hasNoChanges = selection.every(function (obj, idx) { + return Ember.get(obj, valuePath) === args[idx]; + }); + + if (hasNoChanges) { + return; + } + + let reorderedSelection = Ember.A([]); + + args.forEach(function (value) { + const obj = selection.find(function (item) { + return (Ember.get(item, valuePath) + '') === value; + }); + + if (obj) { + reorderedSelection.addObject(obj); + } + }); + + this.set('selection', reorderedSelection); } }); diff --git a/core/client/app/templates/post-settings-menu.hbs b/core/client/app/templates/post-settings-menu.hbs index c4a975691e..6c382e4b26 100644 --- a/core/client/app/templates/post-settings-menu.hbs +++ b/core/client/app/templates/post-settings-menu.hbs @@ -45,7 +45,8 @@ optionLabelPath="content.name" openOnFocus=false create-item="addTag" - remove-item="removeTag"}} + remove-item="removeTag" + plugins="remove_button, drag_drop"}} {{#unless session.user.isAuthor}} diff --git a/core/client/tests/unit/components/gh-selectize-test.js b/core/client/tests/unit/components/gh-selectize-test.js new file mode 100644 index 0000000000..34024a8717 --- /dev/null +++ b/core/client/tests/unit/components/gh-selectize-test.js @@ -0,0 +1,39 @@ +/* jshint expr:true */ +import { expect } from 'chai'; +import { + describeComponent, + it +} from 'ember-mocha'; +import Ember from 'ember'; + +const {run} = Ember; + +describeComponent( + 'gh-selectize', + 'Unit: Component: gh-selectize', + { + // Specify the other units that are required for this test + // needs: ['component:foo', 'helper:bar'], + unit: true + }, + function () { + it('re-orders selection when selectize order is changed', function () { + const component = this.subject(); + + run(() => { + component.set('content', Ember.A(['item 1', 'item 2', 'item 3'])); + component.set('selection', Ember.A(['item 2', 'item 3'])); + component.set('multiple', true); + }); + + this.render(); + + run(() => { + component._selectize.setValue(['item 3', 'item 2']); + }); + + expect(component.get('value'), 'component value').to.deep.equal(['item 3', 'item 2']); + expect(component.get('selection'), 'component selection').to.deep.equal(['item 3', 'item 2']); + }); + } +);