fix: attach click event handlers for section delete, move up and move down in editor UI
This commit is contained in:
@@ -140,5 +140,5 @@
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"updated_at": "2026-08-09T22:21:08.945Z"
|
"updated_at": "2026-08-09T22:23:20.633Z"
|
||||||
}
|
}
|
||||||
@@ -822,11 +822,16 @@ const previewUrl = `${targetPage?.slug || "/"}?preview=draft`;
|
|||||||
await fetch("/api/editor/update-section-settings", {
|
await fetch("/api/editor/update-section-settings", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify({ page_id: pageId, section_id: sectionId, settings })
|
body: JSON.stringify({
|
||||||
|
page_id: pageId,
|
||||||
|
section_id: sectionId,
|
||||||
|
settings,
|
||||||
|
}),
|
||||||
});
|
});
|
||||||
if (statusBadge) {
|
if (statusBadge) {
|
||||||
statusBadge.textContent = "Live Synced";
|
statusBadge.textContent = "Live Synced";
|
||||||
statusBadge.className = "text-emerald-400 bg-emerald-950/60 border border-emerald-800/60 px-2 py-0.5 rounded text-[10px] font-mono";
|
statusBadge.className =
|
||||||
|
"text-emerald-400 bg-emerald-950/60 border border-emerald-800/60 px-2 py-0.5 rounded text-[10px] font-mono";
|
||||||
}
|
}
|
||||||
}, 400);
|
}, 400);
|
||||||
});
|
});
|
||||||
@@ -859,6 +864,83 @@ const previewUrl = `${targetPage?.slug || "/"}?preview=draft`;
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Move Up / Move Down / Delete Handlers
|
||||||
|
function getSectionsFromDOM() {
|
||||||
|
const list: any[] = [];
|
||||||
|
document.querySelectorAll('#section-list > div').forEach(card => {
|
||||||
|
const id = card.getAttribute('data-section-id');
|
||||||
|
const type = card.getAttribute('data-section-type');
|
||||||
|
const settings = JSON.parse(card.getAttribute('data-settings') || '{}');
|
||||||
|
list.push({ id, type, settings });
|
||||||
|
});
|
||||||
|
return list;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateSectionsOrder(newSections: any[]) {
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const pageId = urlParams.get('page_id') || 'page_home';
|
||||||
|
const res = await fetch('/api/editor/update-section', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ page_id: pageId, sections: newSections })
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll('.btn-move-up').forEach(btn => {
|
||||||
|
btn.addEventListener('click', async (e: any) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
const sections = getSectionsFromDOM();
|
||||||
|
const card = e.target.closest('[data-section-id]');
|
||||||
|
const sectionId = card.getAttribute('data-section-id');
|
||||||
|
const index = sections.findIndex(s => s.id === sectionId);
|
||||||
|
if (index > 0) {
|
||||||
|
const temp = sections[index];
|
||||||
|
sections[index] = sections[index - 1];
|
||||||
|
sections[index - 1] = temp;
|
||||||
|
await updateSectionsOrder(sections);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.btn-move-down').forEach(btn => {
|
||||||
|
btn.addEventListener('click', async (e: any) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
const sections = getSectionsFromDOM();
|
||||||
|
const card = e.target.closest('[data-section-id]');
|
||||||
|
const sectionId = card.getAttribute('data-section-id');
|
||||||
|
const index = sections.findIndex(s => s.id === sectionId);
|
||||||
|
if (index >= 0 && index < sections.length - 1) {
|
||||||
|
const temp = sections[index];
|
||||||
|
sections[index] = sections[index + 1];
|
||||||
|
sections[index + 1] = temp;
|
||||||
|
await updateSectionsOrder(sections);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.btn-delete-section').forEach(btn => {
|
||||||
|
btn.addEventListener('click', async (e: any) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
const card = e.target.closest('[data-section-id]');
|
||||||
|
const sectionId = card?.getAttribute('data-section-id');
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const pageId = urlParams.get('page_id') || 'page_home';
|
||||||
|
|
||||||
|
const res = await fetch('/api/editor/delete-section', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ page_id: pageId, section_id: sectionId })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Quick Add Widget Button
|
// Quick Add Widget Button
|
||||||
document.querySelectorAll(".btn-quick-add-widget").forEach((btn) => {
|
document.querySelectorAll(".btn-quick-add-widget").forEach((btn) => {
|
||||||
btn.addEventListener("click", async (e: any) => {
|
btn.addEventListener("click", async (e: any) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user