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

+Reihen relations, small UX stuff

Browse Source
This commit is contained in:
Simon Martens
2026-01-08 14:36:18 +01:00
parent 53eab6a779
commit 1656f60ac4
12 changed files with 1732 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
views/transform/items-editor.js
View File

@@ -9,6 +9,7 @@ const CLOSE_BUTTON_CLASS = "items-close-button";
const SUMMARY_CLASS = "items-summary";
const EDIT_PANEL_CLASS = "items-edit-panel";
const REMOVED_INPUT_NAME = "items_removed[]";
const REMOVED_ROW_STATE = "data-items-removed";
export class ItemsEditor extends HTMLElement {
constructor() {
@@ -76,15 +77,8 @@ export class ItemsEditor extends HTMLElement {
if (!row) {
return;
}
const idInput = row.querySelector('input[name="items_id[]"]');
const itemId = idInput ? idInput.value.trim() : "";
if (itemId) {
this._ensureRemovalInput(itemId);
}
row.remove();
this._refreshRowIds();
const isRemoved = row.getAttribute(REMOVED_ROW_STATE) === "true";
this._setRowRemoved(row, !isRemoved);
}
_wireRemoveButtons(root = this) {
@@ -97,6 +91,47 @@ export class ItemsEditor extends HTMLElement {
event.preventDefault();
this.removeItem(btn);
});
btn.addEventListener("mouseenter", () => {
const row = btn.closest(`.${ROW_CLASS}`);
if (!row || row.getAttribute(REMOVED_ROW_STATE) !== "true") {
return;
}
const label = btn.querySelector("[data-delete-label]");
if (label) {
label.textContent = label.getAttribute("data-delete-hover") || "Rückgängig";
label.classList.add("text-orange-700");
}
const icon = btn.querySelector("i");
if (icon) {
icon.classList.remove("hidden");
icon.classList.add("ri-arrow-go-back-line");
icon.classList.remove("ri-delete-bin-line");
}
});
btn.addEventListener("mouseleave", () => {
const row = btn.closest(`.${ROW_CLASS}`);
const label = btn.querySelector("[data-delete-label]");
if (!label) {
return;
}
label.classList.remove("text-orange-700");
if (row && row.getAttribute(REMOVED_ROW_STATE) === "true") {
label.textContent = label.getAttribute("data-delete-active") || "Wird entfernt";
} else {
label.textContent = label.getAttribute("data-delete-default") || "Entfernen";
}
const icon = btn.querySelector("i");
if (icon) {
if (row && row.getAttribute(REMOVED_ROW_STATE) === "true") {
icon.classList.add("hidden");
icon.classList.remove("ri-delete-bin-line", "ri-arrow-go-back-line");
} else {
icon.classList.remove("hidden");
icon.classList.add("ri-delete-bin-line");
icon.classList.remove("ri-arrow-go-back-line");
}
}
});
});
}
@@ -159,6 +194,48 @@ export class ItemsEditor extends HTMLElement {
this._setRowMode(row, "summary");
}
_setRowRemoved(row, removed) {
row.setAttribute(REMOVED_ROW_STATE, removed ? "true" : "false");
row.classList.toggle("bg-red-50", removed);
row.querySelectorAll("[data-items-strike]").forEach((el) => {
el.classList.toggle("line-through", removed);
el.classList.toggle("decoration-2", removed);
el.classList.toggle("decoration-red-600", removed);
el.classList.toggle("text-gray-500", removed);
});
row.querySelectorAll("[data-delete-label]").forEach((label) => {
const nextLabel = removed
? label.getAttribute("data-delete-active") || "Wird entfernt"
: label.getAttribute("data-delete-default") || "Entfernen";
label.textContent = nextLabel;
});
row.querySelectorAll(`.${REMOVE_BUTTON_CLASS} i`).forEach((icon) => {
if (removed) {
icon.classList.add("hidden");
icon.classList.remove("ri-delete-bin-line", "ri-arrow-go-back-line");
} else {
icon.classList.remove("hidden");
icon.classList.add("ri-delete-bin-line");
icon.classList.remove("ri-arrow-go-back-line");
}
});
const idInput = row.querySelector('input[name="items_id[]"]');
const itemId = idInput ? idInput.value.trim() : "";
if (itemId) {
if (removed) {
this._ensureRemovalInput(itemId);
} else {
this._removeRemovalInput(itemId);
}
}
row.querySelectorAll("[data-field]").forEach((field) => {
field.disabled = removed;
});
}
_setRowMode(row, mode) {
const summary = row.querySelector(`.${SUMMARY_CLASS}`);
const editor = row.querySelector(`.${EDIT_PANEL_CLASS}`);
@@ -238,6 +315,7 @@ export class ItemsEditor extends HTMLElement {
this.querySelectorAll(`.${ROW_CLASS}`).forEach((row) => {
this._wireSummarySync(row);
this._syncSummary(row);
this._syncNewBadge(row);
});
}
@@ -285,6 +363,15 @@ export class ItemsEditor extends HTMLElement {
}
}
});
this._syncNewBadge(row);
}
_syncNewBadge(row) {
const idInput = row.querySelector('input[name="items_id[]"]');
const itemId = idInput ? idInput.value.trim() : "";
row.querySelectorAll("[data-new-badge]").forEach((badge) => {
badge.classList.toggle("hidden", itemId !== "");
});
}
_setSummaryContent(summaryField, value) {
@@ -336,4 +423,13 @@ export class ItemsEditor extends HTMLElement {
hidden.value = itemId;
this.appendChild(hidden);
}
_removeRemovalInput(itemId) {
const inputs = Array.from(this.querySelectorAll(`input[name="${REMOVED_INPUT_NAME}"]`));
for (const input of inputs) {
if (input.value === itemId) {
input.remove();
}
}
}
}