From e5dfdc346467327faad7cb09106a507ed1b1992f Mon Sep 17 00:00:00 2001 From: Vladislav Syrochkin Date: Tue, 24 Jun 2025 16:23:43 +0500 Subject: [PATCH] feat(AccountsPage): add userEdit --- client/src/api/api.ts | 5 +++ client/src/components/ContentDrawer.tsx | 15 +++++-- client/src/components/SiderMenu.tsx | 22 ++++++---- client/src/components/UserCreate.tsx | 18 +++++--- client/src/components/UserEdit.tsx | 54 +++++++++++++++-------- client/src/pages/AccountsPage.tsx | 57 ++++++++++++++++++++++--- client/src/services/userService.ts | 12 +++++- 7 files changed, 139 insertions(+), 44 deletions(-) diff --git a/client/src/api/api.ts b/client/src/api/api.ts index 76641c0..37824a7 100644 --- a/client/src/api/api.ts +++ b/client/src/api/api.ts @@ -109,6 +109,11 @@ const api = { ); return response.data; }, + + async getUserById(userId: number): Promise { + const response = await base.get(`/account/${userId}`); + return response.data; + }, }; export default api; diff --git a/client/src/components/ContentDrawer.tsx b/client/src/components/ContentDrawer.tsx index f02b6f4..5bd542c 100644 --- a/client/src/components/ContentDrawer.tsx +++ b/client/src/components/ContentDrawer.tsx @@ -8,6 +8,9 @@ interface ContentDrawerProps { closeDrawer: () => void; children: React.ReactNode; type: 'create' | 'edit'; + login?: string; + name?: string; + email?: string; } export default function ContentDrawer({ @@ -15,6 +18,9 @@ export default function ContentDrawer({ closeDrawer, children, type, + login, + name, + email, }: ContentDrawerProps) { const { t } = useTranslation(); const [width, setWidth] = useState('30%'); @@ -59,16 +65,18 @@ export default function ContentDrawer({
- Александр Александров + {name} - alexandralex@vorkout.ru + {email}
@@ -152,7 +160,6 @@ export default function ContentDrawer({ placement="right" open={open} width={width} - destroyOnClose={true} closable={false} > {children} diff --git a/client/src/components/SiderMenu.tsx b/client/src/components/SiderMenu.tsx index 8ce7ab4..af8ca38 100644 --- a/client/src/components/SiderMenu.tsx +++ b/client/src/components/SiderMenu.tsx @@ -1,3 +1,4 @@ +import { useUserSelector } from '@/store/userStore'; import { Divider, Menu, Tooltip } from 'antd'; import React from 'react'; import { useTranslation } from 'react-i18next'; @@ -13,6 +14,7 @@ export default function SiderMenu({ selectedKey, hangleMenuClick, }: SiderMenuProps) { + const user = useUserSelector(); const { t } = useTranslation(); const collapseStyle = collapsed ? { fontSize: '12px' } @@ -74,15 +76,17 @@ export default function SiderMenu({ label: t('settings'), className: 'no-expand-icon', children: [ - { - key: '/accounts', - label: !collapsed ? ( - {t('accounts')} - ) : ( - t('accounts') - ), - style: collapseStyle, - }, + user && (user.role === 'OWNER' || user.role === 'ADMIN') + ? { + key: '/accounts', + label: !collapsed ? ( + {t('accounts')} + ) : ( + t('accounts') + ), + style: collapseStyle, + } + : undefined, { key: '/events-list', label: !collapsed ? ( diff --git a/client/src/components/UserCreate.tsx b/client/src/components/UserCreate.tsx index edf09ab..a2db419 100644 --- a/client/src/components/UserCreate.tsx +++ b/client/src/components/UserCreate.tsx @@ -11,6 +11,7 @@ import { } from 'antd'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; +import { useUserSelector } from '@/store/userStore'; const { Option } = Select; @@ -25,6 +26,7 @@ const getBase64 = (file: FileType): Promise => }); export default function UserCreate() { + const user = useUserSelector(); const { t } = useTranslation(); const [previewOpen, setPreviewOpen] = useState(false); const [previewImage, setPreviewImage] = useState(''); @@ -187,9 +189,11 @@ export default function UserCreate() { rules={[{ required: true, message: t('roleMessage') }]} > @@ -199,10 +203,10 @@ export default function UserCreate() { rules={[{ required: true, message: t('statusMessage') }]} > diff --git a/client/src/components/UserEdit.tsx b/client/src/components/UserEdit.tsx index bd5e8f0..47f11ef 100644 --- a/client/src/components/UserEdit.tsx +++ b/client/src/components/UserEdit.tsx @@ -1,25 +1,43 @@ +import { UserService } from '@/services/userService'; +import { useUserSelector } from '@/store/userStore'; +import { User } from '@/types/user'; import { Button, Form, Input, Select } from 'antd'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; const { Option } = Select; -export default function UserEdit() { +interface UserEditProps { + userId?: number; +} + +export default function UserEdit({ userId }: UserEditProps) { + const currentUser = useUserSelector(); + const [form] = Form.useForm(); const { t } = useTranslation(); + const [user, setUser] = useState(null); + + useEffect(() => { + async function getUser() { + if (typeof userId === 'undefined') { + return; + } + const user = await UserService.getUserById(userId); + setUser(user); + form.setFieldsValue({ ...user }); + } + + getUser(); + }, []); + return (
@@ -83,10 +103,10 @@ export default function UserEdit() { rules={[{ required: true, message: t('statusMessage') }]} > diff --git a/client/src/pages/AccountsPage.tsx b/client/src/pages/AccountsPage.tsx index f94ad6c..b21c91d 100644 --- a/client/src/pages/AccountsPage.tsx +++ b/client/src/pages/AccountsPage.tsx @@ -7,13 +7,28 @@ 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'; export default function AccountsPage() { const { t } = useTranslation(); - const [open, setOpen] = useState(false); + const [openCreate, setOpenCreate] = useState(false); - const showDrawer = () => setOpen(true); - const closeDrawer = () => setOpen(false); + const [activeAccount, setActiveAccount] = useState< + { login: string; id: number; name: string; email: string } | undefined + >(undefined); + + const showCreateDrawer = () => setOpenCreate(true); + const closeCreateDrawer = () => { + setActiveAccount(undefined); + setOpenCreate(false); + }; + const [openEdit, setOpenEdit] = useState(false); + + const showEditDrawer = () => setOpenEdit(true); + const closeEditDrawer = () => { + setActiveAccount(undefined); + setOpenEdit(false); + }; const [accounts, setAccounts] = useState({ amountCount: 0, @@ -49,7 +64,23 @@ export default function AccountsPage() { dataIndex: 'nameLogin', key: 'nameLogin', render: (text, record) => ( -
+
{ + setActiveAccount({ + login: record.login, + id: record.id, + name: record.name, + email: record.email || '', + }); + showEditDrawer(); + }} + style={{ + display: 'flex', + alignItems: 'center', + gap: '16px', + cursor: 'pointer', + }} + >
} /> @@ -140,9 +171,23 @@ export default function AccountsPage() { rowKey={'id'} /> - + + + + ); } diff --git a/client/src/services/userService.ts b/client/src/services/userService.ts index fbfbb29..4e11c19 100644 --- a/client/src/services/userService.ts +++ b/client/src/services/userService.ts @@ -9,8 +9,18 @@ export class UserService { return user; } - static async getUsers(page: number = 1, limit: number = 10): Promise { + static async getUsers( + page: number = 1, + limit: number = 10 + ): Promise { + console.log('getUsers'); const allUsers = api.getUsers(page, limit); return allUsers; } + + static async getUserById(userId: number): Promise { + console.log('getUserById'); + const user = api.getUserById(userId); + return user; + } }