mirror of
https://github.com/Theodor-Springmann-Stiftung/musenalm.git
synced 2026-02-04 10:35:30 +00:00
Save button
This commit is contained in:
Simon Martens
File diff suppressed because it is too large
Load Diff
@@ -80,17 +80,16 @@ type AlmanachResult struct {
|
||||
<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">
|
||||
{{ GermanDate $model.result.Entry.Updated }},
|
||||
{{ GermanTime
|
||||
$model.result.Entry.Updated
|
||||
}}h
|
||||
<div class="px-1.5 py-0.5 rounded-xs bg-gray-200 w-fit" id="almanach-updated-stamp">
|
||||
<span id="almanach-updated-date">{{ GermanDate $model.result.Entry.Updated }}</span>,
|
||||
<span id="almanach-updated-time">{{ 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 }}"
|
||||
id="almanach-updated-user">
|
||||
<i class="ri-user-line mr-1"></i>
|
||||
<span id="almanach-updated-user-name">{{- if $model.result.User -}}{{ $model.result.User.Name }}{{- end -}}</span>
|
||||
</div>
|
||||
{{- if $model.result.User -}}
|
||||
<div class="px-1.5 py-0.5 rounded-xs mt-1.5 bg-gray-200 w-fit">
|
||||
<i class="ri-user-line mr-1"></i> {{- $model.result.User.Name -}}
|
||||
</div>
|
||||
{{- end -}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -100,10 +99,17 @@ type AlmanachResult struct {
|
||||
|
||||
<div class="container-normal mx-auto mt-4 !px-0">
|
||||
{{ template "_usermessage" $model }}
|
||||
<form class="w-full flex gap-8 dbform" id="changealmanachform" x-target="changealmanachform user-message almanach-header-data" hx-boost="false" method="POST">
|
||||
<form
|
||||
class="w-full dbform"
|
||||
id="changealmanachform"
|
||||
x-target="changealmanachform user-message almanach-header-data"
|
||||
hx-boost="false"
|
||||
method="POST"
|
||||
data-save-endpoint="/almanach/{{ $model.result.Entry.MusenalmID }}/edit/save">
|
||||
<input type="hidden" name="csrf_token" value="{{ $model.csrf_token }}" />
|
||||
<input type="hidden" name="last_edited" value="{{ $model.result.Entry.Updated }}" />
|
||||
|
||||
<div class="flex gap-8">
|
||||
<!-- Left Column -->
|
||||
<div class="flex-1 flex flex-col gap-4">
|
||||
<!-- Kurztitel -->
|
||||
@@ -553,6 +559,7 @@ type AlmanachResult struct {
|
||||
<multi-select-simple
|
||||
id="places"
|
||||
name="places[]"
|
||||
value='[{{- range $i, $place := $model.result.Places -}}{{- if $i }},{{ end -}}"{{ $place.Id }}"{{- end -}}]'
|
||||
placeholder="Orte suchen..."
|
||||
data-toggle-label='<i class="ri-add-circle-line"></i>'
|
||||
data-empty-text="Keine Orte ausgewählt..."
|
||||
@@ -561,8 +568,8 @@ type AlmanachResult struct {
|
||||
data-result-key="places"
|
||||
data-minchars="1"
|
||||
data-limit="15"
|
||||
data-initial-options='[{{- range $i, $place := $model.result.Places -}}{{- if $i }},{{ end -}}{"id":"{{ $place.Id }}","name":{{ printf "%q" $place.Name }},"additional_data":{{ printf "%q" $place.Pseudonyms }}}}{{- end -}}]'
|
||||
data-initial-values='[{{- range $i, $place := $model.result.Places -}}{{- if $i }},{{ end -}}"{{ $place.Id }}"{{- end -}}]'>
|
||||
data-initial-options='[{{- range $i, $place := $model.result.Places -}}{{- if $i }},{{ end -}}{{ printf "{\"id\":%q,\"name\":%q,\"additional_data\":%q}" $place.Id $place.Name $place.Pseudonyms }}{{- end -}}]'
|
||||
data-initial-values='[{{- range $i, $place := $model.result.Places -}}{{- if $i }},{{ end -}}{{ printf "%q" $place.Id }}{{- end -}}]'>
|
||||
</multi-select-simple>
|
||||
</div>
|
||||
</div>
|
||||
@@ -655,6 +662,7 @@ type AlmanachResult struct {
|
||||
<label for="languages" class="inputlabel">Sprachen</label>
|
||||
<multi-select-simple
|
||||
id="languages"
|
||||
name="languages[]"
|
||||
show-create-button="false"
|
||||
placeholder="Sprachen suchen..."
|
||||
data-toggle-label='<i class="ri-add-circle-line"></i>'
|
||||
@@ -887,6 +895,14 @@ type AlmanachResult struct {
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Right Column -->
|
||||
</div>
|
||||
<div class="w-full flex items-end justify-between gap-4 mt-6 flex-wrap">
|
||||
<p id="almanach-save-feedback" class="text-sm text-gray-600" aria-live="polite"></p>
|
||||
<button type="button" class="submitbutton flex items-center gap-2 self-end" data-role="almanach-save">
|
||||
<i class="ri-save-line"></i>
|
||||
<span>Speichern</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</almanach-edit-page>
|
||||
|
||||
@@ -1,12 +1,25 @@
|
||||
const PREFERRED_SERIES_RELATION = "Bevorzugter Reihentitel";
|
||||
|
||||
export class AlmanachEditPage extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this._pendingAgent = null;
|
||||
this._form = null;
|
||||
this._saveButton = null;
|
||||
this._statusEl = null;
|
||||
this._saveEndpoint = "";
|
||||
this._isSaving = false;
|
||||
this._handleSaveClick = this._handleSaveClick.bind(this);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this._initForm();
|
||||
this._initPlaces();
|
||||
this._initSaveHandling();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this._teardownSaveHandling();
|
||||
}
|
||||
|
||||
_initForm() {
|
||||
@@ -31,20 +44,383 @@ export class AlmanachEditPage extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
_initPlaces() {
|
||||
const placesSelect = this.querySelector("#places");
|
||||
if (!placesSelect) {
|
||||
_initPlaces() {
|
||||
const placesSelect = this.querySelector("#places");
|
||||
if (!placesSelect) {
|
||||
return;
|
||||
}
|
||||
const applyInitial = () => {
|
||||
const initialPlaces = this._parseJSONAttr(placesSelect, "data-initial-options") || [];
|
||||
const initialPlaceIds = this._parseJSONAttr(placesSelect, "data-initial-values") || [];
|
||||
if (initialPlaces.length > 0 && typeof placesSelect.setOptions === "function") {
|
||||
placesSelect.setOptions(initialPlaces);
|
||||
}
|
||||
if (initialPlaceIds.length > 0) {
|
||||
placesSelect.value = initialPlaceIds;
|
||||
if (typeof placesSelect.captureInitialSelection === "function") {
|
||||
placesSelect.captureInitialSelection();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof placesSelect.setOptions === "function") {
|
||||
applyInitial();
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof window.customElements?.whenDefined === "function") {
|
||||
window.customElements.whenDefined("multi-select-simple").then(() => {
|
||||
requestAnimationFrame(() => applyInitial());
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_initSaveHandling() {
|
||||
this._teardownSaveHandling();
|
||||
this._form = this.querySelector("#changealmanachform");
|
||||
this._saveButton = this.querySelector("[data-role='almanach-save']");
|
||||
this._statusEl = this.querySelector("#almanach-save-feedback");
|
||||
if (!this._form || !this._saveButton) {
|
||||
return;
|
||||
}
|
||||
const initialPlaces = this._parseJSONAttr(placesSelect, "data-initial-options") || [];
|
||||
const initialPlaceIds = this._parseJSONAttr(placesSelect, "data-initial-values") || [];
|
||||
this._saveEndpoint = this._form.getAttribute("data-save-endpoint") || this._deriveSaveEndpoint();
|
||||
this._saveButton.addEventListener("click", this._handleSaveClick);
|
||||
}
|
||||
|
||||
if (initialPlaces.length > 0 && typeof placesSelect.setOptions === "function") {
|
||||
placesSelect.setOptions(initialPlaces);
|
||||
_teardownSaveHandling() {
|
||||
if (this._saveButton) {
|
||||
this._saveButton.removeEventListener("click", this._handleSaveClick);
|
||||
}
|
||||
if (initialPlaceIds.length > 0) {
|
||||
placesSelect.value = initialPlaceIds;
|
||||
this._saveButton = null;
|
||||
this._statusEl = null;
|
||||
}
|
||||
|
||||
_deriveSaveEndpoint() {
|
||||
if (!window?.location?.pathname) {
|
||||
return "/almanach/save";
|
||||
}
|
||||
const path = window.location.pathname.endsWith("/")
|
||||
? window.location.pathname.slice(0, -1)
|
||||
: window.location.pathname;
|
||||
return `${path}/save`;
|
||||
}
|
||||
|
||||
async _handleSaveClick(event) {
|
||||
event.preventDefault();
|
||||
if (this._isSaving) {
|
||||
return;
|
||||
}
|
||||
this._clearStatus();
|
||||
let payload;
|
||||
try {
|
||||
payload = this._buildPayload();
|
||||
} catch (error) {
|
||||
this._showStatus(error instanceof Error ? error.message : String(error), "error");
|
||||
return;
|
||||
}
|
||||
this._setSavingState(true);
|
||||
try {
|
||||
const response = await fetch(this._saveEndpoint, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
let data = null;
|
||||
try {
|
||||
data = await response.clone().json();
|
||||
} catch {
|
||||
data = null;
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const message = data?.error || `Speichern fehlgeschlagen (${response.status}).`;
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
await this._reloadForm(data?.message || "Änderungen gespeichert.");
|
||||
this._clearStatus();
|
||||
} catch (error) {
|
||||
this._showStatus(error instanceof Error ? error.message : "Speichern fehlgeschlagen.", "error");
|
||||
} finally {
|
||||
this._setSavingState(false);
|
||||
}
|
||||
}
|
||||
|
||||
_buildPayload() {
|
||||
if (!this._form) {
|
||||
throw new Error("Formular konnte nicht gefunden werden.");
|
||||
}
|
||||
const formData = new FormData(this._form);
|
||||
const entry = {
|
||||
preferred_title: this._readValue(formData, "preferred_title"),
|
||||
title: this._readValue(formData, "title"),
|
||||
parallel_title: this._readValue(formData, "paralleltitle"),
|
||||
subtitle: this._readValue(formData, "subtitle"),
|
||||
variant_title: this._readValue(formData, "varianttitle"),
|
||||
incipit: this._readValue(formData, "incipit"),
|
||||
responsibility_statement: this._readValue(formData, "responsibility_statement"),
|
||||
publication_statement: this._readValue(formData, "publication_statement"),
|
||||
place_statement: this._readValue(formData, "place_statement"),
|
||||
edition: this._readValue(formData, "edition"),
|
||||
annotation: this._readValue(formData, "annotation"),
|
||||
edit_comment: this._readValue(formData, "edit_comment"),
|
||||
extent: this._readValue(formData, "extent"),
|
||||
dimensions: this._readValue(formData, "dimensions"),
|
||||
references: this._readValue(formData, "refs"),
|
||||
status: this._readValue(formData, "type"),
|
||||
};
|
||||
|
||||
if (!entry.preferred_title) {
|
||||
throw new Error("Kurztitel ist erforderlich.");
|
||||
}
|
||||
|
||||
const yearValue = this._readValue(formData, "year");
|
||||
if (yearValue === "") {
|
||||
throw new Error("Jahr muss angegeben werden (0 ist erlaubt).");
|
||||
}
|
||||
const parsedYear = Number.parseInt(yearValue, 10);
|
||||
if (Number.isNaN(parsedYear)) {
|
||||
throw new Error("Jahr ist ungültig.");
|
||||
}
|
||||
entry.year = parsedYear;
|
||||
|
||||
const languages = formData.getAll("languages[]").map((value) => value.trim()).filter(Boolean);
|
||||
const places = formData.getAll("places[]").map((value) => value.trim()).filter(Boolean);
|
||||
const { items, removedIds } = this._collectItems(formData);
|
||||
const {
|
||||
relations: seriesRelations,
|
||||
deleted: deletedSeriesRelationIds,
|
||||
} = this._collectRelations(formData, {
|
||||
prefix: "entries_series",
|
||||
targetField: "series",
|
||||
});
|
||||
const newSeriesRelations = this._collectNewRelations("entries_series");
|
||||
const hasPreferredSeries = [...seriesRelations, ...newSeriesRelations].some(
|
||||
(relation) => relation.type === PREFERRED_SERIES_RELATION,
|
||||
);
|
||||
if (!hasPreferredSeries) {
|
||||
throw new Error("Mindestens ein bevorzugter Reihentitel muss verknüpft sein.");
|
||||
}
|
||||
|
||||
const {
|
||||
relations: agentRelations,
|
||||
deleted: deletedAgentRelationIds,
|
||||
} = this._collectRelations(formData, {
|
||||
prefix: "entries_agents",
|
||||
targetField: "agent",
|
||||
});
|
||||
const newAgentRelations = this._collectNewRelations("entries_agents");
|
||||
|
||||
return {
|
||||
csrf_token: this._readValue(formData, "csrf_token"),
|
||||
last_edited: this._readValue(formData, "last_edited"),
|
||||
entry,
|
||||
languages,
|
||||
places,
|
||||
items,
|
||||
deleted_item_ids: removedIds,
|
||||
series_relations: seriesRelations,
|
||||
new_series_relations: newSeriesRelations,
|
||||
deleted_series_relation_ids: deletedSeriesRelationIds,
|
||||
agent_relations: agentRelations,
|
||||
new_agent_relations: newAgentRelations,
|
||||
deleted_agent_relation_ids: deletedAgentRelationIds,
|
||||
};
|
||||
}
|
||||
|
||||
_collectItems(formData) {
|
||||
const ids = formData.getAll("items_id[]").map((value) => value.trim());
|
||||
const owners = formData.getAll("items_owner[]");
|
||||
const identifiers = formData.getAll("items_identifier[]");
|
||||
const locations = formData.getAll("items_location[]");
|
||||
const media = formData.getAll("items_media[]");
|
||||
const annotations = formData.getAll("items_annotation[]");
|
||||
const uris = formData.getAll("items_uri[]");
|
||||
const removed = new Set(
|
||||
formData
|
||||
.getAll("items_removed[]")
|
||||
.map((value) => value.trim())
|
||||
.filter(Boolean),
|
||||
);
|
||||
const items = [];
|
||||
for (let index = 0; index < ids.length; index += 1) {
|
||||
const id = ids[index] || "";
|
||||
if (id && removed.has(id)) {
|
||||
continue;
|
||||
}
|
||||
const owner = (owners[index] || "").trim();
|
||||
const identifier = (identifiers[index] || "").trim();
|
||||
const location = (locations[index] || "").trim();
|
||||
const annotation = (annotations[index] || "").trim();
|
||||
const uri = (uris[index] || "").trim();
|
||||
const mediaValue = (media[index] || "").trim();
|
||||
const hasValues = id || owner || identifier || location || annotation || uri || mediaValue;
|
||||
if (!hasValues) {
|
||||
continue;
|
||||
}
|
||||
items.push({
|
||||
id,
|
||||
owner,
|
||||
identifier,
|
||||
location,
|
||||
annotation,
|
||||
uri,
|
||||
media: mediaValue ? [mediaValue] : [],
|
||||
});
|
||||
}
|
||||
return {
|
||||
items,
|
||||
removedIds: Array.from(removed),
|
||||
};
|
||||
}
|
||||
|
||||
_collectRelations(formData, { prefix, targetField }) {
|
||||
const relations = [];
|
||||
const deleted = [];
|
||||
for (const [key, value] of formData.entries()) {
|
||||
if (!key.startsWith(`${prefix}_type[`)) {
|
||||
continue;
|
||||
}
|
||||
const relationKey = key.slice(key.indexOf("[") + 1, -1);
|
||||
const targetKey = `${prefix}_${targetField}[${relationKey}]`;
|
||||
const relationIdKey = `${prefix}_id[${relationKey}]`;
|
||||
const deleteKey = `${prefix}_delete[${relationKey}]`;
|
||||
const uncertainKey = `${prefix}_uncertain[${relationKey}]`;
|
||||
const targetId = (formData.get(targetKey) || "").trim();
|
||||
if (!targetId) {
|
||||
continue;
|
||||
}
|
||||
const relationId = (formData.get(relationIdKey) || relationKey).trim();
|
||||
if (formData.has(deleteKey)) {
|
||||
if (relationId) {
|
||||
deleted.push(relationId);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
relations.push({
|
||||
id: relationId,
|
||||
target_id: targetId,
|
||||
type: (value || "").trim(),
|
||||
uncertain: formData.has(uncertainKey),
|
||||
});
|
||||
}
|
||||
return { relations, deleted };
|
||||
}
|
||||
|
||||
_collectNewRelations(prefix) {
|
||||
const editor = this.querySelector(`relations-editor[data-prefix='${prefix}']`);
|
||||
if (!editor) {
|
||||
return [];
|
||||
}
|
||||
const newRows = editor.querySelectorAll("[data-role='relation-add-row'] [data-rel-row]");
|
||||
const relations = [];
|
||||
newRows.forEach((row) => {
|
||||
const idInput = row.querySelector(`input[name='${prefix}_new_id']`);
|
||||
const typeInput = row.querySelector(`select[name='${prefix}_new_type']`);
|
||||
const uncertainInput = row.querySelector(`input[name='${prefix}_new_uncertain']`);
|
||||
if (!idInput) {
|
||||
return;
|
||||
}
|
||||
const targetId = idInput.value.trim();
|
||||
if (!targetId) {
|
||||
return;
|
||||
}
|
||||
relations.push({
|
||||
target_id: targetId,
|
||||
type: (typeInput?.value || "").trim(),
|
||||
uncertain: Boolean(uncertainInput?.checked),
|
||||
});
|
||||
});
|
||||
return relations;
|
||||
}
|
||||
|
||||
_readValue(formData, field) {
|
||||
const value = formData.get(field);
|
||||
return value ? String(value).trim() : "";
|
||||
}
|
||||
|
||||
_setSavingState(isSaving) {
|
||||
this._isSaving = isSaving;
|
||||
if (!this._saveButton) {
|
||||
return;
|
||||
}
|
||||
this._saveButton.disabled = isSaving;
|
||||
const label = this._saveButton.querySelector("span");
|
||||
if (label) {
|
||||
label.textContent = isSaving ? "Speichern..." : "Speichern";
|
||||
}
|
||||
}
|
||||
|
||||
_clearStatus() {
|
||||
if (!this._statusEl) {
|
||||
return;
|
||||
}
|
||||
this._statusEl.textContent = "";
|
||||
this._statusEl.classList.remove("text-red-700", "text-green-700");
|
||||
}
|
||||
|
||||
_showStatus(message, type) {
|
||||
if (!this._statusEl) {
|
||||
return;
|
||||
}
|
||||
this._clearStatus();
|
||||
this._statusEl.textContent = message;
|
||||
if (type === "success") {
|
||||
this._statusEl.classList.add("text-green-700");
|
||||
} else if (type === "error") {
|
||||
this._statusEl.classList.add("text-red-700");
|
||||
}
|
||||
}
|
||||
|
||||
async _reloadForm(successMessage) {
|
||||
this._teardownSaveHandling();
|
||||
const targetUrl = new URL(window.location.href);
|
||||
if (successMessage) {
|
||||
targetUrl.searchParams.set("saved_message", successMessage);
|
||||
} else {
|
||||
targetUrl.searchParams.delete("saved_message");
|
||||
}
|
||||
|
||||
const response = await fetch(targetUrl.toString(), {
|
||||
headers: {
|
||||
"X-Requested-With": "fetch",
|
||||
},
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error("Formular konnte nicht aktualisiert werden.");
|
||||
}
|
||||
|
||||
const html = await response.text();
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, "text/html");
|
||||
|
||||
const newForm = doc.querySelector("#changealmanachform");
|
||||
const currentForm = this.querySelector("#changealmanachform");
|
||||
if (!newForm || !currentForm) {
|
||||
throw new Error("Formular konnte nicht geladen werden.");
|
||||
}
|
||||
currentForm.replaceWith(newForm);
|
||||
this._form = newForm;
|
||||
|
||||
const newMessage = doc.querySelector("#user-message");
|
||||
const currentMessage = this.querySelector("#user-message");
|
||||
if (newMessage && currentMessage) {
|
||||
currentMessage.replaceWith(newMessage);
|
||||
}
|
||||
|
||||
const newHeader = doc.querySelector("#almanach-header-data");
|
||||
const currentHeader = this.querySelector("#almanach-header-data");
|
||||
if (newHeader && currentHeader) {
|
||||
currentHeader.replaceWith(newHeader);
|
||||
}
|
||||
|
||||
this._initForm();
|
||||
this._initPlaces();
|
||||
this._initSaveHandling();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -506,6 +506,14 @@ export class MultiSelectSimple extends HTMLElement {
|
||||
this._updateRootElementStateClasses();
|
||||
}
|
||||
|
||||
captureInitialSelection() {
|
||||
this._initialValue = [...this._value];
|
||||
this._initialOrder = [...this._value];
|
||||
this._removedIds.clear();
|
||||
this._initialCaptured = true;
|
||||
this._renderSelectedItems();
|
||||
}
|
||||
|
||||
_synchronizeHiddenSelect() {
|
||||
if (!this.hiddenSelect) return;
|
||||
this.hiddenSelect.innerHTML = "";
|
||||
|
||||
Reference in New Issue
Block a user