FDS2610/Steuerkram
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Split-View in Belegliste mit Vorschau-Panel rechts

Browse source
This commit is contained in:
fds2610-bot 2026-05-15 19:17:22 +02:00
parent 4fb0b21a90
commit 134ac84bb2
1 changed files with 122 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/Views/belege/list.php
View file

@ -126,7 +126,11 @@
</div> </div>
</div> </div>
<div class="card"> <div style="display:flex;gap:1rem;align-items:flex-start">
<!-- Linke Hälfte: Tabelle + Pagination -->
<div style="flex:1;min-width:0">
<div class="card">
<div class="table-wrap"> <div class="table-wrap">
<table> <table>
<thead> <thead>
@ -144,8 +148,13 @@
</thead> </thead>
<tbody> <tbody>
<?php foreach ($rows as $b): ?> <?php foreach ($rows as $b): ?>
<tr> <tr class="beleg-row"
<td><a href="/belege/<?= $h($b['id']) ?>" class="font-mono"><?= $h($b['beleg_nr']) ?></a></td> data-beleg-id="<?= (int)$b['id'] ?>"
style="cursor:pointer"
title="Klicken für Vorschau">
<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"><?= View::formatDate($b['beleg_datum']) ?></td>
<td class="td-muted"><?= $h($b['supplier_name'] ?? '–') ?></td> <td class="td-muted"><?= $h($b['supplier_name'] ?? '–') ?></td>
<td class="td-muted"><?= $h($b['rechnungs_nr'] ?? '–') ?></td> <td class="td-muted"><?= $h($b['rechnungs_nr'] ?? '–') ?></td>
@ -171,7 +180,7 @@
<span class="badge badge-yellow">Offen</span> <span class="badge badge-yellow">Offen</span>
<?php endif; ?> <?php endif; ?>
</td> </td>
<td> <td onclick="event.stopPropagation()">
<a href="/belege/<?= $h($b['id']) ?>" class="btn btn-secondary btn-sm">Öffnen</a> <a href="/belege/<?= $h($b['id']) ?>" class="btn btn-secondary btn-sm">Öffnen</a>
</td> </td>
</tr> </tr>
@ -182,10 +191,10 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<?php if ($pages > 1): ?> <?php if ($pages > 1): ?>
<div class="pagination"> <div class="pagination">
<?php if ($page > 1): ?><a href="?<?= http_build_query(array_merge($filter, ['page' => $page-1])) ?>">‹</a><?php endif; ?> <?php if ($page > 1): ?><a href="?<?= http_build_query(array_merge($filter, ['page' => $page-1])) ?>">‹</a><?php endif; ?>
<?php for ($p = max(1,$page-3); $p <= min($pages,$page+3); $p++): ?> <?php for ($p = max(1,$page-3); $p <= min($pages,$page+3); $p++): ?>
<?php if ($p === $page): ?> <?php if ($p === $page): ?>
@ -195,5 +204,52 @@
<?php endif; ?> <?php endif; ?>
<?php endfor; ?> <?php endfor; ?>
<?php if ($page < $pages): ?><a href="?<?= http_build_query(array_merge($filter, ['page' => $page+1])) ?>">›</a><?php endif; ?> <?php if ($page < $pages): ?><a href="?<?= http_build_query(array_merge($filter, ['page' => $page+1])) ?>">›</a><?php endif; ?>
</div>
<?php endif; ?>
</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 endif; ?>
<script>
(function () {
const frame = document.getElementById('beleg-preview-frame');
const hint = document.getElementById('beleg-preview-hint');
let activeRow = null;
document.querySelectorAll('.beleg-row').forEach(function (row) {
row.addEventListener('click', function () {
const id = row.dataset.belegId;
if (!id) return;
if (activeRow) activeRow.style.background = '';
activeRow = row;
row.style.background = 'var(--color-primary-light, #eff6ff)';
hint.style.display = 'none';
frame.style.display = 'block';
frame.src = '/belege/' + id + '/file';
});
});
})();
</script>