+Benutzer filter, u. Spalte

This commit is contained in:
Simon Martens
2026-01-28 19:37:19 +01:00
parent 5c9cbcd4ac
commit b5985cba18
19 changed files with 1031 additions and 100 deletions

View File

@@ -6,23 +6,26 @@
<tr>
<th class="py-2 pr-4 pl-2 whitespace-nowrap w-[10rem] align-bottom"
:aria-sort="sortField === 'alm' ? (sortOrder === 'asc' ? 'ascending' : 'descending') : 'none'">
<button type="button"
class="flex w-full items-center justify-between gap-1 text-left text-sm"
@click="changeSort('alm')">
<span class="font-semibold tracking-wide">Alm</span>
<i class="text-xs opacity-70 transition-colors"
:class="{
'ri-arrow-up-line text-blue-600': sortField === 'alm' && sortOrder === 'asc',
'ri-arrow-down-line text-blue-600': sortField === 'alm' && sortOrder === 'desc',
'ri-arrow-up-down-line text-gray-400': sortField !== 'alm'
}"
aria-hidden="true"></i>
</button>
<div class="flex flex-col items-start gap-0.5 leading-tight">
<button type="button"
class="baende-sort-button flex w-full items-center justify-between gap-1 text-left text-sm"
@click="changeSort('alm')">
<span class="font-semibold tracking-wide">Alm-Nr</span>
<i class="text-xs opacity-70 transition-colors"
:class="{
'ri-arrow-up-line text-blue-600': sortField === 'alm' && sortOrder === 'asc',
'ri-arrow-down-line text-blue-600': sortField === 'alm' && sortOrder === 'desc',
'ri-arrow-up-down-line text-gray-400': sortField !== 'alm'
}"
aria-hidden="true"></i>
</button>
<span class="font-semibold tracking-wide">Nachweis</span>
</div>
</th>
<th class="py-2 pr-4 whitespace-nowrap w-[44rem] align-bottom"
<th class="py-2 pr-4 whitespace-nowrap w-[44rem] align-bottom col-title"
:aria-sort="sortField === 'title' ? (sortOrder === 'asc' ? 'ascending' : 'descending') : 'none'">
<button type="button"
class="flex w-full items-center justify-between gap-1 text-left text-sm"
class="baende-sort-button flex w-full items-center justify-between gap-1 text-left text-sm"
@click="changeSort('title')">
<span class="font-semibold tracking-wide">Titel</span>
<i class="text-xs opacity-70 transition-colors"
@@ -37,7 +40,7 @@
<th class="py-2 pr-4 whitespace-nowrap col-appearance w-[18rem] align-bottom">
<div class="flex flex-col items-start gap-0.5 h-full justify-end">
<button type="button"
class="flex w-full items-center justify-between gap-1 text-left text-sm leading-tight"
class="baende-sort-button flex w-full items-center justify-between gap-1 text-left text-sm leading-tight"
@click="changeSort('responsibility')">
<span class="font-semibold tracking-wide">Herausgeber</span>
<i class="text-xs opacity-70 transition-colors"
@@ -49,7 +52,7 @@
aria-hidden="true"></i>
</button>
<button type="button"
class="flex w-full items-center justify-between gap-1 text-left text-sm leading-tight"
class="baende-sort-button flex w-full items-center justify-between gap-1 text-left text-sm leading-tight"
@click="changeSort('place')">
<span class="font-semibold tracking-wide">Ortsangabe</span>
<i class="text-xs opacity-70 transition-colors"
@@ -65,7 +68,7 @@
<th class="py-2 pr-4 whitespace-nowrap col-year hidden align-bottom"
:aria-sort="sortField === 'year' ? (sortOrder === 'asc' ? 'ascending' : 'descending') : 'none'">
<button type="button"
class="flex w-full items-center justify-between gap-1 text-left text-sm"
class="baende-sort-button flex w-full items-center justify-between gap-1 text-left text-sm"
@click="changeSort('year')">
<span class="font-semibold tracking-wide">Jahr</span>
<i class="text-xs opacity-70 transition-colors"
@@ -86,7 +89,7 @@
<th class="py-2 pr-4 whitespace-nowrap col-signatures align-bottom"
:aria-sort="sortField === 'signatur' ? (sortOrder === 'asc' ? 'ascending' : 'descending') : 'none'">
<button type="button"
class="flex w-full items-center justify-between gap-1 text-left text-sm"
class="baende-sort-button flex w-full items-center justify-between gap-1 text-left text-sm"
@click="changeSort('signatur')">
<span class="font-semibold tracking-wide">Signaturen</span>
<i class="text-xs opacity-70 transition-colors"
@@ -98,12 +101,30 @@
aria-hidden="true"></i>
</button>
</th>
<th class="py-2 pr-4 whitespace-nowrap col-modified hidden align-bottom w-[11.25rem]"
:aria-sort="sortField === 'updated' ? (sortOrder === 'asc' ? 'ascending' : 'descending') : 'none'">
<div class="flex flex-col items-start gap-0.5 leading-tight">
<button type="button"
class="baende-sort-button flex w-full items-center justify-between gap-1 text-left text-sm"
@click="changeSort('updated')">
<span class="font-semibold tracking-wide">Bearbeitet am</span>
<i class="text-xs opacity-70 transition-colors"
:class="{
'ri-arrow-up-line text-blue-600': sortField === 'updated' && sortOrder === 'asc',
'ri-arrow-down-line text-blue-600': sortField === 'updated' && sortOrder === 'desc',
'ri-arrow-up-down-line text-gray-400': sortField !== 'updated'
}"
aria-hidden="true"></i>
</button>
<span class="font-semibold tracking-wide">Benutzer</span>
</div>
</th>
</tr>
</thead>
<tbody id="baende-tbody">
{{- if not (len $model.result.Entries) -}}
<tr>
<td colspan="6" class="py-6 text-center text-sm text-gray-500">
<td colspan="7" class="py-6 text-center text-sm text-gray-500">
Keine Bände gefunden.
</td>
</tr>
@@ -149,7 +170,7 @@
</div>
</div>
</td>
<td class="py-2 pr-4">
<td class="py-2 pr-4 col-title">
<div class="font-semibold text-slate-900 text-base leading-snug">
{{- if $entry.PreferredTitle -}}
<span class="inline">{{ $entry.PreferredTitle }}</span>
@@ -269,6 +290,20 @@
</div>
{{- end -}}
</td>
<td class="py-2 pr-4 col-modified hidden w-[11.25rem]">
<div class="flex flex-col gap-1 text-sm text-gray-700">
{{- if $entry.Updated -}}
<div class="tabular-nums">{{ GermanShortDateTime $entry.Updated }}</div>
{{- end -}}
{{- $editor := $entry.Editor -}}
{{- if $editor -}}
{{- $user := index $model.result.Users $editor -}}
{{- if $user -}}
<div class="font-semibold text-slate-900">{{ $user.Name }}</div>
{{- end -}}
{{- end -}}
</div>
</td>
</tr>
{{- end -}}
</tbody>
@@ -279,8 +314,19 @@
(() => {
const toggleRoot = document.querySelector('[data-role="baende-column-toggle"]');
if (toggleRoot) {
toggleRoot.querySelectorAll('input[type="checkbox"][data-col]').forEach((checkbox) => {
const storageKey = "baende-columns";
let saved = null;
try {
saved = JSON.parse(localStorage.getItem(storageKey) || "null");
} catch {
saved = null;
}
const checkboxes = toggleRoot.querySelectorAll('input[type="checkbox"][data-col]');
checkboxes.forEach((checkbox) => {
const col = checkbox.getAttribute("data-col");
if (saved && typeof saved[col] === "boolean") {
checkbox.checked = saved[col];
}
const setColumn = (visible) => {
document.querySelectorAll(`.col-${col}`).forEach((el) => {
el.classList.toggle("hidden", !visible);
@@ -289,6 +335,12 @@
setColumn(checkbox.checked);
checkbox.addEventListener("change", (event) => {
setColumn(event.target.checked);
const nextState = {};
checkboxes.forEach((cb) => {
const key = cb.getAttribute("data-col");
nextState[key] = cb.checked;
});
localStorage.setItem(storageKey, JSON.stringify(nextState));
});
});
}