feat(client): add appropriation node and node edit drawer
This commit is contained in:
262
client/src/components/drawers/users/UserCreate.tsx
Normal file
262
client/src/components/drawers/users/UserCreate.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
Upload,
|
||||
Image,
|
||||
UploadFile,
|
||||
GetProp,
|
||||
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";
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];
|
||||
|
||||
const getBase64 = (file: FileType): Promise<string> =>
|
||||
new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result as string);
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
|
||||
interface UserCreateProps {
|
||||
closeDrawer: () => void;
|
||||
getUsers: () => Promise<void>;
|
||||
}
|
||||
|
||||
export default function UserCreate({ closeDrawer, getUsers }: UserCreateProps) {
|
||||
const user = useUserSelector();
|
||||
const { t } = useTranslation();
|
||||
const [previewOpen, setPreviewOpen] = useState(false);
|
||||
const [previewImage, setPreviewImage] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [fileList, setFileList] = useState<UploadFile[]>([]);
|
||||
|
||||
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 onFinish = async (values: NewUserCreate) => {
|
||||
setLoading(true);
|
||||
await UserService.createUser(values);
|
||||
await getUsers();
|
||||
closeDrawer();
|
||||
setLoading(false);
|
||||
message.info(t("createdAccountMessage"), 4);
|
||||
};
|
||||
|
||||
const customUploadButton = (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
height: "102px",
|
||||
width: "102px",
|
||||
backgroundColor: "#E2E2E2",
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginBottom: 8,
|
||||
marginTop: 30,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="./icons/drawer/add_photo_alternate.svg"
|
||||
alt="add_photo_alternate"
|
||||
style={{ height: "18px", width: "18px" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span style={{ fontSize: "14px", color: "#8c8c8c" }}>
|
||||
{t("selectPhoto")}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const photoToUpload = (
|
||||
<div style={{ height: "102px" }}>
|
||||
<Upload
|
||||
listType="picture-circle"
|
||||
fileList={fileList}
|
||||
onPreview={handlePreview}
|
||||
onChange={handleChange}
|
||||
beforeUpload={() => false}
|
||||
>
|
||||
{fileList.length > 0 ? null : customUploadButton}
|
||||
</Upload>
|
||||
{previewImage && (
|
||||
<Image
|
||||
wrapperStyle={{ display: "none" }}
|
||||
preview={{
|
||||
visible: previewOpen,
|
||||
onVisibleChange: (visible) => setPreviewOpen(visible),
|
||||
afterOpenChange: (visible) => !visible && setPreviewImage(""),
|
||||
}}
|
||||
src={previewImage}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginBottom: "36px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{photoToUpload}
|
||||
</div>
|
||||
</div>
|
||||
<Form
|
||||
name="user-edit-form"
|
||||
layout="vertical"
|
||||
onFinish={onFinish}
|
||||
initialValues={{
|
||||
name: "",
|
||||
login: "",
|
||||
password: "",
|
||||
email: "",
|
||||
bindTenantId: "",
|
||||
role: "",
|
||||
status: "",
|
||||
}}
|
||||
style={{ flex: 1, display: "flex", flexDirection: "column" }}
|
||||
>
|
||||
<Form.Item
|
||||
label={t("name")}
|
||||
name="name"
|
||||
rules={[{ required: true, message: t("nameMessage") }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("login")}
|
||||
name="login"
|
||||
rules={[{ required: true, message: t("loginMessage") }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("password")}
|
||||
name="password"
|
||||
rules={[{ message: t("passwordMessage") }]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("email")}
|
||||
name="email"
|
||||
rules={[
|
||||
{ message: t("emailMessage") },
|
||||
{ type: "email", message: t("emailErrorMessage") },
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("tenant")}
|
||||
name="bindTenantId"
|
||||
rules={[{ message: t("tenantMessage") }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("role")}
|
||||
name="role"
|
||||
rules={[{ required: true, message: t("roleMessage") }]}
|
||||
>
|
||||
<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>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("status")}
|
||||
name="status"
|
||||
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>
|
||||
</Form.Item>
|
||||
|
||||
<div style={{ flexGrow: 1 }} />
|
||||
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
block
|
||||
style={{ color: "#000" }}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Spin indicator={<LoadingOutlined spin />} size="small"></Spin>{" "}
|
||||
{t("saving")}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<img
|
||||
src="/icons/drawer/reg.svg"
|
||||
alt="save"
|
||||
style={{ height: "18px", width: "18px" }}
|
||||
/>{" "}
|
||||
{t("addAccount")}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user