musenalm/views/routes/almanach/contents/edit/body.gohtml

{{ $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 -}}
			{{- else -}}
				Beiträge bearbeiten
			{{- end -}}
		</h1>
			{{- if $model.result -}}
				<div class="flex flex-row gap-x-3">
					<div>
						<a
							href="/almanach/{{ $model.result.Entry.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.result.PrevByID -}}
							<div>
								<a href="/almanach/{{ $model.result.PrevByID.MusenalmID }}/contents/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.result.Entry.MusenalmID }}
						</div>
						{{- if $model.result.NextByID -}}
							<div>
								<a href="/almanach/{{ $model.result.NextByID.MusenalmID }}/contents/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/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 -}}/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.result.PrevByTitle -}}
							<tool-tip position="top" class="!inline">
								<div class="data-tip">{{ $model.result.PrevByTitle.PreferredTitle }}</div>
								<a
									href="/almanach/{{ $model.result.PrevByTitle.MusenalmID }}/contents/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">
						A&thinsp;-&thinsp;Z
						</span>
						{{- if $model.result.NextByTitle -}}
							<tool-tip position="top" class="!inline">
								<div class="data-tip">{{ $model.result.NextByTitle.PreferredTitle }}</div>
								<a
									href="/almanach/{{ $model.result.NextByTitle.MusenalmID }}/contents/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.result.Entry.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 }}
	<div id="contents-sync-indicator" class="fixed right-6 bottom-6 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>
		Reihenfolge wird gespeichert
	</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
			method="POST"
			action="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/edit/extent"
			class="extent-inline flex-1 grid grid-cols-[max-content_minmax(12rem,1fr)_max-content] items-center gap-2">
			<input type="hidden" name="csrf_token" value="{{ $model.csrf_token }}" />
			<label for="contents-extent" class="text-sm font-bold text-gray-700">Struktur</label>
			<input
				id="contents-extent"
				name="extent"
				type="text"
				class="min-w-[10rem] w-full max-w-none flex-1 border border-slate-300 rounded-xs bg-white px-2 py-1 text-sm leading-5 text-gray-800 focus:outline-none focus:ring-2 focus:ring-slate-400/30"
				placeholder="z. B. 12 Bl., 3 Taf."
				value="{{- $model.result.Entry.Extent -}}" />
			<button type="submit" class="rounded-xs border border-slate-300 bg-stone-100 px-3 py-1 text-sm font-semibold text-gray-700 hover:bg-stone-200">
				Speichern
			</button>
		</form>
	</div>
	<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-order-endpoint="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/edit">
		{{- range $_, $content := $model.result.Contents -}}
			{{- template "_content_item" (Dict
				"content" $content
				"entry" $model.result.Entry
				"csrf_token" $model.csrf_token
				"content_types" $model.content_types
				"musenalm_types" $model.musenalm_types
				"pagination_values" $model.pagination_values
				"agents" $model.result.Agents
				"content_agents" (index $model.result.ContentsAgents $content.Id)
				"agent_relations" $model.agent_relations
				"open_edit" false
				"is_new" false
			) -}}
		{{- end -}}
	</div>
</div>
</edit-page>

