93 lines
2.0 KiB
TypeScript
93 lines
2.0 KiB
TypeScript
import { GridColDef, GridSelectionModel, GridToolbar } from "@mui/x-data-grid";
|
|
import { Skeleton } from "@mui/material";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import DataGrid from "@kitUI/datagrid";
|
|
|
|
import type { UserType } from "@root/api/roles";
|
|
|
|
const columns: GridColDef<UserType, string>[] = [
|
|
{
|
|
field: "login",
|
|
headerName: "Логин",
|
|
width: 200,
|
|
valueGetter: ({ row }) => row.login,
|
|
},
|
|
{
|
|
field: "email",
|
|
headerName: "E-mail",
|
|
width: 200,
|
|
valueGetter: ({ row }) => row.email,
|
|
},
|
|
{
|
|
field: "phoneNumber",
|
|
headerName: "Номер телефона",
|
|
width: 200,
|
|
valueGetter: ({ row }) => row.phoneNumber,
|
|
},
|
|
{
|
|
field: "isDeleted",
|
|
headerName: "Удалено",
|
|
width: 100,
|
|
valueGetter: ({ row }) => `${row.isDeleted ? "true" : "false"}`,
|
|
},
|
|
{
|
|
field: "createdAt",
|
|
headerName: "Дата создания",
|
|
width: 200,
|
|
valueGetter: ({ row }) => row.createdAt,
|
|
},
|
|
];
|
|
|
|
interface Props {
|
|
handleSelectionChange: (selectionModel: GridSelectionModel) => void;
|
|
users: UserType[];
|
|
page: number;
|
|
setPage: (page: number) => void;
|
|
pageSize: number;
|
|
pagesCount: number;
|
|
onPageSizeChange?: (count: number) => void;
|
|
}
|
|
|
|
export default function ServiceUsersDG({
|
|
handleSelectionChange,
|
|
users = [],
|
|
page,
|
|
setPage,
|
|
pageSize = 10,
|
|
pagesCount = 1,
|
|
onPageSizeChange,
|
|
}: Props) {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<>
|
|
{users.length ? (
|
|
<DataGrid
|
|
sx={{ maxWidth: "90%", mt: "30px" }}
|
|
getRowId={(users) => users._id}
|
|
checkboxSelection={true}
|
|
rows={users}
|
|
columns={columns}
|
|
components={{ Toolbar: GridToolbar }}
|
|
rowCount={pageSize * pagesCount}
|
|
rowsPerPageOptions={[10, 25, 50, 100]}
|
|
paginationMode="server"
|
|
page={page}
|
|
pageSize={pageSize}
|
|
onPageChange={setPage}
|
|
onPageSizeChange={onPageSizeChange}
|
|
onSelectionModelChange={handleSelectionChange}
|
|
onCellClick={({ row }, event) => {
|
|
event.stopPropagation();
|
|
|
|
navigate(row._id);
|
|
}}
|
|
/>
|
|
) : (
|
|
<Skeleton>Loading...</Skeleton>
|
|
)}
|
|
</>
|
|
);
|
|
}
|