From 716032f11887e89800400b25dd42e8231e334f64 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 26 Oct 2015 16:02:28 +0000
Subject: [PATCH] Drag-n-drop re-ordering of tags in post settings menu

refs #5976
- adds `onChange` handler to `gh-selectize` component to update the `selection` property when selectize's value is changed (eg, by the drag_drop plugin updating the order)
- adds the `drag_drop` plugin to the list of selectize plugins used by the tags input on the post settings menu
---
 core/client/app/components/gh-selectize.js    | 39 +++++++++++++++++++
 .../app/templates/post-settings-menu.hbs      |  3 +-
 .../unit/components/gh-selectize-test.js      | 39 +++++++++++++++++++
 3 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 core/client/tests/unit/components/gh-selectize-test.js

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"}}
             </div>
 
             {{#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']);
+        });
+    }
+);