admin/logbuch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact preview list below form on desktop; Beginn/Ende/Besucher in one row

Browse Source 
- Eingabe tab shows last 5 entries below form on lg+ screens (compact mode
  hides Objekte and Bemerkungen columns); Liste tab shows full 20 entries
- Beginn, Ende, Besucher fields moved into a single flex row
- LogbuchList accepts limit and compact props

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Reinhard X. Fürst
2026-04-28 07:55:46 +02:00
parent aea5cc08d6
commit 34a2c6b90d
3 changed files with 61 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/LogbuchList.tsx
View File

@@ -7,6 +7,8 @@ interface Props {
kuppel: Kuppel;
refreshKey: number;
onEdit: (entry: LogbuchEintrag) => void;
limit?: number;
compact?: boolean;
}
function formatDateTime(dt: string): string {
@@ -16,7 +18,7 @@ function formatDateTime(dt: string): string {
return d.toLocaleString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
}
export default function LogbuchList({ kuppel, refreshKey, onEdit }: Props) {
export default function LogbuchList({ kuppel, refreshKey, onEdit, limit = 20, compact = false }: Props) {
const [entries, setEntries] = useState<LogbuchEintrag[]>([]);
const [loading, setLoading] = useState(true);
const [deleteId, setDeleteId] = useState<number | null>(null);
@@ -24,7 +26,7 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit }: Props) {
useEffect(() => {
setLoading(true);
fetch(`/api/logbuch?kuppel=${encodeURIComponent(kuppel)}&limit=20`)
fetch(`/api/logbuch?kuppel=${encodeURIComponent(kuppel)}&limit=${limit}`)
.then((r) => { if (!r.ok) throw new Error(); return r.json(); })
.then((data) => { setEntries(data); setLoading(false); })
.catch(() => { setError('Fehler beim Laden.'); setLoading(false); });
@@ -57,8 +59,8 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit }: Props) {
<th className="px-3 py-2 border border-gray-300">Art</th>
<th className="px-3 py-2 border border-gray-300 text-center">Besucher</th>
<th className="px-3 py-2 border border-gray-300">BEOs</th>
<th className="px-3 py-2 border border-gray-300">Objekte</th>
<th className="px-3 py-2 border border-gray-300">Bemerkungen</th>
{!compact && <th className="px-3 py-2 border border-gray-300">Objekte</th>}
{!compact && <th className="px-3 py-2 border border-gray-300">Bemerkungen</th>}
<th className="px-3 py-2 border border-gray-300 text-center">Aktionen</th>
</tr>
</thead>
@@ -70,10 +72,12 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit }: Props) {
<td className="px-3 py-2 border border-gray-200">{e.ArtFuehrung}</td>
<td className="px-3 py-2 border border-gray-200 text-center">{e.Besucher}</td>
<td className="px-3 py-2 border border-gray-200">{e.BEOs || '—'}</td>
<td className="px-3 py-2 border border-gray-200">{e.Objekte || '—'}</td>
<td className="px-3 py-2 border border-gray-200 max-w-xs">
<span className="line-clamp-2">{e.Bemerkungen || ''}</span>
</td>
{!compact && <td className="px-3 py-2 border border-gray-200">{e.Objekte || '—'}</td>}
{!compact && (
<td className="px-3 py-2 border border-gray-200 max-w-xs">
<span className="line-clamp-2">{e.Bemerkungen || ''}</span>
</td>
)}
<td className="px-3 py-2 border border-gray-200 text-center whitespace-nowrap">
<button
onClick={() => onEdit(e)}