<script type="module">
	let list = null;

	const initPage = () => {
		list = document.querySelector("[data-role='contents-list']");
		if (!list) {
			return;
		}

		const getItems = () => Array.from(list.querySelectorAll("[data-role='content-item']"));
		if (getItems().length === 0) {
			return;
		}

		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");
		let orderSyncTimer = null;
		let isOrderSyncing = false;
		let pendingOrderSync = false;

		const setSyncIndicator = (active) => {
			if (!syncIndicator) {
				return;
			}
			syncIndicator.classList.toggle("hidden", !active);
		};
		const deleteContent = (item, dialog) => {
			if (!item) {
				return;
			}
			const contentId = item.dataset.contentId || "";
			if (!contentId || !csrfToken) {
				return;
			}
			if (window.htmx?.ajax) {
				window.htmx.ajax("POST", deleteEndpoint, {
					target: item,
					swap: "outerHTML",
					values: {
						csrf_token: csrfToken,
						content_id: contentId,
					},
				});
				dialog?.close();
				return;
			}
			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",
					"HX-Request": "true",
				},
				body: payload.toString(),
			})
				.then(() => {
					removeItem(item);
				})
				.catch(() => null)
				.finally(() => {
					dialog?.close();
				});
		};

		const performOrderSync = () => {
			if (!list || !orderEndpoint || !csrfToken || isOrderSyncing) {
				pendingOrderSync = true;
				return;
			}
			isOrderSyncing = true;
			pendingOrderSync = false;
			setSyncIndicator(true);
			const payload = new URLSearchParams();
			payload.set("csrf_token", csrfToken);
			list.querySelectorAll("[data-role='content-item']").forEach((card) => {
				const contentId = card.dataset.contentId;
				if (!contentId) {
					return;
				}
				payload.append("content_order[]", contentId);
			});
			fetch(orderEndpoint, {
				method: "POST",
				headers: {
					"Content-Type": "application/x-www-form-urlencoded",
				},
				body: payload.toString(),
			})
				.catch(() => null)
				.finally(() => {
					isOrderSyncing = false;
					setSyncIndicator(false);
					if (pendingOrderSync) {
						performOrderSync();
					}
				});
		};

		const syncOrder = () => {
			if (orderSyncTimer) {
				clearTimeout(orderSyncTimer);
			}
			orderSyncTimer = setTimeout(() => {
				performOrderSync();
			}, 300);
		};

		const removeItem = (item) => {
			item.remove();
		};

		const setupItem = (item) => {
			if (!item || item.dataset.init === "true") {
				return;
			}
			item.dataset.init = "true";

			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 viewBody = item.querySelector("[data-role='content-view-body']");

			if (deleteButtonView && deleteDialogView) {
				deleteButtonView.addEventListener("click", () => {
					if (deleteDialogView.showModal) {
						deleteDialogView.showModal();
					} else {
						deleteDialogView.setAttribute("open", "true");
					}
				});
			}

			if (deleteCancelView && deleteDialogView) {
				deleteCancelView.addEventListener("click", () => {
					deleteDialogView.close();
				});
				deleteDialogView.addEventListener("cancel", (event) => {
					event.preventDefault();
					deleteDialogView.close();
				});
			}

			if (deleteConfirmView) {
				deleteConfirmView.addEventListener("click", () => {
					deleteContent(item, deleteDialogView);
				});
			}
		};

		getItems().forEach((item) => {
			setupItem(item);
		});

		if (list.dataset.pageInit !== "true") {
			list.dataset.pageInit = "true";
			let draggedItem = null;
			list.addEventListener("click", (event) => {
				const moveUp = event.target.closest("[data-role='content-move-up']");
				const moveDown = event.target.closest("[data-role='content-move-down']");
				if (!moveUp && !moveDown) {
					return;
				}
				event.preventDefault();
				const item = event.target.closest("[data-role='content-item']");
				if (!item) {
					return;
				}
				if (moveUp) {
					let prev = item.previousElementSibling;
					while (prev && !prev.matches("[data-role='content-item']")) {
						prev = prev.previousElementSibling;
					}
					if (prev) {
						prev.before(item);
					}
				} else {
					let next = item.nextElementSibling;
					while (next && !next.matches("[data-role='content-item']")) {
						next = next.nextElementSibling;
					}
					if (next) {
						next.after(item);
					}
				}
				syncOrder();
			});

			list.addEventListener("dragstart", (event) => {
				if (event.target.closest("[data-role='content-move-up']") || event.target.closest("[data-role='content-move-down']")) {
					return;
				}
				if (event.target.closest(".status-badge") || event.target.closest("multi-select-simple") || event.target.closest("select")) {
					return;
				}
				const handle = event.target.closest("[data-role='content-drag-handle']");
				if (!handle) {
					event.preventDefault();
					return;
				}
				const item = handle.closest("[data-role='content-item']");
				if (!item) {
					return;
				}
				draggedItem = item;
				item.dataset.dragging = "true";
				draggedItem.classList.add("opacity-60");
				event.dataTransfer.effectAllowed = "move";
				event.dataTransfer.setData("text/plain", "move");
			});

			list.addEventListener("dragover", (event) => {
				if (!draggedItem) {
					return;
				}
				event.preventDefault();
				const targetItem = event.target.closest("[data-role='content-item']");
				if (!targetItem || targetItem === draggedItem) {
					return;
				}
				const rect = targetItem.getBoundingClientRect();
				const before = event.clientY - rect.top < rect.height / 2;
				if (before) {
					targetItem.before(draggedItem);
				} else {
					targetItem.after(draggedItem);
				}
			});

			list.addEventListener("dragend", () => {
				if (draggedItem) {
					draggedItem.classList.remove("opacity-60");
					draggedItem.dataset.dragging = "";
				}
				draggedItem = null;
				syncOrder();
			});
		}
	};

	initPage();
</script>