add editor
This commit is contained in:
taDuc
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback } from "react";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
import type { Entity } from "@/uhm/types/entities";
|
||||
import type { Feature, FeatureProperties } from "@/uhm/types/geo";
|
||||
import { ApiError } from "@/uhm/api/http";
|
||||
import { buildFeatureEntityPatch } from "@/uhm/lib/editor/entity/entityBinding";
|
||||
import { buildGeometryMetadataPatch } from "@/uhm/lib/editor/geometry/geometryMetadata";
|
||||
import { uniqueEntityIds } from "@/uhm/lib/editor/snapshot/editorSnapshot";
|
||||
import type { GeometryMetaFormState } from "@/uhm/lib/editor/session/sessionTypes";
|
||||
|
||||
type EditorDraftApi = {
|
||||
patchFeatureProperties: (id: FeatureProperties["id"], patch: Partial<FeatureProperties>) => void;
|
||||
};
|
||||
|
||||
type Options = {
|
||||
editor: EditorDraftApi;
|
||||
selectedFeature: Feature | null;
|
||||
geometryMetaForm: GeometryMetaFormState;
|
||||
setGeometryMetaForm: Dispatch<SetStateAction<GeometryMetaFormState>>;
|
||||
selectedGeometryEntityIds: string[];
|
||||
setSelectedGeometryEntityIds: Dispatch<SetStateAction<string[]>>;
|
||||
entities: Entity[];
|
||||
setIsEntitySubmitting: Dispatch<SetStateAction<boolean>>;
|
||||
setEntityFormStatus: Dispatch<SetStateAction<string | null>>;
|
||||
};
|
||||
|
||||
export function useFeatureCommands(options: Options) {
|
||||
const {
|
||||
editor,
|
||||
selectedFeature,
|
||||
geometryMetaForm,
|
||||
setGeometryMetaForm,
|
||||
selectedGeometryEntityIds,
|
||||
setSelectedGeometryEntityIds,
|
||||
entities,
|
||||
setIsEntitySubmitting,
|
||||
setEntityFormStatus,
|
||||
} = options;
|
||||
|
||||
const applyGeometryMetadata = useCallback(async () => {
|
||||
if (!selectedFeature) {
|
||||
setEntityFormStatus("Hãy chọn một geometry trước.");
|
||||
return;
|
||||
}
|
||||
|
||||
let metadata;
|
||||
try {
|
||||
metadata = buildGeometryMetadataPatch(geometryMetaForm);
|
||||
} catch (err) {
|
||||
setEntityFormStatus(err instanceof Error ? err.message : "Thời gian không hợp lệ.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsEntitySubmitting(true);
|
||||
setEntityFormStatus(null);
|
||||
try {
|
||||
editor.patchFeatureProperties(selectedFeature.properties.id, metadata.patch);
|
||||
setGeometryMetaForm(metadata.formState);
|
||||
setEntityFormStatus("Đã cập nhật thuộc tính GEO. Commit khi sẵn sàng.");
|
||||
} finally {
|
||||
setIsEntitySubmitting(false);
|
||||
}
|
||||
}, [
|
||||
editor,
|
||||
geometryMetaForm,
|
||||
selectedFeature,
|
||||
setEntityFormStatus,
|
||||
setGeometryMetaForm,
|
||||
setIsEntitySubmitting,
|
||||
]);
|
||||
|
||||
const applyEntitiesToSelectedGeometry = useCallback(async () => {
|
||||
if (!selectedFeature) {
|
||||
setEntityFormStatus("Hãy chọn một geometry trước.");
|
||||
return;
|
||||
}
|
||||
|
||||
const entityIds = uniqueEntityIds(selectedGeometryEntityIds);
|
||||
setIsEntitySubmitting(true);
|
||||
setEntityFormStatus(null);
|
||||
try {
|
||||
editor.patchFeatureProperties(
|
||||
selectedFeature.properties.id,
|
||||
buildFeatureEntityPatch(selectedFeature, entityIds, entities)
|
||||
);
|
||||
setSelectedGeometryEntityIds(entityIds);
|
||||
setEntityFormStatus("Đã cập nhật danh sách entity. Commit khi sẵn sàng.");
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setEntityFormStatus(`Lưu thất bại: ${err.body}`);
|
||||
} else {
|
||||
setEntityFormStatus("Lưu thất bại.");
|
||||
}
|
||||
} finally {
|
||||
setIsEntitySubmitting(false);
|
||||
}
|
||||
}, [
|
||||
editor,
|
||||
entities,
|
||||
selectedFeature,
|
||||
selectedGeometryEntityIds,
|
||||
setEntityFormStatus,
|
||||
setIsEntitySubmitting,
|
||||
setSelectedGeometryEntityIds,
|
||||
]);
|
||||
|
||||
return {
|
||||
applyGeometryMetadata,
|
||||
applyEntitiesToSelectedGeometry,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,794 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import Map from "@/uhm/components/Map";
|
||||
import Editor from "@/uhm/components/Editor";
|
||||
import BackgroundLayersPanel from "@/uhm/components/BackgroundLayersPanel";
|
||||
import TimelineBar from "@/uhm/components/TimelineBar";
|
||||
import SelectedGeometryPanel from "@/uhm/components/SelectedGeometryPanel";
|
||||
import { Entity, fetchEntities, searchEntitiesByName } from "@/uhm/api/entities";
|
||||
import { ApiError } from "@/uhm/api/http";
|
||||
import { fetchCurrentUser } from "@/uhm/api/auth";
|
||||
import { fetchGeometriesByBBox } from "@/uhm/api/geometries";
|
||||
import { SectionCommit } from "@/uhm/api/sections";
|
||||
import {
|
||||
Feature,
|
||||
useEditorState,
|
||||
} from "@/uhm/lib/useEditorState";
|
||||
import {
|
||||
BackgroundLayerId,
|
||||
BackgroundLayerVisibility,
|
||||
DEFAULT_BACKGROUND_LAYER_VISIBILITY,
|
||||
HIDDEN_BACKGROUND_LAYER_VISIBILITY,
|
||||
} from "@/uhm/lib/backgroundLayers";
|
||||
import {
|
||||
DEFAULT_ENTITY_TYPE_ID,
|
||||
ENTITY_TYPE_OPTIONS,
|
||||
EntityTypeGroupId,
|
||||
findEntityTypeOption,
|
||||
} from "@/uhm/lib/entityTypeOptions";
|
||||
import {
|
||||
EntityFormState,
|
||||
PendingEntityCreate,
|
||||
useEditorSessionState,
|
||||
} from "@/uhm/lib/useEditorSessionState";
|
||||
import {
|
||||
getDefaultTypeIdForFeature,
|
||||
normalizeFeatureBindingIds,
|
||||
normalizeFeatureEntityIds,
|
||||
uniqueEntityIds,
|
||||
} from "@/uhm/lib/editor/snapshot/editorSnapshot";
|
||||
import {
|
||||
buildClientEntityId,
|
||||
formatEntityNamesForDisplay,
|
||||
mergeEntitiesWithPending,
|
||||
mergeEntitySearchResults,
|
||||
} from "@/uhm/lib/editor/entity/entityBinding";
|
||||
import {
|
||||
formatBindingIdsForDisplay,
|
||||
} from "@/uhm/lib/editor/geometry/geometryMetadata";
|
||||
import {
|
||||
loadBackgroundLayerVisibilityFromStorage,
|
||||
persistBackgroundLayerVisibility,
|
||||
} from "@/uhm/lib/editor/background/backgroundVisibilityStorage";
|
||||
import { useSectionCommands } from "@/uhm/lib/editor/section/useSectionCommands";
|
||||
import { EMPTY_FEATURE_COLLECTION, WORLD_BBOX } from "@/uhm/lib/geo/constants";
|
||||
import { FIXED_TIMELINE_RANGE, clampYearToFixedRange, TIMELINE_DEBOUNCE_MS } from "@/uhm/lib/timeline";
|
||||
import { useFeatureCommands } from "./featureCommands";
|
||||
|
||||
const CURRENT_YEAR = new Date().getUTCFullYear();
|
||||
const DEFAULT_EDITOR_USER_ID = "local-editor";
|
||||
|
||||
export default function Page() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const projectId = String(params.id || "");
|
||||
const openedProjectIdRef = useRef<string | null>(null);
|
||||
|
||||
const {
|
||||
mode,
|
||||
setMode,
|
||||
initialData,
|
||||
setInitialData,
|
||||
isSaving,
|
||||
setIsSaving,
|
||||
isSubmitting,
|
||||
setIsSubmitting,
|
||||
isOpeningSection,
|
||||
setIsOpeningSection,
|
||||
availableSections,
|
||||
setAvailableSections,
|
||||
selectedSectionId,
|
||||
setSelectedSectionId,
|
||||
newSectionTitle,
|
||||
setNewSectionTitle,
|
||||
commitTitle,
|
||||
setCommitTitle,
|
||||
commitNote,
|
||||
setCommitNote,
|
||||
editorUserIdInput,
|
||||
setEditorUserIdInput,
|
||||
activeSection,
|
||||
setActiveSection,
|
||||
sectionState,
|
||||
setSectionState,
|
||||
sectionCommits,
|
||||
setSectionCommits,
|
||||
lastSectionSnapshot,
|
||||
setLastSectionSnapshot,
|
||||
persistedEntities,
|
||||
setPersistedEntities,
|
||||
pendingEntityCreates,
|
||||
setPendingEntityCreates,
|
||||
createdEntities,
|
||||
setCreatedEntities,
|
||||
entityStatus,
|
||||
setEntityStatus,
|
||||
selectedFeatureId,
|
||||
setSelectedFeatureId,
|
||||
entityForm,
|
||||
setEntityForm,
|
||||
selectedGeometryEntityIds,
|
||||
setSelectedGeometryEntityIds,
|
||||
geometryMetaForm,
|
||||
setGeometryMetaForm,
|
||||
isEntitySubmitting,
|
||||
setIsEntitySubmitting,
|
||||
entityFormStatus,
|
||||
setEntityFormStatus,
|
||||
entitySearchQuery,
|
||||
setEntitySearchQuery,
|
||||
entitySearchResults,
|
||||
setEntitySearchResults,
|
||||
selectedSearchEntityId,
|
||||
setSelectedSearchEntityId,
|
||||
isEntitySearchLoading,
|
||||
setIsEntitySearchLoading,
|
||||
timelineYear,
|
||||
setTimelineYear,
|
||||
timelineDraftYear,
|
||||
setTimelineDraftYear,
|
||||
isTimelineLoading,
|
||||
setIsTimelineLoading,
|
||||
timelineStatus,
|
||||
setTimelineStatus,
|
||||
backgroundVisibility,
|
||||
setBackgroundVisibility,
|
||||
isBackgroundVisibilityReady,
|
||||
setIsBackgroundVisibilityReady,
|
||||
} = useEditorSessionState({
|
||||
emptyFeatureCollection: EMPTY_FEATURE_COLLECTION,
|
||||
defaultEditorUserId: DEFAULT_EDITOR_USER_ID,
|
||||
fallbackTimelineRange: FIXED_TIMELINE_RANGE,
|
||||
currentYear: CURRENT_YEAR,
|
||||
});
|
||||
// Counter để bỏ qua response cũ khi user đổi timeline/section liên tục.
|
||||
const timelineFetchRequestRef = useRef(0);
|
||||
// Counter để bỏ qua response cũ khi user gõ search entity liên tục.
|
||||
const entitySearchRequestRef = useRef(0);
|
||||
|
||||
const editor = useEditorState(initialData);
|
||||
const editorUserId = normalizeEditorUserId(editorUserIdInput);
|
||||
const entities = useMemo(
|
||||
() => mergeEntitiesWithPending(persistedEntities, pendingEntityCreates),
|
||||
[persistedEntities, pendingEntityCreates]
|
||||
);
|
||||
const selectedFeature =
|
||||
selectedFeatureId === null
|
||||
? null
|
||||
: editor.draft.features.find((feature) =>
|
||||
String(feature.properties.id) === String(selectedFeatureId)
|
||||
) || null;
|
||||
|
||||
const createdGeometries = useMemo(() => {
|
||||
const rows: Array<{
|
||||
id: string | number;
|
||||
geometryType: string;
|
||||
semanticType?: string | null;
|
||||
entityNames: string[];
|
||||
}> = [];
|
||||
|
||||
for (const change of editor.changes.values()) {
|
||||
if (change.action !== "create") continue;
|
||||
const feature = change.feature;
|
||||
const entityNames = normalizeFeatureEntityIds(feature)
|
||||
.map((entityId) => entities.find((entity) => entity.id === entityId)?.name || entityId);
|
||||
|
||||
rows.push({
|
||||
id: feature.properties.id,
|
||||
geometryType: feature.geometry.type,
|
||||
semanticType: feature.properties.type || getDefaultTypeIdForFeature(feature),
|
||||
entityNames,
|
||||
});
|
||||
}
|
||||
|
||||
return rows;
|
||||
}, [editor.changes, entities]);
|
||||
|
||||
const sectionCommands = useSectionCommands({
|
||||
editor,
|
||||
editorUserId,
|
||||
emptyFeatureCollection: EMPTY_FEATURE_COLLECTION,
|
||||
activeSection,
|
||||
sectionState,
|
||||
selectedSectionId,
|
||||
newSectionTitle,
|
||||
pendingSaveCount: editor.changeCount + pendingEntityCreates.length,
|
||||
pendingEntityCreates,
|
||||
lastSectionSnapshot,
|
||||
commitTitle,
|
||||
commitNote,
|
||||
setActiveSection,
|
||||
setSelectedSectionId,
|
||||
setSectionState,
|
||||
setLastSectionSnapshot,
|
||||
setInitialData,
|
||||
setSectionCommits,
|
||||
setPendingEntityCreates,
|
||||
setCreatedEntities,
|
||||
setEntityFormStatus,
|
||||
setSelectedFeatureId,
|
||||
setEntityStatus,
|
||||
setIsSaving,
|
||||
setIsSubmitting,
|
||||
setIsOpeningSection,
|
||||
setAvailableSections,
|
||||
setNewSectionTitle,
|
||||
setCommitTitle,
|
||||
setCommitNote,
|
||||
});
|
||||
const {
|
||||
openSectionForEditing,
|
||||
commitSection,
|
||||
submitCurrentSection,
|
||||
restoreCommit,
|
||||
} = sectionCommands;
|
||||
|
||||
const openProject = useCallback(async () => {
|
||||
if (!projectId) return;
|
||||
try {
|
||||
setIsOpeningSection(true);
|
||||
setEntityStatus(null);
|
||||
await openSectionForEditing(projectId);
|
||||
setEntityStatus(null);
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
if (err.status === 401 || err.status === 400) {
|
||||
router.replace("/signin");
|
||||
return;
|
||||
}
|
||||
setEntityStatus(`Mở project thất bại: ${err.body || err.message}`);
|
||||
} else {
|
||||
console.error("Open project failed", err);
|
||||
setEntityStatus("Mở project thất bại.");
|
||||
}
|
||||
} finally {
|
||||
setIsOpeningSection(false);
|
||||
}
|
||||
}, [openSectionForEditing, projectId, router, setEntityStatus, setIsOpeningSection]);
|
||||
|
||||
useEffect(() => {
|
||||
let disposed = false;
|
||||
|
||||
async function ensureAuthenticated() {
|
||||
try {
|
||||
await fetchCurrentUser();
|
||||
} catch (err) {
|
||||
if (disposed) return;
|
||||
// Follow the same behavior as the rest of FrontEndAdmin: unauthenticated -> /signin.
|
||||
router.replace("/signin");
|
||||
}
|
||||
}
|
||||
|
||||
ensureAuthenticated();
|
||||
return () => {
|
||||
disposed = true;
|
||||
};
|
||||
}, [router]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!projectId) return;
|
||||
if (openedProjectIdRef.current === projectId) return;
|
||||
|
||||
openProject()
|
||||
.then(() => {
|
||||
openedProjectIdRef.current = projectId;
|
||||
})
|
||||
.catch(() => {
|
||||
// allow retry if openProject threw outside its try/catch (should be rare)
|
||||
openedProjectIdRef.current = null;
|
||||
});
|
||||
}, [openProject]);
|
||||
|
||||
useEffect(() => {
|
||||
let disposed = false;
|
||||
|
||||
async function loadEntities() {
|
||||
try {
|
||||
const rows = await fetchEntities();
|
||||
if (disposed) return;
|
||||
|
||||
setPersistedEntities(rows);
|
||||
setEntityStatus(null);
|
||||
} catch (err) {
|
||||
if (disposed) return;
|
||||
console.error("Load entities failed", err);
|
||||
setEntityStatus("Không tải được danh sách entity.");
|
||||
}
|
||||
}
|
||||
|
||||
loadEntities();
|
||||
|
||||
return () => {
|
||||
disposed = true;
|
||||
};
|
||||
}, [setEntityStatus, setPersistedEntities]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedFeature) {
|
||||
setEntitySearchResults([]);
|
||||
setSelectedSearchEntityId(null);
|
||||
setIsEntitySearchLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const keyword = entitySearchQuery.trim();
|
||||
if (!keyword.length) {
|
||||
setEntitySearchResults([]);
|
||||
setSelectedSearchEntityId(null);
|
||||
setIsEntitySearchLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
let disposed = false;
|
||||
const requestId = ++entitySearchRequestRef.current;
|
||||
const timeoutId = window.setTimeout(async () => {
|
||||
setIsEntitySearchLoading(true);
|
||||
try {
|
||||
const rows = await searchEntitiesByName(keyword, { limit: 30 });
|
||||
if (disposed || requestId !== entitySearchRequestRef.current) return;
|
||||
|
||||
const pendingMatches = pendingEntityCreates
|
||||
.filter((entity) =>
|
||||
entity.name.toLowerCase().includes(keyword.toLowerCase()) ||
|
||||
(entity.slug || "").toLowerCase().includes(keyword.toLowerCase())
|
||||
)
|
||||
.map<Entity>((entity) => ({
|
||||
id: entity.id,
|
||||
name: entity.name,
|
||||
slug: entity.slug,
|
||||
type_id: entity.type_id,
|
||||
status: entity.status,
|
||||
geometry_count: 0,
|
||||
}));
|
||||
|
||||
const mergedRows = mergeEntitySearchResults(rows, pendingMatches);
|
||||
setEntitySearchResults(mergedRows);
|
||||
setSelectedSearchEntityId((prev) =>
|
||||
prev && mergedRows.some((entity) => entity.id === prev)
|
||||
? prev
|
||||
: mergedRows[0]?.id || null
|
||||
);
|
||||
} catch (err) {
|
||||
if (disposed || requestId !== entitySearchRequestRef.current) return;
|
||||
console.error("Search entity by name failed", err);
|
||||
const pendingMatches = pendingEntityCreates
|
||||
.filter((entity) =>
|
||||
entity.name.toLowerCase().includes(keyword.toLowerCase()) ||
|
||||
(entity.slug || "").toLowerCase().includes(keyword.toLowerCase())
|
||||
)
|
||||
.map<Entity>((entity) => ({
|
||||
id: entity.id,
|
||||
name: entity.name,
|
||||
slug: entity.slug,
|
||||
type_id: entity.type_id,
|
||||
status: entity.status,
|
||||
geometry_count: 0,
|
||||
}));
|
||||
setEntitySearchResults(pendingMatches);
|
||||
setSelectedSearchEntityId(pendingMatches[0]?.id || null);
|
||||
} finally {
|
||||
if (!disposed && requestId === entitySearchRequestRef.current) {
|
||||
setIsEntitySearchLoading(false);
|
||||
}
|
||||
}
|
||||
}, 220);
|
||||
|
||||
return () => {
|
||||
disposed = true;
|
||||
window.clearTimeout(timeoutId);
|
||||
};
|
||||
}, [
|
||||
entitySearchQuery,
|
||||
selectedFeature,
|
||||
pendingEntityCreates,
|
||||
setEntitySearchResults,
|
||||
setIsEntitySearchLoading,
|
||||
setSelectedSearchEntityId,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedFeatureId === null) return;
|
||||
const stillExists = editor.draft.features.some((feature) =>
|
||||
String(feature.properties.id) === String(selectedFeatureId)
|
||||
);
|
||||
if (!stillExists) {
|
||||
setSelectedFeatureId(null);
|
||||
}
|
||||
}, [editor.draft, selectedFeatureId, setSelectedFeatureId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedFeature) {
|
||||
setSelectedGeometryEntityIds([]);
|
||||
setGeometryMetaForm({
|
||||
time_start: "",
|
||||
time_end: "",
|
||||
binding: "",
|
||||
});
|
||||
setEntitySearchQuery("");
|
||||
setEntitySearchResults([]);
|
||||
setSelectedSearchEntityId(null);
|
||||
setEntityFormStatus(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const featureEntityIds = normalizeFeatureEntityIds(selectedFeature);
|
||||
setSelectedGeometryEntityIds(featureEntityIds);
|
||||
setGeometryMetaForm({
|
||||
time_start: selectedFeature.properties.time_start != null
|
||||
? String(selectedFeature.properties.time_start)
|
||||
: "",
|
||||
time_end: selectedFeature.properties.time_end != null
|
||||
? String(selectedFeature.properties.time_end)
|
||||
: "",
|
||||
binding: normalizeFeatureBindingIds(selectedFeature).join(", "),
|
||||
});
|
||||
setEntitySearchQuery("");
|
||||
setEntitySearchResults([]);
|
||||
setSelectedSearchEntityId(null);
|
||||
setEntityFormStatus(null);
|
||||
}, [
|
||||
selectedFeature,
|
||||
setEntityFormStatus,
|
||||
setEntitySearchQuery,
|
||||
setEntitySearchResults,
|
||||
setGeometryMetaForm,
|
||||
setSelectedGeometryEntityIds,
|
||||
setSelectedSearchEntityId,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedFeature) return;
|
||||
|
||||
const allowedGroupIds = getAllowedEntityTypeGroupIdsForFeature(selectedFeature);
|
||||
const fallbackOption = ENTITY_TYPE_OPTIONS.find((option) =>
|
||||
allowedGroupIds.includes(option.groupId)
|
||||
);
|
||||
if (!fallbackOption) return;
|
||||
|
||||
setEntityForm((prev) => {
|
||||
const currentOption = findEntityTypeOption(prev.type_id);
|
||||
const isCurrentAllowed = currentOption
|
||||
? allowedGroupIds.includes(currentOption.groupId)
|
||||
: false;
|
||||
if (isCurrentAllowed || prev.type_id === fallbackOption.value) {
|
||||
return prev;
|
||||
}
|
||||
return {
|
||||
...prev,
|
||||
type_id: fallbackOption.value,
|
||||
};
|
||||
});
|
||||
}, [selectedFeature, setEntityForm]);
|
||||
|
||||
useEffect(() => {
|
||||
const timeoutId = window.setTimeout(() => {
|
||||
if (timelineDraftYear !== timelineYear) {
|
||||
setTimelineYear(timelineDraftYear);
|
||||
}
|
||||
}, TIMELINE_DEBOUNCE_MS);
|
||||
|
||||
return () => window.clearTimeout(timeoutId);
|
||||
}, [timelineDraftYear, timelineYear, setTimelineYear]);
|
||||
|
||||
useEffect(() => {
|
||||
setBackgroundVisibility(loadBackgroundLayerVisibilityFromStorage());
|
||||
setIsBackgroundVisibilityReady(true);
|
||||
}, [setBackgroundVisibility, setIsBackgroundVisibilityReady]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeSection) return;
|
||||
|
||||
let disposed = false;
|
||||
const requestId = ++timelineFetchRequestRef.current;
|
||||
|
||||
async function loadGlobalByTimeline() {
|
||||
setIsTimelineLoading(true);
|
||||
setTimelineStatus(null);
|
||||
|
||||
try {
|
||||
const data = await fetchGeometriesByBBox({
|
||||
...WORLD_BBOX,
|
||||
time: timelineYear,
|
||||
});
|
||||
|
||||
if (disposed || requestId !== timelineFetchRequestRef.current) return;
|
||||
setInitialData(data);
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
console.error("Load global timeline data failed", err.body);
|
||||
} else {
|
||||
console.error("Load global timeline data failed", err);
|
||||
}
|
||||
|
||||
if (!disposed && requestId === timelineFetchRequestRef.current) {
|
||||
setTimelineStatus("Không tải được geometry global tại mốc thời gian đã chọn.");
|
||||
}
|
||||
} finally {
|
||||
if (!disposed && requestId === timelineFetchRequestRef.current) {
|
||||
setIsTimelineLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loadGlobalByTimeline();
|
||||
|
||||
return () => {
|
||||
disposed = true;
|
||||
};
|
||||
}, [
|
||||
timelineYear,
|
||||
activeSection,
|
||||
setInitialData,
|
||||
setIsTimelineLoading,
|
||||
setTimelineStatus,
|
||||
]);
|
||||
|
||||
const updateBackgroundVisibility = (
|
||||
updater: (prev: BackgroundLayerVisibility) => BackgroundLayerVisibility
|
||||
) => {
|
||||
setBackgroundVisibility((prev) => {
|
||||
const next = updater(prev);
|
||||
persistBackgroundLayerVisibility(next);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleToggleBackgroundLayer = (id: BackgroundLayerId) => {
|
||||
updateBackgroundVisibility((prev) => ({
|
||||
...prev,
|
||||
[id]: !prev[id],
|
||||
}));
|
||||
};
|
||||
|
||||
const handleShowAllBackgroundLayers = () => {
|
||||
updateBackgroundVisibility(() => ({ ...DEFAULT_BACKGROUND_LAYER_VISIBILITY }));
|
||||
};
|
||||
|
||||
const handleHideAllBackgroundLayers = () => {
|
||||
updateBackgroundVisibility(() => ({ ...HIDDEN_BACKGROUND_LAYER_VISIBILITY }));
|
||||
};
|
||||
|
||||
const handleTimelineYearChange = (nextYear: number) => {
|
||||
setTimelineDraftYear(clampYearToFixedRange(Math.trunc(nextYear)));
|
||||
};
|
||||
|
||||
const handleEntityFormChange = (key: keyof EntityFormState, value: string) => {
|
||||
setEntityForm((prev) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
const handleGeometryMetaFormChange = (key: "time_start" | "time_end" | "binding", value: string) => {
|
||||
setGeometryMetaForm((prev) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
const handleEntityIdsChange = (values: string[]) => {
|
||||
setSelectedGeometryEntityIds(uniqueEntityIds(values));
|
||||
};
|
||||
|
||||
const handleAddSelectedSearchEntity = () => {
|
||||
const entityId = selectedSearchEntityId ? selectedSearchEntityId.trim() : "";
|
||||
if (!entityId.length) {
|
||||
setEntityFormStatus("Hãy chọn một entity từ kết quả search trước.");
|
||||
return;
|
||||
}
|
||||
|
||||
const next = uniqueEntityIds([...selectedGeometryEntityIds, entityId]);
|
||||
setSelectedGeometryEntityIds(next);
|
||||
setSelectedSearchEntityId(null);
|
||||
setEntityFormStatus(null);
|
||||
};
|
||||
|
||||
const featureCommands = useFeatureCommands({
|
||||
editor,
|
||||
selectedFeature,
|
||||
geometryMetaForm,
|
||||
setGeometryMetaForm,
|
||||
selectedGeometryEntityIds,
|
||||
setSelectedGeometryEntityIds,
|
||||
entities,
|
||||
setIsEntitySubmitting,
|
||||
setEntityFormStatus,
|
||||
});
|
||||
|
||||
const handleCreateEntityOnly = async () => {
|
||||
const name = entityForm.name.trim();
|
||||
if (!name) {
|
||||
setEntityFormStatus("Tên entity là bắt buộc.");
|
||||
return;
|
||||
}
|
||||
|
||||
const slug = entityForm.slug.trim() || null;
|
||||
const typeId = entityForm.type_id || DEFAULT_ENTITY_TYPE_ID;
|
||||
const normalizedName = name.toLowerCase();
|
||||
const duplicatedName = entities.some((entity) => entity.name.trim().toLowerCase() === normalizedName);
|
||||
if (duplicatedName) {
|
||||
setEntityFormStatus("Tên entity đã tồn tại.");
|
||||
return;
|
||||
}
|
||||
if (slug) {
|
||||
const normalizedSlug = slug.toLowerCase();
|
||||
const duplicatedSlug = entities.some((entity) =>
|
||||
(entity.slug || "").trim().toLowerCase() === normalizedSlug
|
||||
);
|
||||
if (duplicatedSlug) {
|
||||
setEntityFormStatus("Slug entity đã tồn tại.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const entityId = buildClientEntityId();
|
||||
const pendingCreate: PendingEntityCreate = {
|
||||
id: entityId,
|
||||
name,
|
||||
slug,
|
||||
type_id: typeId,
|
||||
status: 1,
|
||||
};
|
||||
|
||||
setIsEntitySubmitting(true);
|
||||
setEntityFormStatus(null);
|
||||
try {
|
||||
setPendingEntityCreates((prev) => [pendingCreate, ...prev]);
|
||||
setCreatedEntities((prev) => {
|
||||
if (prev.some((item) => item.id === pendingCreate.id)) return prev;
|
||||
return [
|
||||
{
|
||||
id: pendingCreate.id,
|
||||
name: pendingCreate.name,
|
||||
type_id: pendingCreate.type_id || null,
|
||||
},
|
||||
...prev,
|
||||
];
|
||||
});
|
||||
|
||||
setEntityForm((prev) => ({
|
||||
...prev,
|
||||
name: "",
|
||||
slug: "",
|
||||
}));
|
||||
setEntityStatus(null);
|
||||
setEntityFormStatus("Đã thêm entity mới vào danh sách chờ Commit.");
|
||||
|
||||
if (selectedFeature) {
|
||||
setEntitySearchQuery(pendingCreate.name);
|
||||
setSelectedSearchEntityId(pendingCreate.id);
|
||||
}
|
||||
} finally {
|
||||
setIsEntitySubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const pendingSaveCount = editor.changeCount + pendingEntityCreates.length;
|
||||
const headCommit = sectionState?.head_commit_id
|
||||
? sectionCommits.find((commit) => commit.id === sectionState.head_commit_id) || null
|
||||
: null;
|
||||
const timelineDisabled = isSaving || pendingSaveCount > 0;
|
||||
const timelineStatusText =
|
||||
pendingSaveCount > 0
|
||||
? "Commit hoặc Undo hết thay đổi trước khi đổi mốc thời gian."
|
||||
: isSaving
|
||||
? "Đang lưu thay đổi..."
|
||||
: timelineStatus;
|
||||
|
||||
const handleCreateFeature = (feature: Feature) => {
|
||||
editor.createFeature(feature);
|
||||
setSelectedFeatureId(feature.properties.id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", minHeight: "100vh" }}>
|
||||
<Editor
|
||||
mode={mode}
|
||||
setMode={setMode}
|
||||
entityStatus={entityStatus}
|
||||
onUndo={editor.undo}
|
||||
onCommit={commitSection}
|
||||
onSubmit={submitCurrentSection}
|
||||
onRestoreCommit={restoreCommit}
|
||||
isSaving={isSaving}
|
||||
isSubmitting={isSubmitting}
|
||||
sectionTitle={activeSection?.title || "Đang tải project"}
|
||||
sectionStatus={sectionState?.status || "editing"}
|
||||
commitTitle={commitTitle}
|
||||
commitNote={commitNote}
|
||||
onCommitTitleChange={setCommitTitle}
|
||||
onCommitNoteChange={setCommitNote}
|
||||
commitCount={sectionCommits.length}
|
||||
hasHeadCommit={Boolean(sectionState?.head_commit_id)}
|
||||
headCommitId={sectionState?.head_commit_id || null}
|
||||
latestCommitLabel={headCommit ? `Head: ${formatCommitTitle(headCommit)}` : null}
|
||||
commits={sectionCommits}
|
||||
changesCount={pendingSaveCount}
|
||||
undoStack={editor.undoStack}
|
||||
createdEntities={createdEntities}
|
||||
createdGeometries={createdGeometries}
|
||||
/>
|
||||
|
||||
<div style={{ flex: 1, position: "relative", minHeight: "100vh" }}>
|
||||
{isBackgroundVisibilityReady ? (
|
||||
<Map
|
||||
mode={mode}
|
||||
draft={editor.draft}
|
||||
selectedFeatureId={selectedFeatureId}
|
||||
onSelectFeatureId={setSelectedFeatureId}
|
||||
onCreateFeature={handleCreateFeature}
|
||||
onDeleteFeature={editor.deleteFeature}
|
||||
onUpdateFeature={editor.updateFeature}
|
||||
backgroundVisibility={backgroundVisibility}
|
||||
/>
|
||||
) : (
|
||||
<div style={{ width: "100%", height: "100%", background: "#0b1220" }} />
|
||||
)}
|
||||
<TimelineBar
|
||||
year={timelineDraftYear}
|
||||
onYearChange={handleTimelineYearChange}
|
||||
isLoading={isTimelineLoading}
|
||||
disabled={timelineDisabled}
|
||||
statusText={timelineStatusText}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<BackgroundLayersPanel
|
||||
visibility={backgroundVisibility}
|
||||
onToggleLayer={handleToggleBackgroundLayer}
|
||||
onShowAll={handleShowAllBackgroundLayers}
|
||||
onHideAll={handleHideAllBackgroundLayers}
|
||||
topContent={
|
||||
<SelectedGeometryPanel
|
||||
selectedFeature={selectedFeature}
|
||||
selectedFeatureEntitySummary={
|
||||
selectedFeature
|
||||
? formatEntityNamesForDisplay(selectedFeature, entities)
|
||||
: "Chưa gắn"
|
||||
}
|
||||
selectedFeatureBindingSummary={
|
||||
selectedFeature
|
||||
? formatBindingIdsForDisplay(selectedFeature)
|
||||
: "Không có"
|
||||
}
|
||||
entities={entities}
|
||||
selectedGeometryEntityIds={selectedGeometryEntityIds}
|
||||
onEntityIdsChange={handleEntityIdsChange}
|
||||
entitySearchQuery={entitySearchQuery}
|
||||
onEntitySearchQueryChange={setEntitySearchQuery}
|
||||
entitySearchResults={entitySearchResults}
|
||||
selectedSearchEntityId={selectedSearchEntityId}
|
||||
onSelectSearchEntityId={setSelectedSearchEntityId}
|
||||
onAddSelectedSearchEntity={handleAddSelectedSearchEntity}
|
||||
isEntitySearchLoading={isEntitySearchLoading}
|
||||
entityForm={entityForm}
|
||||
onEntityFormChange={handleEntityFormChange}
|
||||
entityTypeOptions={ENTITY_TYPE_OPTIONS}
|
||||
geometryMetaForm={geometryMetaForm}
|
||||
onGeometryMetaFormChange={handleGeometryMetaFormChange}
|
||||
isEntitySubmitting={isEntitySubmitting}
|
||||
onCreateEntityOnly={handleCreateEntityOnly}
|
||||
onApplyGeometryMetadata={featureCommands.applyGeometryMetadata}
|
||||
onApplyEntitiesForSelectedGeometry={featureCommands.applyEntitiesToSelectedGeometry}
|
||||
changeCount={editor.changeCount}
|
||||
entityFormStatus={entityFormStatus}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function normalizeEditorUserId(value: string): string {
|
||||
const normalized = value.trim();
|
||||
return normalized || DEFAULT_EDITOR_USER_ID;
|
||||
}
|
||||
|
||||
function formatCommitTitle(commit: SectionCommit): string {
|
||||
return commit.edit_summary?.trim() || `Commit ${commit.id.slice(0, 8)}`;
|
||||
}
|
||||
|
||||
function getAllowedEntityTypeGroupIdsForFeature(feature: Feature): EntityTypeGroupId[] {
|
||||
const defaultTypeId = getDefaultTypeIdForFeature(feature);
|
||||
const defaultTypeOption = findEntityTypeOption(defaultTypeId);
|
||||
if (defaultTypeOption) {
|
||||
return [defaultTypeOption.groupId];
|
||||
}
|
||||
return ["polygon"];
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default function EditorIndexPage() {
|
||||
// Editor must be opened from a specific project (see /user/projects).
|
||||
redirect("/user/projects");
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ import Swal from "sweetalert2";
|
||||
import PageBreadcrumb from "@/components/common/PageBreadCrumb";
|
||||
import { apiAddProjectMember, apiChangeProjectOwner, apiDeleteProject, apiGetProjectDetail, apiRemoveProjectMember, apiUpdateProject, apiUpdateProjectMemberRole } from "@/service/projectService";
|
||||
import Loading from "@/app/loading";
|
||||
import Button from "@/components/ui/button/Button";
|
||||
|
||||
type TabType = "overview" | "members" | "settings";
|
||||
|
||||
@@ -256,7 +257,7 @@ export default function ProjectDetailsPage() {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
{[
|
||||
{
|
||||
id: "overview",
|
||||
@@ -305,6 +306,11 @@ export default function ProjectDetailsPage() {
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<div className="flex-1" />
|
||||
<Button size="sm" variant="outline" onClick={() => router.push(`/editor/${id}`)}>
|
||||
Mo editor
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -217,7 +217,15 @@ export default function ProjectsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center mt-4 md:mt-0 w-[120px] justify-end shrink-0">
|
||||
<div className="flex items-center mt-4 md:mt-0 gap-10 w-[240px] justify-end shrink-0">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => router.push(`/editor/${project.id}`)}
|
||||
>
|
||||
Editor
|
||||
</Button>
|
||||
|
||||
<div className="flex -space-x-2 overflow-hidden">
|
||||
{project.members && project.members.length > 0 ? (
|
||||
<>
|
||||
@@ -330,4 +338,4 @@ export default function ProjectsPage() {
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,331 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import PageBreadcrumb from "@/components/common/PageBreadCrumb";
|
||||
import ComponentCard from "@/components/common/ComponentCard";
|
||||
import Badge from "@/components/ui/badge/Badge";
|
||||
import Button from "@/components/ui/button/Button";
|
||||
|
||||
import Map from "@/uhm/components/Map";
|
||||
import { DEFAULT_BACKGROUND_LAYER_VISIBILITY } from "@/uhm/lib/backgroundLayers";
|
||||
import { EMPTY_FEATURE_COLLECTION } from "@/uhm/lib/geo/constants";
|
||||
import { fetchSectionCommits } from "@/uhm/api/sections";
|
||||
import type { EditorSnapshot, SectionCommit } from "@/uhm/types/sections";
|
||||
import type { EntitySnapshot } from "@/uhm/types/entities";
|
||||
|
||||
import type { Submission } from "@/interface/submission";
|
||||
import { apiGetSubmissionById } from "@/service/submissionService";
|
||||
import type { Project } from "@/interface/project";
|
||||
import { apiGetProjectDetail } from "@/service/projectService";
|
||||
|
||||
function formatTime(value?: string | null) {
|
||||
if (!value) return "-";
|
||||
const d = new Date(value);
|
||||
if (Number.isNaN(d.getTime())) return String(value);
|
||||
return d.toLocaleString("vi-VN");
|
||||
}
|
||||
|
||||
export default function SubmissionDetailPage() {
|
||||
const params = useParams();
|
||||
const id = String(params.id || "");
|
||||
const [row, setRow] = useState<Submission | null>(null);
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [commits, setCommits] = useState<SectionCommit[]>([]);
|
||||
const [snapshot, setSnapshot] = useState<EditorSnapshot | null>(null);
|
||||
const [snapshotEntities, setSnapshotEntities] = useState<EntitySnapshot[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isLoadingExtras, setIsLoadingExtras] = useState(false);
|
||||
|
||||
const headCommitSnapshotJson = useMemo(() => {
|
||||
const headId = project?.latest_commit_id || null;
|
||||
if (!headId) return null;
|
||||
const head = commits.find((c) => c.id === headId) || null;
|
||||
return (head as any)?.snapshot_json ?? null;
|
||||
}, [commits, project?.latest_commit_id]);
|
||||
|
||||
const draft = useMemo(
|
||||
() => snapshot?.editor_feature_collection || EMPTY_FEATURE_COLLECTION,
|
||||
[snapshot]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let disposed = false;
|
||||
async function load() {
|
||||
if (!id) return;
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const res = await apiGetSubmissionById(id);
|
||||
if (!disposed) setRow(res?.data || null);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error("Khong the tai submission.");
|
||||
} finally {
|
||||
if (!disposed) setIsLoading(false);
|
||||
}
|
||||
}
|
||||
load();
|
||||
return () => {
|
||||
disposed = true;
|
||||
};
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
let disposed = false;
|
||||
async function loadExtras() {
|
||||
if (!row?.project_id) return;
|
||||
try {
|
||||
setIsLoadingExtras(true);
|
||||
|
||||
const [projectRes, commitRows] = await Promise.all([
|
||||
apiGetProjectDetail(row.project_id),
|
||||
fetchSectionCommits(row.project_id),
|
||||
]);
|
||||
|
||||
if (disposed) return;
|
||||
setProject(projectRes?.data || null);
|
||||
setCommits(commitRows || []);
|
||||
|
||||
const commit = (commitRows || []).find((c) => c.id === row.commit_id) || null;
|
||||
const snap = (commit?.snapshot_json || null) as EditorSnapshot | null;
|
||||
setSnapshot(snap);
|
||||
setSnapshotEntities((snap?.entities || []) as EntitySnapshot[]);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error("Khong the tai thong tin project/commit.");
|
||||
} finally {
|
||||
if (!disposed) setIsLoadingExtras(false);
|
||||
}
|
||||
}
|
||||
loadExtras();
|
||||
return () => {
|
||||
disposed = true;
|
||||
};
|
||||
}, [row?.commit_id, row?.project_id]);
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto pb-10">
|
||||
<PageBreadcrumb
|
||||
pageTitle="Chi tiet submission"
|
||||
paths={[{ name: "Kiem duyet submissions", href: "/user/submissions" }]}
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<ComponentCard title="Thong tin">
|
||||
{isLoading ? (
|
||||
<div className="p-6 text-sm text-gray-500 dark:text-gray-400">Dang tai...</div>
|
||||
) : row ? (
|
||||
<div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">ID</div>
|
||||
<div className="font-mono break-all">{row.id}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">Status</div>
|
||||
<div className="mt-1">
|
||||
<Badge size="sm" variant="light" color="light">
|
||||
{row.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">Project</div>
|
||||
<div className="font-medium break-words">{row.project_title || "-"}</div>
|
||||
<div className="font-mono break-all text-xs text-gray-500 dark:text-gray-400 mt-1">{row.project_id}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">Commit</div>
|
||||
<div className="font-mono break-all">{row.commit_id}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">User</div>
|
||||
<div className="font-mono break-all">{row.user_id}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">Created</div>
|
||||
<div>{formatTime(row.created_at)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">Reviewed by</div>
|
||||
<div className="font-mono break-all">{row.reviewed_by || "-"}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">Reviewed at</div>
|
||||
<div>{formatTime(row.reviewed_at)}</div>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">Review note</div>
|
||||
<div className="mt-1 whitespace-pre-wrap">{row.review_note || "-"}</div>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">Content</div>
|
||||
<div className="mt-1 whitespace-pre-wrap">{row.content || "-"}</div>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 flex justify-end">
|
||||
<Button size="sm" variant="outline" onClick={() => (window.location.href = `/editor/${row.project_id}`)}>
|
||||
Open editor
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-6 text-sm text-gray-500 dark:text-gray-400">Khong tim thay submission.</div>
|
||||
)}
|
||||
</ComponentCard>
|
||||
</div>
|
||||
|
||||
{row ? (
|
||||
<div className="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<ComponentCard title="Map view">
|
||||
<div className="p-4">
|
||||
<div className="rounded-xl overflow-hidden border border-gray-200 dark:border-gray-800">
|
||||
<Map
|
||||
mode="idle"
|
||||
draft={draft}
|
||||
selectedFeatureId={null}
|
||||
onSelectFeatureId={() => {}}
|
||||
backgroundVisibility={DEFAULT_BACKGROUND_LAYER_VISIBILITY}
|
||||
allowGeometryEditing={false}
|
||||
respectBindingFilter={false}
|
||||
height="320px"
|
||||
fitToDraftBounds
|
||||
fitBoundsKey={row.id}
|
||||
/>
|
||||
</div>
|
||||
{isLoadingExtras ? (
|
||||
<div className="mt-3 text-xs text-gray-500 dark:text-gray-400">Dang tai snapshot/commits...</div>
|
||||
) : snapshot ? (
|
||||
<div className="mt-3 text-xs text-gray-500 dark:text-gray-400">
|
||||
Snapshot schema_version: {snapshot.schema_version}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-3 text-xs text-gray-500 dark:text-gray-400">
|
||||
Khong tim thay snapshot cho commit nay.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ComponentCard>
|
||||
|
||||
<ComponentCard title="Entities (snapshot)">
|
||||
<div className="p-4">
|
||||
{snapshotEntities.length === 0 ? (
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">Khong co entities trong snapshot.</div>
|
||||
) : (
|
||||
<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-[720px]">
|
||||
<div className="grid grid-cols-12 gap-4 px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22] text-xs font-semibold text-gray-600 dark:text-gray-300">
|
||||
<div className="col-span-2">Op</div>
|
||||
<div className="col-span-6">Name</div>
|
||||
<div className="col-span-4">Entity ID</div>
|
||||
</div>
|
||||
<div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{snapshotEntities.map((e) => (
|
||||
<div key={`${e.operation}:${e.id}`} className="grid grid-cols-12 gap-4 px-5 py-3 text-sm">
|
||||
<div className="col-span-2">
|
||||
<Badge size="sm" variant="light" color="dark">
|
||||
{e.operation}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="col-span-6 min-w-0 truncate">{e.name || "-"}</div>
|
||||
<div className="col-span-4 font-mono text-xs break-all">{e.id}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ComponentCard>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{row ? (
|
||||
<div className="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<ComponentCard title="Head commit snapshot_json">
|
||||
<div className="p-4">
|
||||
<pre className="text-xs whitespace-pre-wrap break-words rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0d1117] p-4 overflow-auto max-h-[420px]">
|
||||
{JSON.stringify(headCommitSnapshotJson, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</ComponentCard>
|
||||
|
||||
<ComponentCard title="Project members">
|
||||
<div className="p-4">
|
||||
{!project ? (
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">Khong co du lieu project.</div>
|
||||
) : (project.members || []).length === 0 ? (
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">Khong co thanh vien.</div>
|
||||
) : (
|
||||
<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-[640px]">
|
||||
<div className="grid grid-cols-12 gap-4 px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22] text-xs font-semibold text-gray-600 dark:text-gray-300">
|
||||
<div className="col-span-5">Member</div>
|
||||
<div className="col-span-3">Role</div>
|
||||
<div className="col-span-4">User ID</div>
|
||||
</div>
|
||||
<div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{(project.members || []).map((m) => (
|
||||
<div key={m.user_id} className="grid grid-cols-12 gap-4 px-5 py-3 text-sm">
|
||||
<div className="col-span-5 min-w-0 truncate">{m.display_name || "-"}</div>
|
||||
<div className="col-span-3">
|
||||
<Badge size="sm" variant="light" color="info">
|
||||
{m.role}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="col-span-4 font-mono text-xs break-all">{m.user_id}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ComponentCard>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{row ? (
|
||||
<div className="mt-6">
|
||||
<ComponentCard title="Commits">
|
||||
<div className="p-4">
|
||||
{commits.length === 0 ? (
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">Khong co commits.</div>
|
||||
) : (
|
||||
<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-[900px]">
|
||||
<div className="grid grid-cols-12 gap-4 px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22] text-xs font-semibold text-gray-600 dark:text-gray-300">
|
||||
<div className="col-span-3">Commit</div>
|
||||
<div className="col-span-5">Title</div>
|
||||
<div className="col-span-2">Created</div>
|
||||
<div className="col-span-2">User</div>
|
||||
</div>
|
||||
<div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{commits.map((c) => {
|
||||
const isTarget = c.id === row.commit_id;
|
||||
return (
|
||||
<div
|
||||
key={c.id}
|
||||
className={`grid grid-cols-12 gap-4 px-5 py-3 text-sm ${isTarget ? "bg-brand-50/60 dark:bg-brand-500/10" : ""}`}
|
||||
>
|
||||
<div className="col-span-3 font-mono text-xs break-all">
|
||||
{isTarget ? <b>{c.id}</b> : c.id}
|
||||
</div>
|
||||
<div className="col-span-5 min-w-0 truncate">{c.edit_summary || "-"}</div>
|
||||
<div className="col-span-2 text-xs text-gray-600 dark:text-gray-300">{formatTime(c.created_at)}</div>
|
||||
<div className="col-span-2 font-mono text-xs break-all">{c.user_id}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ComponentCard>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,326 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import PageBreadcrumb from "@/components/common/PageBreadCrumb";
|
||||
import ComponentCard from "@/components/common/ComponentCard";
|
||||
import Badge from "@/components/ui/badge/Badge";
|
||||
import Button from "@/components/ui/button/Button";
|
||||
import Label from "@/components/form/Label";
|
||||
import { Modal } from "@/components/ui/modal";
|
||||
import { useModal } from "@/hooks/useModal";
|
||||
|
||||
import type { Submission, SubmissionStatus } from "@/interface/submission";
|
||||
import { apiSearchSubmissions, apiUpdateSubmissionStatus } from "@/service/submissionService";
|
||||
|
||||
type Decision = "APPROVED" | "REJECTED";
|
||||
|
||||
function statusBadge(status: SubmissionStatus) {
|
||||
switch (status) {
|
||||
case "PENDING":
|
||||
return (
|
||||
<Badge size="sm" variant="light" color="warning">
|
||||
PENDING
|
||||
</Badge>
|
||||
);
|
||||
case "APPROVED":
|
||||
return (
|
||||
<Badge size="sm" variant="light" color="success">
|
||||
APPROVED
|
||||
</Badge>
|
||||
);
|
||||
case "REJECTED":
|
||||
return (
|
||||
<Badge size="sm" variant="light" color="error">
|
||||
REJECTED
|
||||
</Badge>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<Badge size="sm" variant="light" color="light">
|
||||
{String(status || "UNKNOWN")}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function formatTime(value?: string | null) {
|
||||
if (!value) return "-";
|
||||
const d = new Date(value);
|
||||
if (Number.isNaN(d.getTime())) return String(value);
|
||||
return d.toLocaleString("vi-VN");
|
||||
}
|
||||
|
||||
export default function SubmissionsPage() {
|
||||
const [items, setItems] = useState<Submission[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const limit = 20;
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [projectId, setProjectId] = useState("");
|
||||
const [status, setStatus] = useState<"ALL" | "PENDING" | "APPROVED" | "REJECTED">("PENDING");
|
||||
|
||||
const { isOpen, openModal, closeModal } = useModal();
|
||||
const [active, setActive] = useState<Submission | null>(null);
|
||||
const [decision, setDecision] = useState<Decision>("APPROVED");
|
||||
const [reviewNote, setReviewNote] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const query = useMemo(() => {
|
||||
const trimmedSearch = search.trim();
|
||||
const trimmedProject = projectId.trim();
|
||||
return {
|
||||
page,
|
||||
limit,
|
||||
project_id: trimmedProject.length ? trimmedProject : undefined,
|
||||
search: trimmedSearch.length ? trimmedSearch : undefined,
|
||||
statuses: status === "ALL" ? undefined : ([status] as any),
|
||||
sort: "created_at" as const,
|
||||
};
|
||||
}, [limit, page, projectId, search, status]);
|
||||
|
||||
const fetchList = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const res = await apiSearchSubmissions(query);
|
||||
const payload = res?.data;
|
||||
const rows = payload?.data || [];
|
||||
setItems(rows);
|
||||
setTotalPages(payload?.pagination?.total_pages || 1);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error("Khong the tai danh sach submissions.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchList();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [query]);
|
||||
|
||||
const openReview = (row: Submission, nextDecision: Decision) => {
|
||||
setActive(row);
|
||||
setDecision(nextDecision);
|
||||
setReviewNote("");
|
||||
openModal();
|
||||
};
|
||||
|
||||
const submitDecision = async () => {
|
||||
if (!active) return;
|
||||
const note = reviewNote.trim();
|
||||
if (note.length < 10) {
|
||||
toast.error("Review note toi thieu 10 ky tu.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
await apiUpdateSubmissionStatus(active.id, { status: decision, review_note: note });
|
||||
toast.success(decision === "APPROVED" ? "Da duyet submission." : "Da tu choi submission.");
|
||||
closeModal();
|
||||
await fetchList();
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
toast.error(err?.response?.data?.message || "Cap nhat trang thai that bai.");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto pb-10">
|
||||
<PageBreadcrumb pageTitle="Kiem duyet submissions" />
|
||||
|
||||
<div className="mt-6">
|
||||
<ComponentCard title="Danh sach submissions">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-5">
|
||||
<div className="md:col-span-2">
|
||||
<Label>Search</Label>
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => {
|
||||
setPage(1);
|
||||
setSearch(e.target.value);
|
||||
}}
|
||||
placeholder="Tim theo keyword (>= 2 ky tu)"
|
||||
className="h-11 w-full rounded-xl border border-gray-200 bg-transparent px-4 py-2.5 text-sm text-gray-800 outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-800 dark:text-white/90 dark:focus:border-brand-800"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Project ID</Label>
|
||||
<input
|
||||
value={projectId}
|
||||
onChange={(e) => {
|
||||
setPage(1);
|
||||
setProjectId(e.target.value);
|
||||
}}
|
||||
placeholder="UUID"
|
||||
className="h-11 w-full rounded-xl border border-gray-200 bg-transparent px-4 py-2.5 text-sm text-gray-800 outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-800 dark:text-white/90 dark:focus:border-brand-800"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Status</Label>
|
||||
<select
|
||||
value={status}
|
||||
onChange={(e) => {
|
||||
setPage(1);
|
||||
setStatus(e.target.value as any);
|
||||
}}
|
||||
className="h-11 w-full rounded-xl border border-gray-200 bg-transparent px-4 py-2.5 text-sm text-gray-800 outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-800 dark:text-white/90 dark:focus:border-brand-800"
|
||||
>
|
||||
<option value="PENDING">PENDING</option>
|
||||
<option value="APPROVED">APPROVED</option>
|
||||
<option value="REJECTED">REJECTED</option>
|
||||
<option value="ALL">ALL</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative min-h-[260px]">
|
||||
{isLoading ? (
|
||||
<div className="absolute inset-0 z-10 flex items-center justify-center bg-white/50 dark:bg-gray-900/50 rounded-xl">
|
||||
<div className="w-10 h-10 border-4 border-t-brand-500 rounded-full animate-spin" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<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-[900px]">
|
||||
<div className="grid grid-cols-12 gap-4 px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22] text-xs font-semibold text-gray-600 dark:text-gray-300">
|
||||
<div className="col-span-4">Project</div>
|
||||
<div className="col-span-2">Submitter</div>
|
||||
<div className="col-span-1">Status</div>
|
||||
<div className="col-span-2">Created</div>
|
||||
<div className="col-span-3 text-right">Actions</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{items.length === 0 ? (
|
||||
<div className="p-6 text-sm text-gray-500 dark:text-gray-400">Khong co submissions.</div>
|
||||
) : null}
|
||||
{items.map((row) => (
|
||||
<div
|
||||
key={row.id}
|
||||
className="grid grid-cols-12 gap-4 px-5 py-4 text-sm hover:bg-gray-50 dark:hover:bg-[#161b22] cursor-pointer"
|
||||
onClick={(e) => {
|
||||
const target = e.target as HTMLElement | null;
|
||||
if (target && target.closest("button")) return;
|
||||
window.location.href = `/user/submissions/${row.id}`;
|
||||
}}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") window.location.href = `/user/submissions/${row.id}`;
|
||||
}}
|
||||
>
|
||||
<div className="col-span-4 min-w-0">
|
||||
<div className="font-medium text-gray-800 dark:text-gray-200 truncate">
|
||||
{row.project_title || row.project_id}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
|
||||
Submission:{" "}
|
||||
<Link className="hover:underline" href={`/user/submissions/${row.id}`}>
|
||||
{row.id}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
|
||||
Commit: {row.commit_id}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2 min-w-0 text-xs text-gray-600 dark:text-gray-300 truncate">
|
||||
{row.user?.display_name || row.user?.email || row.user_id}
|
||||
</div>
|
||||
<div className="col-span-1">{statusBadge(row.status)}</div>
|
||||
<div className="col-span-2 text-xs text-gray-600 dark:text-gray-300">{formatTime(row.created_at)}</div>
|
||||
<div className="col-span-3 flex justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => (window.location.href = `/editor/${row.project_id}`)}
|
||||
>
|
||||
Open editor
|
||||
</Button>
|
||||
{row.status === "PENDING" ? (
|
||||
<>
|
||||
<Button size="sm" className="bg-brand-500 hover:bg-brand-600 text-white" onClick={() => openReview(row, "APPROVED")}>
|
||||
Duyet
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={() => openReview(row, "REJECTED")}>
|
||||
Tu choi
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button size="sm" variant="outline" onClick={() => openReview(row, row.status === "APPROVED" ? "REJECTED" : "APPROVED")}>
|
||||
Doi trang thai
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Page {page} / {totalPages}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>
|
||||
Prev
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page >= totalPages}>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ComponentCard>
|
||||
</div>
|
||||
|
||||
<Modal isOpen={isOpen} onClose={closeModal} className="max-w-[620px] m-4">
|
||||
<div className="p-6 bg-white rounded-3xl dark:bg-gray-900">
|
||||
<h3 className="mb-2 text-xl font-bold text-gray-800 dark:text-white/90">
|
||||
{decision === "APPROVED" ? "Duyet submission" : "Tu choi submission"}
|
||||
</h3>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mb-4 break-all">
|
||||
{active?.id}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div>
|
||||
<Label>Review note (>= 10 ky tu)</Label>
|
||||
<textarea
|
||||
rows={4}
|
||||
value={reviewNote}
|
||||
onChange={(e) => setReviewNote(e.target.value)}
|
||||
className="w-full rounded-xl border border-gray-200 bg-transparent px-4 py-3 text-sm text-gray-800 outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-800 dark:text-white/90 dark:focus:border-brand-800 custom-scrollbar"
|
||||
placeholder={decision === "APPROVED" ? "Ly do duyet..." : "Ly do tu choi..."}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-3 mt-2">
|
||||
<Button size="sm" variant="outline" type="button" onClick={closeModal} disabled={isSubmitting}>
|
||||
Huy
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
type="button"
|
||||
onClick={submitDecision}
|
||||
disabled={isSubmitting}
|
||||
className={decision === "APPROVED" ? "bg-brand-500 hover:bg-brand-600 text-white" : "bg-red-600 hover:bg-red-700 text-white"}
|
||||
>
|
||||
{isSubmitting ? "Dang xu ly..." : decision === "APPROVED" ? "Duyet" : "Tu choi"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user