refactor state storge, UI editor
This commit is contained in:
taDuc
@@ -1,330 +0,0 @@
|
||||
"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 { normalizeEditorSnapshot } from "@/uhm/lib/editor/snapshot/editorSnapshot";
|
||||
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 = normalizeEditorSnapshot(commit?.snapshot_json || 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">Da tai snapshot.</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>
|
||||
);
|
||||
}
|
||||
@@ -1,326 +0,0 @@
|
||||
"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