update application page, table.
This commit is contained in:
@@ -16,23 +16,48 @@ import {
|
||||
GetApplicationsParams,
|
||||
} from "@/interface/historian";
|
||||
import ApplicationDetailModal from "@/components/tables/ApplicationDetailModal";
|
||||
import { LIMIT_ITEM_TABLE } from "../../../../../../constant";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const formatDateTimeToISO = (
|
||||
dateStr: string,
|
||||
timeStr: string,
|
||||
isEndOfDay: boolean = false,
|
||||
): string | undefined => {
|
||||
if (!dateStr) return undefined;
|
||||
|
||||
const time = timeStr || (isEndOfDay ? "23:59" : "00:00");
|
||||
|
||||
return `${dateStr}T${time}:00.000000+07:00`;
|
||||
};
|
||||
|
||||
export default function HistorianApplicationPage() {
|
||||
const [page, setPage] = useState<number>(1);
|
||||
const [limitInput, setLimitInput] = useState<string>("3");
|
||||
const [limitInput, setLimitInput] = useState<string>(
|
||||
LIMIT_ITEM_TABLE.toString(),
|
||||
);
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState<string>("");
|
||||
const [statusFilter, setStatusFilter] = useState<string>("");
|
||||
const [verifyTypeFilter, setVerifyTypeFilter] = useState<string>("");
|
||||
|
||||
const [fromDate, setFromDate] = useState<string>("");
|
||||
const [fromTime, setFromTime] = useState<string>("");
|
||||
const [toDate, setToDate] = useState<string>("");
|
||||
const [toTime, setToTime] = useState<string>("");
|
||||
|
||||
const [selectedApp, setSelectedApp] = useState<ApplicationDto | null>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const [debouncedParams, setDebouncedParams] = useState({
|
||||
search: "",
|
||||
limit: 3,
|
||||
limit: LIMIT_ITEM_TABLE,
|
||||
status: "",
|
||||
verifyType: "",
|
||||
fromDate: "",
|
||||
fromTime: "",
|
||||
toDate: "",
|
||||
toTime: "",
|
||||
});
|
||||
|
||||
const [tableData, setTableData] = useState<ApplicationResponse | null>(null);
|
||||
@@ -41,18 +66,65 @@ export default function HistorianApplicationPage() {
|
||||
const [sortBy, setSortBy] = useState<AppSortColumn>("created_at");
|
||||
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
|
||||
|
||||
const handleReset = () => {
|
||||
setSearchTerm("");
|
||||
setStatusFilter("");
|
||||
setVerifyTypeFilter("");
|
||||
setLimitInput(LIMIT_ITEM_TABLE.toString());
|
||||
|
||||
setFromDate("");
|
||||
setFromTime("");
|
||||
setToDate("");
|
||||
setToTime("");
|
||||
|
||||
setPage(1);
|
||||
|
||||
setDebouncedParams({
|
||||
search: "",
|
||||
limit: LIMIT_ITEM_TABLE,
|
||||
status: "",
|
||||
verifyType: "",
|
||||
fromDate: "",
|
||||
fromTime: "",
|
||||
toDate: "",
|
||||
toTime: "",
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedParams({
|
||||
search: searchTerm,
|
||||
limit: parseInt(limitInput) || 3,
|
||||
limit: parseInt(limitInput) || LIMIT_ITEM_TABLE,
|
||||
status: statusFilter,
|
||||
verifyType: verifyTypeFilter,
|
||||
fromDate,
|
||||
fromTime,
|
||||
toDate,
|
||||
toTime,
|
||||
});
|
||||
setPage(1);
|
||||
}, 600);
|
||||
return () => clearTimeout(handler);
|
||||
}, [searchTerm, limitInput, statusFilter, verifyTypeFilter]);
|
||||
}, [
|
||||
searchTerm,
|
||||
limitInput,
|
||||
statusFilter,
|
||||
verifyTypeFilter,
|
||||
fromDate,
|
||||
fromTime,
|
||||
toDate,
|
||||
toTime,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchApplications();
|
||||
}, [
|
||||
page,
|
||||
debouncedParams,
|
||||
sortBy,
|
||||
sortOrder,
|
||||
]);
|
||||
|
||||
const fetchApplications = useCallback(async () => {
|
||||
setLoading(true);
|
||||
@@ -65,16 +137,32 @@ export default function HistorianApplicationPage() {
|
||||
order: sortOrder,
|
||||
};
|
||||
|
||||
// Backend yêu cầu mảng cho các filter này
|
||||
if (debouncedParams.status) payload.statuses = [debouncedParams.status];
|
||||
if (debouncedParams.verifyType)
|
||||
payload.verify_types = [debouncedParams.verifyType];
|
||||
payload.verify_types = debouncedParams.verifyType;
|
||||
|
||||
const createdFrom = formatDateTimeToISO(
|
||||
debouncedParams.fromDate,
|
||||
debouncedParams.fromTime,
|
||||
false,
|
||||
);
|
||||
if (createdFrom) payload.created_from = createdFrom;
|
||||
|
||||
const createdTo = formatDateTimeToISO(
|
||||
debouncedParams.toDate,
|
||||
debouncedParams.toTime,
|
||||
true,
|
||||
);
|
||||
if (createdTo) payload.created_to = createdTo;
|
||||
|
||||
// console.log("Payload sent to API:", payload);
|
||||
|
||||
const response = await apiGetUserApplications(payload);
|
||||
if (response?.status) {
|
||||
setTableData(response);
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error("Lỗi lấy danh sách hồ sơ");
|
||||
console.error("Lỗi lấy danh sách hồ sơ:", err);
|
||||
setTableData(null);
|
||||
} finally {
|
||||
@@ -82,10 +170,6 @@ export default function HistorianApplicationPage() {
|
||||
}
|
||||
}, [page, debouncedParams, sortBy, sortOrder]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchApplications();
|
||||
}, [fetchApplications]);
|
||||
|
||||
const handleSort = (column: AppSortColumn) => {
|
||||
setPage(1);
|
||||
if (sortBy === column) {
|
||||
@@ -105,11 +189,35 @@ export default function HistorianApplicationPage() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageBreadcrumb pageTitle="Quản lý hồ sơ Sử gia" />
|
||||
<PageBreadcrumb pageTitle="Quản lý hồ sơ" />
|
||||
|
||||
<div className="space-y-6">
|
||||
<ComponentCard title="Bộ lọc tìm kiếm">
|
||||
<div className="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
<ComponentCard
|
||||
title="Bộ lọc tìm kiếm"
|
||||
headerAction={
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="flex items-center px-3 py-1.5 text-xs text-red-500 transition-colors border-red-100 dark:bg-red-500/10 dark:border-red-500/20 dark:hover:bg-red-500/20"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-7 h-7"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2.5}
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
}
|
||||
>
|
||||
{/* Cập nhật Grid để chứa đủ các ô filter */}
|
||||
<div className="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<div>
|
||||
<label className="block mb-2 text-sm font-medium">Tìm kiếm</label>
|
||||
<input
|
||||
@@ -154,6 +262,42 @@ export default function HistorianApplicationPage() {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block mb-2 text-sm font-medium">Từ ngày</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="date"
|
||||
value={fromDate}
|
||||
onChange={(e) => setFromDate(e.target.value)}
|
||||
className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
|
||||
/>
|
||||
<input
|
||||
type="time"
|
||||
value={fromTime}
|
||||
onChange={(e) => setFromTime(e.target.value)}
|
||||
className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block mb-2 text-sm font-medium">Đến ngày</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="date"
|
||||
value={toDate}
|
||||
onChange={(e) => setToDate(e.target.value)}
|
||||
className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
|
||||
/>
|
||||
<input
|
||||
type="time"
|
||||
value={toTime}
|
||||
onChange={(e) => setToTime(e.target.value)}
|
||||
className="w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 outline-none focus:border-brand-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block mb-2 text-sm font-medium">
|
||||
Hiển thị (Limit)
|
||||
@@ -201,11 +345,11 @@ export default function HistorianApplicationPage() {
|
||||
</ComponentCard>
|
||||
</div>
|
||||
|
||||
<ApplicationDetailModal
|
||||
<ApplicationDetailModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
application={selectedApp || null}
|
||||
onRefresh={fetchApplications} // Tải lại bảng sau khi Admin duyệt
|
||||
onRefresh={fetchApplications}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user