Vorkout/connect
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(AccountsPage): loading with search params

Browse Source
This commit is contained in:
Vladislav Syrochkin 2025-06-30 12:19:29 +05:00
parent ba65f36696
commit ad312d4ff8
1 changed files with 62 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
client/src/pages/AccountsPage.tsx
View File

@ -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