forked from VinokurovVE/tests
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { useState } from 'react'
|
||
import { Box, Button, CircularProgress } from '@mui/material'
|
||
import { DataGrid, GridColDef } from '@mui/x-data-grid'
|
||
import { useRoles } from '../hooks/swrHooks'
|
||
import { CreateField } from '../interfaces/create'
|
||
import ModalCreate from '../components/modals/ModalCreate'
|
||
import RoleService from '../services/RoleService'
|
||
|
||
export default function Roles() {
|
||
const { roles, isError, isLoading } = useRoles()
|
||
|
||
const [open, setOpen] = useState(false)
|
||
|
||
const createFields: CreateField[] = [
|
||
{ key: 'name', headerName: 'Название', type: 'string', required: true, defaultValue: '' },
|
||
{ key: 'description', headerName: 'Описание', type: 'string', required: false, defaultValue: '' },
|
||
]
|
||
|
||
const columns: GridColDef[] = [
|
||
{ field: 'id', headerName: 'ID', type: "number", width: 70 },
|
||
{ field: 'name', headerName: 'Название', width: 90, editable: true },
|
||
{ field: 'description', headerName: 'Описание', 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',
|
||
flexGrow: 1
|
||
}}>
|
||
<Button onClick={() => setOpen(true)}>
|
||
Добавить роль
|
||
</Button>
|
||
|
||
<ModalCreate
|
||
open={open}
|
||
setOpen={setOpen}
|
||
fields={createFields}
|
||
submitHandler={RoleService.createRole}
|
||
title="Создание роли"
|
||
/>
|
||
|
||
<DataGrid
|
||
autoHeight
|
||
style={{ width: "100%" }}
|
||
rows={roles}
|
||
columns={columns}
|
||
initialState={{
|
||
pagination: {
|
||
paginationModel: { page: 0, pageSize: 10 },
|
||
},
|
||
}}
|
||
pageSizeOptions={[10, 20, 50, 100]}
|
||
disableRowSelectionOnClick
|
||
|
||
processRowUpdate={(updatedRow) => {
|
||
return updatedRow
|
||
}}
|
||
|
||
onProcessRowUpdateError={() => {
|
||
}}
|
||
/>
|
||
</Box>
|
||
)
|
||
} |