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'];
+