feat: Status-Filter + bessere Ampel-Anzeige im Explorer

- Status-Dropdown im Explorer (in_beratung, beschlossen, versandet etc.)
- Ampel-Punkt größer (3x3) + Status-Label in Ketten-Liste
- Backend status-Filter war schon vorhanden
This commit is contained in:
Dotty Dotter 2026-04-01 20:25:25 +02:00
parent d0f838a50a
commit 5a6a4850fb

View File

@ -19,6 +19,7 @@
// Filters
let suche = $state('');
let strangFilter = $state('');
let statusFilter = $state('');
let currentPage = $state(1);
const PAGE_SIZE = 30;
@ -38,6 +39,18 @@
{ value: 'mitteilung', label: 'Mitteilungen' },
];
const STATUS_OPTIONS = [
{ value: '', label: 'Alle Status' },
{ value: 'in_beratung', label: '⏳ In Beratung' },
{ value: 'beschlossen', label: '🟡 Beschlossen' },
{ value: 'umgesetzt', label: '🟢 Umgesetzt' },
{ value: 'teilweise_umgesetzt', label: '🟡 Teilweise' },
{ value: 'versandet', label: '🔴 Versandet' },
{ value: 'abgelehnt', label: '🔴 Abgelehnt' },
{ value: 'beantwortet', label: '🟢 Beantwortet' },
{ value: 'angefragt', label: '⏳ Angefragt' },
];
const FARB_MAP: Record<string, string> = {
gruen: '#22c55e',
gelb: '#eab308',
@ -56,6 +69,7 @@
};
if (suche) params.suche = suche;
if (strangFilter) params.typ = strangFilter;
if (statusFilter) params.status = statusFilter;
params = mergeFilterParams(params);
const data = await fetchKetten(params);
ketten = data.items;
@ -196,6 +210,14 @@
</button>
{/each}
</div>
<select
bind:value={statusFilter}
onchange={() => { currentPage = 1; loadKetten(); }}
class="w-full border border-gray-300 rounded-lg px-2 py-1.5 text-xs focus:ring-2 focus:ring-green-500 bg-white">
{#each STATUS_OPTIONS as opt}
<option value={opt.value}>{opt.label}</option>
{/each}
</select>
</div>
<!-- Count -->
@ -222,11 +244,13 @@
{kette.ursprung?.aktenzeichen || `#${kette.id}`}
</span>
{#if kette.ampel}
<span class="flex items-center gap-1 shrink-0">
<span
class="w-2.5 h-2.5 rounded-full shrink-0"
class="w-3 h-3 rounded-full"
style="background-color: {FARB_MAP[kette.ampel.farbe] || FARB_MAP.grau}"
title="{kette.ampel.schritt}"
></span>
<span class="text-[10px] text-gray-500">{kette.ampel.label}</span>
</span>
{/if}
</div>
<p class="text-xs text-gray-600 line-clamp-2 leading-snug">