78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import type { HousekeepingResult } from "../../../foundation/contracts";
|
|
import type { ContentQueryData } from "../queries/content-queries";
|
|
|
|
export interface ContentPageProps {
|
|
readonly context: import("../../../foundation/contracts").HousekeepingCapabilityContext;
|
|
readonly result?: HousekeepingResult<ContentQueryData>;
|
|
readonly routeId: import("../routes").ContentRouteId | null;
|
|
}
|
|
|
|
export function ContentPageFrame({
|
|
title,
|
|
description,
|
|
result,
|
|
forms,
|
|
}: {
|
|
readonly title: string;
|
|
readonly description: string;
|
|
readonly result?: HousekeepingResult<ContentQueryData>;
|
|
readonly forms?: ReactNode;
|
|
}) {
|
|
if (!result) {
|
|
return (
|
|
<section data-housekeeping-state="loading">
|
|
<h1>{title}</h1>
|
|
<p>{description}</p>
|
|
<p>Loading content…</p>
|
|
</section>
|
|
);
|
|
}
|
|
if (!result.ok) {
|
|
const state = result.error.code === "FORBIDDEN" ? "forbidden" : "error";
|
|
return (
|
|
<section data-housekeeping-state={state} role="alert">
|
|
<h1>{title}</h1>
|
|
<p>{result.error.messageKey}</p>
|
|
</section>
|
|
);
|
|
}
|
|
const state = result.data.items.length === 0 ? "empty" : "ready";
|
|
return (
|
|
<section data-housekeeping-state={state} className="space-y-4">
|
|
<header>
|
|
<h1>{title}</h1>
|
|
<p>{description}</p>
|
|
</header>
|
|
{forms}
|
|
{result.data.items.length === 0 ? (
|
|
<p>No matching content.</p>
|
|
) : (
|
|
<ul className="divide-y divide-[var(--admin-border)]">
|
|
{result.data.items.map((item) => (
|
|
<li key={item.id} className="py-2">
|
|
{item.href ? <a href={item.href}>{item.title}</a> : item.title}
|
|
{item.status ? <span> — {item.status}</span> : null}
|
|
{item.description ? <p>{item.description}</p> : null}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function parseContentListInput(
|
|
searchParams: Readonly<
|
|
Record<string, string | readonly string[] | undefined>
|
|
>,
|
|
) {
|
|
const first = (value: string | readonly string[] | undefined) =>
|
|
Array.isArray(value) ? value[0] : value;
|
|
return {
|
|
search: first(searchParams.search),
|
|
pageSize: Number(first(searchParams.pageSize) ?? 25),
|
|
offset: Number(first(searchParams.offset) ?? 0),
|
|
};
|
|
}
|