88 lines
3.5 KiB
TypeScript
88 lines
3.5 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Drawer,
|
|
DrawerClose,
|
|
DrawerContent,
|
|
DrawerDescription,
|
|
DrawerFooter,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
} from "@/components/ui/drawer"
|
|
import { useState } from "react";
|
|
import { AdminApi } from "@/lib/api";
|
|
import { toast } from "sonner";
|
|
import { ApiError } from "next/dist/server/api-utils";
|
|
|
|
interface CreateUserEditorProps {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export function CreateUserEditor({ children }: CreateUserEditorProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
const formData = new FormData(event.currentTarget);
|
|
try {
|
|
await AdminApi.user.create({
|
|
username: formData.get("username")?.toString() || null,
|
|
nickname: formData.get("nickname")?.toString() || null,
|
|
email: formData.get("email")?.toString() || null,
|
|
phone: formData.get("phone")?.toString() || null,
|
|
password: formData.get("password")?.toString() || null,
|
|
});
|
|
setOpen(false);
|
|
toast.success('创建成功')
|
|
} catch (error) {
|
|
toast.error((error as ApiError).message || '创建失败')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div onClick={() => setOpen(true)} className="cursor-pointer">
|
|
{children}
|
|
</div>
|
|
<Drawer open={open} onClose={() => setOpen(false)}>
|
|
<DrawerContent>
|
|
<DrawerHeader className="text-left">
|
|
<DrawerTitle>新增用户</DrawerTitle>
|
|
<DrawerDescription>确保你在保存之前检查所有更改</DrawerDescription>
|
|
</DrawerHeader>
|
|
|
|
<form className="grid items-start gap-4 px-4" onSubmit={handleSubmit}>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="username">账户</Label>
|
|
<Input id="username" name="username" />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="nickname">昵称</Label>
|
|
<Input id="nickname" name="nickname" />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="email">电子邮箱</Label>
|
|
<Input id="email" name="email" />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="phone">手机号</Label>
|
|
<Input id="phone" name="phone" />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="phone">密码</Label>
|
|
<Input id="phone" name="phone" />
|
|
</div>
|
|
<Button type="submit">保存</Button>
|
|
</form>
|
|
|
|
<DrawerFooter className="pt-2">
|
|
<DrawerClose asChild>
|
|
<Button variant="outline">关闭</Button>
|
|
</DrawerClose>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</>
|
|
)
|
|
} |