import { default as discourseComputed, observes, on, } 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"; export default Component.extend({ classNameBindings: [":wizard-links", "itemType"], 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") header: (itemType) => `admin.wizard.${itemType}.header`, @discourseComputed( "current", "items.@each.id", "items.@each.type", "items.@each.label", "items.@each.title" ) links(current, items) { if (!items) { return; } return items.map((item) => { if (item) { let link = { id: item.id, }; let label = item.label || item.title || item.id; if (this.generateLabels && item.type) { label = generateName(item.type); } link.label = `${label} (${item.id})`; let classes = "btn"; if (current && item.id === current.id) { classes += " btn-primary"; } link.classes = classes; return link; } }); }, actions: { add() { const items = this.get("items"); const itemType = this.itemType; let params = setWizardDefaults({}, itemType); params.isNew = true; let index = 0; if (items.length) { index = items.length; } params.index = index; let id = `${itemType}_${index + 1}`; if (itemType === "field") { id = `${this.parentId}_${id}`; } params.id = id; let objectArrays = wizardSchema[itemType].objectArrays; if (objectArrays) { Object.keys(objectArrays).forEach((objectType) => { params[objectArrays[objectType].property] = A(); }); } const newItem = EmberObject.create(params); items.pushObject(newItem); this.set("current", newItem); }, change(itemId) { this.set("current", this.items.findBy("id", itemId)); }, remove(itemId) { const items = this.items; let item; let index; items.forEach((it, ind) => { if (it.id === itemId) { item = it; index = ind; } }); let nextIndex; if (this.current.id === itemId) { nextIndex = index < items.length - 2 ? index + 1 : index - 1; } items.removeObject(item); if (nextIndex) { this.set("current", items[nextIndex]); } }, }, });