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:
Ursprung
247f7ca466
Commit
911a47db28
3 geänderte Dateien mit 31 neuen und 28 gelöschten Zeilen
|
@ -1,15 +1,10 @@
|
||||||
import {
|
import discourseComputed from "discourse-common/utils/decorators";
|
||||||
default as discourseComputed,
|
|
||||||
observes,
|
|
||||||
on,
|
|
||||||
} from "discourse-common/utils/decorators";
|
|
||||||
import { generateName } from "../lib/wizard";
|
import { generateName } from "../lib/wizard";
|
||||||
import {
|
import {
|
||||||
setWizardDefaults,
|
setWizardDefaults,
|
||||||
default as wizardSchema,
|
default as wizardSchema,
|
||||||
} from "../lib/wizard-schema";
|
} from "../lib/wizard-schema";
|
||||||
import { notEmpty } from "@ember/object/computed";
|
import { notEmpty } from "@ember/object/computed";
|
||||||
import { scheduleOnce } from "@ember/runloop";
|
|
||||||
import EmberObject from "@ember/object";
|
import EmberObject from "@ember/object";
|
||||||
import Component from "@ember/component";
|
import Component from "@ember/component";
|
||||||
import { A } from "@ember/array";
|
import { A } from "@ember/array";
|
||||||
|
@ -19,28 +14,12 @@ export default Component.extend({
|
||||||
items: A(),
|
items: A(),
|
||||||
anyLinks: notEmpty("links"),
|
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) {
|
updateItemOrder(itemId, newIndex) {
|
||||||
const items = this.items;
|
const items = this.items;
|
||||||
const item = items.findBy("id", itemId);
|
const item = items.findBy("id", itemId);
|
||||||
items.removeObject(item);
|
items.removeObject(item);
|
||||||
item.set("index", newIndex);
|
item.set("index", newIndex);
|
||||||
items.insertAt(newIndex, item);
|
items.insertAt(newIndex, item);
|
||||||
scheduleOnce("afterRender", this, () => this.applySortable());
|
|
||||||
},
|
},
|
||||||
|
|
||||||
@discourseComputed("itemType")
|
@discourseComputed("itemType")
|
||||||
|
@ -58,7 +37,7 @@ export default Component.extend({
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
return items.map((item) => {
|
return items.map((item, index) => {
|
||||||
if (item) {
|
if (item) {
|
||||||
let link = {
|
let link = {
|
||||||
id: item.id,
|
id: item.id,
|
||||||
|
@ -77,6 +56,15 @@ export default Component.extend({
|
||||||
}
|
}
|
||||||
|
|
||||||
link.classes = classes;
|
link.classes = classes;
|
||||||
|
link.index = index;
|
||||||
|
|
||||||
|
if (index === 0) {
|
||||||
|
link.first = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (index === items.length - 1) {
|
||||||
|
link.last = true;
|
||||||
|
}
|
||||||
|
|
||||||
return link;
|
return link;
|
||||||
}
|
}
|
||||||
|
@ -118,6 +106,14 @@ export default Component.extend({
|
||||||
this.set("current", newItem);
|
this.set("current", newItem);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
back(item) {
|
||||||
|
this.updateItemOrder(item.id, item.index - 1);
|
||||||
|
},
|
||||||
|
|
||||||
|
forward(item) {
|
||||||
|
this.updateItemOrder(item.id, item.index + 1);
|
||||||
|
},
|
||||||
|
|
||||||
change(itemId) {
|
change(itemId) {
|
||||||
this.set("current", this.items.findBy("id", itemId));
|
this.set("current", this.items.findBy("id", itemId));
|
||||||
},
|
},
|
||||||
|
|
|
@ -2,10 +2,16 @@
|
||||||
|
|
||||||
<div class="link-list">
|
<div class="link-list">
|
||||||
{{#if anyLinks}}
|
{{#if anyLinks}}
|
||||||
{{#each links as |l|}}
|
{{#each links as |link|}}
|
||||||
<div data-id={{l.id}}>
|
<div data-id={{link.id}}>
|
||||||
{{d-button action="change" actionParam=l.id translatedLabel=l.label class=l.classes}}
|
{{d-button action="change" actionParam=link.id translatedLabel=link.label class=link.classes}}
|
||||||
{{d-button action="remove" actionParam=l.id icon="times" class="remove"}}
|
{{#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>
|
</div>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
# frozen_string_literal: true
|
# frozen_string_literal: true
|
||||||
# name: discourse-custom-wizard
|
# name: discourse-custom-wizard
|
||||||
# about: Create custom wizards
|
# about: Create custom wizards
|
||||||
# version: 0.8.0
|
# version: 0.8.1
|
||||||
# authors: Angus McLeod
|
# authors: Angus McLeod
|
||||||
# url: https://github.com/paviliondev/discourse-custom-wizard
|
# url: https://github.com/paviliondev/discourse-custom-wizard
|
||||||
# contact emails: angus@thepavilion.io
|
# contact emails: angus@thepavilion.io
|
||||||
|
@ -33,6 +33,7 @@ if respond_to?(:register_svg_icon)
|
||||||
register_svg_icon "chevron-right"
|
register_svg_icon "chevron-right"
|
||||||
register_svg_icon "chevron-left"
|
register_svg_icon "chevron-left"
|
||||||
register_svg_icon "save"
|
register_svg_icon "save"
|
||||||
|
register_svg_icon "arrow-right"
|
||||||
end
|
end
|
||||||
|
|
||||||
class ::Sprockets::DirectiveProcessor
|
class ::Sprockets::DirectiveProcessor
|
||||||
|
|
Laden …
In neuem Issue referenzieren