This commit is contained in:
cracklesparkle
2024-10-09 16:51:37 +09:00
parent b88d83cd74
commit 974fc12b34
32 changed files with 3456 additions and 1671 deletions

View File

@ -1,15 +1,15 @@
import { useState } from 'react'
import { Box, Button, CircularProgress, Modal } from '@mui/material'
import { DataGrid, GridColDef } from '@mui/x-data-grid'
import { GridColDef } from '@mui/x-data-grid'
import { useRoles } from '../hooks/swrHooks'
import { CreateField } from '../interfaces/create'
import RoleService from '../services/RoleService'
import FormFields from '../components/FormFields'
import { Button, Flex, Loader, Modal, Table } from '@mantine/core'
import { useDisclosure } from '@mantine/hooks'
export default function Roles() {
const { roles, isError, isLoading } = useRoles()
const [open, setOpen] = useState(false)
const [opened, { open, close }] = useDisclosure(false);
const createFields: CreateField[] = [
{ key: 'name', headerName: 'Название', type: 'string', required: true, defaultValue: '' },
@ -23,43 +23,42 @@ export default function Roles() {
];
if (isError) return <div>Произошла ошибка при получении данных.</div>
if (isLoading) return <CircularProgress />
if (isLoading) return <Loader />
return (
<Box sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
gap: '16px',
flexGrow: 1,
p: '16px'
}}>
<Button onClick={() => setOpen(true)}>
<Flex direction='column' align='flex-start' gap='sm' p='sm'>
<Button onClick={open}>
Добавить роль
</Button>
<Modal
open={open}
onClose={() => setOpen(false)}
>
<Modal opened={opened} onClose={close} title="Создание роли" centered>
<FormFields
sx={{
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
boxShadow: 24,
p: 4,
}}
fields={createFields}
submitHandler={RoleService.createRole}
title="Создание роли"
/>
</Modal>
<DataGrid
<Table highlightOnHover>
<Table.Thead>
<Table.Tr>
{columns.map(column => (
<Table.Th key={column.field}>{column.headerName}</Table.Th>
))}
</Table.Tr>
</Table.Thead>
<Table.Tbody>{roles.map((role: any) => (
<Table.Tr
key={role.id}
//bg={selectedRows.includes(element.position) ? 'var(--mantine-color-blue-light)' : undefined}
>
{columns.map(column => (
<Table.Td key={column.field}>{role[column.field]}</Table.Td>
))}
</Table.Tr>
))}</Table.Tbody>
</Table>
{/* <DataGrid
autoHeight
style={{ width: "100%" }}
rows={roles}
@ -78,7 +77,7 @@ export default function Roles() {
onProcessRowUpdateError={() => {
}}
/>
</Box>
/> */}
</Flex>
)
}