taDuc
645 lines
26 KiB
TypeScript
645 lines
26 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useMemo, useRef, useState } from "react";
|
|
import Image from "next/image";
|
|
import { useRouter } from "next/navigation";
|
|
import ComponentCard from "@/components/common/ComponentCard";
|
|
import { toast } from "sonner";
|
|
import { useModal } from "@/hooks/useModal";
|
|
import { Modal } from "@/components/ui/modal";
|
|
import Button from "@/components/ui/button/Button";
|
|
import Label from "@/components/form/Label";
|
|
import Badge from "@/components/ui/badge/Badge";
|
|
import { CreateProjectPayload, Project, ProjectMember } from "@/interface/project";
|
|
import {
|
|
apiCreateProject,
|
|
apiCreateProjectCommit,
|
|
apiGetProjectCommits,
|
|
getCurrentProject,
|
|
} from "@/service/projectService";
|
|
import { normalizeEditorSnapshot, toApiEditorSnapshot } from "@/uhm/lib/editor/snapshot/editorSnapshot";
|
|
import type { EditorSnapshot, ProjectCommit } from "@/uhm/types/projects";
|
|
import StickyHeader from "@/components/ui/StickyHeader";
|
|
|
|
export type ProjectSortColumn = "created_at" | "updated_at" | "title";
|
|
|
|
function isRecord(value: unknown): value is Record<string, unknown> {
|
|
return !!value && typeof value === "object" && !Array.isArray(value);
|
|
}
|
|
|
|
function extractProjectCommitList(value: unknown): ProjectCommit[] {
|
|
let rows: unknown[] = [];
|
|
if (Array.isArray(value)) {
|
|
rows = value;
|
|
} else if (isRecord(value)) {
|
|
if (Array.isArray(value.items)) {
|
|
rows = value.items;
|
|
} else if (Array.isArray(value.data)) {
|
|
rows = value.data;
|
|
} else if (isRecord(value.data) && Array.isArray(value.data.items)) {
|
|
rows = value.data.items;
|
|
}
|
|
}
|
|
return rows.filter((row): row is ProjectCommit => isRecord(row) && typeof row.id === "string");
|
|
}
|
|
|
|
export default function ProjectsPage() {
|
|
const router = useRouter();
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [isExportingProjectId, setIsExportingProjectId] = useState<
|
|
string | null
|
|
>(null);
|
|
|
|
const [sortBy, setSortBy] = useState<ProjectSortColumn>("updated_at");
|
|
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
|
|
|
|
const { isOpen, openModal, closeModal } = useModal();
|
|
const [formData, setFormData] = useState<CreateProjectPayload>({
|
|
title: "",
|
|
description: "",
|
|
status: "PRIVATE",
|
|
});
|
|
const importJsonInputRef = useRef<HTMLInputElement | null>(null);
|
|
const [importSnapshot, setImportSnapshot] = useState<EditorSnapshot | null>(
|
|
null,
|
|
);
|
|
const [importSnapshotName, setImportSnapshotName] = useState<string | null>(
|
|
null,
|
|
);
|
|
|
|
const fetchProjects = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const res = await getCurrentProject();
|
|
setProjects(res?.data?.items || res?.data || []);
|
|
} catch (error) {
|
|
console.error("Lỗi khi tải danh sách dự án:", error);
|
|
toast.error("Không thể tải danh sách dự án. Vui lòng thử lại!");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchProjects();
|
|
}, []);
|
|
|
|
// 1. Cập nhật lại hàm handleChange để đảm bảo bắt giá trị chính xác từ thẻ select
|
|
const handleChange = (
|
|
e: React.ChangeEvent<
|
|
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
|
|
>,
|
|
) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[name]: value, // Đảm bảo value từ select được gán chính xác vào key status
|
|
}));
|
|
};
|
|
|
|
const handleCreateProject = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!formData.title.trim()) {
|
|
toast.warning("Vui lòng nhập tên dự án!");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsSubmitting(true);
|
|
// Bước 1: Luôn tạo project trước
|
|
const created = await apiCreateProject(formData);
|
|
const projectId = created?.data?.id;
|
|
|
|
if (!projectId) {
|
|
toast.error("Tạo dự án thất bại: không nhận được ID dự án.");
|
|
setIsSubmitting(false); // Dừng sớm nếu không có ID
|
|
return;
|
|
}
|
|
|
|
// Bước 2: Nếu có snapshot, tạo commit ban đầu từ JSON
|
|
if (importSnapshot) {
|
|
const snapshot = toApiEditorSnapshot(importSnapshot);
|
|
await apiCreateProjectCommit(projectId, {
|
|
edit_summary: `Init project from ${importSnapshotName || "JSON"}`,
|
|
snapshot_json: snapshot,
|
|
});
|
|
toast.success("Tạo dự án từ JSON thành công!");
|
|
} else {
|
|
toast.success("Tạo dự án mới thành công!");
|
|
}
|
|
|
|
// Bước 3: Dọn dẹp state và chuyển hướng
|
|
closeModal();
|
|
setFormData({ title: "", description: "", status: "PRIVATE" });
|
|
setImportSnapshot(null);
|
|
setImportSnapshotName(null);
|
|
if (importJsonInputRef.current) importJsonInputRef.current.value = "";
|
|
fetchProjects();
|
|
router.push(`/editor/${projectId}`);
|
|
} catch (error) {
|
|
console.error("Lỗi tạo dự án:", error);
|
|
toast.error("Có lỗi xảy ra khi tạo dự án.");
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleExportHeadSnapshot = async (project: Project) => {
|
|
const projectId = String(project.id || "").trim();
|
|
if (!projectId) return;
|
|
const headCommitId = project.latest_commit_id
|
|
? String(project.latest_commit_id)
|
|
: "";
|
|
if (!headCommitId) {
|
|
toast.warning("Dự án chưa có head commit để export.");
|
|
return;
|
|
}
|
|
setIsExportingProjectId(projectId);
|
|
try {
|
|
const res = await apiGetProjectCommits(projectId);
|
|
const commits = extractProjectCommitList(res);
|
|
const head =
|
|
commits.find((c) => String(c.id || "") === headCommitId) || null;
|
|
const snapshot = head?.snapshot_json ?? null;
|
|
if (!snapshot) {
|
|
toast.error("Không tìm thấy snapshot_json của head commit.");
|
|
return;
|
|
}
|
|
const blob = new Blob([JSON.stringify(snapshot, null, 2)], {
|
|
type: "application/json;charset=utf-8",
|
|
});
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = `project-${projectId}-head-${headCommitId}.json`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
URL.revokeObjectURL(url);
|
|
toast.success("Đã export JSON snapshot.");
|
|
} catch (err) {
|
|
console.error("Export snapshot failed", err);
|
|
toast.error("Export thất bại.");
|
|
} finally {
|
|
setIsExportingProjectId(null);
|
|
}
|
|
};
|
|
|
|
const handlePickImportJson = () => {
|
|
importJsonInputRef.current?.click();
|
|
};
|
|
|
|
const handleImportJsonFile = async (file: File | null) => {
|
|
if (!file) return;
|
|
try {
|
|
const text = await file.text();
|
|
const raw = JSON.parse(text) as unknown;
|
|
const normalized = normalizeEditorSnapshot(raw);
|
|
if (!normalized) {
|
|
toast.error("JSON snapshot không hợp lệ.");
|
|
return;
|
|
}
|
|
setImportSnapshot(normalized);
|
|
setImportSnapshotName(file.name);
|
|
toast.success("Đã nạp JSON snapshot. Bấm 'Tạo dự án' để hoàn tất.");
|
|
} catch (err) {
|
|
console.error("Import JSON failed", err);
|
|
toast.error("Không đọc được file JSON.");
|
|
}
|
|
};
|
|
|
|
const handleSort = (column: ProjectSortColumn) => {
|
|
if (sortBy === column) {
|
|
setSortOrder(sortOrder === "asc" ? "desc" : "asc");
|
|
} else {
|
|
setSortBy(column);
|
|
setSortOrder("desc");
|
|
}
|
|
};
|
|
|
|
const sortedProjects = [...projects].sort((a, b) => {
|
|
const valA = String(a[sortBy] || "");
|
|
const valB = String(b[sortBy] || "");
|
|
|
|
if (valA < valB) return sortOrder === "asc" ? -1 : 1;
|
|
if (valA > valB) return sortOrder === "asc" ? 1 : -1;
|
|
return 0;
|
|
});
|
|
|
|
const formatDate = (dateString: string | null | undefined) => {
|
|
if (!dateString) return "-";
|
|
const date = new Date(dateString);
|
|
if (isNaN(date.getTime())) return "-";
|
|
return date.toLocaleDateString("vi-VN", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
};
|
|
|
|
const getStatusBadge = (status: string) => {
|
|
switch (status) {
|
|
case "PUBLIC":
|
|
return (
|
|
<Badge size="sm" variant="light" color="success">
|
|
PUBLIC
|
|
</Badge>
|
|
);
|
|
case "PRIVATE":
|
|
return (
|
|
<Badge size="sm" variant="light" color="warning">
|
|
PRIVATE
|
|
</Badge>
|
|
);
|
|
case "ARCHIVE":
|
|
return (
|
|
<Badge size="sm" variant="light" color="light">
|
|
ARCHIVE
|
|
</Badge>
|
|
);
|
|
default:
|
|
return (
|
|
<Badge size="sm" variant="light" color="dark">
|
|
{status}
|
|
</Badge>
|
|
);
|
|
}
|
|
};
|
|
|
|
const SortButton = ({
|
|
column,
|
|
label,
|
|
}: {
|
|
column: ProjectSortColumn;
|
|
label: string;
|
|
}) => {
|
|
const isActive = sortBy === column;
|
|
return (
|
|
<button
|
|
onClick={() => handleSort(column)}
|
|
className={`flex items-center gap-1 text-sm font-medium hover:text-blue-500 transition-colors ${
|
|
isActive
|
|
? "text-blue-600 dark:text-blue-400"
|
|
: "text-gray-500 dark:text-gray-400"
|
|
}`}
|
|
>
|
|
<span>{label}</span>
|
|
{isActive && <span>{sortOrder === "asc" ? "↑" : "↓"}</span>}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
const importLabel = useMemo(() => {
|
|
if (!importSnapshotName) return "Chưa chọn JSON snapshot";
|
|
return `JSON: ${importSnapshotName}`;
|
|
}, [importSnapshotName]);
|
|
|
|
// const path =[
|
|
// {name: "Thư viện", href:"/user/library/"}
|
|
// ]
|
|
return (
|
|
<div className="mx-auto pb-10">
|
|
{/* <PageBreadcrumb pageTitle="Quản lý dự án" /> */}
|
|
<StickyHeader header={`Quản lý dự án`} />
|
|
<div className="mt-6">
|
|
<ComponentCard
|
|
title="Danh sách dự án"
|
|
headerAction={
|
|
<Button
|
|
size="sm"
|
|
onClick={openModal}
|
|
className="bg-brand-500 hover:bg-brand-600 text-white rounded-4xl! "
|
|
>
|
|
+ Tạo dự án mới
|
|
</Button>
|
|
}
|
|
>
|
|
<div className="relative min-h-[300px]">
|
|
{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>
|
|
</div>
|
|
)}
|
|
|
|
{!isLoading && sortedProjects.length > 0 ? (
|
|
<div className="max-w-full overflow-x-auto">
|
|
<div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-[#0d1117] min-w-[800px]">
|
|
<div className="flex items-center px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22]">
|
|
<div className="flex-1 pr-4">
|
|
<SortButton column="title" label="Tên dự án" />
|
|
</div>
|
|
<div className="w-48 px-4 text-sm font-medium text-gray-500 dark:text-gray-400">
|
|
Trạng thái
|
|
</div>
|
|
<div className="w-48 px-4 text-sm font-medium text-gray-500 dark:text-gray-400">
|
|
Thành viên
|
|
</div>
|
|
<div className="w-32 px-4">
|
|
<SortButton column="updated_at" label="Cập nhật" />
|
|
</div>
|
|
<div className="w-48 px-4 text-sm font-medium text-gray-500 dark:text-gray-400 text-right">
|
|
Thao tác
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
|
|
{sortedProjects.map((project) => (
|
|
<div
|
|
key={project.id}
|
|
className="group flex items-center p-5 hover:bg-gray-50 dark:hover:bg-[#161b22]/50 transition-colors"
|
|
>
|
|
<div className="flex-1 pr-4 min-w-0">
|
|
<div className="items-center gap-3 mb-1.5">
|
|
<h3
|
|
onClick={() =>
|
|
router.push(`/user/projects/${project.id}`)
|
|
}
|
|
className="font-semibold text-blue-600 dark:text-[#58a6ff] truncate cursor-pointer hover:underline"
|
|
>
|
|
{project.title}
|
|
</h3>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs text-gray-500 dark:text-[#8b949e]">
|
|
<div className="flex items-center gap-1.5">
|
|
{project.user?.avatar_url ? (
|
|
<Image
|
|
src={project.user.avatar_url}
|
|
alt="avatar"
|
|
width={16}
|
|
height={16}
|
|
className="rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
|
|
<span className="text-[8px] font-bold text-gray-500 dark:text-gray-300">
|
|
{project.user?.display_name
|
|
?.charAt(0)
|
|
?.toUpperCase() || "U"}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<span className="truncate max-w-[150px]">
|
|
{project.user?.display_name || "Unknown"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-48 px-4 shrink-0">
|
|
{getStatusBadge(project.project_status)}
|
|
</div>
|
|
|
|
<div className="w-48 px-4 shrink-0">
|
|
<div className="flex -space-x-2 overflow-hidden">
|
|
{project.members && project.members.length > 0 ? (
|
|
<>
|
|
{project.members
|
|
.slice(0, 4)
|
|
.map((m: ProjectMember, index: number) =>
|
|
m.avatar_url ? (
|
|
<Image
|
|
key={index}
|
|
src={m.avatar_url}
|
|
alt={m.display_name}
|
|
width={32}
|
|
height={32}
|
|
title={m.display_name}
|
|
className="inline-block w-8 h-8 rounded-full object-cover ring-2 ring-white dark:ring-[#0d1117]"
|
|
/>
|
|
) : (
|
|
<div
|
|
key={index}
|
|
title={m.display_name}
|
|
className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 ring-2 ring-white dark:ring-[#0d1117]"
|
|
>
|
|
<span className="text-xs font-medium text-gray-500 dark:text-gray-300">
|
|
{m.display_name
|
|
?.charAt(0)
|
|
?.toUpperCase() || "U"}
|
|
</span>
|
|
</div>
|
|
),
|
|
)}
|
|
{project.members.length > 4 && (
|
|
<div
|
|
title="Những người khác"
|
|
className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 ring-2 ring-white dark:ring-[#0d1117] z-10"
|
|
>
|
|
<span className="text-xs font-medium text-gray-600 dark:text-gray-400">
|
|
+{project.members.length - 4}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<span className="text-xs text-gray-400 dark:text-gray-600 italic"></span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-32 px-1 shrink-0 text-xs text-gray-500 dark:text-gray-400">
|
|
{formatDate(project.updated_at)}
|
|
</div>
|
|
|
|
<div className="w-48 px-4 shrink-0 flex justify-end gap-2">
|
|
<div className="relative group/btn1 inline-flex">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="!p-0 w-9 h-9 flex items-center justify-center"
|
|
onClick={() =>
|
|
router.push(`/editor/${project.id}`)
|
|
}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
className="w-4 h-4"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
<span className="absolute -top-8 left-1/2 -translate-x-1/2 scale-0 rounded bg-gray-900 px-2 py-1 text-[11px] font-medium text-white opacity-0 transition-all group-hover/btn1:scale-100 group-hover/btn1:opacity-100 z-50 pointer-events-none whitespace-nowrap shadow-sm dark:bg-gray-700">
|
|
Editor
|
|
</span>
|
|
</div>
|
|
|
|
<div className="relative group/btn2 inline-flex">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="!p-0 w-9 h-9 flex items-center justify-center"
|
|
disabled={
|
|
isExportingProjectId === String(project.id)
|
|
}
|
|
onClick={() => handleExportHeadSnapshot(project)}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
className="w-4 h-4"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
<span className="absolute -top-8 left-1/2 -translate-x-1/2 scale-0 rounded bg-gray-900 px-2 py-1 text-[11px] font-medium text-white opacity-0 transition-all group-hover/btn2:scale-100 group-hover/btn2:opacity-100 z-50 pointer-events-none whitespace-nowrap shadow-sm dark:bg-gray-700">
|
|
Export JSON
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
!isLoading && (
|
|
<div className="py-20 text-center">
|
|
<p className="text-gray-500 dark:text-gray-400">
|
|
Bạn chưa có dự án nào.
|
|
</p>
|
|
<Button
|
|
size="sm"
|
|
onClick={openModal}
|
|
className="mt-4 bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 hover:bg-gray-200"
|
|
>
|
|
Tạo dự án đầu tiên
|
|
</Button>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
</ComponentCard>
|
|
</div>
|
|
|
|
<Modal isOpen={isOpen} onClose={closeModal} className="max-w-[500px] m-4">
|
|
<div className="p-6 bg-white rounded-3xl dark:bg-gray-900">
|
|
<h3 className="mb-5 text-xl font-bold text-gray-800 dark:text-white/90">
|
|
Tạo dự án mới
|
|
</h3>
|
|
<form onSubmit={handleCreateProject} className="flex flex-col gap-5">
|
|
<div>
|
|
<Label>
|
|
Tên dự án <span className="text-red-500">*</span>
|
|
</Label>
|
|
<input
|
|
type="text"
|
|
name="title"
|
|
value={formData.title}
|
|
onChange={handleChange}
|
|
placeholder="Nhập tên dự án..."
|
|
autoFocus
|
|
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>Trạng thái</Label>
|
|
<select
|
|
name="status"
|
|
value={formData.status || "PRIVATE"} // Fallback về PRIVATE nếu undefined
|
|
onChange={handleChange}
|
|
className="h-11 w-full rounded-xl border border-gray-200 bg-white 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:bg-gray-900 dark:focus:border-brand-800"
|
|
>
|
|
<option
|
|
value="PRIVATE"
|
|
className="text-gray-800 dark:text-white bg-white dark:bg-gray-900"
|
|
>
|
|
Riêng tư (Private)
|
|
</option>
|
|
<option
|
|
value="PUBLIC"
|
|
className="text-gray-800 dark:text-white bg-white dark:bg-gray-900"
|
|
>
|
|
Công khai (Public)
|
|
</option>
|
|
<option
|
|
value="ARCHIVE"
|
|
className="text-gray-800 dark:text-white bg-white dark:bg-gray-900"
|
|
>
|
|
Lưu trữ (Archive)
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<Label>Mô tả dự án</Label>
|
|
<textarea
|
|
name="description"
|
|
value={formData.description}
|
|
onChange={handleChange}
|
|
rows={4}
|
|
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="Mô tả ngắn gọn về dự án..."
|
|
></textarea>
|
|
</div>
|
|
<div>
|
|
<Label>Khởi tạo từ JSON</Label>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
type="button"
|
|
onClick={handlePickImportJson}
|
|
>
|
|
Chọn JSON
|
|
</Button>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
|
|
{importLabel}
|
|
</div>
|
|
</div>
|
|
<input
|
|
ref={importJsonInputRef}
|
|
type="file"
|
|
accept="application/json"
|
|
className="hidden"
|
|
onChange={(e) =>
|
|
handleImportJsonFile(e.target.files?.[0] || null)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-end gap-3 mt-4">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
type="button"
|
|
onClick={closeModal}
|
|
>
|
|
Hủy
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="bg-indigo-600 hover:bg-indigo-700 text-white"
|
|
>
|
|
{isSubmitting
|
|
? "Đang xử lý..."
|
|
: importSnapshot
|
|
? "Tạo với JSON"
|
|
: "Tạo dự án"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|