Add production-ready media library

2026-03-07 16:20:11 +01:00
parent ea64373853
commit 0f9f9e5f79
13 changed files with 1084 additions and 11 deletions
@@ -0,0 +1,102 @@
+"use server";
+
+import { MediaKind } from "@prisma/client";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { isRedirectError } from "next/dist/client/components/redirect";
+
+import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
+import { countMediaUsageReferences, getMediaAssetById } from "@/lib/media";
+import { createStandaloneMediaAsset, deleteMediaAssetAndFile } from "@/lib/media-service";
+import { isManagedMediaFilePath } from "@/lib/media-storage";
+import { prisma } from "@/lib/prisma";
+
+function ensureAdmin() {
+  if (!isAdminAuthenticated()) {
+    clearAdminSessionCookie();
+    redirect("/root");
+  }
+}
+
+function withMessage(pathname: string, type: "success" | "error", message: string) {
+  const params = new URLSearchParams();
+  params.set(type, message);
+
+  return `${pathname}?${params.toString()}`;
+}
+
+function revalidateMediaPages() {
+  revalidatePath("/root");
+  revalidatePath("/root/media");
+  revalidatePath("/root/portfolio");
+  revalidatePath("/root/portfolio/projects");
+}
+
+export async function createMediaAssetAction(formData: FormData) {
+  ensureAdmin();
+
+  try {
+    const kindValue = String(formData.get("kind") ?? "IMAGE");
+    const kind = kindValue === "DOCUMENT" ? MediaKind.DOCUMENT : MediaKind.IMAGE;
+
+    await createStandaloneMediaAsset({
+      kind,
+      label: String(formData.get("label") ?? ""),
+      uploadFile: formData.get("file"),
+      externalUrl: String(formData.get("externalUrl") ?? ""),
+    });
+
+    revalidateMediaPages();
+    redirect(withMessage("/root/media", "success", "Media asset created."));
+  } catch (error) {
+    if (isRedirectError(error)) {
+      throw error;
+    }
+
+    const message = error instanceof Error ? error.message : "Unable to create media asset.";
+    redirect(withMessage("/root/media", "error", message));
+  }
+}
+
+export async function deleteMediaAssetAction(formData: FormData) {
+  ensureAdmin();
+
+  const assetId = String(formData.get("assetId") ?? "");
+
+  try {
+    const asset = await getMediaAssetById(assetId);
+
+    if (!asset) {
+      redirect(withMessage("/root/media", "error", "Media asset not found."));
+    }
+
+    const usageCount = await countMediaUsageReferences(asset.id);
+
+    if (usageCount > 0) {
+      redirect(withMessage("/root/media", "error", "Media asset is still in use."));
+    }
+
+    await prisma.mediaAsset.delete({
+      where: {
+        id: asset.id,
+      },
+    });
+
+    if (isManagedMediaFilePath(asset.url)) {
+      await deleteMediaAssetAndFile({
+        assetId: asset.id,
+        assetUrl: asset.url,
+      });
+    }
+
+    revalidateMediaPages();
+    redirect(withMessage("/root/media", "success", "Media asset deleted."));
+  } catch (error) {
+    if (isRedirectError(error)) {
+      throw error;
+    }
+
+    const message = error instanceof Error ? error.message : "Unable to delete media asset.";
+    redirect(withMessage("/root/media", "error", message));
+  }
+}
@@ -0,0 +1,183 @@
+/* eslint-disable @next/next/no-img-element */
+
+import { ExternalLink, ImageIcon, Trash2 } from "lucide-react";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+
+import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
+import { AppCard } from "@/components/ui/app-card";
+import { Button } from "@/components/ui/button";
+import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
+import { getAdminMediaAssets } from "@/lib/media";
+
+import { createMediaAssetAction, deleteMediaAssetAction } from "./actions";
+
+export const dynamic = "force-dynamic";
+
+const copy = {
+  title: "Media Library",
+  subtitle: "Zentrale Dateien fuer Portfolio und spaetere Inhaltsbereiche.",
+  overview: "Uebersicht",
+  maintenance: "Wartungsmodus",
+  uiKit: "UI Kit",
+  media: "Media",
+  portfolio: "Portfolio",
+  logout: "Ausloggen",
+  backToSite: "Zur Website",
+};
+
+type RootMediaPageProps = {
+  searchParams?: {
+    success?: string;
+    error?: string;
+  };
+};
+
+export default async function RootMediaPage({ searchParams }: RootMediaPageProps) {
+  if (!isAdminAuthenticated()) {
+    redirect("/root");
+  }
+
+  async function logoutAction() {
+    "use server";
+
+    clearAdminSessionCookie();
+    redirect("/root");
+  }
+
+  const mediaAssets = await getAdminMediaAssets();
+
+  return (
+    <RootDashboardShell
+      copy={copy}
+      active="media"
+      logoutAction={logoutAction}
+      headerTitle={copy.title}
+      headerDescription={copy.subtitle}
+    >
+      <div className="space-y-6">
+        {searchParams?.success ? (
+          <p className="rounded-nested border border-status-success/30 bg-status-success/10 px-4 py-3 text-sm text-status-success">
+            {searchParams.success}
+          </p>
+        ) : null}
+
+        {searchParams?.error ? (
+          <p className="rounded-nested border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+            {searchParams.error}
+          </p>
+        ) : null}
+
+        <AppCard>
+          <CardHeader>
+            <CardTitle>New Media Asset</CardTitle>
+            <CardDescription>Upload a file or store an external URL for reuse across the site.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form action={createMediaAssetAction} className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="label">Label</Label>
+                <Input id="label" name="label" required />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="kind">Kind</Label>
+                <select
+                  id="kind"
+                  name="kind"
+                  defaultValue="IMAGE"
+                  className="flex h-11 w-full rounded-pill border border-border bg-background px-4 text-sm text-foreground shadow-sm"
+                >
+                  <option value="IMAGE">IMAGE</option>
+                  <option value="DOCUMENT">DOCUMENT</option>
+                </select>
+              </div>
+
+              <div className="space-y-2 md:col-span-2">
+                <Label htmlFor="file">Upload File</Label>
+                <Input id="file" name="file" type="file" accept="image/*,.svg,.pdf" />
+              </div>
+
+              <div className="space-y-2 md:col-span-2">
+                <Label htmlFor="externalUrl">External URL</Label>
+                <Input id="externalUrl" name="externalUrl" placeholder="https://example.com/image.jpg" />
+              </div>
+
+              <div className="md:col-span-2">
+                <Button type="submit">
+                  <ImageIcon className="h-4 w-4" />
+                  Save Media
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </AppCard>
+
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {mediaAssets.map((asset) => (
+            <AppCard key={asset.id}>
+              <CardHeader>
+                <CardTitle className="text-base">{asset.label}</CardTitle>
+                <CardDescription className="flex flex-wrap gap-2">
+                  <span>{asset.kind}</span>
+                  <span>{asset.source}</span>
+                  <span>{asset.usages.length} usages</span>
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {asset.kind === "IMAGE" ? (
+                  <div className="overflow-hidden rounded-surface border border-border bg-surface-1">
+                    <img src={asset.url} alt={asset.label} className="h-48 w-full object-cover" />
+                  </div>
+                ) : (
+                  <div className="rounded-surface border border-border bg-surface-1 px-4 py-6 text-sm text-muted-foreground">
+                    {asset.fileName}
+                  </div>
+                )}
+
+                <div className="space-y-2 text-sm text-muted-foreground">
+                  <p className="truncate">{asset.url}</p>
+                  <div className="flex flex-wrap gap-3">
+                    <Link href={asset.url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 text-foreground">
+                      <ExternalLink className="h-4 w-4" />
+                      Open
+                    </Link>
+                  </div>
+                </div>
+
+                {asset.usages.length > 0 ? (
+                  <div className="space-y-2 rounded-nested border border-border bg-surface-1 px-4 py-3 text-xs text-muted-foreground">
+                    {asset.usages.map((usage) => (
+                      <p key={usage.id}>
+                        {usage.usageType} / {usage.entityType} / {usage.fieldKey}
+                      </p>
+                    ))}
+                  </div>
+                ) : null}
+
+                <form action={deleteMediaAssetAction}>
+                  <input type="hidden" name="assetId" value={asset.id} />
+                  <Button type="submit" variant="destructive" disabled={asset.usages.length > 0}>
+                    <Trash2 className="h-4 w-4" />
+                    Delete
+                  </Button>
+                </form>
+              </CardContent>
+            </AppCard>
+          ))}
+        </div>
+
+        {mediaAssets.length === 0 ? (
+          <AppCard>
+            <CardContent className="p-6 text-sm text-muted-foreground">
+              No media assets found yet.
+            </CardContent>
+          </AppCard>
+        ) : null}
+      </div>
+    </RootDashboardShell>
+  );
+}
@@ -3,6 +3,7 @@
 import { MediaUsageType, Prisma } from "@prisma/client";
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
+import { isRedirectError } from "next/dist/client/components/redirect";
 import { ZodError } from "zod";

 import { routing } from "@/i18n/routing";
@@ -136,6 +137,10 @@ export async function upsertCategoryAction(formData: FormData) {
    await revalidatePortfolioPages();
    redirect(withMessage(redirectPath, "success", "Category saved."));
  } catch (error) {
+    if (isRedirectError(error)) {
+      throw error;
+    }
+
    const message =
      error instanceof ZodError
        ? parseZodError(error)
@@ -172,7 +177,11 @@ export async function deleteCategoryAction(formData: FormData) {

    await revalidatePortfolioPages();
    redirect(withMessage(redirectPath, "success", "Category deleted."));
-  } catch {
+  } catch (error) {
+    if (isRedirectError(error)) {
+      throw error;
+    }
+
    redirect(withMessage(redirectPath, "error", "Unable to delete category."));
  }
 }
@@ -515,6 +524,10 @@ export async function saveProjectAction(formData: FormData) {
      withMessage(`/root/portfolio/projects/${projectResult.project.id}`, "success", "Project saved."),
    );
  } catch (error) {
+    if (isRedirectError(error)) {
+      throw error;
+    }
+
    const message =
      error instanceof ZodError
        ? parseZodError(error)
@@ -564,12 +577,6 @@ export async function deleteProjectAction(formData: FormData) {
      redirect(withMessage("/root/portfolio/projects", "error", "Project not found."));
    }

-    const projectPaths = collectUniqueManagedPaths([
-      project.coverImagePath,
-      ...project.sections.map((section) => section.imagePath),
-      ...project.assets.map((asset) => asset.filePath),
-    ]);
-
    await prisma.portfolioProject.delete({
      where: {
        id,
@@ -585,7 +592,11 @@ export async function deleteProjectAction(formData: FormData) {
    }

    redirect(withMessage("/root/portfolio/projects", "success", "Project deleted."));
-  } catch {
+  } catch (error) {
+    if (isRedirectError(error)) {
+      throw error;
+    }
+
    redirect(withMessage("/root/portfolio/projects", "error", "Unable to delete project."));
  }
 }