Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2026-02-05 02:55:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

started content edit rework

Browse Source
This commit is contained in:
Simon Martens
2026-01-21 18:11:58 +01:00
parent 490738810b
commit 5a830f9176
20 changed files with 639 additions and 1231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

567
views/routes/almanach/contents/edit/body.gohtml
View File

@@ -5,13 +5,13 @@
<div class="flex flex-row w-full justify-between">
<div class="flex flex-col justify-end-safe flex-2/5">
<div class="mb-1">
<i class="ri-file-list-3-line"></i> Inhalte
<i class="ri-file-list-3-line"></i> Beiträge
</div>
<h1 class="text-2xl w-full font-bold text-slate-900 mb-1">
{{- if $model.result -}}
{{- $model.result.Entry.PreferredTitle -}}
{{- else -}}
Inhalte bearbeiten
Beiträge bearbeiten
{{- end -}}
</h1>
{{- if $model.result -}}
@@ -127,10 +127,6 @@
<i class="ri-loader-4-line spinning mr-2"></i>
Reihenfolge wird gespeichert
</div>
<div id="contents-htmx-indicator" class="fixed right-6 bottom-16 z-50 hidden rounded-full bg-stone-200 px-3 py-2 text-sm text-stone-700 shadow-md">
<i class="ri-loader-4-line spinning mr-2"></i>
<span data-role="contents-htmx-label">Eintrag wird geladen</span>
</div>
<input type="hidden" name="csrf_token" value="{{ $model.csrf_token }}" data-role="csrf-token" />
<div class="flex items-center gap-3 px-4">
<form
@@ -150,30 +146,10 @@
Speichern
</button>
</form>
<div class="flex items-center gap-2">
<button type="button" class="resetbutton w-auto px-3 py-2 flex items-center gap-2" data-role="contents-collapse-all" data-state="expanded">
<i class="ri-arrow-up-s-line" data-role="contents-collapse-all-icon"></i>
<span data-role="contents-collapse-all-label">Alle Eintraege einklappen</span>
</button>
<button
type="button"
class="resetbutton w-auto px-3 py-2 flex items-center gap-2"
data-role="contents-create"
data-loading-label="Eintrag wird geladen"
hx-post="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/insert"
hx-target="[data-role='contents-list']"
hx-swap="beforeend"
hx-include="[data-role='csrf-token']"
hx-vals='{"position":"after","content_id":""}'>
<i class="ri-add-line"></i>
<span>Eintrag anlegen</span>
</button>
</div>
</div>
<div class="flex flex-col gap-0.5"
<div class="mt-3 px-4 text-lg font-bold text-gray-800">Inhalt</div>
<div class="flex flex-col gap-0 mt-2"
data-role="contents-list"
data-insert-endpoint="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/insert"
data-edit-endpoint="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/edit/form"
data-order-endpoint="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/edit">
{{- range $_, $content := $model.result.Contents -}}
{{- template "_content_item" (Dict
@@ -195,34 +171,7 @@
</edit-page>
<script type="module">
const applyMultiSelectInit = (el) => {
if (!el) return;
const optionsRaw = el.getAttribute("data-initial-options") || "[]";
const valuesRaw = el.getAttribute("data-initial-values") || "[]";
let options = [];
let values = [];
try {
options = JSON.parse(optionsRaw);
values = JSON.parse(valuesRaw);
} catch {
return;
}
if (options.length && typeof el.setOptions === "function") {
el.setOptions(options);
}
if (values.length) {
el.value = values;
if (typeof el.captureInitialSelection === "function") {
el.captureInitialSelection();
}
}
};
let enterEditMode = null;
let setupEditFormGlobal = null;
let list = null;
let setHtmxIndicator = () => {};
let setHtmxIndicatorLabel = () => {};
const initPage = () => {
list = document.querySelector("[data-role='contents-list']");
@@ -231,88 +180,14 @@
}
const getItems = () => Array.from(list.querySelectorAll("[data-role='content-item']"));
const collapseAllButton = document.querySelector("[data-role='contents-collapse-all']");
const collapseAllLabel = document.querySelector("[data-role='contents-collapse-all-label']");
const collapseAllIcon = document.querySelector("[data-role='contents-collapse-all-icon']");
const removeGaps = () => {
list.querySelectorAll("[data-role='content-gap']").forEach((gap) => gap.remove());
};
const renderInsertGaps = () => {
removeGaps();
const insertEndpoint = list.dataset.insertEndpoint || "";
const items = getItems();
if (!insertEndpoint) {
return;
}
if (list.querySelector("[data-role='content-item'].data-editing")) {
return;
}
const createGap = (position, contentId, label) => {
const gap = document.createElement("div");
gap.className = "relative group h-6 -my-2.5";
gap.dataset.role = "content-gap";
const line = document.createElement("div");
line.className = "pointer-events-none absolute left-0 right-0 top-1/2 h-0.5 -translate-y-1/2 bg-slate-300 opacity-0 transition-opacity duration-150 group-hover:opacity-100";
const button = document.createElement("button");
button.type = "button";
button.className = "absolute left-1/2 top-1/2 z-[10000] -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-150 rounded-full border border-slate-300 bg-stone-100 text-slate-700 px-3 py-2 text-base shadow-sm";
button.dataset.loadingLabel = "Eintrag wird geladen";
button.setAttribute("aria-label", "Beitrag einfügen");
button.setAttribute("hx-post", insertEndpoint);
button.setAttribute("hx-target", "closest [data-role='content-gap']");
button.setAttribute("hx-swap", "beforebegin");
button.setAttribute("hx-include", "[data-role='csrf-token']");
button.setAttribute("hx-vals", JSON.stringify({ position, content_id: contentId }));
button.innerHTML = label ? '<i class="ri-add-line"></i><span>Neuer Beitrag</span>' : '<i class="ri-add-line"></i>';
gap.appendChild(line);
gap.appendChild(button);
gap.appendChild(document.createElement("div")).className = "h-1";
return gap;
};
items.forEach((item) => {
if (item.parentElement !== list) {
return;
}
const contentId = item.dataset.contentId || "";
list.insertBefore(createGap("before", contentId, false), item);
});
list.appendChild(createGap("after", "", true));
if (window.htmx?.process) {
list.querySelectorAll("[data-role='content-gap']").forEach((gap) => {
window.htmx.process(gap);
});
}
};
const setEditSpacing = (active) => {
list.style.rowGap = active ? "0.5rem" : "";
list.style.paddingTop = active ? "0.25rem" : "";
list.style.paddingBottom = active ? "0.25rem" : "";
};
const syncEditSpacing = () => {
setEditSpacing(!!list.querySelector("[data-role='content-item'].data-editing"));
};
const showEditButtonsIfIdle = () => {
if (list.querySelector("[data-role='content-item'].data-editing")) {
return;
}
getItems().forEach((item) => {
const editButton = item.querySelector("[data-role='content-edit-button']");
if (editButton) {
editButton.classList.remove("hidden");
}
});
};
if (getItems().length === 0) {
return;
}
const isTempContentId = (contentId) => contentId && contentId.startsWith("tmp");
const orderEndpoint = list.dataset.orderEndpoint || getItems()[0]?.querySelector("form")?.getAttribute("action") || "";
const deleteEndpoint = window.location.pathname.replace(/\/contents\/edit\/?$/, "/contents/delete");
const csrfToken = document.querySelector("input[name='csrf_token']")?.value || "";
const syncIndicator = document.querySelector("#contents-sync-indicator");
const htmxIndicator = document.querySelector("#contents-htmx-indicator");
let orderSyncTimer = null;
let isOrderSyncing = false;
let pendingOrderSync = false;
@@ -323,31 +198,10 @@
}
syncIndicator.classList.toggle("hidden", !active);
};
setHtmxIndicator = (active) => {
if (!htmxIndicator) {
return;
}
htmxIndicator.classList.toggle("hidden", !active);
};
setHtmxIndicatorLabel = (label) => {
if (!htmxIndicator || !label) {
return;
}
const labelEl = htmxIndicator.querySelector("[data-role='contents-htmx-label']");
if (labelEl) {
labelEl.textContent = label;
}
};
const deleteContent = (item, dialog) => {
if (!item) {
return;
}
if (item.dataset.contentTemp === "true") {
dialog?.close();
removeItem(item);
return;
}
const contentId = item.dataset.contentId || "";
if (!contentId || !csrfToken) {
return;
@@ -396,7 +250,7 @@
payload.set("csrf_token", csrfToken);
list.querySelectorAll("[data-role='content-item']").forEach((card) => {
const contentId = card.dataset.contentId;
if (!contentId || isTempContentId(contentId)) {
if (!contentId) {
return;
}
payload.append("content_order[]", contentId);
@@ -427,79 +281,8 @@
}, 300);
};
const closeAll = (keepItem = null) => {
getItems().forEach((item) => {
if (keepItem && item === keepItem) {
return;
}
const view = item.querySelector("[data-role='content-view']");
const edit = item.querySelector("[data-role='content-edit']");
const editButton = item.querySelector("[data-role='content-edit-button']");
item.classList.remove("data-editing");
if (view) {
view.classList.remove("hidden");
}
if (edit) {
edit.remove();
}
if (editButton) {
editButton.classList.remove("hidden");
}
});
};
const preserveScroll = (action) => {
const top = window.scrollY;
const left = window.scrollX;
action();
requestAnimationFrame(() => {
window.scrollTo(left, top);
});
};
enterEditMode = (item) => {
const view = item.querySelector("[data-role='content-view']");
if (view) {
view.classList.add("hidden");
}
item.classList.add("data-editing");
setEditSpacing(true);
removeGaps();
getItems().forEach((other) => {
const otherButton = other.querySelector("[data-role='content-edit-button']");
if (!otherButton || other === item) {
return;
}
otherButton.classList.add("hidden");
});
};
const openItem = (item) => {
closeAll(item);
const edit = item.querySelector("[data-role='content-edit']");
if (!edit) {
item.dataset.pendingEdit = "true";
const editButton = item.querySelector("[data-role='content-edit-button']");
if (editButton) {
editButton.click();
}
return;
}
enterEditMode(item);
};
const removeItem = (item) => {
const gap = item.previousElementSibling;
if (gap && gap.matches("[data-role='content-gap']")) {
gap.remove();
}
item.remove();
renderInsertGaps();
getItems().forEach((other) => {
const otherButton = other.querySelector("[data-role='content-edit-button']");
if (otherButton) {
otherButton.classList.remove("hidden");
}
});
};
const setupItem = (item) => {
@@ -508,87 +291,12 @@
}
item.dataset.init = "true";
const editButton = item.querySelector("[data-role='content-edit-button']");
const deleteButtonView = item.querySelector("[data-role='content-delete-view']");
const deleteDialogView = item.querySelector("[data-role='content-delete-dialog-view']");
const deleteConfirmView = item.querySelector("[data-role='content-delete-confirm-view']");
const deleteCancelView = item.querySelector("[data-role='content-delete-cancel-view']");
const view = item.querySelector("[data-role='content-view']");
const collapseButton = item.querySelector("[data-role='content-collapse-toggle']");
const collapseIcon = item.querySelector("[data-role='content-collapse-icon']");
const collapseTooltip = item.querySelector("[data-role='content-collapse-tooltip']");
const headerTitleText = item.querySelector("[data-role='content-header-title-text']");
const headerTitle = item.querySelector("[data-role='content-header-title']");
const viewBody = item.querySelector("[data-role='content-view-body']");
const header = item.querySelector("[data-content-header='true']");
const setCollapsed = (collapsed) => {
if (!viewBody) {
return;
}
item.dataset.collapsed = collapsed ? "true" : "";
item.classList.toggle("data-collapsed", collapsed);
viewBody.classList.toggle("hidden", collapsed);
if (headerTitleText) {
headerTitleText.classList.toggle("hidden", !collapsed);
}
if (header) {
header.classList.toggle("bg-stone-100", collapsed);
header.classList.toggle("bg-stone-200", !collapsed);
}
if (collapseButton) {
collapseButton.setAttribute("aria-expanded", (!collapsed).toString());
collapseButton.setAttribute("aria-label", collapsed ? "Beitrag ausklappen" : "Beitrag einklappen");
}
if (collapseTooltip) {
collapseTooltip.textContent = collapsed ? "Ausklappen" : "Einklappen";
}
if (collapseIcon) {
collapseIcon.classList.toggle("ri-arrow-up-s-line", !collapsed);
collapseIcon.classList.toggle("ri-arrow-down-s-line", collapsed);
}
};
if (collapseButton) {
setCollapsed(item.dataset.collapsed === "true");
collapseButton.addEventListener("click", () => {
if (item.classList.contains("data-editing") || item.dataset.contentTemp === "true") {
return;
}
preserveScroll(() => {
setCollapsed(item.dataset.collapsed !== "true");
updateCollapseAllLabel();
});
});
}
if (header) {
header.addEventListener("click", (event) => {
if (item.dataset.dragging === "true") {
return;
}
if (item.classList.contains("data-editing") || item.dataset.contentTemp === "true") {
return;
}
if (event.target.closest("button, a, select, input, textarea")) {
return;
}
preserveScroll(() => {
setCollapsed(item.dataset.collapsed !== "true");
updateCollapseAllLabel();
});
});
}
if (editButton) {
editButton.addEventListener("click", () => {
if (item.querySelector("[data-role='content-edit']")) {
enterEditMode(item);
return;
}
item.dataset.pendingEdit = "true";
});
}
if (deleteButtonView && deleteDialogView) {
deleteButtonView.addEventListener("click", () => {
@@ -615,187 +323,15 @@
deleteContent(item, deleteDialogView);
});
}
const pendingEdit = item.dataset.pendingEdit === "true";
if (pendingEdit && item.querySelector("[data-role='content-edit']")) {
item.dataset.pendingEdit = "";
enterEditMode(item);
}
item.querySelectorAll("multi-select-simple[data-initial-options], multi-select-simple[data-initial-values]").forEach((el) => {
applyMultiSelectInit(el);
});
if (item.dataset.openEdit === "true") {
item.dataset.openEdit = "";
openItem(item);
}
};
const setupEditForm = (item) => {
const edit = item.querySelector("[data-role='content-edit']");
if (!edit || edit.dataset.init === "true") {
return;
}
edit.dataset.init = "true";
const cancelButton = edit.querySelector("[data-role='content-edit-cancel']");
const deleteButton = edit.querySelector("[data-role='content-delete']");
const deleteDialog = edit.querySelector("[data-role='content-delete-dialog']");
const deleteConfirm = edit.querySelector("[data-role='content-delete-confirm']");
const deleteCancel = edit.querySelector("[data-role='content-delete-cancel']");
const form = edit.querySelector("form");
const view = item.querySelector("[data-role='content-view']");
if (cancelButton && view) {
cancelButton.addEventListener("click", () => {
if (item.dataset.contentTemp === "true") {
removeItem(item);
return;
}
edit.remove();
view.classList.remove("hidden");
item.classList.remove("data-editing");
showEditButtonsIfIdle();
syncEditSpacing();
renderInsertGaps();
});
}
if (deleteButton && deleteDialog) {
deleteButton.addEventListener("click", () => {
if (deleteDialog.showModal) {
deleteDialog.showModal();
} else {
deleteDialog.setAttribute("open", "true");
}
});
}
if (deleteCancel && deleteDialog) {
deleteCancel.addEventListener("click", () => {
deleteDialog.close();
});
deleteDialog.addEventListener("cancel", (event) => {
event.preventDefault();
deleteDialog.close();
});
}
if (deleteConfirm) {
deleteConfirm.addEventListener("click", () => {
deleteContent(item, deleteDialog);
});
}
if (form) {
form.addEventListener("submit", () => {
form.querySelectorAll("input[name='content_order[]']").forEach((input) => input.remove());
getItems().forEach((card) => {
const contentId = card.dataset.contentId;
if (!contentId) {
return;
}
const input = document.createElement("input");
input.type = "hidden";
input.name = "content_order[]";
input.value = contentId;
form.appendChild(input);
});
});
}
};
setupEditFormGlobal = setupEditForm;
const updateCollapseAllLabel = () => {
if (!collapseAllButton || !collapseAllLabel) {
return;
}
const items = getItems().filter((item) => item.dataset.contentTemp !== "true");
const allCollapsed = items.length > 0 && items.every((item) => item.dataset.collapsed === "true");
collapseAllButton.dataset.state = allCollapsed ? "collapsed" : "expanded";
collapseAllLabel.textContent = allCollapsed ? "Alle Eintraege ausklappen" : "Alle Eintraege einklappen";
if (collapseAllIcon) {
collapseAllIcon.classList.toggle("ri-arrow-up-s-line", !allCollapsed);
collapseAllIcon.classList.toggle("ri-arrow-down-s-line", allCollapsed);
}
};
const setAllCollapsed = (collapsed) => {
getItems().forEach((item) => {
if (item.dataset.contentTemp === "true" || item.classList.contains("data-editing")) {
return;
}
const viewBody = item.querySelector("[data-role='content-view-body']");
const headerTitleText = item.querySelector("[data-role='content-header-title-text']");
const headerTitle = item.querySelector("[data-role='content-header-title']");
const collapseButton = item.querySelector("[data-role='content-collapse-toggle']");
const collapseIcon = item.querySelector("[data-role='content-collapse-icon']");
const collapseTooltip = item.querySelector("[data-role='content-collapse-tooltip']");
const header = item.querySelector("[data-content-header='true']");
if (!viewBody) {
return;
}
item.dataset.collapsed = collapsed ? "true" : "";
item.classList.toggle("data-collapsed", collapsed);
viewBody.classList.toggle("hidden", collapsed);
if (headerTitleText) {
headerTitleText.classList.toggle("hidden", !collapsed);
}
if (header) {
header.classList.toggle("bg-stone-100", collapsed);
header.classList.toggle("bg-stone-200", !collapsed);
}
if (collapseButton) {
collapseButton.setAttribute("aria-expanded", (!collapsed).toString());
collapseButton.setAttribute("aria-label", collapsed ? "Beitrag ausklappen" : "Beitrag einklappen");
}
if (collapseTooltip) {
collapseTooltip.textContent = collapsed ? "Ausklappen" : "Einklappen";
}
if (collapseIcon) {
collapseIcon.classList.toggle("ri-arrow-up-s-line", !collapsed);
collapseIcon.classList.toggle("ri-arrow-down-s-line", collapsed);
}
});
updateCollapseAllLabel();
};
if (collapseAllButton) {
updateCollapseAllLabel();
if (collapseAllButton.dataset.init !== "true") {
collapseAllButton.dataset.init = "true";
collapseAllButton.addEventListener("click", () => {
const shouldCollapse = collapseAllButton.dataset.state !== "collapsed";
setAllCollapsed(shouldCollapse);
});
}
}
getItems().forEach((item) => {
setupItem(item);
setupEditForm(item);
});
renderInsertGaps();
syncEditSpacing();
showEditButtonsIfIdle();
if (!list.dataset.collapseInit) {
list.dataset.collapseInit = "true";
setAllCollapsed(true);
}
updateCollapseAllLabel();
if (list.dataset.pageInit !== "true") {
list.dataset.pageInit = "true";
let draggedItem = null;
const createButton = document.querySelector("[data-role='contents-create']");
if (createButton) {
createButton.addEventListener("click", () => {
requestAnimationFrame(() => {
window.scrollTo({ top: document.documentElement.scrollHeight, behavior: "smooth" });
});
});
}
list.addEventListener("click", (event) => {
const moveUp = event.target.closest("[data-role='content-move-up']");
const moveDown = event.target.closest("[data-role='content-move-down']");
@@ -825,13 +361,9 @@
}
}
syncOrder();
renderInsertGaps();
});
list.addEventListener("dragstart", (event) => {
if (event.target.closest("[data-role='content-edit-button']")) {
return;
}
if (event.target.closest("[data-role='content-move-up']") || event.target.closest("[data-role='content-move-down']")) {
return;
}
@@ -847,17 +379,9 @@
if (!item) {
return;
}
if (item.classList.contains("data-editing")) {
event.preventDefault();
return;
}
draggedItem = item;
item.dataset.dragging = "true";
draggedItem.classList.add("opacity-60");
list.style.rowGap = "0.5rem";
list.style.paddingTop = "0.25rem";
list.style.paddingBottom = "0.25rem";
removeGaps();
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("text/plain", "move");
});
@@ -886,89 +410,10 @@
draggedItem.dataset.dragging = "";
}
draggedItem = null;
list.style.rowGap = "";
list.style.paddingTop = "";
list.style.paddingBottom = "";
syncOrder();
renderInsertGaps();
});
const params = new URLSearchParams(window.location.search);
const editContentId = params.get("edit_content");
if (editContentId) {
const targetItem = getItems().find((item) => {
return item.dataset.contentId === editContentId;
});
if (targetItem) {
openItem(targetItem);
}
}
}
};
const initWhenReady = () => {
if (window.customElements?.whenDefined) {
window.customElements.whenDefined("multi-select-simple").then(() => {
requestAnimationFrame(initPage);
});
} else {
initPage();
}
};
initWhenReady();
document.body.addEventListener("htmx:afterSwap", (event) => {
const target = event.detail?.target;
if (target && target.matches("[data-role='content-edit-container']")) {
const item = target.closest("[data-role='content-item']");
if (item && item.dataset.pendingEdit === "true" && enterEditMode) {
item.dataset.pendingEdit = "";
enterEditMode(item);
if (setupEditFormGlobal) {
setupEditFormGlobal(item);
}
}
target.querySelectorAll("multi-select-simple[data-initial-options], multi-select-simple[data-initial-values]").forEach((el) => {
applyMultiSelectInit(el);
});
}
initWhenReady();
});
document.body.addEventListener("htmx:beforeRequest", (event) => {
const elt = event.detail?.elt;
if (!elt || !list) {
return;
}
if (elt.closest("[data-role='contents-list']")) {
const label = elt.getAttribute("data-loading-label");
if (label) {
setHtmxIndicatorLabel(label);
} else {
setHtmxIndicatorLabel("Eintrag wird geladen");
}
setHtmxIndicator(true);
}
});
document.body.addEventListener("htmx:afterRequest", (event) => {
const elt = event.detail?.elt;
if (!elt || !list) {
return;
}
if (elt.closest("[data-role='contents-list']")) {
setHtmxIndicator(false);
}
});
document.body.addEventListener("htmx:responseError", (event) => {
const elt = event.detail?.elt;
if (!elt || !list) {
return;
}
if (elt.closest("[data-role='contents-list']")) {
setHtmxIndicator(false);
}
});
initPage();
</script>

4
views/routes/almanach/contents/edit/head.gohtml
View File

@@ -1,8 +1,8 @@
{{ $model := . }}
<title>
{{ if $model.result }}
Inhalte bearbeiten: {{ $model.result.Entry.PreferredTitle }} - Musenalm
Beiträge bearbeiten: {{ $model.result.Entry.PreferredTitle }} - Musenalm
{{ else }}
Inhalte bearbeiten - Musenalm
Beiträge bearbeiten - Musenalm
{{ end }}
</title>

20
views/routes/almanach/contents/edit_form/body.gohtml
View File

@@ -1,20 +0,0 @@
{{- $content := index . "content" -}}
{{- $entry := index . "entry" -}}
{{- $csrf := index . "csrf_token" -}}
{{- $contentTypes := index . "content_types" -}}
{{- $musenalmTypes := index . "musenalm_types" -}}
{{- $paginationValues := index . "pagination_values" -}}
{{- $contentID := index . "content_id" -}}
{{- template "_content_edit_form" (Dict
"content" $content
"content_id" $contentID
"entry" $entry
"csrf_token" $csrf
"content_types" $contentTypes
"musenalm_types" $musenalmTypes
"pagination_values" $paginationValues
"agents" (index . "agents")
"content_agents" (index . "content_agents")
"agent_relations" (index . "agent_relations")
) -}}

