1
0
Fork 0

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
Dieser Commit ist enthalten in:
Angus McLeod 2021-07-20 15:32:18 +08:00 committet von GitHub
Ursprung 247f7ca466
Commit 911a47db28
Es konnte kein GPG-Schlüssel zu dieser Signatur gefunden werden
GPG-Schlüssel-ID: 4AEE18F83AFDEB23
3 geänderte Dateien mit 31 neuen und 28 gelöschten Zeilen

Datei anzeigen

@ -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));
},

Datei anzeigen

@ -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}}

Datei anzeigen

@ -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