77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
import { A, useParams } from '@solidjs/router';
|
|
import { createResource, Show } from 'solid-js';
|
|
import AdminShell from '~/components/AdminShell';
|
|
|
|
const API = '/api/gateway';
|
|
|
|
type KbArticle = {
|
|
id: string;
|
|
title: string;
|
|
slug?: string;
|
|
content?: string;
|
|
body?: string;
|
|
status?: string;
|
|
category?: string;
|
|
category_id?: string;
|
|
updated_at?: string;
|
|
created_at?: string;
|
|
};
|
|
|
|
async function loadArticle(id: string): Promise<KbArticle | null> {
|
|
try {
|
|
const res = await fetch(`${API}/api/admin/kb/articles/${id}`);
|
|
if (!res.ok) return null;
|
|
return res.json();
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export default function KbArticleDetailPage() {
|
|
const params = useParams();
|
|
const [article] = createResource(() => params.id, loadArticle);
|
|
|
|
return (
|
|
<AdminShell>
|
|
<div class="page-hero-card page-actions">
|
|
<div>
|
|
<h1 class="page-title">KB Article Detail</h1>
|
|
<p class="page-subtitle">Metadata and safe content preview for this article.</p>
|
|
</div>
|
|
<div class="page-actions-right">
|
|
<A class="btn" href="/admin/kb/articles">Back to Articles</A>
|
|
<A class="btn primary" href={`/admin/kb/articles/${params.id}/edit`}>Edit Article</A>
|
|
</div>
|
|
</div>
|
|
|
|
<Show when={article.loading}>
|
|
<section class="card"><p class="notice">Loading article...</p></section>
|
|
</Show>
|
|
|
|
<Show when={!article.loading && !article()}>
|
|
<section class="card"><p class="notice">Article not found.</p></section>
|
|
</Show>
|
|
|
|
<Show when={article()}>
|
|
<div class="detail-layout">
|
|
<section class="card">
|
|
<h2 style="margin-bottom:10px">Metadata</h2>
|
|
<div class="field-grid-2">
|
|
<div class="kv-item"><p class="kv-label">Title</p><p class="kv-value">{article()!.title || '—'}</p></div>
|
|
<div class="kv-item"><p class="kv-label">Status</p><p class="kv-value">{article()!.status || '—'}</p></div>
|
|
<div class="kv-item"><p class="kv-label">Slug</p><p class="kv-value">{article()!.slug || '—'}</p></div>
|
|
<div class="kv-item"><p class="kv-label">Category</p><p class="kv-value">{article()!.category || article()!.category_id || '—'}</p></div>
|
|
<div class="kv-item"><p class="kv-label">Created At</p><p class="kv-value">{article()!.created_at ? new Date(article()!.created_at!).toLocaleString() : '—'}</p></div>
|
|
<div class="kv-item"><p class="kv-label">Updated At</p><p class="kv-value">{article()!.updated_at ? new Date(article()!.updated_at!).toLocaleString() : '—'}</p></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2 style="margin-bottom:10px">Content</h2>
|
|
<pre class="json" style="max-height:720px;white-space:pre-wrap">{article()!.content || article()!.body || 'No content'}</pre>
|
|
</section>
|
|
</div>
|
|
</Show>
|
|
</AdminShell>
|
|
);
|
|
}
|