100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
|
import {
|
||
|
|
createFileRoute,
|
||
|
|
useParams,
|
||
|
|
useNavigate,
|
||
|
|
} from "@tanstack/react-router";
|
||
|
|
import { useMemo } from "react";
|
||
|
|
import { useGetClientFolderStatus } from "@/hooks/queries";
|
||
|
|
import type { ClientFolderStatus } from "@/types/folder";
|
||
|
|
import FolderStatusTemplate from "@/template/folder-status-template";
|
||
|
|
import {
|
||
|
|
createColumnHelper,
|
||
|
|
getCoreRowModel,
|
||
|
|
useReactTable,
|
||
|
|
} from "@tanstack/react-table";
|
||
|
|
|
||
|
|
export const Route = createFileRoute("/_auth/rooms/$roomName/folder-status/")({
|
||
|
|
head: ({ params }) => ({
|
||
|
|
meta: [{ title: `Trạng thái thư mục Setup phòng ${params.roomName}` }],
|
||
|
|
}),
|
||
|
|
loader: async ({ context, params }) => {
|
||
|
|
context.breadcrumbs = [
|
||
|
|
{ title: "Danh sách phòng", path: "/rooms/" },
|
||
|
|
{ title: `Phòng ${params.roomName}`, path: `/rooms/${params.roomName}/` },
|
||
|
|
{ title: `Trạng thái thư mục Setup phòng ${params.roomName}`, path: `/rooms/${params.roomName}/folder-status/` },
|
||
|
|
];
|
||
|
|
},
|
||
|
|
component: RouteComponent,
|
||
|
|
});
|
||
|
|
|
||
|
|
function RouteComponent() {
|
||
|
|
const { roomName } = useParams({
|
||
|
|
from: "/_auth/rooms/$roomName/folder-status/",
|
||
|
|
});
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const { data: folderStatusList = [], isLoading } = useGetClientFolderStatus(
|
||
|
|
roomName as string,
|
||
|
|
);
|
||
|
|
|
||
|
|
const columnHelper = createColumnHelper<ClientFolderStatus>();
|
||
|
|
|
||
|
|
const columns = useMemo(
|
||
|
|
() => [
|
||
|
|
columnHelper.accessor("deviceId", {
|
||
|
|
header: "Máy tính",
|
||
|
|
cell: (info) => info.getValue() ?? "-",
|
||
|
|
}),
|
||
|
|
columnHelper.display({
|
||
|
|
id: "missing",
|
||
|
|
header: "Số lượng file thiếu",
|
||
|
|
cell: (info) =>
|
||
|
|
(info.row.original.missingFiles?.length ?? 0).toString(),
|
||
|
|
}),
|
||
|
|
columnHelper.display({
|
||
|
|
id: "extra",
|
||
|
|
header: "Số lượng file thừa",
|
||
|
|
cell: (info) => (info.row.original.extraFiles?.length ?? 0).toString(),
|
||
|
|
}),
|
||
|
|
columnHelper.display({
|
||
|
|
id: "current",
|
||
|
|
header: "Số lượng file hiện tại",
|
||
|
|
cell: (info) =>
|
||
|
|
(info.row.original.currentFiles?.length ?? 0).toString(),
|
||
|
|
}),
|
||
|
|
columnHelper.accessor("updatedAt", {
|
||
|
|
header: "Updated",
|
||
|
|
cell: (info) => {
|
||
|
|
const v = info.getValue();
|
||
|
|
try {
|
||
|
|
const d = new Date(v as string);
|
||
|
|
return isNaN(d.getTime())
|
||
|
|
? (v as string)
|
||
|
|
: d.toLocaleString("vi-VN");
|
||
|
|
} catch {
|
||
|
|
return v as string;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
[],
|
||
|
|
);
|
||
|
|
|
||
|
|
const table = useReactTable({
|
||
|
|
data: folderStatusList ?? [],
|
||
|
|
columns,
|
||
|
|
getCoreRowModel: getCoreRowModel(),
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<FolderStatusTemplate
|
||
|
|
roomName={roomName as string}
|
||
|
|
data={folderStatusList}
|
||
|
|
isLoading={isLoading}
|
||
|
|
onBack={() =>
|
||
|
|
navigate({ to: "/rooms/$roomName/", params: { roomName } } as any)
|
||
|
|
}
|
||
|
|
table={table}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|