Kain344/History-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

demo 20-4-2026

Browse Source
This commit is contained in:
taDuc
2026-04-19 23:43:31 +07:00
parent 57a7843d80
commit 2508172489
10 changed files with 1443 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
components/Editor.tsx
View File

@@ -1,5 +1,7 @@
"use client";
import { useState } from "react";
import CommitTreePopup from "@/components/CommitTreePopup";
import { UndoAction } from "@/lib/useEditorState";
type Mode = "draw" | "select" | "idle" | "add-point" | "add-line" | "add-path" | "add-circle";
@@ -37,11 +39,16 @@ type Props = {
onOpenSection: () => void;
onCreateSection: () => void;
commitCount: number;
hasHeadCommit: boolean;
headCommitId: string | null;
latestCommitLabel: string | null;
commits: Array<{
id: string;
parent_commit_id: string | null;
restored_from_commit_id: string | null;
commit_no: number;
kind: string;
created_by: string;
created_at: string;
title: string | null;
}>;
@@ -87,6 +94,8 @@ export default function Editor({
onOpenSection,
onCreateSection,
commitCount,
hasHeadCommit,
headCommitId,
latestCommitLabel,
commits,
changesCount,
@@ -94,6 +103,11 @@ export default function Editor({
createdEntities,
createdGeometries,
}: Props) {
const [isCommitTreeOpen, setIsCommitTreeOpen] = useState(false);
const formatCommitTitle = (commit: Props["commits"][number]) =>
commit.title?.trim() || `Commit #${commit.commit_no}`;
const toggleMode = (newMode: Mode) => {
if (mode === newMode) {
setMode("idle"); // bấm lại → tắt
@@ -393,6 +407,40 @@ export default function Editor({
fontFamily: "inherit",
}}
/>
<div style={{ display: "grid", gridTemplateColumns: "1fr 68px", gap: "8px", marginTop: "8px" }}>
<button
style={{
width: "100%",
padding: "8px",
borderRadius: "4px",
border: "none",
cursor: isSaving || isSubmitting || sectionStatus === "submitted" ? "not-allowed" : "pointer",
background: isSaving || isSubmitting || sectionStatus === "submitted" ? "#555" : "#0f766e",
color: "white",
}}
onClick={onCommit}
disabled={isSaving || isSubmitting || sectionStatus === "submitted"}
>
Commit ({changesCount})
</button>
<button
type="button"
style={{
width: "100%",
padding: "8px",
borderRadius: "4px",
border: "none",
cursor: commitCount === 0 ? "not-allowed" : "pointer",
background: commitCount === 0 ? "#555" : "#334155",
color: "white",
opacity: commitCount === 0 ? 0.6 : 1,
}}
onClick={() => setIsCommitTreeOpen(true)}
disabled={commitCount === 0}
>
View
</button>
</div>
<button
style={{
width: "100%",
@@ -400,29 +448,13 @@ export default function Editor({
padding: "8px",
borderRadius: "4px",
border: "none",
cursor: isSaving || isSubmitting || sectionStatus === "submitted" ? "not-allowed" : "pointer",
background: isSaving || isSubmitting || sectionStatus === "submitted" ? "#555" : "#0f766e",
cursor: isSubmitting || !hasHeadCommit || sectionStatus === "submitted" ? "not-allowed" : "pointer",
background: isSubmitting || !hasHeadCommit || sectionStatus === "submitted" ? "#555" : "#16a34a",
color: "white",
}}
onClick={onCommit}
disabled={isSaving || isSubmitting || sectionStatus === "submitted"}
>
Commit ({changesCount})
</button>
<button
style={{
width: "100%",
marginTop: "8px",
padding: "8px",
borderRadius: "4px",
border: "none",
cursor: isSubmitting || commitCount === 0 || sectionStatus === "submitted" ? "not-allowed" : "pointer",
background: isSubmitting || commitCount === 0 || sectionStatus === "submitted" ? "#555" : "#16a34a",
color: "white",
opacity: commitCount === 0 ? 0.6 : 1,
opacity: !hasHeadCommit ? 0.6 : 1,
}}
onClick={onSubmit}
disabled={isSubmitting || commitCount === 0 || sectionStatus === "submitted"}
disabled={isSubmitting || !hasHeadCommit || sectionStatus === "submitted"}
>
Submit
</button>
@@ -454,7 +486,17 @@ export default function Editor({
color: "#e2e8f0",
}}
>
<div>
<div
title={formatCommitTitle(commit)}
style={{
fontWeight: 600,
color: "#f8fafc",
overflowWrap: "anywhere",
}}
>
{formatCommitTitle(commit)}
</div>
<div style={{ marginTop: "2px", color: "#94a3b8" }}>
#{commit.commit_no} {commit.kind}
</div>
<button
@@ -566,6 +608,13 @@ export default function Editor({
</ul>
)}
</div>
<CommitTreePopup
open={isCommitTreeOpen}
commits={commits}
headCommitId={headCommitId}
onClose={() => setIsCommitTreeOpen(false)}
/>
</div>
);
}