v1.5.8: fix audit log table layout (Skeleton outside tbody)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-04-29 09:08:15 +02:00
parent 9abec36f07
commit 18fca09b87
2 changed files with 97 additions and 82 deletions

View File

@@ -1,6 +1,6 @@
{ {
"name": "app-ts", "name": "app-ts",
"version": "1.5.7", "version": "1.5.8",
"description": "", "description": "",
"main": "dist/server.js", "main": "dist/server.js",
"scripts": { "scripts": {

View File

@@ -391,32 +391,25 @@ export default function AuditLog() {
> >
<div className="admin-card-body"> <div className="admin-card-body">
<div className="admin-table-responsive"> <div className="admin-table-responsive">
<table className="admin-table"> <Skeleton
<thead> name="audit-log-rows"
<tr> loading={isPending}
<th>Čas</th> fixture={
<th>Uživatel</th> <table className="admin-table">
<th>Akce</th> <thead>
<th>Typ entity</th> <tr>
<th>Popis</th> <th>Čas</th>
<th>IP</th> <th>Uživatel</th>
</tr> <th>Akce</th>
</thead> <th>Typ entity</th>
<tbody> <th>Popis</th>
<Skeleton <th>IP</th>
name="audit-log-rows" </tr>
loading={isPending} </thead>
fixture={ <tbody>
<div style={{ padding: "1rem" }}> {Array.from({ length: 10 }, (_, i) => (
{Array.from({ length: 10 }, (_, i) => ( <tr key={i}>
<div <td>
key={i}
style={{
display: "flex",
gap: "1rem",
marginBottom: "0.75rem",
}}
>
<div <div
style={{ style={{
width: 110, width: 110,
@@ -425,6 +418,8 @@ export default function AuditLog() {
borderRadius: 4, borderRadius: 4,
}} }}
/> />
</td>
<td>
<div <div
style={{ style={{
width: 80, width: 80,
@@ -433,6 +428,8 @@ export default function AuditLog() {
borderRadius: 4, borderRadius: 4,
}} }}
/> />
</td>
<td>
<div <div
style={{ style={{
width: 70, width: 70,
@@ -441,6 +438,8 @@ export default function AuditLog() {
borderRadius: 10, borderRadius: 10,
}} }}
/> />
</td>
<td>
<div <div
style={{ style={{
width: 80, width: 80,
@@ -449,14 +448,18 @@ export default function AuditLog() {
borderRadius: 4, borderRadius: 4,
}} }}
/> />
</td>
<td>
<div <div
style={{ style={{
flex: 1, width: "100%",
height: 14, height: 14,
background: "var(--bg-tertiary)", background: "var(--bg-tertiary)",
borderRadius: 4, borderRadius: 4,
}} }}
/> />
</td>
<td>
<div <div
style={{ style={{
width: 90, width: 90,
@@ -465,63 +468,75 @@ export default function AuditLog() {
borderRadius: 4, borderRadius: 4,
}} }}
/> />
</div>
))}
</div>
}
>
<>
{logs.length === 0 && (
<tr>
<td colSpan={6}>
<div className="admin-empty-state">
<div className="admin-empty-icon">
<svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
>
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
<line x1="16" y1="13" x2="8" y2="13" />
<line x1="16" y1="17" x2="8" y2="17" />
</svg>
</div>
<p>Žádné záznamy k zobrazení</p>
</div>
</td> </td>
</tr> </tr>
)} ))}
{logs.length > 0 && </tbody>
logs.map((log) => ( </table>
<tr key={log.id}> }
<td className="admin-mono"> >
{formatDatetime(log.created_at)} <table className="admin-table">
</td> <thead>
<td className="fw-500">{log.username || "-"}</td> <tr>
<td> <th>Čas</th>
<span <th>Uživatel</th>
className={`admin-badge ${ACTION_BADGE_CLASS[log.action] || "admin-badge-secondary"}`} <th>Akce</th>
<th>Typ entity</th>
<th>Popis</th>
<th>IP</th>
</tr>
</thead>
<tbody>
{logs.length === 0 && (
<tr>
<td colSpan={6}>
<div className="admin-empty-state">
<div className="admin-empty-icon">
<svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
> >
{ACTION_LABELS[log.action] || log.action} <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
</span> <polyline points="14 2 14 8 20 8" />
</td> <line x1="16" y1="13" x2="8" y2="13" />
<td> <line x1="16" y1="17" x2="8" y2="17" />
{ENTITY_TYPE_LABELS[log.entity_type || ""] || </svg>
log.entity_type || </div>
"-"} <p>Žádné záznamy k zobrazení</p>
</td> </div>
<td>{log.description || "-"}</td> </td>
<td className="admin-mono">{log.user_ip || "-"}</td> </tr>
</tr> )}
))} {logs.length > 0 &&
</> logs.map((log) => (
</Skeleton> <tr key={log.id}>
</tbody> <td className="admin-mono">
</table> {formatDatetime(log.created_at)}
</td>
<td className="fw-500">{log.username || "-"}</td>
<td>
<span
className={`admin-badge ${ACTION_BADGE_CLASS[log.action] || "admin-badge-secondary"}`}
>
{ACTION_LABELS[log.action] || log.action}
</span>
</td>
<td>
{ENTITY_TYPE_LABELS[log.entity_type || ""] ||
log.entity_type ||
"-"}
</td>
<td>{log.description || "-"}</td>
<td className="admin-mono">{log.user_ip || "-"}</td>
</tr>
))}
</tbody>
</table>
</Skeleton>
</div> </div>
<Pagination <Pagination