feat(media): complete mvp1 media foundation workflows

apps/admin/src/app/portfolio/page.tsx

@@ -1,17 +1,218 @@
-import { listArtworks } from "@cms/db"
+import {
+  attachArtworkRendition,
+  createAlbum,
+  createArtwork,
+  createCategory,
+  createGallery,
+  createTag,
+  linkArtworkToGrouping,
+  listArtworks,
+  listMediaAssets,
+  listMediaFoundationGroups,
+} from "@cms/db"
+import { Button } from "@cms/ui/button"
+import { revalidatePath } from "next/cache"
+import { redirect } from "next/navigation"
 
 import { AdminShell } from "@/components/admin-shell"
 import { requirePermissionForRoute } from "@/lib/route-guards"
 
 export const dynamic = "force-dynamic"
 
-export default async function PortfolioPage() {
+type SearchParamsInput = Record<string, string | string[] | undefined>
+type GroupType = "gallery" | "album" | "category" | "tag"
+
+function readField(formData: FormData, key: string): string {
+  const value = formData.get(key)
+  return typeof value === "string" ? value.trim() : ""
+}
+
+function readOptionalField(formData: FormData, key: string): string | undefined {
+  const value = readField(formData, key)
+  return value.length > 0 ? value : undefined
+}
+
+function readFirstValue(value: string | string[] | undefined): string | null {
+  if (Array.isArray(value)) {
+    return value[0] ?? null
+  }
+
+  return value ?? null
+}
+
+function slugify(input: string): string {
+  return input
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 180)
+}
+
+function redirectWithState(params: { notice?: string; error?: string }) {
+  const query = new URLSearchParams()
+
+  if (params.notice) {
+    query.set("notice", params.notice)
+  }
+
+  if (params.error) {
+    query.set("error", params.error)
+  }
+
+  const value = query.toString()
+  redirect(value ? `/portfolio?${value}` : "/portfolio")
+}
+
+async function requireWritePermission() {
+  await requirePermissionForRoute({
+    nextPath: "/portfolio",
+    permission: "media:write",
+    scope: "team",
+  })
+}
+
+async function createArtworkAction(formData: FormData) {
+  "use server"
+
+  await requireWritePermission()
+
+  const title = readField(formData, "title")
+  const slug = slugify(readField(formData, "slug") || title)
+
+  try {
+    await createArtwork({
+      title,
+      slug,
+      description: readOptionalField(formData, "description"),
+      medium: readOptionalField(formData, "medium"),
+      dimensions: readOptionalField(formData, "dimensions"),
+      framing: readOptionalField(formData, "framing"),
+      availability: readOptionalField(formData, "availability"),
+      year: (() => {
+        const raw = readField(formData, "year")
+        return raw ? Number(raw) : undefined
+      })(),
+    })
+  } catch {
+    redirectWithState({ error: "Failed to create artwork." })
+  }
+
+  revalidatePath("/portfolio")
+  redirectWithState({ notice: "Artwork created." })
+}
+
+async function createGroupAction(formData: FormData) {
+  "use server"
+
+  await requireWritePermission()
+
+  const type = readField(formData, "groupType") as GroupType
+  const name = readField(formData, "name")
+  const slug = slugify(readField(formData, "slug") || name)
+
+  try {
+    if (type === "gallery") {
+      await createGallery({
+        name,
+        slug,
+        description: readOptionalField(formData, "description"),
+      })
+    } else if (type === "album") {
+      await createAlbum({
+        name,
+        slug,
+        description: readOptionalField(formData, "description"),
+      })
+    } else if (type === "category") {
+      await createCategory({
+        name,
+        slug,
+        description: readOptionalField(formData, "description"),
+      })
+    } else {
+      await createTag({
+        name,
+        slug,
+      })
+    }
+  } catch {
+    redirectWithState({ error: "Failed to create grouping entity." })
+  }
+
+  revalidatePath("/portfolio")
+  redirectWithState({ notice: `${type} created.` })
+}
+
+async function linkArtworkGroupAction(formData: FormData) {
+  "use server"
+
+  await requireWritePermission()
+
+  const artworkId = readField(formData, "artworkId")
+  const groupType = readField(formData, "groupType") as GroupType
+  const groupId = readField(formData, "groupId")
+
+  try {
+    await linkArtworkToGrouping({
+      artworkId,
+      groupType,
+      groupId,
+    })
+  } catch {
+    redirectWithState({ error: "Failed to link artwork to grouping." })
+  }
+
+  revalidatePath("/portfolio")
+  redirectWithState({ notice: "Artwork linked to grouping." })
+}
+
+async function attachRenditionAction(formData: FormData) {
+  "use server"
+
+  await requireWritePermission()
+
+  try {
+    await attachArtworkRendition({
+      artworkId: readField(formData, "artworkId"),
+      mediaAssetId: readField(formData, "mediaAssetId"),
+      slot: readField(formData, "slot"),
+      width: (() => {
+        const raw = readField(formData, "width")
+        return raw ? Number(raw) : undefined
+      })(),
+      height: (() => {
+        const raw = readField(formData, "height")
+        return raw ? Number(raw) : undefined
+      })(),
+      isPrimary: readField(formData, "isPrimary") === "true",
+    })
+  } catch {
+    redirectWithState({ error: "Failed to attach artwork rendition." })
+  }
+
+  revalidatePath("/portfolio")
+  redirectWithState({ notice: "Rendition attached." })
+}
+
+export default async function PortfolioPage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParamsInput>
+}) {
   const role = await requirePermissionForRoute({
     nextPath: "/portfolio",
     permission: "media:read",
     scope: "team",
   })
-  const artworks = await listArtworks(30)
+  const [resolvedSearchParams, artworks, mediaAssets, groups] = await Promise.all([
+    searchParams,
+    listArtworks(30),
+    listMediaAssets(200),
+    listMediaFoundationGroups(),
+  ])
+  const notice = readFirstValue(resolvedSearchParams.notice)
+  const error = readFirstValue(resolvedSearchParams.error)
 
   return (
     <AdminShell
@@ -21,6 +222,217 @@ export default async function PortfolioPage() {
       title="Portfolio"
       description="Artwork foundation with rendition slots and grouping relations."
     >
+      {notice ? (
+        <section className="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
+          {notice}
+        </section>
+      ) : null}
+
+      {error ? (
+        <section className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-800">
+          {error}
+        </section>
+      ) : null}
+
+      <section className="rounded-xl border border-neutral-200 p-6">
+        <h2 className="text-xl font-medium">Create Artwork</h2>
+        <form action={createArtworkAction} className="mt-4 space-y-3">
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Title</span>
+              <input
+                name="title"
+                required
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="space-y-1">
+              <span className="text-xs text-neutral-600">Slug (optional)</span>
+              <input
+                name="slug"
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              />
+            </label>
+          </div>
+          <label className="space-y-1">
+            <span className="text-xs text-neutral-600">Description</span>
+            <textarea
+              name="description"
+              rows={3}
+              className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </label>
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+            <input
+              name="medium"
+              placeholder="Medium"
+              className="rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+            <input
+              name="dimensions"
+              placeholder="Dimensions"
+              className="rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+            <input
+              name="year"
+              type="number"
+              placeholder="Year"
+              className="rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+            <input
+              name="framing"
+              placeholder="Framing"
+              className="rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </div>
+          <input
+            name="availability"
+            placeholder="Availability"
+            className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+          />
+          <Button type="submit">Create artwork</Button>
+        </form>
+      </section>
+
+      <section className="rounded-xl border border-neutral-200 p-6">
+        <h2 className="text-xl font-medium">Create Group Entity</h2>
+        <form action={createGroupAction} className="mt-4 space-y-3">
+          <div className="grid gap-3 md:grid-cols-3">
+            <select
+              name="groupType"
+              defaultValue="gallery"
+              className="rounded border border-neutral-300 px-3 py-2 text-sm"
+            >
+              <option value="gallery">gallery</option>
+              <option value="album">album</option>
+              <option value="category">category</option>
+              <option value="tag">tag</option>
+            </select>
+            <input
+              name="name"
+              required
+              placeholder="Name"
+              className="rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+            <input
+              name="slug"
+              placeholder="Slug (optional)"
+              className="rounded border border-neutral-300 px-3 py-2 text-sm"
+            />
+          </div>
+          <textarea
+            name="description"
+            rows={2}
+            placeholder="Description (optional)"
+            className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+          />
+          <Button type="submit">Create group</Button>
+        </form>
+      </section>
+
+      <section className="rounded-xl border border-neutral-200 p-6">
+        <h2 className="text-xl font-medium">Link Artwork To Group</h2>
+        <div className="mt-4 grid gap-4 lg:grid-cols-2">
+          {(
+            [
+              { type: "gallery" as const, label: "Gallery", items: groups.galleries },
+              { type: "album" as const, label: "Album", items: groups.albums },
+              { type: "category" as const, label: "Category", items: groups.categories },
+              { type: "tag" as const, label: "Tag", items: groups.tags },
+            ] as const
+          ).map((groupConfig) => (
+            <form
+              key={groupConfig.type}
+              action={linkArtworkGroupAction}
+              className="space-y-3 rounded border border-neutral-200 p-4"
+            >
+              <h3 className="text-sm font-semibold">{groupConfig.label} Link</h3>
+              <input type="hidden" name="groupType" value={groupConfig.type} />
+              <select
+                name="artworkId"
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              >
+                {artworks.map((artwork) => (
+                  <option key={`${groupConfig.type}-${artwork.id}`} value={artwork.id}>
+                    {artwork.title}
+                  </option>
+                ))}
+              </select>
+              <select
+                name="groupId"
+                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+              >
+                {groupConfig.items.map((group) => (
+                  <option key={`${groupConfig.type}-${group.id}`} value={group.id}>
+                    {group.name}
+                  </option>
+                ))}
+              </select>
+              <Button type="submit">Link artwork</Button>
+            </form>
+          ))}
+        </div>
+      </section>
+
+      <section className="rounded-xl border border-neutral-200 p-6">
+        <h2 className="text-xl font-medium">Attach Artwork Rendition Slot</h2>
+        <form
+          action={attachRenditionAction}
+          className="mt-4 grid gap-3 md:grid-cols-3 xl:grid-cols-6"
+        >
+          <select name="artworkId" className="rounded border border-neutral-300 px-3 py-2 text-sm">
+            {artworks.map((artwork) => (
+              <option key={artwork.id} value={artwork.id}>
+                {artwork.title}
+              </option>
+            ))}
+          </select>
+          <select
+            name="mediaAssetId"
+            className="rounded border border-neutral-300 px-3 py-2 text-sm"
+          >
+            {mediaAssets.map((asset) => (
+              <option key={asset.id} value={asset.id}>
+                {asset.title}
+              </option>
+            ))}
+          </select>
+          <select
+            name="slot"
+            defaultValue="thumbnail"
+            className="rounded border border-neutral-300 px-3 py-2 text-sm"
+          >
+            <option value="thumbnail">thumbnail</option>
+            <option value="card">card</option>
+            <option value="full">full</option>
+            <option value="custom">custom</option>
+          </select>
+          <input
+            name="width"
+            type="number"
+            placeholder="width"
+            className="rounded border border-neutral-300 px-3 py-2 text-sm"
+          />
+          <input
+            name="height"
+            type="number"
+            placeholder="height"
+            className="rounded border border-neutral-300 px-3 py-2 text-sm"
+          />
+          <select
+            name="isPrimary"
+            defaultValue="false"
+            className="rounded border border-neutral-300 px-3 py-2 text-sm"
+          >
+            <option value="false">not primary</option>
+            <option value="true">primary</option>
+          </select>
+          <div className="md:col-span-3 xl:col-span-6">
+            <Button type="submit">Attach rendition</Button>
+          </div>
+        </form>
+      </section>
+
       <section className="rounded-xl border border-neutral-200 p-6">
         <div className="flex items-center justify-between gap-2">
           <h2 className="text-xl font-medium">Artworks</h2>