92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
import { useRoles, useUsers } from "../hooks/swrHooks"
|
||
import { IRole } from "../interfaces/role"
|
||
import { useEffect, useState } from "react"
|
||
import { CreateField } from "../interfaces/create"
|
||
import UserService from "../services/UserService"
|
||
import { Flex, Loader, Stack } from "@mantine/core"
|
||
import CustomTable from "../components/CustomTable"
|
||
|
||
export default function Users() {
|
||
const { users, isError, isLoading } = useUsers()
|
||
|
||
const { roles } = useRoles()
|
||
|
||
const [roleOptions, setRoleOptions] = useState<{ label: string, value: string }[]>()
|
||
|
||
useEffect(() => {
|
||
if (Array.isArray(roles)) {
|
||
setRoleOptions(roles.map((role: IRole) => ({ label: role.name, value: role.id.toString() })))
|
||
}
|
||
}, [roles])
|
||
|
||
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: '' },
|
||
]
|
||
|
||
if (isError) return (
|
||
<div>
|
||
Произошла ошибка при получении данных.
|
||
</div>
|
||
)
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<Flex direction='column' align='flex-start' gap='sm' p='sm'>
|
||
<Loader />
|
||
</Flex>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<Stack w={'100%'} h={'100%'} p='xs'>
|
||
{Array.isArray(roleOptions) &&
|
||
<CustomTable
|
||
createFields={createFields}
|
||
submitHandler={UserService.createUser}
|
||
data={users}
|
||
columns={[
|
||
{
|
||
accessorKey: 'email',
|
||
header: 'E-mail',
|
||
cell: (info) => info.getValue(),
|
||
},
|
||
{
|
||
accessorKey: 'login',
|
||
header: 'Логин',
|
||
cell: (info) => info.getValue(),
|
||
},
|
||
{
|
||
accessorKey: 'phone',
|
||
header: 'Телефон',
|
||
cell: (info) => info.getValue(),
|
||
},
|
||
{
|
||
accessorKey: 'name',
|
||
header: 'Имя',
|
||
cell: (info) => info.getValue(),
|
||
},
|
||
{
|
||
accessorKey: 'surname',
|
||
header: 'Фамилия',
|
||
cell: (info) => info.getValue(),
|
||
},
|
||
{
|
||
accessorKey: 'is_active',
|
||
header: 'Активен',
|
||
cell: (info) => info.getValue(),
|
||
},
|
||
{
|
||
accessorKey: 'role_id',
|
||
header: 'Роль',
|
||
cell: (info) => info.getValue(),
|
||
}
|
||
]} />
|
||
}
|
||
</Stack>
|
||
)
|
||
} |