406 lines
14 KiB
TypeScript
406 lines
14 KiB
TypeScript
import {
|
|
deletePage,
|
|
getPageById,
|
|
listPageTranslations,
|
|
updatePage,
|
|
upsertPageTranslation,
|
|
} from "@cms/db"
|
|
import { Button } from "@cms/ui/button"
|
|
import Link from "next/link"
|
|
import { redirect } from "next/navigation"
|
|
|
|
import { AdminShell } from "@/components/admin-shell"
|
|
import { PageBlockEditor } from "@/components/pages/page-block-editor"
|
|
import { requirePermissionForRoute } from "@/lib/route-guards"
|
|
|
|
export const dynamic = "force-dynamic"
|
|
|
|
type SearchParamsInput = Record<string, string | string[] | undefined>
|
|
const SUPPORTED_LOCALES = ["de", "en", "es", "fr"] as const
|
|
type SupportedLocale = (typeof SUPPORTED_LOCALES)[number]
|
|
|
|
type PageProps = {
|
|
params: Promise<{ id: string }>
|
|
searchParams: Promise<SearchParamsInput>
|
|
}
|
|
|
|
function readFirstValue(value: string | string[] | undefined): string | null {
|
|
if (Array.isArray(value)) {
|
|
return value[0] ?? null
|
|
}
|
|
|
|
return value ?? null
|
|
}
|
|
|
|
function readInputString(formData: FormData, field: string): string {
|
|
const value = formData.get(field)
|
|
return typeof value === "string" ? value.trim() : ""
|
|
}
|
|
|
|
function readNullableString(formData: FormData, field: string): string | null {
|
|
const value = readInputString(formData, field)
|
|
return value.length > 0 ? value : null
|
|
}
|
|
|
|
function redirectWithState(pageId: string, 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 ? `/pages/${pageId}?${value}` : `/pages/${pageId}`)
|
|
}
|
|
|
|
function normalizeLocale(input: string | null): SupportedLocale {
|
|
if (input && SUPPORTED_LOCALES.includes(input as SupportedLocale)) {
|
|
return input as SupportedLocale
|
|
}
|
|
|
|
return "en"
|
|
}
|
|
|
|
export default async function PageEditorPage({ params, searchParams }: PageProps) {
|
|
const role = await requirePermissionForRoute({
|
|
nextPath: "/pages",
|
|
permission: "pages:read",
|
|
scope: "team",
|
|
})
|
|
const resolvedParams = await params
|
|
const pageId = resolvedParams.id
|
|
|
|
const [resolvedSearchParams, pageRecord, translations] = await Promise.all([
|
|
searchParams,
|
|
getPageById(pageId),
|
|
listPageTranslations(pageId),
|
|
])
|
|
|
|
if (!pageRecord) {
|
|
redirect("/pages?error=Page+not+found")
|
|
}
|
|
|
|
const page = pageRecord
|
|
const notice = readFirstValue(resolvedSearchParams.notice)
|
|
const error = readFirstValue(resolvedSearchParams.error)
|
|
const selectedLocale = normalizeLocale(readFirstValue(resolvedSearchParams.locale))
|
|
const selectedTranslation = translations.find((entry) => entry.locale === selectedLocale)
|
|
|
|
async function updatePageAction(formData: FormData) {
|
|
"use server"
|
|
|
|
await requirePermissionForRoute({
|
|
nextPath: "/pages",
|
|
permission: "pages:write",
|
|
scope: "team",
|
|
})
|
|
|
|
try {
|
|
await updatePage({
|
|
id: pageId,
|
|
title: readInputString(formData, "title"),
|
|
slug: readInputString(formData, "slug"),
|
|
status: readInputString(formData, "status"),
|
|
summary: readNullableString(formData, "summary"),
|
|
content: readInputString(formData, "content"),
|
|
seoTitle: readNullableString(formData, "seoTitle"),
|
|
seoDescription: readNullableString(formData, "seoDescription"),
|
|
})
|
|
} catch {
|
|
redirectWithState(pageId, {
|
|
error: "Failed to update page. Validate values and try again.",
|
|
})
|
|
}
|
|
|
|
redirectWithState(pageId, {
|
|
notice: "Page updated.",
|
|
})
|
|
}
|
|
|
|
async function deletePageAction() {
|
|
"use server"
|
|
|
|
await requirePermissionForRoute({
|
|
nextPath: "/pages",
|
|
permission: "pages:write",
|
|
scope: "team",
|
|
})
|
|
|
|
try {
|
|
await deletePage(pageId)
|
|
} catch {
|
|
redirectWithState(pageId, {
|
|
error: "Failed to delete page. Remove linked navigation references first.",
|
|
})
|
|
}
|
|
|
|
redirect("/pages?notice=Page+deleted")
|
|
}
|
|
|
|
async function upsertPageTranslationAction(formData: FormData) {
|
|
"use server"
|
|
|
|
await requirePermissionForRoute({
|
|
nextPath: "/pages",
|
|
permission: "pages:write",
|
|
scope: "team",
|
|
})
|
|
|
|
const locale = normalizeLocale(readInputString(formData, "locale"))
|
|
|
|
try {
|
|
await upsertPageTranslation({
|
|
pageId,
|
|
locale,
|
|
title: readInputString(formData, "title"),
|
|
summary: readNullableString(formData, "summary"),
|
|
content: readInputString(formData, "content"),
|
|
seoTitle: readNullableString(formData, "seoTitle"),
|
|
seoDescription: readNullableString(formData, "seoDescription"),
|
|
})
|
|
} catch {
|
|
redirect(`/pages/${pageId}?error=Failed+to+save+translation.&locale=${locale}`)
|
|
}
|
|
|
|
redirect(`/pages/${pageId}?notice=Translation+saved.&locale=${locale}`)
|
|
}
|
|
|
|
return (
|
|
<AdminShell
|
|
role={role}
|
|
activePath="/pages"
|
|
badge="Admin App"
|
|
title="Page Editor"
|
|
description="Edit page metadata, content, and publication status."
|
|
>
|
|
{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">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<h2 className="text-xl font-medium">{page.title}</h2>
|
|
<p className="mt-1 text-xs text-neutral-600">ID: {page.id}</p>
|
|
</div>
|
|
<Link href="/pages" className="text-sm text-neutral-700 underline underline-offset-2">
|
|
Back to pages
|
|
</Link>
|
|
</div>
|
|
|
|
<form action={updatePageAction} className="mt-6 space-y-3">
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<label className="space-y-1 md:col-span-2">
|
|
<span className="text-xs text-neutral-600">Title</span>
|
|
<input
|
|
name="title"
|
|
defaultValue={page.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">Status</span>
|
|
<select
|
|
name="status"
|
|
defaultValue={page.status}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
>
|
|
<option value="draft">draft</option>
|
|
<option value="published">published</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Slug</span>
|
|
<input
|
|
name="slug"
|
|
defaultValue={page.slug}
|
|
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">Summary</span>
|
|
<input
|
|
name="summary"
|
|
defaultValue={page.summary ?? ""}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
|
|
<PageBlockEditor name="content" initialContent={page.content} />
|
|
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">SEO title</span>
|
|
<input
|
|
name="seoTitle"
|
|
defaultValue={page.seoTitle ?? ""}
|
|
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">SEO description</span>
|
|
<input
|
|
name="seoDescription"
|
|
defaultValue={page.seoDescription ?? ""}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<Button type="submit">Save page</Button>
|
|
</form>
|
|
</section>
|
|
|
|
<section className="rounded-xl border border-neutral-200 p-6">
|
|
<div className="space-y-1">
|
|
<h3 className="text-xl font-medium">Translations</h3>
|
|
<p className="text-sm text-neutral-600">
|
|
Add locale-specific page content. Missing locales fall back to base page fields.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{SUPPORTED_LOCALES.map((locale) => {
|
|
const isActive = locale === selectedLocale
|
|
const hasTranslation = translations.some((entry) => entry.locale === locale)
|
|
|
|
return (
|
|
<Link
|
|
key={locale}
|
|
href={`/pages/${pageId}?locale=${locale}`}
|
|
className={`inline-flex items-center gap-2 rounded border px-3 py-1.5 text-xs ${
|
|
isActive
|
|
? "border-neutral-800 bg-neutral-900 text-white"
|
|
: "border-neutral-300 text-neutral-700"
|
|
}`}
|
|
>
|
|
<span>{locale.toUpperCase()}</span>
|
|
<span className={isActive ? "text-neutral-200" : "text-neutral-500"}>
|
|
{hasTranslation ? "saved" : "missing"}
|
|
</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{translations.length > 0 ? (
|
|
<div className="mt-4 rounded border border-neutral-200">
|
|
<table className="min-w-full text-left text-sm">
|
|
<thead className="text-xs uppercase tracking-wide text-neutral-500">
|
|
<tr>
|
|
<th className="px-3 py-2">Locale</th>
|
|
<th className="px-3 py-2">Title</th>
|
|
<th className="px-3 py-2">Updated</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{translations.map((translation) => (
|
|
<tr key={translation.id} className="border-t border-neutral-200">
|
|
<td className="px-3 py-2">{translation.locale.toUpperCase()}</td>
|
|
<td className="px-3 py-2">{translation.title}</td>
|
|
<td className="px-3 py-2 text-neutral-600">
|
|
{translation.updatedAt.toLocaleDateString("en-US")}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : null}
|
|
|
|
<form action={upsertPageTranslationAction} className="mt-6 space-y-3">
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Locale</span>
|
|
<select
|
|
name="locale"
|
|
defaultValue={selectedLocale}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
>
|
|
{SUPPORTED_LOCALES.map((locale) => (
|
|
<option key={locale} value={locale}>
|
|
{locale.toUpperCase()}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Title</span>
|
|
<input
|
|
name="title"
|
|
defaultValue={selectedTranslation?.title ?? page.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">Summary</span>
|
|
<input
|
|
name="summary"
|
|
defaultValue={selectedTranslation?.summary ?? page.summary ?? ""}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
|
|
<PageBlockEditor
|
|
name="content"
|
|
initialContent={selectedTranslation?.content ?? page.content}
|
|
label="Translation Blocks"
|
|
/>
|
|
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">SEO title</span>
|
|
<input
|
|
name="seoTitle"
|
|
defaultValue={selectedTranslation?.seoTitle ?? page.seoTitle ?? ""}
|
|
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">SEO description</span>
|
|
<input
|
|
name="seoDescription"
|
|
defaultValue={selectedTranslation?.seoDescription ?? page.seoDescription ?? ""}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<Button type="submit">Save translation</Button>
|
|
</form>
|
|
</section>
|
|
|
|
<section className="rounded-xl border border-red-300 bg-red-50 p-6">
|
|
<h3 className="text-lg font-medium text-red-800">Danger Zone</h3>
|
|
<p className="mt-1 text-sm text-red-700">
|
|
Deleting this page is permanent and may break linked navigation items.
|
|
</p>
|
|
<form action={deletePageAction} className="mt-4">
|
|
<Button type="submit" variant="secondary" className="border border-red-300 text-red-800">
|
|
Delete page
|
|
</Button>
|
|
</form>
|
|
</section>
|
|
</AdminShell>
|
|
)
|
|
}
|