Merge branch 'master' of github.com:Pregnant-Guild/FE_User_history_web
This commit is contained in:
taDuc
@@ -257,7 +257,7 @@ export default function ProjectDetailsPage() {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-4 pb-3">
|
||||
{[
|
||||
{
|
||||
id: "overview",
|
||||
|
||||
+102
-105
@@ -131,6 +131,7 @@ export default function ProjectsPage() {
|
||||
setFormData({ title: "", description: "", project_status: "PRIVATE" });
|
||||
setImportSnapshot(null);
|
||||
setImportSnapshotName(null);
|
||||
if (importJsonInputRef.current) importJsonInputRef.current.value = "";
|
||||
fetchProjects();
|
||||
router.push(`/editor/${projectId}`);
|
||||
} catch (error) {
|
||||
@@ -199,15 +200,17 @@ export default function ProjectsPage() {
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Helper format ngày
|
||||
const formatDate = (dateString: string | null | undefined) => {
|
||||
if (!dateString) return "-";
|
||||
const date = new Date(dateString);
|
||||
return `Updated on ${date.toLocaleDateString("vi-VN", {
|
||||
if (isNaN(date.getTime())) return "-";
|
||||
return date.toLocaleDateString("vi-VN", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
})}`;
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
@@ -228,17 +231,16 @@ export default function ProjectsPage() {
|
||||
return (
|
||||
<button
|
||||
onClick={() => handleSort(column)}
|
||||
className={`w-20 text-sm font-medium text-left hover:text-blue-500 transition-colors ${
|
||||
className={`flex items-center gap-1 text-sm font-medium hover:text-blue-500 transition-colors ${
|
||||
isActive ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"
|
||||
}`}
|
||||
>
|
||||
{label} {isActive && (sortOrder === "asc" ? "↑" : "↓")}
|
||||
<span>{label}</span>
|
||||
{isActive && <span>{sortOrder === "asc" ? "↑" : "↓"}</span>}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
console.log(projects);
|
||||
|
||||
const importLabel = useMemo(() => {
|
||||
if (!importSnapshotName) return "Chưa chọn JSON snapshot";
|
||||
return `JSON: ${importSnapshotName}`;
|
||||
@@ -266,137 +268,134 @@ export default function ProjectsPage() {
|
||||
|
||||
{!isLoading && sortedProjects.length > 0 ? (
|
||||
<div className="max-w-full overflow-x-auto">
|
||||
<div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-[#0d1117] min-w-[700px]">
|
||||
<div className="flex items-center justify-between px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22]">
|
||||
<span className="text-sm font-semibold text-gray-700 dark:text-gray-300 w-40"></span>
|
||||
<div className="flex items-center gap-4 shrink-0">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 w-20">Sắp xếp:</span>
|
||||
<SortButton column="title" label="Tên" />
|
||||
<SortButton column="created_at" label="Ngày tạo" />
|
||||
<div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-[#0d1117] min-w-[800px]">
|
||||
<div className="flex items-center px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22]">
|
||||
<div className="flex-1 pr-4">
|
||||
<SortButton column="title" label="Tên dự án" />
|
||||
</div>
|
||||
<div className="w-48 px-4 text-sm font-medium text-gray-500 dark:text-gray-400">Trạng thái</div>
|
||||
<div className="w-48 px-4 text-sm font-medium text-gray-500 dark:text-gray-400">Thành viên</div>
|
||||
<div className="w-32 px-4">
|
||||
<SortButton column="updated_at" label="Cập nhật" />
|
||||
</div>
|
||||
<div className="w-48 px-4 text-sm font-medium text-gray-500 dark:text-gray-400 text-right">Thao tác</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{sortedProjects.map((project: any) => (
|
||||
<div
|
||||
key={project.id}
|
||||
className="group flex flex-col p-5 md:flex-row md:items-center justify-between hover:bg-gray-50 dark:hover:bg-[#161b22] transition-colors"
|
||||
className="group flex items-center p-5 hover:bg-gray-50 dark:hover:bg-[#161b22]/50 transition-colors"
|
||||
>
|
||||
<div className="flex-1 pr-4 max-w-full md:max-w-[75%]">
|
||||
<div
|
||||
onClick={() => router.push(`/user/projects/${project.id}`)}
|
||||
className="flex items-center gap-2 mb-2 cursor-pointer hover:underline"
|
||||
>
|
||||
<div className="w-6 h-6 shrink-0 flex items-center justify-center">
|
||||
<div className="flex-1 pr-4 min-w-0">
|
||||
<div className="items-center gap-3 mb-1.5">
|
||||
<h3
|
||||
onClick={() => router.push(`/user/projects/${project.id}`)}
|
||||
className="font-semibold text-blue-600 dark:text-[#58a6ff] truncate cursor-pointer hover:underline"
|
||||
>
|
||||
{project.title}
|
||||
</h3>
|
||||
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500 dark:text-[#8b949e]">
|
||||
<div className="flex items-center gap-1.5">
|
||||
{project.user?.avatar_url ? (
|
||||
<div className="relative w-6 h-6 rounded-full overflow-hidden border border-gray-200 dark:border-gray-800">
|
||||
<Image
|
||||
src={project.user.avatar_url}
|
||||
alt="avatar"
|
||||
fill
|
||||
className="object-cover rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<Image src={project.user.avatar_url} alt="avatar" width={16} height={16} className="rounded-full object-cover" />
|
||||
) : (
|
||||
<div className="w-6 h-6 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center border border-gray-300 dark:border-gray-600">
|
||||
<span className="text-[10px] font-bold text-gray-500 dark:text-gray-300 leading-none">
|
||||
<div className="w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
|
||||
<span className="text-[8px] font-bold text-gray-500 dark:text-gray-300">
|
||||
{project.user?.display_name?.charAt(0)?.toUpperCase() || "U"}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<span className="truncate max-w-[150px]">{project.user?.display_name || "Unknown"}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center max-w-[250px]">
|
||||
<span className="text-[14px] font-medium text-gray-700 dark:text-gray-300 truncate">
|
||||
{project.user?.display_name || "Unknown"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span className="text-[14px] text-gray-400 dark:text-gray-600 shrink-0">/</span>
|
||||
|
||||
<h3 className="text-[14px] font-semibold text-blue-600 dark:text-[#58a6ff] truncate max-w-[300px]">
|
||||
{project.title}
|
||||
</h3>
|
||||
|
||||
<div className="shrink-0 w-20 flex justify-start">
|
||||
{getStatusBadge(project.project_status)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4 text-xs text-gray-500 dark:text-[#8b949e] h-5">
|
||||
<span>{formatDate(project.updated_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center mt-4 md:mt-0 gap-3 w-[340px] justify-end shrink-0">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => router.push(`/editor/${project.id}`)}
|
||||
>
|
||||
Editor
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={isExportingProjectId === String(project.id)}
|
||||
onClick={() => handleExportHeadSnapshot(project)}
|
||||
// title="Export head commit snapshot_json"
|
||||
>
|
||||
ExportJSON
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => router.push(`/editor/${project.id}?only=wiki`)}
|
||||
>
|
||||
Editor only wiki
|
||||
</Button>
|
||||
|
||||
|
||||
<div className="w-48 px-4 shrink-0">
|
||||
{getStatusBadge(project.project_status)}
|
||||
</div>
|
||||
|
||||
<div className="w-48 px-4 shrink-0">
|
||||
<div className="flex -space-x-2 overflow-hidden">
|
||||
{project.members && project.members.length > 0 ? (
|
||||
<>
|
||||
{project.members.slice(0, 4).map((m: any, index: number) =>
|
||||
m.avatar_url ? (
|
||||
<Image
|
||||
key={index}
|
||||
src={m.avatar_url}
|
||||
alt={m.display_name}
|
||||
width={32}
|
||||
height={32}
|
||||
title={m.display_name}
|
||||
className="inline-block w-8 h-8 rounded-full object-cover ring-2 ring-white group-hover:ring-gray-50 dark:ring-[#0d1117] dark:group-hover:ring-[#161b22] transition-colors"
|
||||
/>
|
||||
<Image key={index} src={m.avatar_url} alt={m.display_name} width={32} height={32} title={m.display_name} className="inline-block w-8 h-8 rounded-full object-cover ring-2 ring-white dark:ring-[#0d1117]" />
|
||||
) : (
|
||||
<div
|
||||
key={index}
|
||||
title={m.display_name}
|
||||
className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 ring-2 ring-white group-hover:ring-gray-50 dark:ring-[#0d1117] dark:group-hover:ring-[#161b22] transition-colors"
|
||||
>
|
||||
<span className="text-xs font-medium text-gray-500 dark:text-gray-300">
|
||||
{m.display_name?.charAt(0)?.toUpperCase() || "U"}
|
||||
</span>
|
||||
<div key={index} title={m.display_name} className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 ring-2 ring-white dark:ring-[#0d1117]">
|
||||
<span className="text-xs font-medium text-gray-500 dark:text-gray-300">{m.display_name?.charAt(0)?.toUpperCase() || "U"}</span>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
{project.members.length > 4 && (
|
||||
<div
|
||||
title="Những người khác"
|
||||
className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 ring-2 ring-white group-hover:ring-gray-50 dark:ring-[#0d1117] dark:group-hover:ring-[#161b22] transition-colors z-10"
|
||||
>
|
||||
<span className="text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
+{project.members.length - 4}
|
||||
</span>
|
||||
<div title="Những người khác" className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 ring-2 ring-white dark:ring-[#0d1117] z-10">
|
||||
<span className="text-xs font-medium text-gray-600 dark:text-gray-400">+{project.members.length - 4}</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<span className="text-sm text-gray-400 dark:text-gray-600 italic"></span>
|
||||
<span className="text-xs text-gray-400 dark:text-gray-600 italic"></span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-32 px-1 shrink-0 text-xs text-gray-500 dark:text-gray-400">
|
||||
{formatDate(project.updated_at)}
|
||||
</div>
|
||||
|
||||
<div className="w-48 px-4 shrink-0 flex justify-end gap-2">
|
||||
<div className="relative group/btn1 inline-flex">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="!p-0 w-9 h-9 flex items-center justify-center"
|
||||
onClick={() => router.push(`/editor/${project.id}`)}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
||||
</svg>
|
||||
</Button>
|
||||
<span className="absolute -top-8 left-1/2 -translate-x-1/2 scale-0 rounded bg-gray-900 px-2 py-1 text-[11px] font-medium text-white opacity-0 transition-all group-hover/btn1:scale-100 group-hover/btn1:opacity-100 z-50 pointer-events-none whitespace-nowrap shadow-sm dark:bg-gray-700">
|
||||
Editor
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative group/btn2 inline-flex">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="!p-0 w-9 h-9 flex items-center justify-center"
|
||||
disabled={isExportingProjectId === String(project.id)}
|
||||
onClick={() => handleExportHeadSnapshot(project)}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
|
||||
</svg>
|
||||
</Button>
|
||||
<span className="absolute -top-8 left-1/2 -translate-x-1/2 scale-0 rounded bg-gray-900 px-2 py-1 text-[11px] font-medium text-white opacity-0 transition-all group-hover/btn2:scale-100 group-hover/btn2:opacity-100 z-50 pointer-events-none whitespace-nowrap shadow-sm dark:bg-gray-700">
|
||||
Export JSON
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative group/btn3 inline-flex">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="!p-0 w-9 h-9 flex items-center justify-center"
|
||||
onClick={() => router.push(`/editor/${project.id}?only=wiki`)}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
|
||||
</svg>
|
||||
</Button>
|
||||
<span className="absolute -top-8 left-1/2 -translate-x-1/2 scale-0 rounded bg-gray-900 px-2 py-1 text-[11px] font-medium text-white opacity-0 transition-all group-hover/btn3:scale-100 group-hover/btn3:opacity-100 z-50 pointer-events-none whitespace-nowrap shadow-sm dark:bg-gray-700">
|
||||
Wiki Editor
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -414,7 +413,6 @@ export default function ProjectsPage() {
|
||||
</ComponentCard>
|
||||
</div>
|
||||
|
||||
{/* Modal Tạo Dự án */}
|
||||
<Modal isOpen={isOpen} onClose={closeModal} className="max-w-[500px] m-4">
|
||||
<div className="p-6 bg-white rounded-3xl dark:bg-gray-900">
|
||||
<h3 className="mb-5 text-xl font-bold text-gray-800 dark:text-white/90">Tạo dự án mới</h3>
|
||||
@@ -484,7 +482,6 @@ export default function ProjectsPage() {
|
||||
disabled={isSubmitting}
|
||||
className="bg-gray-900 hover:bg-gray-800 text-white"
|
||||
onClick={handleCreateProjectWithJson}
|
||||
// title="Tạo dự án và tạo commit đầu tiên từ JSON snapshot"
|
||||
>
|
||||
Tạo với JSON
|
||||
</Button>
|
||||
|
||||
@@ -5,7 +5,7 @@ import Link from "next/link";
|
||||
import "react-quill-new/dist/quill.snow.css";
|
||||
|
||||
import { ApiError } from "@/uhm/api/http";
|
||||
import { fetchWikiBySlug, type Wiki } from "@/uhm/api/wikis";
|
||||
import { fetchWikiBySlug, getContentByVersionWikiId, type Wiki } from "@/uhm/api/wikis";
|
||||
|
||||
type TocItem = {
|
||||
id: string;
|
||||
@@ -141,18 +141,33 @@ function rewriteHtmlAndBuildToc(inputHtml: string, wikiBaseUrl: string): { html:
|
||||
return { html: doc.body.innerHTML, toc };
|
||||
}
|
||||
|
||||
function formatDate(value?: string | null): string {
|
||||
function formatDate(value?: string | null, options?: Intl.DateTimeFormatOptions): string {
|
||||
const raw = String(value || "").trim();
|
||||
if (!raw) return "-";
|
||||
const d = new Date(raw);
|
||||
if (Number.isNaN(d.getTime())) return raw;
|
||||
return d.toLocaleString();
|
||||
return d.toLocaleString(
|
||||
"vi-VN",
|
||||
options || {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export default function WikiBySlugClient({ slug }: { slug: string }) {
|
||||
const [wiki, setWiki] = useState<Wiki | null>(null);
|
||||
const [status, setStatus] = useState<"idle" | "loading" | "error" | "ready">("idle");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [viewMode, setViewMode] = useState<"read" | "history" | "compare">("read");
|
||||
const [selectedVersionsForCompare, setSelectedVersionsForCompare] = useState<Set<string>>(new Set());
|
||||
const [comparisonData, setComparisonData] = useState<{ id: string; content: string; createdAt: string; title: string }[]>([]);
|
||||
const [isComparing, setIsComparing] = useState(false);
|
||||
|
||||
const [renderHtml, setRenderHtml] = useState<string>("");
|
||||
const [toc, setToc] = useState<TocItem[]>([]);
|
||||
const [activeHeadingId, setActiveHeadingId] = useState<string | null>(null);
|
||||
@@ -176,6 +191,21 @@ export default function WikiBySlugClient({ slug }: { slug: string }) {
|
||||
const hidePreviewTimerRef = useRef<number | null>(null);
|
||||
const previewCacheRef = useRef<Map<string, { title: string; quote: string | null }>>(new Map());
|
||||
|
||||
const allVersions = useMemo(() => {
|
||||
if (!wiki) return [];
|
||||
const current = {
|
||||
id: wiki.id,
|
||||
created_at: wiki.updated_at,
|
||||
content: wiki.content,
|
||||
isCurrent: true,
|
||||
};
|
||||
const history = (wiki.content_sample || []).map(s => ({ ...s, isCurrent: false }));
|
||||
const uniqueHistory = history.filter(h => h.id !== current.id);
|
||||
const combined = [current, ...uniqueHistory];
|
||||
return combined
|
||||
.filter(v => v.id && v.created_at)
|
||||
.sort((a, b) => new Date(b.created_at!).getTime() - new Date(a.created_at!).getTime());
|
||||
}, [wiki]);
|
||||
// Load wiki data by slug.
|
||||
useEffect(() => {
|
||||
const value = String(normalizedSlug || "").trim();
|
||||
@@ -192,6 +222,18 @@ export default function WikiBySlugClient({ slug }: { slug: string }) {
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetchWikiBySlug(value);
|
||||
let versionContent = res?.content;
|
||||
try {
|
||||
if (res?.content_sample?.[0]?.id) {
|
||||
const contentResp = await getContentByVersionWikiId(res.content_sample[0].id);
|
||||
if (contentResp?.data?.content) {
|
||||
versionContent = contentResp.data.content;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch version content:", err);
|
||||
}
|
||||
|
||||
if (disposed) return;
|
||||
if (!res) {
|
||||
setWiki(null);
|
||||
@@ -200,7 +242,7 @@ export default function WikiBySlugClient({ slug }: { slug: string }) {
|
||||
setToc([]);
|
||||
return;
|
||||
}
|
||||
setWiki(res);
|
||||
setWiki({ ...res, content: versionContent });
|
||||
setStatus("ready");
|
||||
} catch (err) {
|
||||
if (disposed) return;
|
||||
@@ -424,107 +466,210 @@ export default function WikiBySlugClient({ slug }: { slug: string }) {
|
||||
};
|
||||
}, [renderHtml]);
|
||||
|
||||
const handleToggleVersionForCompare = (versionId: string) => {
|
||||
setSelectedVersionsForCompare(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(versionId)) {
|
||||
next.delete(versionId);
|
||||
} else {
|
||||
if (next.size >= 3) {
|
||||
return prev; // Do not allow selecting more than 3
|
||||
}
|
||||
next.add(versionId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleCompareVersions = async () => {
|
||||
if (selectedVersionsForCompare.size < 1) {
|
||||
alert("Vui lòng chọn ít nhất 1 phiên bản để so sánh.");
|
||||
return;
|
||||
}
|
||||
setIsComparing(true);
|
||||
setError(null);
|
||||
try {
|
||||
const versionsToFetch = Array.from(selectedVersionsForCompare);
|
||||
const promises = versionsToFetch.map(async (versionId) => {
|
||||
const sample = allVersions.find(s => s.id === versionId);
|
||||
const versionInfo = {
|
||||
id: versionId,
|
||||
createdAt: sample?.created_at || 'Unknown date',
|
||||
title: `Phiên bản lúc ${formatDate(sample?.created_at)}`
|
||||
};
|
||||
if (sample?.isCurrent) {
|
||||
return { ...versionInfo, content: sample.content || '' };
|
||||
}
|
||||
const contentResp = await getContentByVersionWikiId(versionId);
|
||||
return { ...versionInfo, content: contentResp?.data?.content || "" };
|
||||
});
|
||||
const results = await Promise.all(promises);
|
||||
const processedResults = results.map(r => {
|
||||
const { html } = rewriteHtmlAndBuildToc(normalizeWikiContentToHtml(r.content), `${window.location.origin}/wiki/`);
|
||||
return { ...r, content: html };
|
||||
});
|
||||
setComparisonData(processedResults.sort((a,b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()));
|
||||
setViewMode("compare");
|
||||
} catch (err) {
|
||||
const msg = err instanceof ApiError ? err.message : err instanceof Error ? err.message : "Lỗi khi tải phiên bản để so sánh.";
|
||||
setError(msg);
|
||||
setViewMode("read");
|
||||
} finally {
|
||||
setIsComparing(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100">
|
||||
<div className="mx-auto max-w-6xl px-4 py-6">
|
||||
<div className="mb-5 flex items-start justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">Wiki</div>
|
||||
<h1 className="mt-1 text-2xl font-bold leading-tight break-words">
|
||||
{wiki?.title?.trim() || normalizedSlug || "Wiki"}
|
||||
</h1>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-600 dark:text-gray-300">
|
||||
<span className="break-all">
|
||||
<span className="font-semibold">Slug:</span> {normalizedSlug || "-"}
|
||||
</span>
|
||||
<span className="break-all">
|
||||
<span className="font-semibold">ID:</span> {wiki?.id || "-"}
|
||||
</span>
|
||||
<span className="break-all">
|
||||
<span className="font-semibold">Project:</span>{" "}
|
||||
{wiki?.project_id || "-"}
|
||||
</span>
|
||||
<span>
|
||||
<span className="font-semibold">Created:</span> {formatDate(wiki?.created_at)}
|
||||
</span>
|
||||
<span>
|
||||
<span className="font-semibold">Updated:</span> {formatDate(wiki?.updated_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-h-screen bg-[#f8f9fa] text-[#202122] font-sans">
|
||||
<header className="bg-white border-b border-gray-300 px-6 py-2 flex justify-between items-center">
|
||||
<div className="text-lg font-bold">GeoHistory Wiki</div>
|
||||
<Link href="/" className="text-sm text-blue-600 hover:underline">Trang chủ</Link>
|
||||
</header>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/"
|
||||
className="h-9 inline-flex items-center rounded-lg border border-gray-200 dark:border-gray-800 px-3 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/[0.04] transition"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className={viewMode === 'compare' ? '' : 'mx-auto max-w-7xl px-4 sm:px-6 py-6'}>
|
||||
{status === "loading" && <div className="text-center p-10">Đang tải...</div>}
|
||||
{status === "error" && <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">{error}</div>}
|
||||
{status === "ready" && !wiki && <div className="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded relative">Không tìm thấy wiki với slug: <strong>{normalizedSlug}</strong></div>}
|
||||
|
||||
{status === "loading" ? (
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6">
|
||||
<div className="h-5 w-40 rounded bg-gray-100 dark:bg-white/[0.06] animate-pulse" />
|
||||
<div className="mt-3 h-4 w-2/3 rounded bg-gray-100 dark:bg-white/[0.06] animate-pulse" />
|
||||
</div>
|
||||
) : status === "error" ? (
|
||||
<div className="rounded-xl border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-950/30 p-6 text-sm text-red-700 dark:text-red-200">
|
||||
{error || "Failed to load wiki."}
|
||||
</div>
|
||||
) : wiki == null ? (
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 text-sm text-gray-700 dark:text-gray-200">
|
||||
Không tìm thấy wiki với slug: <span className="font-semibold break-all">{normalizedSlug}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-[280px_minmax(0,1fr)]">
|
||||
<aside className="lg:sticky lg:top-6 self-start rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-4">
|
||||
<div className="text-sm font-semibold text-gray-900 dark:text-gray-100">Mục lục</div>
|
||||
{!toc.length ? (
|
||||
<div className="mt-2 text-xs text-gray-500 dark:text-gray-400">Không có tiêu đề (H1/H2/...).</div>
|
||||
) : (
|
||||
<nav className="mt-3 max-h-[70vh] overflow-auto pr-1">
|
||||
<div className="grid gap-1">
|
||||
{toc.map((t) => {
|
||||
const pad = Math.max(0, Math.min(5, t.level - 1)) * 10;
|
||||
const isActive = activeHeadingId === t.id;
|
||||
return (
|
||||
<a
|
||||
key={t.id}
|
||||
href={`#${t.id}`}
|
||||
className={`rounded-md px-2 py-1 text-xs leading-5 transition ${
|
||||
isActive
|
||||
? "bg-brand-50 text-brand-700 dark:bg-brand-500/10 dark:text-brand-300"
|
||||
: "text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-white/[0.04]"
|
||||
}`}
|
||||
style={{ paddingLeft: 8 + pad }}
|
||||
title={t.text}
|
||||
>
|
||||
{t.text}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
|
||||
<div className="mt-4 border-t border-gray-200 dark:border-gray-800 pt-3">
|
||||
<div className="text-[11px] text-gray-500 dark:text-gray-400 break-all">
|
||||
Link: {`${typeof window !== "undefined" ? window.location.origin : ""}/wiki/${normalizedSlug}`}
|
||||
{status === "ready" && wiki && (
|
||||
<>
|
||||
<div className={viewMode === 'compare' ? 'mx-auto max-w-7xl px-4 sm:px-6 py-6' : ''}>
|
||||
<h1 className="text-3xl pb-2 mb-1">
|
||||
{wiki.title?.trim() || normalizedSlug}
|
||||
</h1>
|
||||
{viewMode === 'compare' && (
|
||||
<div className="mt-4 p-3 border border-gray-300 bg-white rounded-sm text-xs space-y-1">
|
||||
<div><span className="font-semibold">Slug:</span> {normalizedSlug || "-"}</div>
|
||||
<div><span className="font-semibold">ID:</span> {wiki.id || "-"}</div>
|
||||
<div><span className="font-semibold">Dự án:</span> {wiki.project_id || "-"}</div>
|
||||
<div><span className="font-semibold">Tạo lúc:</span> {formatDate(wiki.created_at)}</div>
|
||||
<div><span className="font-semibold">Cập nhật:</span> {formatDate(wiki.updated_at)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<main className="min-w-0">
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
|
||||
<div
|
||||
ref={contentRootRef}
|
||||
className="uhm-wiki-view ql-editor text-sm text-gray-900 dark:text-gray-100"
|
||||
dangerouslySetInnerHTML={{ __html: renderHtml }}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div className={`grid grid-cols-1 ${viewMode === 'compare' ? '' : 'lg:grid-cols-[minmax(0,1fr)_auto] gap-8 items-start'}`}>
|
||||
<main className={`min-w-0 bg-white ${viewMode === 'compare' ? 'border-y border-gray-300' : 'border border-gray-300 rounded-sm'}`}>
|
||||
<div className={`flex border-b border-gray-300 text-sm ${viewMode === 'compare' ? 'mx-auto max-w-7xl px-4 sm:px-6' : ''}`}>
|
||||
<button onClick={() => setViewMode('read')} className={`px-4 py-2 ${viewMode === 'read' ? 'border-b-2 border-blue-600 text-blue-700' : 'text-gray-600'}`}>Bài viết</button>
|
||||
<button onClick={() => setViewMode('history')} className={`px-4 py-2 ${viewMode === 'history' || viewMode === 'compare' ? 'border-b-2 border-blue-600 text-blue-700' : 'text-gray-600'}`}>Xem lịch sử</button>
|
||||
</div>
|
||||
|
||||
{viewMode === 'read' && (
|
||||
<div ref={contentRootRef} className="uhm-wiki-view ql-editor wiki-article" dangerouslySetInnerHTML={{ __html: renderHtml }} />
|
||||
)}
|
||||
|
||||
{viewMode === 'history' && (
|
||||
<div className="p-4">
|
||||
<h2 className="text-xl mb-4 font-normal">Lịch sử phiên bản của "{wiki.title}"</h2>
|
||||
<div className="flex gap-4 items-center mb-4">
|
||||
<button onClick={handleCompareVersions} disabled={isComparing || selectedVersionsForCompare.size === 0} className="px-4 py-2 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-300">
|
||||
{isComparing ? 'Đang tải...' : `So sánh ${selectedVersionsForCompare.size} phiên bản đã chọn`}
|
||||
</button>
|
||||
</div>
|
||||
<div className="border rounded-md overflow-hidden">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="p-2 w-16 text-center">So sánh</th>
|
||||
<th className="p-2">Ngày cập nhật</th>
|
||||
<th className="p-2">Ghi chú</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{allVersions.map((v) => {
|
||||
const isChecked = selectedVersionsForCompare.has(v.id!);
|
||||
const isDisabled = !isChecked && selectedVersionsForCompare.size >= 3;
|
||||
return (
|
||||
<tr key={v.id} className={`border-t ${isDisabled ? "opacity-50" : ""}`}>
|
||||
<td className="p-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
onChange={() => handleToggleVersionForCompare(v.id!)}
|
||||
checked={isChecked}
|
||||
disabled={isDisabled}
|
||||
className="h-4 w-4 disabled:cursor-not-allowed"
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2 text-blue-600">{formatDate(v.created_at)}</td>
|
||||
<td className="p-2">{v.isCurrent && <span className="font-bold">(Phiên bản hiện tại)</span>}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewMode === 'compare' && (
|
||||
<div className="p-4">
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6">
|
||||
<h2 className="text-xl mb-4 font-normal">So sánh các phiên bản</h2>
|
||||
</div>
|
||||
<div className={`grid grid-cols-1 md:grid-cols-2 gap-4 ${comparisonData.length >= 3 ? 'xl:grid-cols-3' : ''} mx-auto px-4 sm:px-6`}>
|
||||
{comparisonData.map(version => (
|
||||
<div key={version.id} className="border rounded-lg overflow-hidden bg-white">
|
||||
<h3 className="p-2 border-b font-semibold bg-gray-50 text-sm">{version.title}</h3>
|
||||
<div className="uhm-wiki-view ql-editor wiki-article h-[70vh] overflow-auto" dangerouslySetInnerHTML={{ __html: version.content }} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{viewMode !== 'compare' && (
|
||||
<aside className="hidden lg:block self-start sticky top-6">
|
||||
{viewMode === 'read' && toc.length > 0 && (
|
||||
<div className="border border-gray-300 bg-[#f8f9fa] p-3 rounded-sm text-sm mb-6">
|
||||
<p className="font-bold text-center mb-2">Mục lục</p>
|
||||
<nav>
|
||||
<div className="grid gap-1 w-full overflow-auto">
|
||||
{toc.map((t) => {
|
||||
const pad = Math.max(0, Math.min(5, t.level - 1)) * 12;
|
||||
const isActive = activeHeadingId === t.id;
|
||||
return (
|
||||
<a key={t.id} href={`#${t.id}`} className={`block py-0.5 text-xs leading-5 transition break-words ${isActive ? "font-bold" : "text-blue-600 hover:underline"}`} style={{ paddingLeft: pad }} title={t.text}>
|
||||
<span className="mr-1">{t.level}.</span>{t.text}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="border border-gray-300 bg-white rounded-sm text-xs overflow-hidden">
|
||||
<table className="w-full">
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-100 last:border-0">
|
||||
<td className="px-2 py-2 font-normal text-gray-500 w-1/5">Slug</td>
|
||||
<td className="px-2 py-2 text-gray-900 break-all">{normalizedSlug || "-"}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 last:border-0">
|
||||
<td className="px-2 py-2 font-normal text-gray-500">ID</td>
|
||||
<td className="px-2 py-2 text-gray-900">{wiki.id || "-"}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 last:border-0">
|
||||
<td className="px-2 py-2 font-normal text-gray-500">Dự án</td>
|
||||
<td className="px-2 py-2 text-gray-900">{wiki.project_id || "-"}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 last:border-0">
|
||||
<td className="px-2 py-2 font-normal text-gray-500">Tạo lúc</td>
|
||||
<td className="px-2 py-2 text-gray-900">{formatDate(wiki.created_at)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="pr-1 pl-2 py-2 font-normal text-gray-500">Cập nhật</td>
|
||||
<td className="px-2 py-2 text-gray-900">{formatDate(wiki.updated_at)}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</aside>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -583,107 +728,94 @@ export default function WikiBySlugClient({ slug }: { slug: string }) {
|
||||
) : null}
|
||||
|
||||
<style jsx global>{`
|
||||
/* Quill view container tweaks: allow page-level scrolling instead of inner scroll. */
|
||||
.wiki-article {
|
||||
|
||||
line-height: 1.6;
|
||||
font-size: 1em;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
.uhm-wiki-view.ql-editor {
|
||||
height: auto;
|
||||
overflow-y: visible;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
/* Improve readability for view mode (Quill resets block margins to 0). */
|
||||
.uhm-wiki-view.ql-editor p {
|
||||
.wiki-article p {
|
||||
margin: 0 0 0.75em;
|
||||
}
|
||||
.uhm-wiki-view.ql-editor h1 {
|
||||
margin: 1.25em 0 0.6em;
|
||||
font-size: 1.9em;
|
||||
font-weight: 800;
|
||||
.wiki-article h1,
|
||||
.wiki-article h2,
|
||||
.wiki-article h3,
|
||||
.wiki-article h4,
|
||||
.wiki-article h5,
|
||||
.wiki-article h6 {
|
||||
|
||||
font-weight: normal;
|
||||
margin: 0.8em 0 0.3em;
|
||||
padding-bottom: 0.1em;
|
||||
border-bottom: 1px solid #a2a9b1;
|
||||
scroll-margin-top: 16px;
|
||||
}
|
||||
.wiki-article h1 {
|
||||
font-size: 1.8em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.uhm-wiki-view.ql-editor h2 {
|
||||
margin: 1.15em 0 0.55em;
|
||||
font-size: 1.55em;
|
||||
font-weight: 800;
|
||||
.wiki-article h2 {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.25;
|
||||
margin-top: 1.4em;
|
||||
}
|
||||
.uhm-wiki-view.ql-editor h3 {
|
||||
margin: 1.05em 0 0.5em;
|
||||
.wiki-article h3 {
|
||||
font-size: 1.25em;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.uhm-wiki-view.ql-editor h4,
|
||||
.uhm-wiki-view.ql-editor h5,
|
||||
.uhm-wiki-view.ql-editor h6 {
|
||||
margin: 0.95em 0 0.45em;
|
||||
.wiki-article h4,
|
||||
.wiki-article h5,
|
||||
.wiki-article h6 {
|
||||
font-size: 1.05em;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.uhm-wiki-view.ql-editor ul,
|
||||
.uhm-wiki-view.ql-editor ol {
|
||||
.wiki-article ul,
|
||||
.wiki-article ol {
|
||||
margin: 0 0 0.75em;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
.uhm-wiki-view.ql-editor blockquote {
|
||||
.wiki-article blockquote {
|
||||
margin: 0 0 0.75em;
|
||||
padding-left: 12px;
|
||||
border-left: 3px solid rgba(148, 163, 184, 0.6);
|
||||
color: rgba(71, 85, 105, 1);
|
||||
border-left: 3px solid #a2a9b1;
|
||||
color: #202122;
|
||||
}
|
||||
:is(.dark *) .uhm-wiki-view.ql-editor blockquote {
|
||||
border-left-color: rgba(100, 116, 139, 0.6);
|
||||
color: rgba(203, 213, 225, 0.95);
|
||||
}
|
||||
.uhm-wiki-view.ql-editor pre {
|
||||
.wiki-article pre {
|
||||
margin: 0 0 0.75em;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(226, 232, 240, 1);
|
||||
border: 1px solid #a2a9b1;
|
||||
border-radius: 10px;
|
||||
background: rgba(248, 250, 252, 1);
|
||||
background: #f8f9fa;
|
||||
overflow: auto;
|
||||
font-family: monospace;
|
||||
}
|
||||
:is(.dark *) .uhm-wiki-view.ql-editor pre {
|
||||
border-color: rgba(51, 65, 85, 1);
|
||||
background: rgba(2, 6, 23, 0.4);
|
||||
}
|
||||
.uhm-wiki-view.ql-editor img {
|
||||
.wiki-article img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.uhm-wiki-view.ql-editor h1,
|
||||
.uhm-wiki-view.ql-editor h2,
|
||||
.uhm-wiki-view.ql-editor h3,
|
||||
.uhm-wiki-view.ql-editor h4,
|
||||
.uhm-wiki-view.ql-editor h5,
|
||||
.uhm-wiki-view.ql-editor h6 {
|
||||
scroll-margin-top: 16px;
|
||||
.wiki-article a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.uhm-wiki-view.ql-editor a {
|
||||
.wiki-article a[href]:not([href=""]):not([href="__missing__"]) {
|
||||
color: #3366cc;
|
||||
}
|
||||
.wiki-article a[href]:not([href=""]):not([href="__missing__"]):hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: from-font;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.uhm-wiki-view.ql-editor a[href]:not([href=""]):not([href="__missing__"]) {
|
||||
color: #2563eb;
|
||||
}
|
||||
:is(.dark *) .uhm-wiki-view.ql-editor a[href]:not([href=""]):not([href="__missing__"]) {
|
||||
color: #60a5fa;
|
||||
}
|
||||
.uhm-wiki-view.ql-editor a[href="__missing__"] {
|
||||
.wiki-article a[href="__missing__"] {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
.uhm-wiki-view.ql-editor a:not([href]),
|
||||
.uhm-wiki-view.ql-editor a[href=""],
|
||||
.uhm-wiki-view.ql-editor a[href="__missing__"] {
|
||||
.wiki-article a:not([href]),
|
||||
.wiki-article a[href=""],
|
||||
.wiki-article a[href="__missing__"] {
|
||||
color: #dc2626;
|
||||
}
|
||||
:is(.dark *) .uhm-wiki-view.ql-editor a:not([href]),
|
||||
:is(.dark *) .uhm-wiki-view.ql-editor a[href=""],
|
||||
:is(.dark *) .uhm-wiki-view.ql-editor a[href="__missing__"] {
|
||||
color: #f87171;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user