341
views/routes/almanach/contents/edit_item/body.gohtml Normal file
View File

@@ -0,0 +1,341 @@
{{ $model := . }}
<edit-page>
<div class="flex container-normal bg-slate-100 mx-auto px-8">
<div class="flex flex-row w-full justify-between">
<div class="flex flex-col justify-end-safe flex-2/5">
<div class="mb-1">
<i class="ri-file-list-3-line"></i> Beiträge
</div>
<h1 class="text-2xl w-full font-bold text-slate-900 mb-1">
{{- if $model.result -}}
{{- $model.result.Entry.PreferredTitle -}}<br>
<span class="text-base font-semibold text-slate-700">Beitrag Nr. {{ $model.content.MusenalmID }}</span>
{{- else -}}
Beiträge bearbeiten
{{- end -}}
</h1>
{{- if $model.result -}}
<div class="flex flex-row gap-x-3">
<div>
<a
href="/beitrag/{{ $model.content.MusenalmID }}"
class="text-gray-700 hover:text-slate-950 block no-underline">
<i class="ri-eye-line"></i> Anschauen
</a>
</div>
&middot;
<div class="flex flex-row">
{{- if $model.prev_content -}}
<div>
<a href="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/{{ $model.prev_content.MusenalmID }}/edit" class="text-gray-700 hover:text-slate-950 no-underline block">
<i class="ri-arrow-left-s-line"></i>
</a>
</div>
{{- end -}}
<div class="px-1.5 py-0.5 rounded-xs bg-gray-200 w-fit font-bold">
{{ $model.content.MusenalmID }}
</div>
{{- if $model.next_content -}}
<div>
<a href="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/{{ $model.next_content.MusenalmID }}/edit" class="text-gray-700 hover:text-slate-950 no-underline block">
<i class="ri-arrow-right-s-line"></i>
</a>
</div>
{{- end -}}
</div>
&middot;
<div>
<a href="/almanach/{{- $model.result.Entry.MusenalmID -}}/contents/{{ $model.content.MusenalmID }}/edit" class="text-gray-700 no-underline hover:text-slate-950 block">
<i class="ri-loop-left-line"></i> Reset
</a>
</div>
&middot;
<div>
<a href="/almanach/{{- $model.result.Entry.MusenalmID -}}/contents/edit" class="text-gray-700 no-underline hover:text-slate-950 block">
<i class="ri-arrow-left-line"></i> Zurück zur Liste
</a>
</div>
&middot;
<div>
<a href="/almanach/{{- $model.result.Entry.MusenalmID -}}/edit" class="text-gray-700 no-underline hover:text-slate-950 block">
<i class="ri-edit-2-line"></i> Almanach
</a>
</div>
</div>
{{- end -}}
</div>
{{- if $model.result -}}
<div class="flex flex-row" id="contents-header-data">
<div class="flex flex-col justify-end gap-y-6 pr-20">
<div class="">
<div class="font-bold text-sm">
<i class="ri-navigation-line"></i> Navigation
</div>
<div class="flex items-center gap-3">
{{- if $model.prev_content -}}
<tool-tip position="top" class="!inline">
<div class="data-tip">
{{- if $model.prev_content.PreferredTitle -}}
{{- $model.prev_content.PreferredTitle -}}
{{- else if $model.prev_content.TitleStmt -}}
{{- $model.prev_content.TitleStmt -}}
{{- else -}}
Beitrag Nr. {{ $model.prev_content.MusenalmID }}
{{- end -}}
</div>
<a
href="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/{{ $model.prev_content.MusenalmID }}/edit"
class="text-gray-700 hover:text-slate-950 no-underline">
<i class="ri-arrow-left-s-line"></i>
</a>
</tool-tip>
{{- end -}}
<span class="text-gray-800 font-bold no-underline">
{{ $model.content.MusenalmID }}
</span>
{{- if $model.next_content -}}
<tool-tip position="top" class="!inline">
<div class="data-tip">
{{- if $model.next_content.PreferredTitle -}}
{{- $model.next_content.PreferredTitle -}}
{{- else if $model.next_content.TitleStmt -}}
{{- $model.next_content.TitleStmt -}}
{{- else -}}
Beitrag Nr. {{ $model.next_content.MusenalmID }}
{{- end -}}
</div>
<a
href="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/{{ $model.next_content.MusenalmID }}/edit"
class="text-gray-700 hover:text-slate-950 no-underline">
<i class="ri-arrow-right-s-line"></i>
</a>
</tool-tip>
{{- end -}}
</div>
</div>
</div>
<div class="flex flex-col justify-end gap-y-6 pr-10">
<div class="">
<div class="font-bold text-sm">
<i class="ri-database-2-line"></i> Datenbank-ID
</div>
<div class="">{{ $model.content.Id }}</div>
</div>
</div>
<div class="flex flex-col justify-end gap-y-6 pr-4">
<div class="">
<div class="font-bold text-sm mb-1"><i class="ri-calendar-line"></i> Zuletzt bearbeitet</div>
<div>
<div class="px-1.5 py-0.5 rounded-xs bg-gray-200 w-fit">
<span>{{ GermanDate $model.result.Entry.Updated }}</span>,
<span>{{ GermanTime $model.result.Entry.Updated }}</span>h
</div>
<div
class="px-1.5 py-0.5 rounded-xs mt-1.5 bg-gray-200 w-fit {{ if not $model.result.User }}hidden{{ end }}">
<i class="ri-user-line mr-1"></i>
<span>{{- if $model.result.User -}}{{ $model.result.User.Name }}{{- end -}}</span>
</div>
</div>
</div>
</div>
</div>
{{- end -}}
</div>
</div>
<div class="container-normal mx-auto mt-4 !px-0">
{{ template "_usermessage" $model }}
<form
autocomplete="off"
class="w-full dbform"
method="POST"
action="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/edit">
<input type="hidden" name="csrf_token" value="{{ $model.csrf_token }}" />
<div class="flex gap-8">
<div class="flex-1 flex flex-col gap-4">
{{- template "_content_edit" (Dict
"content" $model.content
"content_id" $model.content_id
"entry" $model.result.Entry
"content_types" $model.content_types
"musenalm_types" $model.musenalm_types
"pagination_values" $model.pagination_values
"agents" $model.agents
"content_agents" $model.content_agents
"agent_relations" $model.agent_relations
) -}}
</div>
<div class="w-[28rem] shrink-0 flex flex-col gap-3">
{{- $prefix := printf "content_%s_" $model.content_id -}}
{{- $fieldId := printf "content-%s-edit-state" $model.content_id -}}
{{ template "_content_status_edit" (Arr $model.content $prefix $fieldId) }}
<div class="inputwrapper">
<div class="inputlabelrow">
<div class="flex items-center gap-1">
<label for="content-{{ $model.content_id }}-musenalm-type" class="inputlabel">Beitragstyp(en)</label>
<tool-tip position="top" class="!inline">
<div class="data-tip">{{ helpOr "contents" "musenalm_type" "Musenalm-Typen des Beitrags." }}</div>
<i class="ri-question-line"></i>
</tool-tip>
</div>
</div>
<div class="px-2 py-2">
<multi-select-simple
id="content-{{ $model.content_id }}-musenalm-type"
name="content_{{ $model.content_id }}_musenalm_type[]"
show-create-button="false"
placeholder="Musenalm-Typen suchen..."
data-empty-text="Keine Typen verknüpft"
value='[{{- range $i, $t := $model.content.MusenalmType -}}{{- if $i }},{{ end -}}"{{ $t }}"{{- end -}}]'
data-initial-options='[{{- range $i, $t := $model.musenalm_types -}}{{- if $i }},{{ end -}}{{ printf "{\"id\":%q,\"name\":%q}" $t $t }}{{- end -}}]'
data-initial-values='[{{- range $i, $t := $model.content.MusenalmType -}}{{- if $i }},{{ end -}}{{ printf "%q" $t }}{{- end -}}]'>
</multi-select-simple>
</div>
</div>
<div class="inputwrapper">
<div class="inputlabelrow">
<label for="content-{{ $model.content_id }}-language" class="inputlabel">Sprache</label>
</div>
<multi-select-simple
id="content-{{ $model.content_id }}-language"
name="content_{{ $model.content_id }}_language[]"
show-create-button="false"
placeholder="Sprachen suchen..."
data-empty-text="Keine Sprachen verknüpft"
value='[{{- range $i, $lang := $model.content.Language -}}{{- if $i }},{{ end -}}"{{ $lang }}"{{- end -}}]'
data-initial-values='[{{- range $i, $lang := $model.content.Language -}}{{- if $i }},{{ end -}}{{ printf "%q" $lang }}{{- end -}}]'>
</multi-select-simple>
</div>
</div>
</div>
<div class="w-full flex items-end justify-between gap-4 mt-6 flex-wrap">
<p class="text-sm text-gray-600" aria-live="polite"></p>
<div class="flex items-center gap-3 self-end flex-wrap">
<a href="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/edit" class="resetbutton w-40 flex items-center gap-2 justify-center">
<i class="ri-arrow-left-line"></i>
<span>Zurück</span>
</a>
<button type="button" class="resetbutton w-40 flex items-center gap-2 justify-center bg-red-50 text-red-800 hover:bg-red-100 hover:text-red-900" data-role="content-delete">
<i class="ri-delete-bin-line"></i>
<span>Eintrag loeschen</span>
</button>
<button type="submit" class="submitbutton w-40 flex items-center gap-2 justify-center">
<i class="ri-save-line"></i>
<span>Speichern</span>
</button>
</div>
</div>
<dialog data-role="content-delete-dialog" class="dbform fixed inset-0 m-auto rounded-md border border-slate-200 p-0 shadow-xl backdrop:bg-black/40">
<div class="p-5 w-[22rem]">
<div class="text-base font-bold text-gray-900">Eintrag loeschen?</div>
{{- if $model.content.TitleStmt -}}
<div class="text-sm font-bold text-gray-900 mt-1">{{ $model.content.TitleStmt }}</div>
{{- end -}}
<p class="text-sm text-gray-700 mt-2">
Der Eintrag wird dauerhaft geloescht. Verknuepfungen, Exemplare und Beitraege werden entfernt.
</p>
<div class="flex items-center justify-end gap-3 mt-4">
<button type="button" class="resetbutton w-auto px-3 py-1 text-sm" data-role="content-delete-cancel">Abbrechen</button>
<button type="button" class="submitbutton w-auto bg-red-700 hover:bg-red-800 px-3 py-1 text-sm" data-role="content-delete-confirm">
Loeschen
</button>
</div>
</div>
</dialog>
</form>
</div>
</edit-page>
<script>
(() => {
const applyMultiSelectInit = (el) => {
if (!el) return;
const optionsRaw = el.getAttribute("data-initial-options") || "[]";
const valuesRaw = el.getAttribute("data-initial-values") || "[]";
let options = [];
let values = [];
try {
options = JSON.parse(optionsRaw);
values = JSON.parse(valuesRaw);
} catch {
return;
}
if (options.length && typeof el.setOptions === "function") {
el.setOptions(options);
}
if (values.length) {
el.value = values;
if (typeof el.captureInitialSelection === "function") {
el.captureInitialSelection();
}
}
};
const deleteButton = document.querySelector("[data-role='content-delete']");
const deleteDialog = document.querySelector("[data-role='content-delete-dialog']");
const deleteConfirm = document.querySelector("[data-role='content-delete-confirm']");
const deleteCancel = document.querySelector("[data-role='content-delete-cancel']");
const csrfToken = "{{ $model.csrf_token }}";
const contentId = "{{ $model.content_id }}";
const deleteEndpoint = "/almanach/{{ $model.result.Entry.MusenalmID }}/contents/delete";
const initMultiSelects = () => {
document.querySelectorAll("multi-select-simple[data-initial-options], multi-select-simple[data-initial-values]").forEach((el) => {
applyMultiSelectInit(el);
});
};
if (window.customElements?.whenDefined) {
window.customElements.whenDefined("multi-select-simple").then(() => {
requestAnimationFrame(initMultiSelects);
});
} else {
initMultiSelects();
}
if (!deleteButton || !deleteDialog || !deleteConfirm || !deleteCancel) {
return;
}
deleteButton.addEventListener("click", () => {
if (deleteDialog.showModal) {
deleteDialog.showModal();
} else {
deleteDialog.setAttribute("open", "true");
}
});
deleteCancel.addEventListener("click", () => {
deleteDialog.close();
});
deleteDialog.addEventListener("cancel", (event) => {
event.preventDefault();
deleteDialog.close();
});
deleteConfirm.addEventListener("click", () => {
const payload = new URLSearchParams();
payload.set("csrf_token", csrfToken);
payload.set("content_id", contentId);
fetch(deleteEndpoint, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: payload.toString(),
}).then((response) => {
if (response.ok) {
window.location.assign("/almanach/{{ $model.result.Entry.MusenalmID }}/contents/edit");
return;
}
deleteDialog.close();
}).catch(() => {
deleteDialog.close();
});
});
})();
</script>

