UI redesign step 4: Gelöschte Schaltungen in Stitch style
- Page header gets a title + subtitle stack that matches Übersicht /
Provisionen.
- Same data-table shell: bordered white card, surface-container-high
sticky header with label-caps column titles, zebra-striped 40px
rows, hover highlight.
- Eingabe/Schaltungs-Datum merged into a single "Daten" cell (E:/A:)
to match Übersicht. Anbieter as a primary pill, Löschgrund as a
red error-tinted pill. Gelöscht am right-aligned in monospaced
label-numeric.
- showTab('geloeschte') now always re-fetches: the old check looked
up a non-existent #geloeschteList element so the call already
happened on every tab switch; this just clarifies the intent.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kerimatilganandClaude Opus 4.7 committed
1 parent
9850a5b097
commit
de10e3c901
2 files changed
+59
-34
No files matched your search
+27
-16
@@ -1088,28 +1088,39 @@
|
||||
|
||||
<!-- Gelöschte Schaltungen Tab -->
|
||||
<div id="geloeschte" class="tab-content">
|
||||
<h2>Gelöschte Schaltungen</h2>
|
||||
<div class="table-container">
|
||||
<table id="geloeschteSchaltungenTable">
|
||||
<thead>
|
||||
<div class="flex flex-col gap-lg">
|
||||
|
||||
<!-- Page header -->
|
||||
<div class="flex justify-between items-end flex-wrap gap-md">
|
||||
<div>
|
||||
<h1 class="text-headline-md text-on-background mb-xs">Gelöschte Schaltungen</h1>
|
||||
<p class="text-body-sm text-on-surface-variant">Archiv aller soft-gelöschten Schaltungen mit Löschgrund und Zeitstempel.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data table -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg shadow-[0_2px_4px_rgba(0,0,0,0.04)] overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table id="geloeschteSchaltungenTable" class="w-full text-left border-collapse">
|
||||
<thead class="bg-surface-container-high border-b-2 border-outline-variant">
|
||||
<tr>
|
||||
<th>Schaltungs-ID</th>
|
||||
<th>Eingabe-Datum</th>
|
||||
<th>Schaltungs-Datum</th>
|
||||
<th>Name</th>
|
||||
<th>Firma</th>
|
||||
<th>Rufnummer</th>
|
||||
<th>Anbieter</th>
|
||||
<th>Tarif</th>
|
||||
<th>Hardware</th>
|
||||
<th>Löschgrund</th>
|
||||
<th>Gelöscht am</th>
|
||||
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase text-right w-[80px]">ID</th>
|
||||
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Daten</th>
|
||||
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Kunde / Firma</th>
|
||||
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Rufnummer</th>
|
||||
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Anbieter</th>
|
||||
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Tarif</th>
|
||||
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Hardware</th>
|
||||
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase">Löschgrund</th>
|
||||
<th class="px-md py-sm text-label-caps text-on-surface-variant uppercase w-[140px]">Gelöscht am</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
<tbody class="text-body-sm text-on-surface"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Administration Tab -->
|
||||
<div id="admin" class="tab-content">
|
||||
|
||||
+32
-18
@@ -277,10 +277,8 @@ function showTab(tabName) {
|
||||
loadProvisionen();
|
||||
}
|
||||
} else if (tabName === 'geloeschte') {
|
||||
// Check if data is already loaded, if not load it
|
||||
if (!document.getElementById('geloeschteList') || !document.getElementById('geloeschteList').innerHTML.trim()) {
|
||||
// Always refresh — the archive is rarely shown so this is cheap.
|
||||
loadGeloeschteSchaltungen();
|
||||
}
|
||||
} else if (tabName === 'admin') {
|
||||
// Check if admin data is already loaded
|
||||
if (!document.getElementById('anbieterList') || !document.getElementById('anbieterList').innerHTML.trim()) {
|
||||
@@ -2037,25 +2035,41 @@ async function loadGeloeschteSchaltungen() {
|
||||
try {
|
||||
const geloeschte = await apiRequest('/api/geloeschte-schaltungen');
|
||||
const tbody = document.querySelector('#geloeschteSchaltungenTable tbody');
|
||||
|
||||
if (!tbody) return;
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (!geloeschte.length) {
|
||||
tbody.innerHTML = '<tr><td colspan="9" class="px-md py-lg text-center text-body-sm text-on-surface-variant">Keine gelöschten Schaltungen</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
geloeschte.forEach(s => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${escapeHtml(s.schaltungs_id)}</td>
|
||||
<td>${escapeHtml(formatDate(s.eingabe_datum))}</td>
|
||||
<td>${escapeHtml(formatDate(s.schaltungs_datum))}</td>
|
||||
<td>${escapeHtml(s.vorname)} ${escapeHtml(s.nachname)}</td>
|
||||
<td>${escapeHtml(s.firma || '-')}</td>
|
||||
<td>${escapeHtml(s.rufnummer)}</td>
|
||||
<td>${escapeHtml(s.anbieter_name)}</td>
|
||||
<td>${escapeHtml(s.tarif_name)}</td>
|
||||
<td>${escapeHtml(s.hardware || '')}</td>
|
||||
<td><strong style="color: #e74c3c;">${escapeHtml(s.loeschgrund)}</strong></td>
|
||||
<td>${escapeHtml(formatDateTime(s.geloescht_am))}</td>
|
||||
const tr = document.createElement('tr');
|
||||
tr.className = 'border-b border-outline-variant/30 even:bg-surface-container-low/50 hover:bg-surface-variant/30 transition-colors';
|
||||
tr.innerHTML = `
|
||||
<td class="px-md py-xs font-label-numeric text-label-numeric text-right text-on-surface-variant">${escapeHtml(s.schaltungs_id)}</td>
|
||||
<td class="px-md py-xs">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="font-label-numeric text-[11px] text-on-surface-variant">E: ${escapeHtml(formatDate(s.eingabe_datum))}</span>
|
||||
<span class="font-label-numeric text-[11px] text-primary">A: ${escapeHtml(formatDate(s.schaltungs_datum))}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-md py-xs">
|
||||
<div class="font-semibold text-on-background">${escapeHtml((s.vorname || '') + ' ' + (s.nachname || ''))}</div>
|
||||
<div class="text-[12px] text-on-surface-variant">${escapeHtml(s.firma || '–')}</div>
|
||||
</td>
|
||||
<td class="px-md py-xs font-label-numeric text-label-numeric text-on-surface-variant">${escapeHtml(s.rufnummer || '–')}</td>
|
||||
<td class="px-md py-xs">
|
||||
<span class="bg-primary/10 text-primary border border-primary/20 px-2 py-0.5 rounded-full text-label-caps">${escapeHtml(s.anbieter_name || '')}</span>
|
||||
</td>
|
||||
<td class="px-md py-xs">${escapeHtml(s.tarif_name || '')}</td>
|
||||
<td class="px-md py-xs text-on-surface-variant">${escapeHtml(s.hardware || '–')}</td>
|
||||
<td class="px-md py-xs">
|
||||
<span class="bg-error/10 text-error border border-error/20 px-2 py-0.5 rounded-full text-label-caps">${escapeHtml(s.loeschgrund || '')}</span>
|
||||
</td>
|
||||
<td class="px-md py-xs font-label-numeric text-label-numeric text-on-surface-variant">${escapeHtml(formatDateTime(s.geloescht_am))}</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
|
||||
Reference in new issue
Block a user