93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
|
import { createFileRoute } from "@tanstack/react-router";
|
||
|
|
import { useState, useEffect } from "react";
|
||
|
|
import { useGetAudits } from "@/hooks/queries";
|
||
|
|
import type { Audits } from "@/types/audit";
|
||
|
|
import { AuditListTemplate } from "@/template/audit-list-template";
|
||
|
|
import { auditColumns } from "@/components/columns/audit-column";
|
||
|
|
|
||
|
|
export const Route = createFileRoute("/_auth/audits/")({
|
||
|
|
head: () => ({ meta: [{ title: "Audit Logs" }] }),
|
||
|
|
loader: async ({ context }) => {
|
||
|
|
context.breadcrumbs = [{ title: "Audit logs", path: "#" }];
|
||
|
|
},
|
||
|
|
component: AuditsPage,
|
||
|
|
});
|
||
|
|
|
||
|
|
function AuditsPage() {
|
||
|
|
const [pageNumber, setPageNumber] = useState(1);
|
||
|
|
const [pageSize] = useState(20);
|
||
|
|
const [username, setUsername] = useState<string | null>(null);
|
||
|
|
const [action, setAction] = useState<string | null>(null);
|
||
|
|
const [from, setFrom] = useState<string | null>(null);
|
||
|
|
const [to, setTo] = useState<string | null>(null);
|
||
|
|
const [selectedAudit, setSelectedAudit] = useState<Audits | null>(null);
|
||
|
|
|
||
|
|
const { data, isLoading, refetch, isFetching } = useGetAudits(
|
||
|
|
{
|
||
|
|
pageNumber,
|
||
|
|
pageSize,
|
||
|
|
username,
|
||
|
|
action,
|
||
|
|
from,
|
||
|
|
to,
|
||
|
|
},
|
||
|
|
true
|
||
|
|
) as any;
|
||
|
|
|
||
|
|
const items: Audits[] = data?.items ?? [];
|
||
|
|
const total: number = data?.totalCount ?? 0;
|
||
|
|
const pageCount = Math.max(1, Math.ceil(total / pageSize));
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
refetch();
|
||
|
|
}, [pageNumber, pageSize]);
|
||
|
|
|
||
|
|
const handleSearch = () => {
|
||
|
|
setPageNumber(1);
|
||
|
|
refetch();
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleReset = () => {
|
||
|
|
setUsername(null);
|
||
|
|
setAction(null);
|
||
|
|
setFrom(null);
|
||
|
|
setTo(null);
|
||
|
|
setPageNumber(1);
|
||
|
|
refetch();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AuditListTemplate
|
||
|
|
// data
|
||
|
|
items={items}
|
||
|
|
total={total}
|
||
|
|
columns={auditColumns}
|
||
|
|
isLoading={isLoading}
|
||
|
|
isFetching={isFetching}
|
||
|
|
// pagination
|
||
|
|
pageNumber={pageNumber}
|
||
|
|
pageSize={pageSize}
|
||
|
|
pageCount={pageCount}
|
||
|
|
canPreviousPage={pageNumber > 1}
|
||
|
|
canNextPage={pageNumber < pageCount}
|
||
|
|
onPreviousPage={() => setPageNumber((p) => Math.max(1, p - 1))}
|
||
|
|
onNextPage={() => setPageNumber((p) => Math.min(pageCount, p + 1))}
|
||
|
|
// filter
|
||
|
|
username={username}
|
||
|
|
action={action}
|
||
|
|
from={from}
|
||
|
|
to={to}
|
||
|
|
onUsernameChange={setUsername}
|
||
|
|
onActionChange={setAction}
|
||
|
|
onFromChange={setFrom}
|
||
|
|
onToChange={setTo}
|
||
|
|
onSearch={handleSearch}
|
||
|
|
onReset={handleReset}
|
||
|
|
// detail dialog
|
||
|
|
selectedAudit={selectedAudit}
|
||
|
|
onRowClick={setSelectedAudit}
|
||
|
|
onDialogClose={() => setSelectedAudit(null)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|