diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx index 2ff9076..f640cb1 100644 --- a/client/src/components/Header.tsx +++ b/client/src/components/Header.tsx @@ -1,3 +1,4 @@ +import { useUserSelector } from '@/store/userStore'; import { Avatar } from 'antd'; import Title from 'antd/es/typography/Title'; @@ -7,6 +8,7 @@ interface HeaderProps { } export default function Header({ title, additionalContent }: HeaderProps) { + const user = useUserSelector(); return (
diff --git a/client/src/config/i18n.ts b/client/src/config/i18n.ts index 09bd8b8..db55a45 100644 --- a/client/src/config/i18n.ts +++ b/client/src/config/i18n.ts @@ -37,6 +37,16 @@ i18n addAccount: 'Add account', save: 'Save changes', newAccount: 'New account', + ACTIVE: 'Active', + DISABLED: 'Disabled', + BLOCKED: 'Blocked', + DELETED: 'Deleted', + OWNER: 'Owner', + ADMIN: 'Admin', + EDITOR: 'Editor', + VIEWER: 'Viewer', + nameLogin: 'Name, login', + createdAt: 'Created', }, }, ru: { @@ -66,6 +76,16 @@ i18n addAccount: 'Добавить аккаунт', save: 'Сохранить изменения', newAccount: 'Новая учетная запись', + ACTIVE: 'Активен', + DISABLED: 'Выключен', + BLOCKED: 'Заблокирован', + DELETED: 'Удален', + OWNER: 'Владелец', + ADMIN: 'Админ', + EDITOR: 'Редактор', + VIEWER: 'Наблюдатель', + nameLogin: 'Имя, Логин', + createdAt: 'Создано', }, }, }, diff --git a/client/src/pages/AccountsPage.tsx b/client/src/pages/AccountsPage.tsx index 02d85fd..aa67ac7 100644 --- a/client/src/pages/AccountsPage.tsx +++ b/client/src/pages/AccountsPage.tsx @@ -1,9 +1,12 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { User } from '@/types/user'; +import { AccountStatus, AllUser, AllUserResponse } from '@/types/user'; import Header from '@/components/Header'; import ContentDrawer from '@/components/ContentDrawer'; import UserCreate from '@/components/UserCreate'; +import { Avatar, Table } from 'antd'; +import { TableProps } from 'antd/lib'; +import { UserService } from '@/services/userService'; export default function AccountsPage() { const { t } = useTranslation(); @@ -12,7 +15,93 @@ export default function AccountsPage() { const showDrawer = () => setOpen(true); const closeDrawer = () => setOpen(false); - const [accounts, setAccounts] = useState([]); + const [accounts, setAccounts] = useState({ + amountCount: 0, + amountPages: 0, + users: [], + }); + + useEffect(() => { + async function getUsers() { + const data = await UserService.getUsers(); + setAccounts(data); + } + + getUsers(); + }, []); + + const statusColor = { + ACTIVE: '#27AE60', + DISABLED: '#606060', + BLOCKED: '#FF0000', + DELETED: '#B30000', + }; + + const columns: TableProps['columns'] = [ + { + title: '#', + dataIndex: 'id', + key: 'id', + }, + { + title: t('nameLogin'), + dataIndex: 'nameLogin', + key: 'nameLogin', + render: (text, record) => ( +
+
+ +
+
+
{record.name}
+
{record.email}
+
+
+ ), + }, + { + title: 'E-mail', + dataIndex: 'email', + key: 'email', + }, + { + title: t('tenant'), + dataIndex: 'bindTenantId', + key: 'tenant', + }, + { + title: t('role'), + dataIndex: 'role', + key: 'role', + render: (text) =>
{t(text)}
, + }, + { + title: t('createdAt'), + dataIndex: 'createdAt', + key: 'createdAt', + }, + { + title: t('status'), + dataIndex: 'status', + key: 'status', + render: (text) => ( +
+ {t(text)} +
+ ), + }, + ]; return ( <> @@ -31,6 +120,12 @@ export default function AccountsPage() { /> } /> + diff --git a/client/src/services/userService.ts b/client/src/services/userService.ts index 3063b47..fbfbb29 100644 --- a/client/src/services/userService.ts +++ b/client/src/services/userService.ts @@ -1,5 +1,5 @@ import api from '@/api/api'; -import { User } from '@/types/user'; +import { AllUserResponse, User } from '@/types/user'; export class UserService { static async getProfile(): Promise { @@ -9,8 +9,8 @@ export class UserService { return user; } - static async getUsers(page: number = 1, limit: number = 10): Promise { - const users = api.getUsers(page, limit); - return users; + static async getUsers(page: number = 1, limit: number = 10): Promise { + const allUsers = api.getUsers(page, limit); + return allUsers; } } diff --git a/client/src/types/user.ts b/client/src/types/user.ts index 10b18d4..0c20246 100644 --- a/client/src/types/user.ts +++ b/client/src/types/user.ts @@ -1,3 +1,8 @@ import { components } from './openapi-types'; export type User = components['schemas']['User']; +export type AllUserResponse = components['schemas']['AllUserResponse']; +export type AllUser = components['schemas']['AllUser']; +export type AccountStatus = components['schemas']['AccountStatus']; +export type AccountRole = components['schemas']['AccountRole']; +