diff --git a/client/public/icons/drawer/add_photo_alternate.svg b/client/public/icons/drawer/add_photo_alternate.svg new file mode 100644 index 0000000..7ea4048 --- /dev/null +++ b/client/public/icons/drawer/add_photo_alternate.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/components/ContentDrawer.tsx b/client/src/components/ContentDrawer.tsx index 5c83586..531ae40 100644 --- a/client/src/components/ContentDrawer.tsx +++ b/client/src/components/ContentDrawer.tsx @@ -6,12 +6,14 @@ interface ContentDrawerProps { open: boolean; closeDrawer: () => void; children: React.ReactNode; + type: 'create' | 'edit'; } export default function ContentDrawer({ open, closeDrawer, children, + type, }: ContentDrawerProps) { const [width, setWidth] = useState('30%'); @@ -27,7 +29,7 @@ export default function ContentDrawer({ return () => window.removeEventListener('resize', calculateWidths); }, []); - const drawerTitle = ( + const editDrawerTitle = (
); + const createDrawerTitle = ( +
+
+ close_drawer +
+ +
+ Новая учетная запись +
+ +
+ delete +
+
+ ); + return ( >[0]; + +const getBase64 = (file: FileType): Promise => + new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result as string); + reader.onerror = (error) => reject(error); + }); + +export default function UserCreate() { + const [previewOpen, setPreviewOpen] = useState(false); + const [previewImage, setPreviewImage] = useState(''); + + const [fileList, setFileList] = useState([]); + + const handlePreview = async (file: UploadFile) => { + if (!file.url && !file.preview) { + file.preview = await getBase64(file.originFileObj as FileType); + } + + setPreviewImage(file.url || (file.preview as string)); + setPreviewOpen(true); + }; + + const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => + setFileList(newFileList); + + const customUploadButton = ( +
+
+ add_photo_alternate +
+ + Выбрать фото +
+ ); + + const photoToUpload = ( + <> + false} + > + {fileList.length > 0 ? null : customUploadButton} + + {previewImage && ( + setPreviewOpen(visible), + afterOpenChange: (visible) => !visible && setPreviewImage(''), + }} + src={previewImage} + /> + )} + + ); + + return ( +
+
+
+ {photoToUpload} +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ ); +} diff --git a/client/src/components/UserEdit.tsx b/client/src/components/UserEdit.tsx new file mode 100644 index 0000000..c194bff --- /dev/null +++ b/client/src/components/UserEdit.tsx @@ -0,0 +1,111 @@ +import { Button, Form, Input, Select } from 'antd'; + +const { Option } = Select; + +export default function UserEdit() { + return ( +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ ); +} diff --git a/client/src/pages/AccountsPage.tsx b/client/src/pages/AccountsPage.tsx index cb47e41..aa6a98e 100644 --- a/client/src/pages/AccountsPage.tsx +++ b/client/src/pages/AccountsPage.tsx @@ -1,9 +1,7 @@ -import { Button, Form, Input, Select } from 'antd'; import Header from '../components/Header'; import { useState } from 'react'; import ContentDrawer from '../components/ContentDrawer'; - -const { Option } = Select; +import UserCreate from '../components/UserCreate'; export default function AccountsPage() { const [open, setOpen] = useState(false); @@ -11,112 +9,6 @@ export default function AccountsPage() { const showDrawer = () => setOpen(true); const closeDrawer = () => setOpen(false); - const userEdit = ( -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- ); - return ( <>
- - {userEdit} + + );