400 lines
13 KiB
TypeScript
400 lines
13 KiB
TypeScript
import {
|
|
createPost,
|
|
deletePost,
|
|
listPostsWithTranslations,
|
|
updatePost,
|
|
upsertPostTranslation,
|
|
} 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"
|
|
|
|
type SearchParamsInput = Record<string, string | string[] | undefined>
|
|
const SUPPORTED_LOCALES = ["de", "en", "es", "fr"] as const
|
|
|
|
type SupportedLocale = (typeof SUPPORTED_LOCALES)[number]
|
|
|
|
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 | undefined {
|
|
const value = readInputString(formData, field)
|
|
return value.length > 0 ? value : undefined
|
|
}
|
|
|
|
function normalizeLocale(input: string | null): SupportedLocale {
|
|
if (input && SUPPORTED_LOCALES.includes(input as SupportedLocale)) {
|
|
return input as SupportedLocale
|
|
}
|
|
|
|
return "en"
|
|
}
|
|
|
|
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 ? `/news?${value}` : "/news")
|
|
}
|
|
|
|
async function createNewsAction(formData: FormData) {
|
|
"use server"
|
|
|
|
await requirePermissionForRoute({
|
|
nextPath: "/news",
|
|
permission: "news:write",
|
|
scope: "team",
|
|
})
|
|
|
|
try {
|
|
await createPost({
|
|
title: readInputString(formData, "title"),
|
|
slug: readInputString(formData, "slug"),
|
|
excerpt: readNullableString(formData, "excerpt"),
|
|
body: readInputString(formData, "body"),
|
|
status: readInputString(formData, "status") === "published" ? "published" : "draft",
|
|
})
|
|
} catch {
|
|
redirectWithState({ error: "Failed to create post." })
|
|
}
|
|
|
|
revalidatePath("/news")
|
|
revalidatePath("/")
|
|
redirectWithState({ notice: "Post created." })
|
|
}
|
|
|
|
async function updateNewsAction(formData: FormData) {
|
|
"use server"
|
|
|
|
await requirePermissionForRoute({
|
|
nextPath: "/news",
|
|
permission: "news:write",
|
|
scope: "team",
|
|
})
|
|
|
|
try {
|
|
await updatePost(readInputString(formData, "id"), {
|
|
title: readInputString(formData, "title"),
|
|
slug: readInputString(formData, "slug"),
|
|
excerpt: readNullableString(formData, "excerpt"),
|
|
body: readInputString(formData, "body"),
|
|
status: readInputString(formData, "status") === "published" ? "published" : "draft",
|
|
})
|
|
} catch {
|
|
redirectWithState({ error: "Failed to update post." })
|
|
}
|
|
|
|
revalidatePath("/news")
|
|
revalidatePath("/")
|
|
redirectWithState({ notice: "Post updated." })
|
|
}
|
|
|
|
async function deleteNewsAction(formData: FormData) {
|
|
"use server"
|
|
|
|
await requirePermissionForRoute({
|
|
nextPath: "/news",
|
|
permission: "news:write",
|
|
scope: "team",
|
|
})
|
|
|
|
try {
|
|
await deletePost(readInputString(formData, "id"))
|
|
} catch {
|
|
redirectWithState({ error: "Failed to delete post." })
|
|
}
|
|
|
|
revalidatePath("/news")
|
|
revalidatePath("/")
|
|
redirectWithState({ notice: "Post deleted." })
|
|
}
|
|
|
|
async function upsertNewsTranslationAction(formData: FormData) {
|
|
"use server"
|
|
|
|
await requirePermissionForRoute({
|
|
nextPath: "/news",
|
|
permission: "news:write",
|
|
scope: "team",
|
|
})
|
|
|
|
const locale = normalizeLocale(readInputString(formData, "locale"))
|
|
|
|
try {
|
|
await upsertPostTranslation({
|
|
postId: readInputString(formData, "postId"),
|
|
locale,
|
|
title: readInputString(formData, "title"),
|
|
excerpt: readNullableString(formData, "excerpt") ?? null,
|
|
body: readInputString(formData, "body"),
|
|
})
|
|
} catch {
|
|
redirectWithState({ error: "Failed to save translation." })
|
|
}
|
|
|
|
revalidatePath("/news")
|
|
revalidatePath("/")
|
|
redirectWithState({ notice: "Post translation saved." })
|
|
}
|
|
|
|
export default async function NewsManagementPage({
|
|
searchParams,
|
|
}: {
|
|
searchParams: Promise<SearchParamsInput>
|
|
}) {
|
|
const role = await requirePermissionForRoute({
|
|
nextPath: "/news",
|
|
permission: "news:read",
|
|
scope: "team",
|
|
})
|
|
|
|
const [resolvedSearchParams, posts] = await Promise.all([
|
|
searchParams,
|
|
listPostsWithTranslations(),
|
|
])
|
|
|
|
const notice = readFirstValue(resolvedSearchParams.notice)
|
|
const error = readFirstValue(resolvedSearchParams.error)
|
|
const selectedLocale = normalizeLocale(readFirstValue(resolvedSearchParams.locale))
|
|
|
|
return (
|
|
<AdminShell
|
|
role={role}
|
|
activePath="/news"
|
|
badge="Admin App"
|
|
title="News"
|
|
description="Manage blog/news posts for public updates and announcements archive."
|
|
>
|
|
{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 Post</h2>
|
|
<form action={createNewsAction} 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</span>
|
|
<input
|
|
name="slug"
|
|
required
|
|
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">Excerpt</span>
|
|
<input
|
|
name="excerpt"
|
|
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">Body</span>
|
|
<textarea
|
|
name="body"
|
|
rows={5}
|
|
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="draft"
|
|
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>
|
|
<Button type="submit">Create post</Button>
|
|
</form>
|
|
</section>
|
|
|
|
<section className="space-y-3">
|
|
<div className="flex flex-wrap gap-2">
|
|
{SUPPORTED_LOCALES.map((locale) => (
|
|
<a
|
|
key={locale}
|
|
href={`/news?locale=${locale}`}
|
|
className={`inline-flex rounded border px-3 py-1.5 text-xs ${
|
|
selectedLocale === locale
|
|
? "border-neutral-800 bg-neutral-900 text-white"
|
|
: "border-neutral-300 text-neutral-700"
|
|
}`}
|
|
>
|
|
{locale.toUpperCase()}
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
{posts.map((post) => {
|
|
const translation = post.translations.find((entry) => entry.locale === selectedLocale)
|
|
|
|
return (
|
|
<div key={post.id} className="rounded-xl border border-neutral-200 p-6">
|
|
<form action={updateNewsAction}>
|
|
<input type="hidden" name="id" value={post.id} />
|
|
<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"
|
|
defaultValue={post.title}
|
|
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</span>
|
|
<input
|
|
name="slug"
|
|
defaultValue={post.slug}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<label className="mt-3 block space-y-1">
|
|
<span className="text-xs text-neutral-600">Excerpt</span>
|
|
<input
|
|
name="excerpt"
|
|
defaultValue={post.excerpt ?? ""}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
<label className="mt-3 block space-y-1">
|
|
<span className="text-xs text-neutral-600">Body</span>
|
|
<textarea
|
|
name="body"
|
|
rows={4}
|
|
defaultValue={post.body}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
<div className="mt-3 flex flex-wrap items-center justify-between gap-3">
|
|
<select
|
|
name="status"
|
|
defaultValue={post.status}
|
|
className="rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
>
|
|
<option value="draft">draft</option>
|
|
<option value="published">published</option>
|
|
</select>
|
|
<div className="flex items-center gap-2">
|
|
<Button type="submit" size="sm">
|
|
Save
|
|
</Button>
|
|
<button
|
|
type="submit"
|
|
formAction={deleteNewsAction}
|
|
className="rounded-md border border-red-300 px-3 py-2 text-sm text-red-700"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<form
|
|
action={upsertNewsTranslationAction}
|
|
className="mt-4 rounded-lg border border-neutral-200 p-4"
|
|
>
|
|
<input type="hidden" name="postId" value={post.id} />
|
|
<input type="hidden" name="locale" value={selectedLocale} />
|
|
|
|
<h3 className="text-sm font-medium">
|
|
Translation ({selectedLocale.toUpperCase()})
|
|
</h3>
|
|
<p className="mt-1 text-xs text-neutral-600">
|
|
Missing fields fall back to base post content on public pages.
|
|
</p>
|
|
{post.translations.length > 0 ? (
|
|
<p className="mt-2 text-xs text-neutral-600">
|
|
Saved locales:{" "}
|
|
{post.translations.map((entry) => entry.locale.toUpperCase()).join(", ")}
|
|
</p>
|
|
) : null}
|
|
|
|
<div className="mt-3 grid gap-3 md:grid-cols-2">
|
|
<label className="space-y-1">
|
|
<span className="text-xs text-neutral-600">Title</span>
|
|
<input
|
|
name="title"
|
|
defaultValue={translation?.title ?? post.title}
|
|
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">Excerpt</span>
|
|
<input
|
|
name="excerpt"
|
|
defaultValue={translation?.excerpt ?? post.excerpt ?? ""}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<label className="mt-3 block space-y-1">
|
|
<span className="text-xs text-neutral-600">Body</span>
|
|
<textarea
|
|
name="body"
|
|
rows={4}
|
|
defaultValue={translation?.body ?? post.body}
|
|
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
|
|
<div className="mt-3">
|
|
<Button type="submit" size="sm">
|
|
Save translation
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)
|
|
})}
|
|
</section>
|
|
</AdminShell>
|
|
)
|
|
}
|