diff --git a/app/assets/javascripts/admin/addon/components/simple-list.js b/app/assets/javascripts/admin/addon/components/simple-list.js index 96136c98e2..46b8691e39 100644 --- a/app/assets/javascripts/admin/addon/components/simple-list.js +++ b/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) diff --git a/app/assets/javascripts/admin/addon/components/value-list.js b/app/assets/javascripts/admin/addon/components/value-list.js index 2daacfd8a4..57197548cb 100644 --- a/app/assets/javascripts/admin/addon/components/value-list.js +++ b/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); diff --git a/app/assets/javascripts/admin/addon/templates/components/simple-list.hbs b/app/assets/javascripts/admin/addon/templates/components/simple-list.hbs index ab94ad2e39..fab64bc92d 100644 --- a/app/assets/javascripts/admin/addon/templates/components/simple-list.hbs +++ b/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}} + {{/each}} + {{/if}} diff --git a/app/assets/javascripts/admin/addon/templates/components/value-list.hbs b/app/assets/javascripts/admin/addon/templates/components/value-list.hbs index 94b1d12325..518922c965 100644 --- a/app/assets/javascripts/admin/addon/templates/components/value-list.hbs +++ b/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}} {{/each}} diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index cfe46e0842..12489ab12e 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/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;