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);

app/assets/javascripts/admin/addon/templates/components/simple-list.hbs

@@ -15,8 +15,23 @@
           class="value-input"
           focus-out=(action "changeValue" index)
         }}
+
+        {{#if showUpDownButtons}}
+          {{d-button
+            action=(action "shift" -1 index)
+            icon="arrow-up"
+            class="shift-up-value-btn btn-small"
+          }}
+          {{d-button
+            action=(action "shift" 1 index)
+            icon="arrow-down"
+            class="shift-down-value-btn btn-small"
+          }}
+        {{/if}}
       </div>
+
     {{/each}}
+
   </div>
 {{/if}}
 

app/assets/javascripts/admin/addon/templates/components/value-list.hbs

@@ -15,6 +15,19 @@
           class="value-input"
           focus-out=(action "changeValue" index)
         }}
+
+        {{#if showUpDownButtons}}
+          {{d-button
+            action=(action "shift" -1 index)
+            icon="arrow-up"
+            class="shift-up-value-btn btn-small"
+          }}
+          {{d-button
+            action=(action "shift" 1 index)
+            icon="arrow-down"
+            class="shift-down-value-btn btn-small"
+          }}
+        {{/if}}
       </div>
     {{/each}}
   </div>

app/assets/stylesheets/common/admin/admin_base.scss

@@ -856,6 +856,19 @@ table#user-badges {
       @include value-btn;
       margin-right: 0.25em;
     }
+
+    .shift-up-value-btn,
+    .shift-down-value-btn {
+      display: none;
+      margin-inline: 0.25em;
+    }
+
+    &:hover {
+      .shift-up-value-btn,
+      .shift-down-value-btn {
+        display: block;
+      }
+    }
   }
   .values {
     margin-bottom: 0.5em;