fix(admin): complete media manager
This commit is contained in:
Schubert Ferenc
parent
203c94b128
commit
ec30f69c72
5 changed files with 417 additions and 96 deletions
|
|
@ -1,26 +1,12 @@
|
|||
import Image from "next/image";
|
||||
import { redirect } from "next/navigation";
|
||||
import AdminShell from "@/components/admin/AdminShell";
|
||||
import MediaManager from "@/components/admin/MediaManager";
|
||||
import { requireAdminSession } from "@/lib/admin/auth";
|
||||
import { listMediaFiles } from "@/lib/admin/media";
|
||||
|
||||
function formatBytes(size: number) {
|
||||
if (size < 1024) return `${size} B`;
|
||||
if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
|
||||
return `${(size / 1024 / 1024).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function uploadErrorMessage(error?: string) {
|
||||
if (!error) return "";
|
||||
if (error === "missing-file") return "Bitte wählen Sie eine Datei aus.";
|
||||
if (error === "storage") return "Die Datei konnte nicht gespeichert werden. Bitte Upload-Speicher und Rechte prüfen.";
|
||||
return error;
|
||||
}
|
||||
|
||||
export default async function AdminMediaPage({ searchParams }: { searchParams: Promise<{ uploaded?: string; error?: string }> }) {
|
||||
export default async function AdminMediaPage() {
|
||||
if (!await requireAdminSession()) redirect("/admin/login");
|
||||
const [files, params] = await Promise.all([listMediaFiles(), searchParams]);
|
||||
const error = uploadErrorMessage(params.error);
|
||||
const files = await listMediaFiles();
|
||||
|
||||
return (
|
||||
<AdminShell>
|
||||
|
|
@ -28,41 +14,7 @@ export default async function AdminMediaPage({ searchParams }: { searchParams: P
|
|||
<p className="eyebrow">Assets</p>
|
||||
<h1>Medienverwaltung</h1>
|
||||
</div>
|
||||
{params.uploaded === "1" && <p className="success">Datei wurde erfolgreich hochgeladen.</p>}
|
||||
{error && <p className="error admin-message">Upload fehlgeschlagen: {error}</p>}
|
||||
<form className="admin-card admin-upload" action="/api/admin/media" method="post" encType="multipart/form-data">
|
||||
<label>Datei hochladen<input name="file" type="file" accept="image/jpeg,image/png,image/webp,application/pdf" /></label>
|
||||
<button className="button" type="submit">Datei hochladen</button>
|
||||
</form>
|
||||
<section className="admin-card">
|
||||
<h2>Uploads</h2>
|
||||
{files.length === 0 ? (
|
||||
<div className="media-empty">
|
||||
<h3>Noch keine Medien vorhanden</h3>
|
||||
<p>Hochgeladene Bilder und PDF-Dateien erscheinen hier mit Vorschau und Metadaten.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="media-list">
|
||||
{files.map((file) => (
|
||||
<article key={file.name} className="media-row">
|
||||
<a className="media-preview" href={file.url} target="_blank" rel="noreferrer">
|
||||
{file.isImage
|
||||
? <Image src={file.url} alt={file.name} width={220} height={140} />
|
||||
: <span>{file.type}</span>}
|
||||
</a>
|
||||
<div>
|
||||
<h3>{file.name}</h3>
|
||||
<dl className="media-meta">
|
||||
<div><dt>Typ</dt><dd>{file.type}</dd></div>
|
||||
<div><dt>Größe</dt><dd>{formatBytes(file.size)}</dd></div>
|
||||
<div><dt>Upload</dt><dd>{new Date(file.uploadedAt).toLocaleString("de-DE")}</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
<MediaManager initialFiles={files} />
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,6 @@
|
|||
import { NextResponse } from "next/server";
|
||||
import { requireAdminSession } from "@/lib/admin/auth";
|
||||
import { listMediaFiles, saveMediaFile } from "@/lib/admin/media";
|
||||
|
||||
function relativeRedirect(target: string) {
|
||||
return new NextResponse(null, {
|
||||
status: 303,
|
||||
headers: { Location: target },
|
||||
});
|
||||
}
|
||||
import { deleteMediaFile, listMediaFiles, saveMediaFile } from "@/lib/admin/media";
|
||||
|
||||
export async function GET() {
|
||||
if (!await requireAdminSession()) return NextResponse.json({ message: "Nicht autorisiert." }, { status: 401 });
|
||||
|
|
@ -20,15 +13,27 @@ export async function POST(request: Request) {
|
|||
const file = form.get("file");
|
||||
|
||||
if (!(file instanceof File)) {
|
||||
return relativeRedirect("/admin/medien?error=missing-file");
|
||||
return NextResponse.json({ message: "Bitte wählen Sie eine Datei aus." }, { status: 400 });
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await saveMediaFile(file);
|
||||
if (result.error) return relativeRedirect(`/admin/medien?error=${encodeURIComponent(result.error)}`);
|
||||
if (result.error) return NextResponse.json({ message: result.error }, { status: 400 });
|
||||
} catch {
|
||||
return relativeRedirect("/admin/medien?error=storage");
|
||||
return NextResponse.json({ message: "Die Datei konnte nicht gespeichert werden. Bitte Upload-Speicher und Rechte prüfen." }, { status: 500 });
|
||||
}
|
||||
|
||||
return relativeRedirect("/admin/medien?uploaded=1");
|
||||
return NextResponse.json({ message: "Datei erfolgreich hochgeladen.", files: await listMediaFiles() });
|
||||
}
|
||||
|
||||
export async function DELETE(request: Request) {
|
||||
if (!await requireAdminSession()) return NextResponse.json({ message: "Nicht autorisiert." }, { status: 401 });
|
||||
|
||||
const body = await request.json() as { name?: string };
|
||||
if (!body.name) return NextResponse.json({ message: "Dateiname fehlt." }, { status: 400 });
|
||||
|
||||
const result = await deleteMediaFile(body.name);
|
||||
if (result.error) return NextResponse.json({ message: result.error }, { status: 400 });
|
||||
|
||||
return NextResponse.json({ message: "Datei gelöscht.", files: await listMediaFiles() });
|
||||
}
|
||||
|
|
|
|||
179
app/globals.css
179
app/globals.css
|
|
@ -754,26 +754,29 @@ h3 {
|
|||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.media-grid {
|
||||
.media-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) 150px 150px auto;
|
||||
gap: 14px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.media-item {
|
||||
.media-toolbar label {
|
||||
display: grid;
|
||||
min-height: 130px;
|
||||
place-items: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
overflow: hidden;
|
||||
gap: 7px;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.media-item img {
|
||||
.media-toolbar input,
|
||||
.media-toolbar select {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
border: 1px solid #cfd8e5;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
padding: 11px 12px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.media-empty {
|
||||
|
|
@ -787,47 +790,81 @@ h3 {
|
|||
color: var(--muted);
|
||||
}
|
||||
|
||||
.media-list {
|
||||
.media-card-grid {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.media-row {
|
||||
.media-card {
|
||||
display: grid;
|
||||
grid-template-columns: 180px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 26px rgba(8, 42, 96, 0.06);
|
||||
}
|
||||
|
||||
.media-preview {
|
||||
.media-card-preview {
|
||||
display: grid;
|
||||
min-height: 110px;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 10;
|
||||
place-items: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: #f8fafc;
|
||||
color: var(--navy);
|
||||
font-weight: 800;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.media-preview img {
|
||||
.media-card-preview img {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.pdf-icon {
|
||||
display: grid;
|
||||
width: 72px;
|
||||
height: 92px;
|
||||
place-items: center;
|
||||
border: 2px solid var(--navy);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: var(--navy);
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.media-card-body {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.media-card-body h3 {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.media-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.media-meta div {
|
||||
display: grid;
|
||||
grid-template-columns: 72px minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.media-meta dt {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
|
|
@ -839,6 +876,91 @@ h3 {
|
|||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.media-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.media-actions button,
|
||||
.media-actions a {
|
||||
display: inline-flex;
|
||||
min-height: 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: var(--navy);
|
||||
font-weight: 800;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.media-actions .danger {
|
||||
border-color: #f1b5ad;
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
background: rgba(5, 16, 32, 0.9);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lightbox-toolbar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(5, 16, 32, 0.96);
|
||||
padding: 12px 18px;
|
||||
}
|
||||
|
||||
.lightbox-toolbar div {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.lightbox-toolbar button {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.lightbox-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.lightbox-stage {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: auto;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.lightbox-stage img {
|
||||
max-width: min(92vw, 1400px);
|
||||
max-height: 82vh;
|
||||
transform-origin: center;
|
||||
transition: transform 140ms ease;
|
||||
}
|
||||
|
||||
.system-list {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
|
|
@ -963,7 +1085,8 @@ h3 {
|
|||
display: grid;
|
||||
}
|
||||
|
||||
.media-row,
|
||||
.media-toolbar,
|
||||
.media-card-grid,
|
||||
.media-meta {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue