feat(AccountsPage): add userEdit

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<number | string>('30%');
@@ -59,16 +65,18 @@ export default function ContentDrawer({
 
       <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1 }}>
         <Avatar
-          src="https://cdn-icons-png.flaticon.com/512/219/219986.png"
+          src={
+            login ? `https://gamma.heado.ru/go/ava?name=${login}` : undefined
+          }
           size={40}
           style={{ flexShrink: 0 }}
         />
         <div>
           <Typography.Text strong style={{ display: 'block' }}>
-            Александр Александров
+            {name}
           </Typography.Text>
           <Typography.Text type="secondary" style={{ fontSize: 14 }}>
-            alexandralex@vorkout.ru
+            {email}
           </Typography.Text>
         </div>
       </div>
@@ -152,7 +160,6 @@ export default function ContentDrawer({
       placement="right"
       open={open}
       width={width}
-      destroyOnClose={true}
       closable={false}
     >
       {children}

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 ? (
-            <Tooltip title={t('accounts')}>{t('accounts')}</Tooltip>
-          ) : (
-            t('accounts')
-          ),
-          style: collapseStyle,
-        },
+        user && (user.role === 'OWNER' || user.role === 'ADMIN')
+          ? {
+              key: '/accounts',
+              label: !collapsed ? (
+                <Tooltip title={t('accounts')}>{t('accounts')}</Tooltip>
+              ) : (
+                t('accounts')
+              ),
+              style: collapseStyle,
+            }
+          : undefined,
         {
           key: '/events-list',
           label: !collapsed ? (

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<string> =>
   });
 
 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') }]}
         >
           <Select placeholder={t('roleMessage')}>
-            <Option value="Директор магазина">Директор магазина</Option>
-            <Option value="Менеджер">Менеджер</Option>
-            <Option value="Кассир">Кассир</Option>
+            {user && user.role === 'OWNER' ? (
+              <Option value="ADMIN">{t('ADMIN')}</Option>
+            ) : undefined}
+            <Option value="EDITOR">{t('EDITOR')}</Option>
+            <Option value="VIEWER">{t('VIEWER')}</Option>
           </Select>
         </Form.Item>
 
@@ -199,10 +203,10 @@ export default function UserCreate() {
           rules={[{ required: true, message: t('statusMessage') }]}
         >
           <Select placeholder={t('statusMessage')}>
-            <Option value="ACTIVE">Активен</Option>
-            <Option value="DISABLED">Неактивен</Option>
-            <Option value="BLOCKED">Заблокирован</Option>
-            <Option value="DELETED">Удален</Option>
+            <Option value="ACTIVE">{t('ACTIVE')}</Option>
+            <Option value="DISABLED">{t('DISABLED')}</Option>
+            <Option value="BLOCKED">{t('BLOCKED')}</Option>
+            <Option value="DELETED">{t('DELETED')}</Option>
           </Select>
         </Form.Item>
 

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<User | null>(null);
+
+  useEffect(() => {
+    async function getUser() {
+      if (typeof userId === 'undefined') {
+        return;
+      }
+      const user = await UserService.getUserById(userId);
+      setUser(user);
+      form.setFieldsValue({ ...user });
+    }
+
+    getUser();
+  }, []);
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       <Form
+        form={form}
         name="user-edit-form"
         layout="vertical"
         // onFinish={onFinish}
-        initialValues={{
-          name: 'Александр Александров',
-          login: 'alexandralex@vorkout.ru',
-          password: 'jKUUl776GHd',
-          email: 'alexandralex@vorkout.ru',
-          tenant: 'text',
-          role: 'Директор магазина',
-          status: 'Активен',
-        }}
+        initialValues={{ ...user }}
         style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
       >
         <Form.Item
@@ -71,9 +89,11 @@ export default function UserEdit() {
           rules={[{ required: true, message: t('roleMessage') }]}
         >
           <Select placeholder={t('roleMessage')}>
-            <Option value="Директор магазина">Директор магазина</Option>
-            <Option value="Менеджер">Менеджер</Option>
-            <Option value="Кассир">Кассир</Option>
+            {currentUser && currentUser.role === 'OWNER' ? (
+              <Option value="ADMIN">{t('ADMIN')}</Option>
+            ) : undefined}
+            <Option value="EDITOR">{t('EDITOR')}</Option>
+            <Option value="VIEWER">{t('VIEWER')}</Option>
           </Select>
         </Form.Item>
 
@@ -83,10 +103,10 @@ export default function UserEdit() {
           rules={[{ required: true, message: t('statusMessage') }]}
         >
           <Select placeholder={t('statusMessage')}>
-            <Option value="ACTIVE">Активен</Option>
-            <Option value="DISABLED">Неактивен</Option>
-            <Option value="BLOCKED">Заблокирован</Option>
-            <Option value="DELETED">Удален</Option>
+            <Option value="ACTIVE">{t('ACTIVE')}</Option>
+            <Option value="DISABLED">{t('DISABLED')}</Option>
+            <Option value="BLOCKED">{t('BLOCKED')}</Option>
+            <Option value="DELETED">{t('DELETED')}</Option>
           </Select>
         </Form.Item>