FEATURE: Ability to re-order value lists (#15775)

Adds up and down buttons next to the inputs of value lists when there is more than 1 item present. This helps to re-order the items in the value lists if necessary.

app/assets/javascripts/admin/addon/components/simple-list.js

@@ -1,7 +1,7 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
 import { empty } from "@ember/object/computed";
-import { on } from "discourse-common/utils/decorators";
+import discourseComputed, { on } from "discourse-common/utils/decorators";
 
 export default Component.extend({
   classNameBindings: [":simple-list", ":value-list"],
@@ -47,10 +47,32 @@ export default Component.extend({
     this._onChange();
   },
 
+  @action
+  shift(operation, index) {
+    let futureIndex = index + operation;
+
+    if (futureIndex > this.collection.length - 1) {
+      futureIndex = 0;
+    } else if (futureIndex < 0) {
+      futureIndex = this.collection.length - 1;
+    }
+
+    const shiftedValue = this.collection[index];
+    this.collection.removeAt(index);
+    this.collection.insertAt(futureIndex, shiftedValue);
+
+    this._onChange();
+  },
+
   _onChange() {
     this.attrs.onChange && this.attrs.onChange(this.collection);
   },
 
+  @discourseComputed("collection")
+  showUpDownButtons(collection) {
+    return collection.length - 1 ? true : false;
+  },
+
   _splitValues(values, delimiter) {
     return values && values.length
       ? values.split(delimiter || "\n").filter(Boolean)

app/assets/javascripts/admin/addon/components/value-list.js

@@ -59,6 +59,22 @@ export default Component.extend({
     selectChoice(choice) {
       this._addValue(choice);
     },
+
+    shift(operation, index) {
+      let futureIndex = index + operation;
+
+      if (futureIndex > this.collection.length - 1) {
+        futureIndex = 0;
+      } else if (futureIndex < 0) {
+        futureIndex = this.collection.length - 1;
+      }
+
+      const shiftedValue = this.collection[index];
+      this.collection.removeAt(index);
+      this.collection.insertAt(futureIndex, shiftedValue);
+
+      this._saveValues();
+    },
   },
 
   _addValue(value) {
@@ -99,6 +115,11 @@ export default Component.extend({
     this.set("values", this.collection.join(this.inputDelimiter || "\n"));
   },
 
+  @discourseComputed("collection")
+  showUpDownButtons(collection) {
+    return collection.length - 1 ? true : false;
+  },
+
   _splitValues(values, delimiter) {
     if (values && values.length) {
       return values.split(delimiter).filter((x) => x);