VORKOUT-8 #13
@ -1,19 +1,20 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
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';
|
||||
import UserEdit from '@/components/UserEdit';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
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";
|
||||
import UserEdit from "@/components/UserEdit";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
|
||||
export default function AccountsPage() {
|
||||
const { t } = useTranslation();
|
||||
const [openCreate, setOpenCreate] = useState(false);
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
console.log("searchParams", searchParams);
|
||||
|
||||
const [activeAccount, setActiveAccount] = useState<
|
||||
{ login: string; id: number; name: string; email: string } | undefined
|
||||
@ -45,8 +46,8 @@ export default function AccountsPage() {
|
||||
const data = await UserService.getUsers();
|
||||
setAccounts(data);
|
||||
setSearchParams({
|
||||
page: data.currentPage.toString(),
|
||||
limit: data.limit.toString(),
|
||||
page: searchParams.get("page") || "1",
|
||||
limit: searchParams.get("limit") || "10",
|
||||
});
|
||||
}
|
||||
|
||||
@ -54,22 +55,22 @@ export default function AccountsPage() {
|
||||
}, []);
|
||||
|
||||
const statusColor = {
|
||||
ACTIVE: '#27AE60',
|
||||
DISABLED: '#606060',
|
||||
BLOCKED: '#FF0000',
|
||||
DELETED: '#B30000',
|
||||
ACTIVE: "#27AE60",
|
||||
DISABLED: "#606060",
|
||||
BLOCKED: "#FF0000",
|
||||
DELETED: "#B30000",
|
||||
};
|
||||
|
||||
const columns: TableProps<AllUser>['columns'] = [
|
||||
const columns: TableProps<AllUser>["columns"] = [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
title: "#",
|
||||
dataIndex: "id",
|
||||
key: "id",
|
||||
},
|
||||
{
|
||||
title: t('nameLogin'),
|
||||
dataIndex: 'nameLogin',
|
||||
key: 'nameLogin',
|
||||
title: t("nameLogin"),
|
||||
dataIndex: "nameLogin",
|
||||
key: "nameLogin",
|
||||
render: (text, record) => (
|
||||
<div
|
||||
onClick={() => {
|
||||
@ -77,24 +78,24 @@ export default function AccountsPage() {
|
||||
login: record.login,
|
||||
id: record.id,
|
||||
name: record.name,
|
||||
email: record.email || '',
|
||||
email: record.email || "",
|
||||
});
|
||||
showEditDrawer();
|
||||
}}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '16px',
|
||||
cursor: 'pointer',
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "16px",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: '32px',
|
||||
width: '32px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: "32px",
|
||||
width: "32px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
@ -102,47 +103,47 @@ export default function AccountsPage() {
|
||||
src={`https://gamma.heado.ru/go/ava?name=${record.login}`}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ display: "flex", flexDirection: "column" }}>
|
||||
<div>{record.name}</div>
|
||||
<div style={{ color: '#606060' }}>{record.login}</div>
|
||||
<div style={{ color: "#606060" }}>{record.login}</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'E-mail',
|
||||
dataIndex: 'email',
|
||||
key: 'email',
|
||||
title: "E-mail",
|
||||
dataIndex: "email",
|
||||
key: "email",
|
||||
},
|
||||
{
|
||||
title: t('tenant'),
|
||||
dataIndex: 'bindTenantId',
|
||||
key: 'tenant',
|
||||
title: t("tenant"),
|
||||
dataIndex: "bindTenantId",
|
||||
key: "tenant",
|
||||
},
|
||||
{
|
||||
title: t('role'),
|
||||
dataIndex: 'role',
|
||||
key: 'role',
|
||||
title: t("role"),
|
||||
dataIndex: "role",
|
||||
key: "role",
|
||||
render: (text) => <div>{t(text)}</div>,
|
||||
},
|
||||
{
|
||||
title: t('createdAt'),
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
title: t("createdAt"),
|
||||
dataIndex: "createdAt",
|
||||
key: "createdAt",
|
||||
render: (text) => (
|
||||
<div>
|
||||
{new Date(text).toLocaleString('ru', {
|
||||
year: '2-digit',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
{new Date(text).toLocaleString("ru", {
|
||||
year: "2-digit",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
})}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t('status'),
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
title: t("status"),
|
||||
dataIndex: "status",
|
||||
key: "status",
|
||||
render: (text) => (
|
||||
<div style={{ color: statusColor[text as AccountStatus] }}>
|
||||
{t(text)}
|
||||
@ -151,7 +152,7 @@ export default function AccountsPage() {
|
||||
},
|
||||
];
|
||||
|
||||
const onTableChange: TableProps<AllUser>['onChange'] = (pagination) => {
|
||||
const onTableChange: TableProps<AllUser>["onChange"] = (pagination) => {
|
||||
console.log(pagination);
|
||||
UserService.getUsers(
|
||||
pagination.current as number,
|
||||
@ -168,15 +169,15 @@ export default function AccountsPage() {
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
title={t('accounts')}
|
||||
title={t("accounts")}
|
||||
additionalContent={
|
||||
<img
|
||||
src="./icons/header/add_2.svg"
|
||||
alt="add"
|
||||
style={{
|
||||
height: '18px',
|
||||
width: '18px',
|
||||
cursor: 'pointer',
|
||||
height: "18px",
|
||||
width: "18px",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={showCreateDrawer}
|
||||
/>
|
||||
@ -192,7 +193,7 @@ export default function AccountsPage() {
|
||||
current: accounts.currentPage,
|
||||
total: accounts.amountCount,
|
||||
}}
|
||||
rowKey={'id'}
|
||||
rowKey={"id"}
|
||||
/>
|
||||
|
||||
<ContentDrawer
|
||||
|
Loading…
Reference in New Issue
Block a user