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

feat(AccountsPage): update accounts list after create user

Browse Source
This commit is contained in:
Vladislav Syrochkin 2025-06-30 12:37:45 +05:00
parent ad312d4ff8
commit 784be40369
2 changed files with 101 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
client/src/components/UserCreate.tsx
View File

@ -10,17 +10,18 @@ import {
UploadProps,
message,
Spin,
} from 'antd';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useUserSelector } from '@/store/userStore';
import { UserCreate as NewUserCreate } from '@/types/user';
import { UserService } from '@/services/userService';
import { LoadingOutlined } from '@ant-design/icons';
} from "antd";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useUserSelector } from "@/store/userStore";
import { AllUserResponse, UserCreate as NewUserCreate } from "@/types/user";
import { UserService } from "@/services/userService";
import { LoadingOutlined } from "@ant-design/icons";
import { useSearchParams } from "react-router-dom";
const { Option } = Select;
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];
const getBase64 = (file: FileType): Promise<string> =>
new Promise((resolve, reject) => {
@ -32,13 +33,19 @@ const getBase64 = (file: FileType): Promise<string> =>
interface UserCreateProps {
closeDrawer: () => void;
setAccounts: React.Dispatch<React.SetStateAction<AllUserResponse>>;
getUsers: () => Promise<void>;
}
export default function UserCreate({ closeDrawer }: UserCreateProps) {
export default function UserCreate({
closeDrawer,
setAccounts,
getUsers,
}: UserCreateProps) {
const user = useUserSelector();
const { t } = useTranslation();
const [previewOpen, setPreviewOpen] = useState(false);
const [previewImage, setPreviewImage] = useState('');
const [previewImage, setPreviewImage] = useState("");
const [loading, setLoading] = useState(false);
const [fileList, setFileList] = useState<UploadFile[]>([]);
@ -52,49 +59,49 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) {
setPreviewOpen(true);
};
const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
const handleChange: UploadProps["onChange"] = ({ fileList: newFileList }) =>
setFileList(newFileList);
const onFinish = async (values: NewUserCreate) => {
setLoading(true);
await UserService.createUser(values);
await getUsers();
closeDrawer();
setLoading(false);
message.info(t('createdAccountMessage'), 4);
message.info(t("createdAccountMessage"), 4);
};
const customUploadButton = (
<div>
<div
style={{
height: '102px',
width: '102px',
backgroundColor: '#E2E2E2',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: "102px",
width: "102px",
backgroundColor: "#E2E2E2",
borderRadius: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
marginBottom: 8,
marginTop: 30,
cursor: 'pointer',
cursor: "pointer",
}}
>
<img
src="./icons/drawer/add_photo_alternate.svg"
alt="add_photo_alternate"
style={{ height: '18px', width: '18px' }}
style={{ height: "18px", width: "18px" }}
/>
</div>
<span style={{ fontSize: '14px', color: '#8c8c8c' }}>
{t('selectPhoto')}
<span style={{ fontSize: "14px", color: "#8c8c8c" }}>
{t("selectPhoto")}
</span>
</div>
);
const photoToUpload = (
<div style={{ height: '102px' }}>
<div style={{ height: "102px" }}>
<Upload
listType="picture-circle"
fileList={fileList}
@ -106,11 +113,11 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) {
</Upload>
{previewImage && (
<Image
wrapperStyle={{ display: 'none' }}
wrapperStyle={{ display: "none" }}
preview={{
visible: previewOpen,
onVisibleChange: (visible) => setPreviewOpen(visible),
afterOpenChange: (visible) => !visible && setPreviewImage(''),
afterOpenChange: (visible) => !visible && setPreviewImage(""),
}}
src={previewImage}
/>
@ -121,24 +128,24 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) {
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
display: "flex",
flexDirection: "column",
height: "100%",
}}
>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '36px',
display: "flex",
alignItems: "center",
justifyContent: "center",
marginBottom: "36px",
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
{photoToUpload}
@ -149,83 +156,83 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) {
layout="vertical"
onFinish={onFinish}
initialValues={{
name: '',
login: '',
password: '',
email: '',
bindTenantId: '',
role: '',
status: '',
name: "",
login: "",
password: "",
email: "",
bindTenantId: "",
role: "",
status: "",
}}
style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
style={{ flex: 1, display: "flex", flexDirection: "column" }}
>
<Form.Item
label={t('name')}
label={t("name")}
name="name"
rules={[{ required: true, message: t('nameMessage') }]}
rules={[{ required: true, message: t("nameMessage") }]}
>
<Input />
</Form.Item>
<Form.Item
label={t('login')}
label={t("login")}
name="login"
rules={[{ required: true, message: t('loginMessage') }]}
rules={[{ required: true, message: t("loginMessage") }]}
>
<Input />
</Form.Item>
<Form.Item
label={t('password')}
label={t("password")}
name="password"
rules={[{ required: true, message: t('passwordMessage') }]}
rules={[{ required: true, message: t("passwordMessage") }]}
>
<Input.Password />
</Form.Item>
<Form.Item
label={t('email')}
label={t("email")}
name="email"
rules={[
{ required: true, message: t('emailMessage') },
{ type: 'email', message: t('emailErrorMessage') },
{ required: true, message: t("emailMessage") },
{ type: "email", message: t("emailErrorMessage") },
]}
>
<Input />
</Form.Item>
<Form.Item
label={t('tenant')}
label={t("tenant")}
name="bindTenantId"
rules={[{ required: true, message: t('tenantMessage') }]}
rules={[{ required: true, message: t("tenantMessage") }]}
>
<Input />
</Form.Item>
<Form.Item
label={t('role')}
label={t("role")}
name="role"
rules={[{ required: true, message: t('roleMessage') }]}
rules={[{ required: true, message: t("roleMessage") }]}
>
<Select placeholder={t('roleMessage')}>
{user && user.role === 'OWNER' ? (
<Option value="ADMIN">{t('ADMIN')}</Option>
<Select placeholder={t("roleMessage")}>
{user && user.role === "OWNER" ? (
<Option value="ADMIN">{t("ADMIN")}</Option>
) : undefined}
<Option value="EDITOR">{t('EDITOR')}</Option>
<Option value="VIEWER">{t('VIEWER')}</Option>
<Option value="EDITOR">{t("EDITOR")}</Option>
<Option value="VIEWER">{t("VIEWER")}</Option>
</Select>
</Form.Item>
<Form.Item
label={t('status')}
label={t("status")}
name="status"
rules={[{ required: true, message: t('statusMessage') }]}
rules={[{ required: true, message: t("statusMessage") }]}
>
<Select placeholder={t('statusMessage')}>
<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 placeholder={t("statusMessage")}>
<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>
@ -236,21 +243,21 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) {
type="primary"
htmlType="submit"
block
style={{ color: '#000' }}
style={{ color: "#000" }}
>
{loading ? (
<>
<Spin indicator={<LoadingOutlined spin />} size="small"></Spin>{' '}
{t('saving')}
<Spin indicator={<LoadingOutlined spin />} size="small"></Spin>{" "}
{t("saving")}
</>
) : (
<>
<img
src="/icons/drawer/reg.svg"
alt="save"
style={{ height: '18px', width: '18px' }}
/>{' '}
{t('addAccount')}
style={{ height: "18px", width: "18px" }}
/>{" "}
{t("addAccount")}
</>
)}
</Button>

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

@ -14,7 +14,6 @@ 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
@ -41,16 +40,20 @@ export default function AccountsPage() {
limit: 10,
});
useEffect(() => {
async function getUsers() {
const data = await UserService.getUsers();
setAccounts(data);
setSearchParams({
page: searchParams.get("page") || "1",
limit: searchParams.get("limit") || "10",
});
}
async function getUsers() {
setSearchParams({
page: searchParams.get("page") || "1",
limit: searchParams.get("limit") || "10",
});
const data = await UserService.getUsers(
Number(searchParams.get("page")),
Number(searchParams.get("limit"))
);
console.log("searchParams", searchParams);
setAccounts(data);
}
useEffect(() => {
getUsers();
}, []);
@ -201,7 +204,11 @@ export default function AccountsPage() {
closeDrawer={closeCreateDrawer}
type="create"
>
<UserCreate closeDrawer={closeCreateDrawer} />
<UserCreate
getUsers={getUsers}
setAccounts={setAccounts}
closeDrawer={closeCreateDrawer}
/>
</ContentDrawer>
<ContentDrawer
login={activeAccount?.login}