mantine

client/src/pages/Users.tsx

@@ -1,18 +1,27 @@
-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, useUsers } from "../hooks/swrHooks"
 import { IRole } from "../interfaces/role"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { CreateField } from "../interfaces/create"
 import UserService from "../services/UserService"
 import FormFields from "../components/FormFields"
+import { Badge, Button, Flex, Loader, Modal, Pagination, Select, Table } from "@mantine/core"
+import { useDisclosure } from "@mantine/hooks"
 
 export default function Users() {
     const { users, isError, isLoading } = useUsers()
 
     const { roles } = useRoles()
 
-    const [open, setOpen] = useState(false)
+    const [roleOptions, setRoleOptions] = useState<any>()
+
+    useEffect(() => {
+        if (Array.isArray(roles)) {
+            setRoleOptions(roles.map((role: IRole) => ({ label: role.name, value: role.id.toString() })))
+        }
+    }, [roles])
+
+    const [opened, { open, close }] = useDisclosure(false);
 
     const createFields: CreateField[] = [
         { key: 'email', headerName: 'E-mail', type: 'string', required: true, defaultValue: '' },
@@ -30,7 +39,7 @@ export default function Users() {
         { field: 'phone', headerName: 'Телефон', flex: 1, editable: true },
         { field: 'name', headerName: 'Имя', flex: 1, editable: true },
         { field: 'surname', headerName: 'Фамилия', flex: 1, editable: true },
-        { field: 'is_active', headerName: 'Активен', type: "boolean", flex: 1, editable: true },
+        { field: 'is_active', headerName: 'Статус', type: "boolean", flex: 1, editable: true },
         {
             field: 'role_id',
             headerName: 'Роль',
@@ -41,44 +50,92 @@ export default function Users() {
         },
     ];
 
-    if (isError) return <div>Произошла ошибка при получении данных.</div>
-    if (isLoading) return <CircularProgress />
+    if (isError) return (
+        <div>
+            Произошла ошибка при получении данных.
+        </div>
+    )
+    
+    if (isLoading) {
+        return (
+            <Flex direction='column' align='flex-start' gap='sm' p='sm'>
+                <Loader />
+            </Flex>
+        )
+    }
 
     return (
-        <Box sx={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            gap: "16px",
-            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
                     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
+            {Array.isArray(roleOptions) &&
+                <Table highlightOnHover>
+                    <Table.Thead>
+                        <Table.Tr>
+                            {columns.map(column => (
+                                <Table.Th key={column.field}>{column.headerName}</Table.Th>
+                            ))}
+                        </Table.Tr>
+                    </Table.Thead>
+                    <Table.Tbody>
+                        {users.map((user: any) => (
+                            <Table.Tr
+                                key={user.id}
+                            //bg={selectedRows.includes(element.position) ? 'var(--mantine-color-blue-light)' : undefined}
+                            >
+                                {columns.map(column => {
+                                    if (column.field === 'is_active') {
+                                        return (
+                                            user.is_active ? (
+                                                <Table.Td key={column.field}>
+                                                    <Badge fullWidth variant="light">
+                                                        Активен
+                                                    </Badge>
+                                                </Table.Td>
+
+                                            ) : (
+                                                <Table.Td key={column.field}>
+                                                    <Badge color="gray" fullWidth variant="light">
+                                                        Отключен
+                                                    </Badge>
+                                                </Table.Td>
+                                            )
+                                        )
+                                    }
+                                    else if (column.field === 'role_id') {
+                                        return (
+                                            <Table.Td key={column.field}>
+                                                <Select
+                                                    data={roleOptions}
+                                                    defaultValue={user.role_id.toString()}
+                                                    variant="unstyled"
+                                                    allowDeselect={false}
+                                                />
+                                            </Table.Td>
+                                        )
+                                    }
+                                    else return (
+                                        <Table.Td key={column.field}>{user[column.field]}</Table.Td>
+                                    )
+                                })}
+                            </Table.Tr>
+                        ))}
+                    </Table.Tbody>
+                </Table>
+            }
+
+            <Pagination total={10} />
+
+            {/* <DataGrid
                 density="compact"
                 autoHeight
                 style={{ width: "100%" }}
@@ -99,7 +156,7 @@ export default function Users() {
 
                 onProcessRowUpdateError={() => {
                 }}
-            />
-        </Box>
+            /> */}
+        </Flex>
     )
 }