mantine

client/src/pages/Roles.tsx

@@ -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>
   )
 }