10
views/routes/almanach/contents/edit_item/head.gohtml Normal file
View File

@@ -0,0 +1,10 @@
{{ $model := . }}
<title>
{{- if $model.content -}}
Beitrag bearbeiten: {{ if $model.content.PreferredTitle }}{{ $model.content.PreferredTitle }}{{ else if $model.content.TitleStmt }}{{ $model.content.TitleStmt }}{{ else }}Beitrag{{ end }} - Musenalm
{{- else if $model.result -}}
Beitrag bearbeiten: {{ $model.result.Entry.PreferredTitle }} - Musenalm
{{- else -}}
Beitrag bearbeiten - Musenalm
{{- end -}}
</title>

22
views/routes/almanach/contents/insert/body.gohtml
View File

@@ -1,22 +0,0 @@
{{- $content := index . "content" -}}
{{- $entry := index . "entry" -}}
{{- $csrf := index . "csrf_token" -}}
{{- $contentTypes := index . "content_types" -}}
{{- $musenalmTypes := index . "musenalm_types" -}}
{{- $paginationValues := index . "pagination_values" -}}
{{- $contentID := index . "content_id" -}}
{{- template "_content_item" (Dict
"content" $content
"content_id" $contentID
"entry" $entry
"csrf_token" $csrf
"content_types" $contentTypes
"musenalm_types" $musenalmTypes
"pagination_values" $paginationValues
"agents" (index . "agents")
"content_agents" (index . "content_agents")
"agent_relations" (index . "agent_relations")
"open_edit" true
"is_new" true
) -}}

