fix confuse UI commit

This commit is contained in:
taDuc
2026-05-10 23:38:07 +07:00
parent c371d70993
commit 9be308b65c
5 changed files with 58 additions and 34 deletions
-6
View File
@@ -113,8 +113,6 @@ export default function Page() {
setNewSectionTitle, setNewSectionTitle,
commitTitle, commitTitle,
setCommitTitle, setCommitTitle,
commitNote,
setCommitNote,
editorUserIdInput, editorUserIdInput,
activeSection, activeSection,
setActiveSection, setActiveSection,
@@ -375,7 +373,6 @@ export default function Page() {
snapshotEntityWikiLinks, snapshotEntityWikiLinks,
baselineSnapshot, baselineSnapshot,
commitTitle, commitTitle,
commitNote,
setActiveSection, setActiveSection,
setSelectedSectionId, setSelectedSectionId,
setSectionState, setSectionState,
@@ -394,7 +391,6 @@ export default function Page() {
setAvailableSections, setAvailableSections,
setNewSectionTitle, setNewSectionTitle,
setCommitTitle, setCommitTitle,
setCommitNote,
}); });
const { const {
openSectionForEditing, openSectionForEditing,
@@ -1141,9 +1137,7 @@ export default function Page() {
sectionTitle={activeSection?.title || "Đang tải project"} sectionTitle={activeSection?.title || "Đang tải project"}
sectionStatus={sectionState?.status || "editing"} sectionStatus={sectionState?.status || "editing"}
commitTitle={commitTitle} commitTitle={commitTitle}
commitNote={commitNote}
onCommitTitleChange={setCommitTitle} onCommitTitleChange={setCommitTitle}
onCommitNoteChange={setCommitNote}
commitCount={sectionCommits.length} commitCount={sectionCommits.length}
hasHeadCommit={Boolean(sectionState?.head_commit_id)} hasHeadCommit={Boolean(sectionState?.head_commit_id)}
headCommitId={sectionState?.head_commit_id || null} headCommitId={sectionState?.head_commit_id || null}
+2 -2
View File
@@ -124,7 +124,7 @@ export async function restoreSectionCommit(
return { commit: headCommit, state }; return { commit: headCommit, state };
} }
export async function submitSection(sectionId: string): Promise<SectionSubmission> { export async function submitSection(sectionId: string, content: string): Promise<SectionSubmission> {
// Submit latest commit of project // Submit latest commit of project
const project = await requestJson<Section>(`${API_ENDPOINTS.projects}/${encodeURIComponent(sectionId)}`); const project = await requestJson<Section>(`${API_ENDPOINTS.projects}/${encodeURIComponent(sectionId)}`);
const commitId = project.latest_commit_id; const commitId = project.latest_commit_id;
@@ -137,7 +137,7 @@ export async function submitSection(sectionId: string): Promise<SectionSubmissio
jsonRequestInit("POST", { jsonRequestInit("POST", {
project_id: sectionId, project_id: sectionId,
commit_id: commitId, commit_id: commitId,
content: "", content: content,
}) })
); );
} }
+54 -16
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import type { ReactNode } from "react"; import { useState, type ReactNode } from "react";
import type { UndoAction } from "@/uhm/lib/useEditorState"; import type { UndoAction } from "@/uhm/lib/useEditorState";
import type { EditorMode } from "@/uhm/lib/editor/session/sessionTypes"; import type { EditorMode } from "@/uhm/lib/editor/session/sessionTypes";
@@ -10,16 +10,14 @@ type Props = {
entityStatus?: string | null; entityStatus?: string | null;
onUndo: () => void; onUndo: () => void;
onCommit: () => void; onCommit: () => void;
onSubmit: () => void; onSubmit: (content: string) => void;
onRestoreCommit: (commitId: string) => void; onRestoreCommit: (commitId: string) => void;
isSaving: boolean; isSaving: boolean;
isSubmitting: boolean; isSubmitting: boolean;
sectionTitle: string; sectionTitle: string;
sectionStatus: string; sectionStatus: string;
commitTitle: string; commitTitle: string;
commitNote: string;
onCommitTitleChange: (title: string) => void; onCommitTitleChange: (title: string) => void;
onCommitNoteChange: (note: string) => void;
commitCount: number; commitCount: number;
hasHeadCommit: boolean; hasHeadCommit: boolean;
headCommitId: string | null; headCommitId: string | null;
@@ -58,9 +56,7 @@ export default function Editor({
sectionTitle, sectionTitle,
sectionStatus, sectionStatus,
commitTitle, commitTitle,
commitNote,
onCommitTitleChange, onCommitTitleChange,
onCommitNoteChange,
commitCount, commitCount,
hasHeadCommit, hasHeadCommit,
headCommitId, headCommitId,
@@ -80,6 +76,23 @@ export default function Editor({
} }
}; };
const [isSubmitModalOpen, setIsSubmitModalOpen] = useState(false);
const [submitContent, setSubmitContent] = useState("");
const handleOpenSubmitModal = () => {
setSubmitContent("");
setIsSubmitModalOpen(true);
};
const handleConfirmSubmit = () => {
setIsSubmitModalOpen(false);
onSubmit(submitContent);
};
const handleCancelSubmit = () => {
setIsSubmitModalOpen(false);
};
const recentUndoLabels = (() => { const recentUndoLabels = (() => {
const seen = new Set<string>(); const seen = new Set<string>();
const labels: string[] = []; const labels: string[] = [];
@@ -227,18 +240,10 @@ export default function Editor({
<input <input
value={commitTitle} value={commitTitle}
onChange={(event) => onCommitTitleChange(event.target.value)} onChange={(event) => onCommitTitleChange(event.target.value)}
placeholder="Commit title" placeholder="Edit Summary (Commit Title)"
disabled={isSaving || isSubmitting} disabled={isSaving || isSubmitting}
style={textInputStyle} style={textInputStyle}
/> />
<textarea
value={commitNote}
onChange={(event) => onCommitNoteChange(event.target.value)}
placeholder="Commit note"
disabled={isSaving || isSubmitting}
rows={3}
style={textAreaStyle}
/>
<button <button
style={{ style={{
...primaryButtonStyle, ...primaryButtonStyle,
@@ -261,7 +266,7 @@ export default function Editor({
cursor: isSubmitting || !hasHeadCommit ? "not-allowed" : "pointer", cursor: isSubmitting || !hasHeadCommit ? "not-allowed" : "pointer",
opacity: !hasHeadCommit ? 0.6 : 1, opacity: !hasHeadCommit ? 0.6 : 1,
}} }}
onClick={onSubmit} onClick={handleOpenSubmitModal}
disabled={isSubmitting || !hasHeadCommit} disabled={isSubmitting || !hasHeadCommit}
> >
Submit Submit
@@ -382,6 +387,39 @@ export default function Editor({
</ul> </ul>
)} )}
</Panel> </Panel>
{isSubmitModalOpen && (
<div style={{
position: "fixed",
top: 0, left: 0, right: 0, bottom: 0,
backgroundColor: "rgba(0, 0, 0, 0.7)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 1000
}}>
<div style={{
background: "#0b1220",
padding: 20,
borderRadius: 8,
border: "1px solid #334155",
width: 400,
color: "white"
}}>
<h3 style={{ marginTop: 0 }}>Nội dung Submit</h3>
<textarea
value={submitContent}
onChange={(e) => setSubmitContent(e.target.value)}
placeholder="Nhập nội dung submit..."
style={{ ...textAreaStyle, height: 100 }}
/>
<div style={{ display: "flex", justifyContent: "flex-end", gap: 10, marginTop: 15 }}>
<button onClick={handleCancelSubmit} style={{ padding: "8px 16px", borderRadius: 6, cursor: "pointer", border: "1px solid #334155", background: "transparent", color: "white" }}>Hủy</button>
<button onClick={handleConfirmSubmit} style={{ padding: "8px 16px", borderRadius: 6, cursor: "pointer", border: "none", background: "#16a34a", color: "white", fontWeight: "bold" }}>Gửi Submit</button>
</div>
</div>
</div>
)}
</div> </div>
); );
} }
@@ -37,7 +37,6 @@ type Options = {
snapshotEntityWikiLinks: EntityWikiLinkSnapshot[]; snapshotEntityWikiLinks: EntityWikiLinkSnapshot[];
baselineSnapshot: EditorSnapshot | null; baselineSnapshot: EditorSnapshot | null;
commitTitle: string; commitTitle: string;
commitNote: string;
setActiveSection: Dispatch<SetStateAction<Section | null>>; setActiveSection: Dispatch<SetStateAction<Section | null>>;
setSelectedSectionId: Dispatch<SetStateAction<string>>; setSelectedSectionId: Dispatch<SetStateAction<string>>;
setSectionState: Dispatch<SetStateAction<SectionState | null>>; setSectionState: Dispatch<SetStateAction<SectionState | null>>;
@@ -56,7 +55,6 @@ type Options = {
setAvailableSections: Dispatch<SetStateAction<Section[]>>; setAvailableSections: Dispatch<SetStateAction<Section[]>>;
setNewSectionTitle: Dispatch<SetStateAction<string>>; setNewSectionTitle: Dispatch<SetStateAction<string>>;
setCommitTitle: Dispatch<SetStateAction<string>>; setCommitTitle: Dispatch<SetStateAction<string>>;
setCommitNote: Dispatch<SetStateAction<string>>;
}; };
export function useSectionCommands(options: Options) { export function useSectionCommands(options: Options) {
@@ -107,7 +105,6 @@ export function useSectionCommands(options: Options) {
hasPersistedFeature: options.editor.hasPersistedFeature, hasPersistedFeature: options.editor.hasPersistedFeature,
}); });
const editSummary = options.commitTitle.trim() const editSummary = options.commitTitle.trim()
|| options.commitNote.trim()
|| `Edit ${new Date().toLocaleString()}`; || `Edit ${new Date().toLocaleString()}`;
// Guardrail: commit payload can get large and some deployments reject/close connections for big bodies. // Guardrail: commit payload can get large and some deployments reject/close connections for big bodies.
@@ -141,7 +138,6 @@ export function useSectionCommands(options: Options) {
options.setInitialData(options.editor.draft); options.setInitialData(options.editor.draft);
options.editor.clearChanges(); options.editor.clearChanges();
options.setCommitTitle(""); options.setCommitTitle("");
options.setCommitNote("");
options.setSectionCommits(await fetchSectionCommits(options.activeSection.id)); options.setSectionCommits(await fetchSectionCommits(options.activeSection.id));
options.setEntityFormStatus("Đã tạo commit."); options.setEntityFormStatus("Đã tạo commit.");
} catch (err) { } catch (err) {
@@ -218,7 +214,7 @@ export function useSectionCommands(options: Options) {
} }
}, [openSectionForEditing, options]); }, [openSectionForEditing, options]);
const submitCurrentSection = useCallback(async () => { const submitCurrentSection = useCallback(async (content: string) => {
if (!options.activeSection || !options.sectionState?.head_commit_id) { if (!options.activeSection || !options.sectionState?.head_commit_id) {
options.setEntityStatus("Section hiện tại chưa có head để submit."); options.setEntityStatus("Section hiện tại chưa có head để submit.");
return; return;
@@ -231,7 +227,7 @@ export function useSectionCommands(options: Options) {
options.setIsSubmitting(true); options.setIsSubmitting(true);
options.setEntityStatus(null); options.setEntityStatus(null);
try { try {
const submission = await submitSection(options.activeSection.id); const submission = await submitSection(options.activeSection.id, content);
options.setEntityStatus(`Đã submit, submission ${submission.id}.`); options.setEntityStatus(`Đã submit, submission ${submission.id}.`);
} catch (err) { } catch (err) {
if (err instanceof ApiError) { if (err instanceof ApiError) {
@@ -41,8 +41,6 @@ export function useSectionSessionState(options: Options) {
const [newSectionTitle, setNewSectionTitle] = useState(""); const [newSectionTitle, setNewSectionTitle] = useState("");
// Input title cho commit. // Input title cho commit.
const [commitTitle, setCommitTitle] = useState(""); const [commitTitle, setCommitTitle] = useState("");
// Input note cho commit.
const [commitNote, setCommitNote] = useState("");
// User ID dùng để gắn vào commit/submit/lock. // User ID dùng để gắn vào commit/submit/lock.
const [editorUserIdInput, setEditorUserIdInput] = useState(options.defaultEditorUserId); const [editorUserIdInput, setEditorUserIdInput] = useState(options.defaultEditorUserId);
// Section đang mở để edit (null nếu chưa mở). // Section đang mở để edit (null nếu chưa mở).
@@ -69,8 +67,6 @@ export function useSectionSessionState(options: Options) {
setNewSectionTitle, setNewSectionTitle,
commitTitle, commitTitle,
setCommitTitle, setCommitTitle,
commitNote,
setCommitNote,
editorUserIdInput, editorUserIdInput,
setEditorUserIdInput, setEditorUserIdInput,
activeSection, activeSection,