diff --git a/client/src/components/UserCreate.tsx b/client/src/components/UserCreate.tsx index d7f4097..99cdb9b 100644 --- a/client/src/components/UserCreate.tsx +++ b/client/src/components/UserCreate.tsx @@ -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>[0]; +type FileType = Parameters>[0]; const getBase64 = (file: FileType): Promise => new Promise((resolve, reject) => { @@ -32,13 +33,19 @@ const getBase64 = (file: FileType): Promise => interface UserCreateProps { closeDrawer: () => void; + setAccounts: React.Dispatch>; + getUsers: () => Promise; } -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([]); @@ -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 = (
add_photo_alternate
- - {t('selectPhoto')} + + {t("selectPhoto")}
); const photoToUpload = ( -
+
{previewImage && ( setPreviewOpen(visible), - afterOpenChange: (visible) => !visible && setPreviewImage(''), + afterOpenChange: (visible) => !visible && setPreviewImage(""), }} src={previewImage} /> @@ -121,24 +128,24 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) { return (
{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" }} > - + {user && user.role === "OWNER" ? ( + ) : undefined} - - + + - + + + + @@ -236,21 +243,21 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) { type="primary" htmlType="submit" block - style={{ color: '#000' }} + style={{ color: "#000" }} > {loading ? ( <> - } size="small">{' '} - {t('saving')} + } size="small">{" "} + {t("saving")} ) : ( <> save{' '} - {t('addAccount')} + style={{ height: "18px", width: "18px" }} + />{" "} + {t("addAccount")} )} diff --git a/client/src/pages/AccountsPage.tsx b/client/src/pages/AccountsPage.tsx index b5a9963..bc289a3 100644 --- a/client/src/pages/AccountsPage.tsx +++ b/client/src/pages/AccountsPage.tsx @@ -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" > - +