26
views/routes/almanach/contents/item/body.gohtml
View File

@@ -1,26 +0,0 @@
{{- $content := index . "content" -}}
{{- $entry := index . "entry" -}}
{{- $csrf := index . "csrf_token" -}}
{{- $contentTypes := index . "content_types" -}}
{{- $musenalmTypes := index . "musenalm_types" -}}
{{- $paginationValues := index . "pagination_values" -}}
{{- $contentID := index . "content_id" -}}
{{- $openEdit := index . "open_edit" -}}
{{- $isNew := index . "is_new" -}}
{{- $error := index . "error" -}}
{{- template "_content_item" (Dict
"content" $content
"content_id" $contentID
"entry" $entry
"csrf_token" $csrf
"content_types" $contentTypes
"musenalm_types" $musenalmTypes
"pagination_values" $paginationValues
"agents" (index . "agents")
"content_agents" (index . "content_agents")
"agent_relations" (index . "agent_relations")
"open_edit" $openEdit
"is_new" $isNew
"error" $error
) -}}

4
views/routes/almanach/edit/body.gohtml
View File

@@ -76,7 +76,7 @@ type AlmanachResult struct {
<div>
<a href="/almanach/{{- $model.result.Entry.MusenalmID -}}/contents/edit" class="text-gray-700
no-underline hover:text-slate-950 block ">
<i class="ri-file-list-3-line"></i> Inhalte
<i class="ri-file-list-3-line"></i> Beiträge
</a>
</div>
</div>
@@ -1160,7 +1160,7 @@ type AlmanachResult struct {
<div class="text-base font-bold text-gray-900">Eintrag löschen?</div>
<div class="text-sm font-bold text-gray-900 mt-1">{{ $model.result.Entry.PreferredTitle }}</div>
<p class="text-sm text-gray-700 mt-2">
Der Eintrag wird dauerhaft gelöscht. Verknüpfungen, Exemplare und Inhalte werden entfernt.
Der Eintrag wird dauerhaft gelöscht. Verknüpfungen, Exemplare und Beiträge werden entfernt.
</p>
<div class="flex items-center justify-end gap-3 mt-4">
<button type="button" class="resetbutton w-auto px-3 py-1 text-sm" data-role="almanach-delete-cancel">Abbrechen</button>