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

BUGFIX: annoyances when editing a almanach

Browse Source
This commit is contained in:
Simon Martens
2026-01-09 22:04:00 +01:00
parent 65f83aa6a6
commit 22b303dc72
13 changed files with 657 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
views/transform/fab-menu.js
View File

@@ -126,22 +126,78 @@ export class FabMenu extends HTMLElement {
<div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">
Erstellen
</div>
<a href="/almanach-new/" class="flex items-center px-4 py-2 hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-book-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Neuer Band</span>
</a>
<a href="/reihen/new/" class="flex items-center px-4 py-2 hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-stack-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Neue Reihe</span>
</a>
<a href="/orte/new/" class="flex items-center px-4 py-2 hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-map-pin-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Neuer Ort</span>
</a>
<a href="/personen/new/" class="flex items-center px-4 py-2 hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-group-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Neue Person</span>
</a>
<div class="grid grid-cols-[1fr_auto] group">
<a href="/almanach-new/" class="flex items-center px-4 py-2 group-hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-book-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Neuer Band</span>
</a>
<a href="/almanach-new/" target="_blank" class="flex items-center justify-center px-3 py-2 group-hover:bg-gray-100 text-gray-700 hover:text-slate-900 transition-colors no-underline text-sm" title="In neuem Tab öffnen">
<i class="ri-external-link-line text-base"></i>
</a>
</div>
<div class="grid grid-cols-[1fr_auto] group">
<a href="/reihen/new/" class="flex items-center px-4 py-2 group-hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-stack-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Neue Reihe</span>
</a>
<a href="/reihen/new/" target="_blank" class="flex items-center justify-center px-3 py-2 group-hover:bg-gray-100 text-gray-700 hover:text-slate-900 transition-colors no-underline text-sm" title="In neuem Tab öffnen">
<i class="ri-external-link-line text-base"></i>
</a>
</div>
<div class="grid grid-cols-[1fr_auto] group">
<a href="/orte/new/" class="flex items-center px-4 py-2 group-hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-map-pin-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Neuer Ort</span>
</a>
<a href="/orte/new/" target="_blank" class="flex items-center justify-center px-3 py-2 group-hover:bg-gray-100 text-gray-700 hover:text-slate-900 transition-colors no-underline text-sm" title="In neuem Tab öffnen">
<i class="ri-external-link-line text-base"></i>
</a>
</div>
<div class="grid grid-cols-[1fr_auto] group">
<a href="/personen/new/" class="flex items-center px-4 py-2 group-hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-group-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Neue Person</span>
</a>
<a href="/personen/new/" target="_blank" class="flex items-center justify-center px-3 py-2 group-hover:bg-gray-100 text-gray-700 hover:text-slate-900 transition-colors no-underline text-sm" title="In neuem Tab öffnen">
<i class="ri-external-link-line text-base"></i>
</a>
</div>
<div class="border-t border-gray-200 my-1"></div>
`
: "";
const listenSection = isAdminOrEditor
? `
<div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">
Listen
</div>
<div class="grid grid-cols-[1fr_auto] group">
<a href="/reihen/" class="flex items-center px-4 py-2 group-hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-stack-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Reihen</span>
</a>
<a href="/reihen/" target="_blank" class="flex items-center justify-center px-3 py-2 group-hover:bg-gray-100 text-gray-700 hover:text-slate-900 transition-colors no-underline text-sm" title="In neuem Tab öffnen">
<i class="ri-external-link-line text-base"></i>
</a>
</div>
<div class="grid grid-cols-[1fr_auto] group">
<a href="/orte/" class="flex items-center px-4 py-2 group-hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-map-pin-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Orte</span>
</a>
<a href="/orte/" target="_blank" class="flex items-center justify-center px-3 py-2 group-hover:bg-gray-100 text-gray-700 hover:text-slate-900 transition-colors no-underline text-sm" title="In neuem Tab öffnen">
<i class="ri-external-link-line text-base"></i>
</a>
</div>
<div class="grid grid-cols-[1fr_auto] group">
<a href="/personen/" class="flex items-center px-4 py-2 group-hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-group-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Personen</span>
</a>
<a href="/personen/" target="_blank" class="flex items-center justify-center px-3 py-2 group-hover:bg-gray-100 text-gray-700 hover:text-slate-900 transition-colors no-underline text-sm" title="In neuem Tab öffnen">
<i class="ri-external-link-line text-base"></i>
</a>
</div>
<div class="border-t border-gray-200 my-1"></div>
`
: "";
@@ -151,14 +207,24 @@ export class FabMenu extends HTMLElement {
<div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">
Administration
</div>
<a href="/user/management/access/User?redirectTo=${redirectPath}" class="flex items-center px-4 py-2 hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-group-3-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Nutzer einladen</span>
</a>
<a href="/user/management?redirectTo=${redirectPath}" class="flex items-center px-4 py-2 hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-group-2-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Benutzerverwaltung</span>
</a>
<div class="grid grid-cols-[1fr_auto] group">
<a href="/user/management/access/User?redirectTo=${redirectPath}" class="flex items-center px-4 py-2 group-hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-group-3-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Nutzer einladen</span>
</a>
<a href="/user/management/access/User?redirectTo=${redirectPath}" target="_blank" class="flex items-center justify-center px-3 py-2 group-hover:bg-gray-100 text-gray-700 hover:text-slate-900 transition-colors no-underline text-sm" title="In neuem Tab öffnen">
<i class="ri-external-link-line text-base"></i>
</a>
</div>
<div class="grid grid-cols-[1fr_auto] group">
<a href="/user/management?redirectTo=${redirectPath}" class="flex items-center px-4 py-2 group-hover:bg-gray-100 transition-colors no-underline text-sm">
<i class="ri-group-2-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Benutzerverwaltung</span>
</a>
<a href="/user/management?redirectTo=${redirectPath}" target="_blank" class="flex items-center justify-center px-3 py-2 group-hover:bg-gray-100 text-gray-700 hover:text-slate-900 transition-colors no-underline text-sm" title="In neuem Tab öffnen">
<i class="ri-external-link-line text-base"></i>
</a>
</div>
<div class="border-t border-gray-200 my-1"></div>
`
: "";
@@ -226,6 +292,7 @@ export class FabMenu extends HTMLElement {
<!-- Rest of menu (hidden in half state, shown in full state) -->
<div class="fab-full-content overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0; opacity: 0;">
${createSection}
${listenSection}
${adminSection}
<div class="px-4 py-2">
<div class="font-semibold text-gray-900 text-sm">${userName}</div>

2
views/transform/form.css
View File

@@ -357,7 +357,7 @@
}
.mss-no-items-text {
@apply italic text-sm text-gray-500 w-full;
@apply italic text-base text-gray-600 w-full;
}
.mss-selected-item-pill {

18
views/transform/multi-select-simple.js
View File

@@ -403,6 +403,15 @@ export class MultiSelectSimple extends HTMLElement {
this.toggleButton.addEventListener("click", this._handleToggleClick);
}
// Setup external toggle button if specified
const externalToggleId = this.getAttribute("data-external-toggle-id");
if (externalToggleId) {
this.externalToggleButton = document.getElementById(externalToggleId);
if (this.externalToggleButton) {
this.externalToggleButton.addEventListener("click", this._handleToggleClick);
}
}
this._updateRootElementStateClasses();
if (this.hasAttribute("value")) {
const attrValue = this.getAttribute("value");
@@ -418,6 +427,10 @@ export class MultiSelectSimple extends HTMLElement {
this._renderSelectedItems();
this._synchronizeHiddenSelect();
}
// Ensure selected items are rendered even if value is empty
if (this._value.length === 0) {
this._renderSelectedItems();
}
if (this.hasAttribute("disabled")) this.disabledCallback(true);
if (this._toggleInput) {
this._hideInputControls();
@@ -444,6 +457,7 @@ export class MultiSelectSimple extends HTMLElement {
if (this.createNewButton) this.createNewButton.removeEventListener("click", this._handleCreateNewButtonClick);
if (this.selectedItemsContainer) this.selectedItemsContainer.removeEventListener("click", this._handleSelectedItemsContainerClick);
if (this.toggleButton) this.toggleButton.removeEventListener("click", this._handleToggleClick);
if (this.externalToggleButton) this.externalToggleButton.removeEventListener("click", this._handleToggleClick);
clearTimeout(this._blurTimeout);
if (this._remoteFetchTimeout) {
clearTimeout(this._remoteFetchTimeout);
@@ -641,7 +655,9 @@ export class MultiSelectSimple extends HTMLElement {
const displayIds = [...this._value, ...removedInOrder];
if (displayIds.length === 0) {
const emptyText = this.getAttribute("data-empty-text") || "Keine Auswahl...";
this.selectedItemsContainer.innerHTML = `<span class="${MSS_NO_ITEMS_TEXT_CLASS}">${emptyText}</span>`;
// Start with hidden class - visibility will be managed by show/hide input controls
const hiddenClass = this._inputCollapsed ? '' : 'hidden';
this.selectedItemsContainer.innerHTML = `<span class="${MSS_NO_ITEMS_TEXT_CLASS} ${hiddenClass}">${emptyText}</span>`;
} else {
displayIds.forEach((id) => {
const pillEl = this._createSelectedItemElement(id);

12
views/transform/relations-editor.js
View File

@@ -113,8 +113,17 @@ export class RelationsEditor extends HTMLElement {
if (this._addToggle) {
this._addToggle.addEventListener("click", () => {
const wasHidden = this._addPanel.classList.contains("hidden");
this._addPanel.classList.toggle("hidden");
this._updateEmptyTextVisibility();
// Auto-focus the search input when opening the panel
if (wasHidden && this._addInput) {
// Use setTimeout to ensure the panel is visible before focusing
setTimeout(() => {
this._addInput.focus();
}, 0);
}
});
}
@@ -256,7 +265,7 @@ export class RelationsEditor extends HTMLElement {
const deleteButton = fragment.querySelector(ROLE_NEW_DELETE);
if (deleteButton) {
deleteButton.addEventListener("click", () => {
this._addRow.innerHTML = "";
row.remove();
this._pendingItem = null;
this._clearAddPanel();
if (this._addPanel) {
@@ -266,7 +275,6 @@ export class RelationsEditor extends HTMLElement {
});
}
this._addRow.innerHTML = "";
this._addRow.appendChild(fragment);
this._pendingItem = null;
this._clearAddPanel();