61 lines
3.2 KiB
TypeScript
61 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { useParams } from "next/navigation";
|
|
import { Download, ExternalLink } from "lucide-react";
|
|
|
|
import DetailSection from "@/components/common/DetailSection";
|
|
import DocumentTypeBadge from "@/components/knowledge/DocumentTypeBadge";
|
|
import TagList from "@/components/knowledge/TagList";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { api } from "@/lib/api";
|
|
import type { KnowledgeDocument } from "@/types/knowledge";
|
|
|
|
function fileSize(value: number) {
|
|
if (!value) return "-";
|
|
if (value < 1024 * 1024) return `${Math.round(value / 1024)} KB`;
|
|
return `${(value / 1024 / 1024).toFixed(1)} MB`;
|
|
}
|
|
|
|
export default function KnowledgeDocumentDetailPage() {
|
|
const params = useParams<{ id: string }>();
|
|
const [document, setDocument] = useState<KnowledgeDocument | null>(null);
|
|
const [error, setError] = useState("");
|
|
|
|
useEffect(() => {
|
|
api.get<KnowledgeDocument>(`/knowledge/documents/${params.id}`)
|
|
.then((response) => setDocument(response.data))
|
|
.catch(() => setError("Dokument konnte nicht geladen werden"));
|
|
}, [params.id]);
|
|
|
|
if (error) return <p className="text-red-600">{error}</p>;
|
|
if (!document) return <p className="text-slate-500">Dokument wird geladen...</p>;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-slate-950">{document.title}</h1>
|
|
<p className="mt-1 text-sm text-slate-500">{document.manufacturer.name}{document.device ? ` · ${document.device.name}` : ""}</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{document.external_url && <Link href={document.external_url} target="_blank" className={buttonVariants({ variant: "outline" })}><ExternalLink size={16} />Extern</Link>}
|
|
{document.file_name && <Link href={`/api/knowledge/documents/${document.id}/download`} className={buttonVariants()}><Download size={16} />Download</Link>}
|
|
</div>
|
|
</div>
|
|
<DetailSection title="Dokument">
|
|
<dl className="grid gap-3 text-sm md:grid-cols-2">
|
|
<div><dt className="text-slate-500">Typ</dt><dd className="mt-1"><DocumentTypeBadge type={document.document_type} /></dd></div>
|
|
<div><dt className="text-slate-500">Sprache</dt><dd className="font-medium">{document.language}</dd></div>
|
|
<div><dt className="text-slate-500">Dateiname</dt><dd className="font-medium">{document.file_name || "-"}</dd></div>
|
|
<div><dt className="text-slate-500">Dateigröße</dt><dd className="font-medium">{fileSize(document.file_size)}</dd></div>
|
|
<div><dt className="text-slate-500">SHA-256</dt><dd className="break-all font-medium">{document.checksum_sha256 || "-"}</dd></div>
|
|
<div><dt className="text-slate-500">Paperless-ID</dt><dd className="font-medium">{document.paperless_document_id || "-"}</dd></div>
|
|
</dl>
|
|
<div className="mt-4"><TagList tags={document.tags} /></div>
|
|
{document.description && <p className="mt-4 whitespace-pre-wrap text-sm text-slate-700">{document.description}</p>}
|
|
</DetailSection>
|
|
</div>
|
|
);
|
|
}
|