IMPROVE: Remove sortable and add manual step and field sorting (#135)

* IMPROVE: Remove sortable and add manual step and field sorting

* Apply eslint

* Apply prettier

assets/javascripts/discourse/components/wizard-links.js.es6

@@ -1,15 +1,10 @@
-import {
-  default as discourseComputed,
-  observes,
-  on,
-} from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import { generateName } from "../lib/wizard";
 import {
   setWizardDefaults,
   default as wizardSchema,
 } from "../lib/wizard-schema";
 import { notEmpty } from "@ember/object/computed";
-import { scheduleOnce } from "@ember/runloop";
 import EmberObject from "@ember/object";
 import Component from "@ember/component";
 import { A } from "@ember/array";
@@ -19,28 +14,12 @@ export default Component.extend({
   items: A(),
   anyLinks: notEmpty("links"),
 
-  @on("didInsertElement")
-  @observes("links.[]")
-  setupSortable() {
-    scheduleOnce("afterRender", () => this.applySortable());
-  },
-
-  applySortable() {
-    $(this.element)
-      .find(".link-list")
-      .sortable({ tolerance: "pointer" })
-      .on("sortupdate", (e, ui) => {
-        this.updateItemOrder(ui.item.data("id"), ui.item.index());
-      });
-  },
-
   updateItemOrder(itemId, newIndex) {
     const items = this.items;
     const item = items.findBy("id", itemId);
     items.removeObject(item);
     item.set("index", newIndex);
     items.insertAt(newIndex, item);
-    scheduleOnce("afterRender", this, () => this.applySortable());
   },
 
   @discourseComputed("itemType")
@@ -58,7 +37,7 @@ export default Component.extend({
       return;
     }
 
-    return items.map((item) => {
+    return items.map((item, index) => {
       if (item) {
         let link = {
           id: item.id,
@@ -77,6 +56,15 @@ export default Component.extend({
         }
 
         link.classes = classes;
+        link.index = index;
+
+        if (index === 0) {
+          link.first = true;
+        }
+
+        if (index === items.length - 1) {
+          link.last = true;
+        }
 
         return link;
       }
@@ -118,6 +106,14 @@ export default Component.extend({
       this.set("current", newItem);
     },
 
+    back(item) {
+      this.updateItemOrder(item.id, item.index - 1);
+    },
+
+    forward(item) {
+      this.updateItemOrder(item.id, item.index + 1);
+    },
+
     change(itemId) {
       this.set("current", this.items.findBy("id", itemId));
     },

assets/javascripts/discourse/templates/components/wizard-links.hbs

@@ -2,10 +2,16 @@
 
 <div class="link-list">
   {{#if anyLinks}}
-    {{#each links as |l|}}
-      <div data-id={{l.id}}>
-        {{d-button action="change" actionParam=l.id translatedLabel=l.label class=l.classes}}
-        {{d-button action="remove" actionParam=l.id icon="times" class="remove"}}
+    {{#each links as |link|}}
+      <div data-id={{link.id}}>
+        {{d-button action="change" actionParam=link.id translatedLabel=link.label class=link.classes}}
+        {{#unless link.first}}
+          {{d-button action="back" actionParam=link icon="arrow-left" class="back"}}
+        {{/unless}}
+        {{#unless link.last}}
+          {{d-button action="forward" actionParam=link icon="arrow-right" class="forward"}}
+        {{/unless}}
+        {{d-button action="remove" actionParam=link.id icon="times" class="remove"}}
       </div>
     {{/each}}
   {{/if}}

plugin.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 # name: discourse-custom-wizard
 # about: Create custom wizards
-# version: 0.8.0
+# version: 0.8.1
 # authors: Angus McLeod
 # url: https://github.com/paviliondev/discourse-custom-wizard
 # contact emails: angus@thepavilion.io
@@ -33,6 +33,7 @@ if respond_to?(:register_svg_icon)
   register_svg_icon "chevron-right"
   register_svg_icon "chevron-left"
   register_svg_icon "save"
+  register_svg_icon "arrow-right"
 end
 
 class ::Sprockets::DirectiveProcessor