Merge pull request 'Feature: Split-View in Belegliste mit Vorschau-Panel rechts' (#73) from fds2610-bot/Steuerkram:main into main
Reviewed-on: https://codeberg.org/fds2610/Steuerkram/pulls/73
This commit is contained in:
fds2610
commit
70e38cfda6
1 changed files with 122 additions and 66 deletions
|
|
@ -126,74 +126,130 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div style="display:flex;gap:1rem;align-items:flex-start">
|
||||||
<div class="table-wrap">
|
|
||||||
<table>
|
<!-- Linke Hälfte: Tabelle + Pagination -->
|
||||||
<thead>
|
<div style="flex:1;min-width:0">
|
||||||
<tr>
|
<div class="card">
|
||||||
<th>Belegnr.</th>
|
<div class="table-wrap">
|
||||||
<th>Belegdatum</th>
|
<table>
|
||||||
<th>Lieferant</th>
|
<thead>
|
||||||
<th>Rechnungsnr.</th>
|
<tr>
|
||||||
<th>Dateiname</th>
|
<th>Belegnr.</th>
|
||||||
<th>Bewirtungsgrund / Teilnehmer</th>
|
<th>Belegdatum</th>
|
||||||
<th class="td-right">Brutto</th>
|
<th>Lieferant</th>
|
||||||
<th>Status</th>
|
<th>Rechnungsnr.</th>
|
||||||
<th></th>
|
<th>Dateiname</th>
|
||||||
</tr>
|
<th>Bewirtungsgrund / Teilnehmer</th>
|
||||||
</thead>
|
<th class="td-right">Brutto</th>
|
||||||
<tbody>
|
<th>Status</th>
|
||||||
<?php foreach ($rows as $b): ?>
|
<th></th>
|
||||||
<tr>
|
</tr>
|
||||||
<td><a href="/belege/<?= $h($b['id']) ?>" class="font-mono"><?= $h($b['beleg_nr']) ?></a></td>
|
</thead>
|
||||||
<td class="td-muted"><?= View::formatDate($b['beleg_datum']) ?></td>
|
<tbody>
|
||||||
<td class="td-muted"><?= $h($b['supplier_name'] ?? '–') ?></td>
|
<?php foreach ($rows as $b): ?>
|
||||||
<td class="td-muted"><?= $h($b['rechnungs_nr'] ?? '–') ?></td>
|
<tr class="beleg-row"
|
||||||
<td class="text-sm text-muted"><?= $h(mb_strimwidth($b['filename'], 0, 35, '…')) ?></td>
|
data-beleg-id="<?= (int)$b['id'] ?>"
|
||||||
<td style="max-width:220px">
|
style="cursor:pointer"
|
||||||
<?php if (!empty($b['bewirtungsgrund'])): ?>
|
title="Klicken für Vorschau">
|
||||||
<div style="font-size:.8em;white-space:pre-wrap;word-break:break-word"><?= $h($b['bewirtungsgrund']) ?></div>
|
<td onclick="event.stopPropagation()">
|
||||||
|
<a href="/belege/<?= $h($b['id']) ?>" class="font-mono"><?= $h($b['beleg_nr']) ?></a>
|
||||||
|
</td>
|
||||||
|
<td class="td-muted"><?= View::formatDate($b['beleg_datum']) ?></td>
|
||||||
|
<td class="td-muted"><?= $h($b['supplier_name'] ?? '–') ?></td>
|
||||||
|
<td class="td-muted"><?= $h($b['rechnungs_nr'] ?? '–') ?></td>
|
||||||
|
<td class="text-sm text-muted"><?= $h(mb_strimwidth($b['filename'], 0, 35, '…')) ?></td>
|
||||||
|
<td style="max-width:220px">
|
||||||
|
<?php if (!empty($b['bewirtungsgrund'])): ?>
|
||||||
|
<div style="font-size:.8em;white-space:pre-wrap;word-break:break-word"><?= $h($b['bewirtungsgrund']) ?></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if (!empty($b['teilnehmerliste'])): ?>
|
||||||
|
<div style="font-size:.75em;color:var(--color-muted);white-space:pre-wrap;word-break:break-word;margin-top:.15em"><?= $h($b['teilnehmerliste']) ?></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if (empty($b['bewirtungsgrund']) && empty($b['teilnehmerliste'])): ?>
|
||||||
|
<span class="text-muted">–</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</td>
|
||||||
|
<td class="td-right td-mono"><?= $b['betrag_brutto'] !== null ? View::formatMoney($b['betrag_brutto']) : '–' ?></td>
|
||||||
|
<td>
|
||||||
|
<?php if ($b['locked']): ?>
|
||||||
|
<span class="badge badge-purple">Gesperrt</span>
|
||||||
|
<?php elseif ($b['booked']): ?>
|
||||||
|
<span class="badge badge-green">Gebucht</span>
|
||||||
|
<?php else: ?>
|
||||||
|
<span class="badge badge-yellow">Offen</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</td>
|
||||||
|
<td onclick="event.stopPropagation()">
|
||||||
|
<a href="/belege/<?= $h($b['id']) ?>" class="btn btn-secondary btn-sm">Öffnen</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
<?php if (empty($rows)): ?>
|
||||||
|
<tr><td colspan="10" class="text-center text-muted" style="padding:2rem">Keine Belege gefunden.</td></tr>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php if (!empty($b['teilnehmerliste'])): ?>
|
</tbody>
|
||||||
<div style="font-size:.75em;color:var(--color-muted);white-space:pre-wrap;word-break:break-word;margin-top:.15em"><?= $h($b['teilnehmerliste']) ?></div>
|
</table>
|
||||||
<?php endif; ?>
|
</div>
|
||||||
<?php if (empty($b['bewirtungsgrund']) && empty($b['teilnehmerliste'])): ?>
|
</div>
|
||||||
<span class="text-muted">–</span>
|
|
||||||
<?php endif; ?>
|
<?php if ($pages > 1): ?>
|
||||||
</td>
|
<div class="pagination">
|
||||||
<td class="td-right td-mono"><?= $b['betrag_brutto'] !== null ? View::formatMoney($b['betrag_brutto']) : '–' ?></td>
|
<?php if ($page > 1): ?><a href="?<?= http_build_query(array_merge($filter, ['page' => $page-1])) ?>">‹</a><?php endif; ?>
|
||||||
<td>
|
<?php for ($p = max(1,$page-3); $p <= min($pages,$page+3); $p++): ?>
|
||||||
<?php if ($b['locked']): ?>
|
<?php if ($p === $page): ?>
|
||||||
<span class="badge badge-purple">Gesperrt</span>
|
<span class="active"><?= $p ?></span>
|
||||||
<?php elseif ($b['booked']): ?>
|
<?php else: ?>
|
||||||
<span class="badge badge-green">Gebucht</span>
|
<a href="?<?= http_build_query(array_merge($filter, ['page' => $p])) ?>"><?= $p ?></a>
|
||||||
<?php else: ?>
|
|
||||||
<span class="badge badge-yellow">Offen</span>
|
|
||||||
<?php endif; ?>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="/belege/<?= $h($b['id']) ?>" class="btn btn-secondary btn-sm">Öffnen</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
<?php if (empty($rows)): ?>
|
|
||||||
<tr><td colspan="10" class="text-center text-muted" style="padding:2rem">Keine Belege gefunden.</td></tr>
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</tbody>
|
<?php endfor; ?>
|
||||||
</table>
|
<?php if ($page < $pages): ?><a href="?<?= http_build_query(array_merge($filter, ['page' => $page+1])) ?>">›</a><?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Rechte Hälfte: Vorschau-Panel -->
|
||||||
|
<div id="beleg-preview-panel" style="
|
||||||
|
flex:1;
|
||||||
|
min-width:0;
|
||||||
|
position:sticky;
|
||||||
|
top:1rem;
|
||||||
|
border:1px solid var(--color-border,#e2e8f0);
|
||||||
|
border-radius:var(--radius,6px);
|
||||||
|
background:var(--color-surface,#f8fafc);
|
||||||
|
overflow:hidden;
|
||||||
|
height:calc(100vh - 6rem);
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:center;
|
||||||
|
">
|
||||||
|
<span class="text-muted text-sm" id="beleg-preview-hint">Zeile anklicken für Vorschau</span>
|
||||||
|
<iframe id="beleg-preview-frame"
|
||||||
|
style="display:none;width:100%;height:100%;border:none"
|
||||||
|
src=""></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php if ($pages > 1): ?>
|
<script>
|
||||||
<div class="pagination">
|
(function () {
|
||||||
<?php if ($page > 1): ?><a href="?<?= http_build_query(array_merge($filter, ['page' => $page-1])) ?>">‹</a><?php endif; ?>
|
const frame = document.getElementById('beleg-preview-frame');
|
||||||
<?php for ($p = max(1,$page-3); $p <= min($pages,$page+3); $p++): ?>
|
const hint = document.getElementById('beleg-preview-hint');
|
||||||
<?php if ($p === $page): ?>
|
let activeRow = null;
|
||||||
<span class="active"><?= $p ?></span>
|
|
||||||
<?php else: ?>
|
document.querySelectorAll('.beleg-row').forEach(function (row) {
|
||||||
<a href="?<?= http_build_query(array_merge($filter, ['page' => $p])) ?>"><?= $p ?></a>
|
row.addEventListener('click', function () {
|
||||||
<?php endif; ?>
|
const id = row.dataset.belegId;
|
||||||
<?php endfor; ?>
|
if (!id) return;
|
||||||
<?php if ($page < $pages): ?><a href="?<?= http_build_query(array_merge($filter, ['page' => $page+1])) ?>">›</a><?php endif; ?>
|
|
||||||
</div>
|
if (activeRow) activeRow.style.background = '';
|
||||||
<?php endif; ?>
|
activeRow = row;
|
||||||
|
row.style.background = 'var(--color-primary-light, #eff6ff)';
|
||||||
|
|
||||||
|
hint.style.display = 'none';
|
||||||
|
frame.style.display = 'block';
|
||||||
|
frame.src = '/belege/' + id + '/file';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue