forked from VinokurovVE/tests
103 lines
3.9 KiB
TypeScript
103 lines
3.9 KiB
TypeScript
import { Box, Button, CircularProgress, Modal } from "@mui/material"
|
||
import { DataGrid, GridColDef } from "@mui/x-data-grid"
|
||
import { useRoles, useUsers } from "../hooks/swrHooks"
|
||
import { IRole } from "../interfaces/role"
|
||
import { useState } from "react"
|
||
import { CreateField } from "../interfaces/create"
|
||
import UserService from "../services/UserService"
|
||
import FormFields from "../components/FormFields"
|
||
|
||
export default function Users() {
|
||
const { users, isError, isLoading } = useUsers()
|
||
|
||
const { roles } = useRoles()
|
||
|
||
const [open, setOpen] = useState(false)
|
||
|
||
const createFields: CreateField[] = [
|
||
{ key: 'email', headerName: 'E-mail', type: 'string', required: true, defaultValue: '' },
|
||
{ key: 'login', headerName: 'Логин', type: 'string', required: true, defaultValue: '' },
|
||
{ key: 'phone', headerName: 'Телефон', type: 'string', required: false, defaultValue: '' },
|
||
{ key: 'name', headerName: 'Имя', type: 'string', required: true, defaultValue: '' },
|
||
{ key: 'surname', headerName: 'Фамилия', type: 'string', required: true, defaultValue: '' },
|
||
{ key: 'password', headerName: 'Пароль', type: 'string', required: true, defaultValue: '' },
|
||
]
|
||
|
||
const columns: GridColDef[] = [
|
||
{ field: 'id', headerName: 'ID', type: "number", width: 70 },
|
||
{ field: 'email', headerName: 'Email', width: 130, editable: true },
|
||
{ field: 'login', headerName: 'Логин', width: 130, editable: true },
|
||
{ field: 'phone', headerName: 'Телефон', width: 90, editable: true },
|
||
{ field: 'name', headerName: 'Имя', width: 90, editable: true },
|
||
{ field: 'surname', headerName: 'Фамилия', width: 90, editable: true },
|
||
{ field: 'is_active', headerName: 'Активен', type: "boolean", width: 90, editable: true },
|
||
{
|
||
field: 'role_id',
|
||
headerName: 'Роль',
|
||
valueOptions: roles ? roles.map((role: IRole) => ({ label: role.name, value: role.id })) : [],
|
||
type: 'singleSelect',
|
||
width: 90,
|
||
editable: true
|
||
},
|
||
];
|
||
|
||
if (isError) return <div>Произошла ошибка при получении данных.</div>
|
||
if (isLoading) return <CircularProgress />
|
||
|
||
return (
|
||
<Box sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "flex-start",
|
||
gap: "16px",
|
||
}}
|
||
>
|
||
<Button onClick={() => setOpen(true)}>
|
||
Добавить пользователя
|
||
</Button>
|
||
|
||
<Modal
|
||
open={open}
|
||
onClose={() => setOpen(false)}
|
||
>
|
||
<FormFields
|
||
fields={createFields}
|
||
submitHandler={UserService.createUser}
|
||
title="Создание пользователя"
|
||
sx={{
|
||
position: 'absolute' as 'absolute',
|
||
top: '50%',
|
||
left: '50%',
|
||
transform: 'translate(-50%, -50%)',
|
||
width: 400,
|
||
bgcolor: 'background.paper',
|
||
boxShadow: 24,
|
||
p: 4,
|
||
}}
|
||
/>
|
||
</Modal>
|
||
|
||
<DataGrid
|
||
autoHeight
|
||
style={{ width: "100%" }}
|
||
rows={users}
|
||
columns={columns}
|
||
initialState={{
|
||
pagination: {
|
||
paginationModel: { page: 0, pageSize: 10 },
|
||
},
|
||
}}
|
||
pageSizeOptions={[10, 20, 50, 100]}
|
||
checkboxSelection
|
||
disableRowSelectionOnClick
|
||
|
||
processRowUpdate={(updatedRow) => {
|
||
return updatedRow
|
||
}}
|
||
|
||
onProcessRowUpdateError={() => {
|
||
}}
|
||
/>
|
||
</Box>
|
||
)
|
||
} |