64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
|
import { Controller } from "@hotwired/stimulus"
|
||
|
|
import { showToast } from "../services/toast";
|
||
|
|
|
||
|
|
export default class PagelistController extends Controller {
|
||
|
|
static values = {
|
||
|
|
siteId: Number,
|
||
|
|
};
|
||
|
|
|
||
|
|
static targets = ["list"];
|
||
|
|
|
||
|
|
dragStart(ev) {
|
||
|
|
this.draggedRow = ev.currentTarget;
|
||
|
|
ev.currentTarget.classList.add("opacity-50");
|
||
|
|
ev.dataTransfer.effectAllowed = "move";
|
||
|
|
}
|
||
|
|
|
||
|
|
dragOver(ev) {
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.dataTransfer.dropEffect = "move";
|
||
|
|
}
|
||
|
|
|
||
|
|
drop(ev) {
|
||
|
|
ev.preventDefault();
|
||
|
|
const targetRow = ev.currentTarget;
|
||
|
|
if (this.draggedRow && this.draggedRow !== targetRow) {
|
||
|
|
const rows = [...this.listTarget.children];
|
||
|
|
const draggedIdx = rows.indexOf(this.draggedRow);
|
||
|
|
const targetIdx = rows.indexOf(targetRow);
|
||
|
|
if (draggedIdx < targetIdx) {
|
||
|
|
targetRow.after(this.draggedRow);
|
||
|
|
} else {
|
||
|
|
targetRow.before(this.draggedRow);
|
||
|
|
}
|
||
|
|
this.saveOrder();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
dragEnd(ev) {
|
||
|
|
ev.currentTarget.classList.remove("opacity-50");
|
||
|
|
this.draggedRow = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
async saveOrder() {
|
||
|
|
const rows = [...this.listTarget.children];
|
||
|
|
const pageIds = rows.map(row => parseInt(row.dataset.pageId, 10));
|
||
|
|
|
||
|
|
try {
|
||
|
|
await fetch(`/sites/${this.siteIdValue}/pages/reorder`, {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
"Accept": "application/json",
|
||
|
|
},
|
||
|
|
body: JSON.stringify({ page_ids: pageIds }),
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
showToast({
|
||
|
|
title: "Error",
|
||
|
|
body: "Failed to reorder pages.",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|