完成admin-user-update
This commit is contained in:
@@ -17,15 +17,34 @@ import { Label } from "@/components/ui/label"
|
||||
import { useUser } from "@/hooks/admin/user/use-user";
|
||||
import { User } from "@/lib/types/user";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { updateUser } from "@/lib/api/admin/user";
|
||||
import { AdminApi } from "@/lib/api";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function UserInfoEditor({
|
||||
onClose,
|
||||
onUserUpdate,
|
||||
userId,
|
||||
}: {
|
||||
onClose: () => void,
|
||||
onUserUpdate: (user: User) => void,
|
||||
userId: string
|
||||
}) {
|
||||
const { user, isLoading, error } = userId ? useUser(userId) : {};
|
||||
const handleSave = async (user: updateUser) => {
|
||||
try {
|
||||
const res = await AdminApi.user.update(userId, user);
|
||||
if (res) {
|
||||
toast.success("保存成功");
|
||||
onUserUpdate(res);
|
||||
onClose();
|
||||
} else {
|
||||
throw new Error();
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error((error as Error).message || "保存失败");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Drawer open={!!userId} onClose={onClose} >
|
||||
@@ -36,7 +55,14 @@ export function UserInfoEditor({
|
||||
</DrawerHeader>
|
||||
|
||||
{user && <ProfileForm className="px-4" user={user} onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault()
|
||||
const formData = new FormData(e.currentTarget);
|
||||
handleSave({
|
||||
username: formData.get("username")?.toString()!,
|
||||
nickname: formData.get("nickname")?.toString()!,
|
||||
email: formData.get("email")?.toString() || null,
|
||||
phone: formData.get("phone")?.toString() || null,
|
||||
})
|
||||
}} />}
|
||||
|
||||
{isLoading &&
|
||||
@@ -44,7 +70,7 @@ export function UserInfoEditor({
|
||||
<Skeleton className="h-20 mx-4 my-1" key={i} />
|
||||
))
|
||||
}
|
||||
|
||||
|
||||
<DrawerFooter className="pt-2">
|
||||
<DrawerClose asChild>
|
||||
<Button variant="outline">关闭</Button>
|
||||
@@ -59,24 +85,24 @@ function ProfileForm({ className, user, ...props }: React.ComponentProps<"form">
|
||||
return (
|
||||
<form className={cn("grid items-start gap-4", className)} {...props}>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">UserId</Label>
|
||||
<Input id="email" defaultValue={user.userId} disabled />
|
||||
<Label htmlFor="userId">UserId</Label>
|
||||
<Input id="userId" name="userId" defaultValue={user.userId} disabled />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="username">账户</Label>
|
||||
<Input id="username" defaultValue={user.username} />
|
||||
<Input id="username" name="username" defaultValue={user.username} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="nickname">昵称</Label>
|
||||
<Input id="nickname" defaultValue={user.nickname} />
|
||||
<Input id="nickname" name="nickname" defaultValue={user.nickname} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">电子邮箱</Label>
|
||||
<Input id="email" defaultValue={user.email} />
|
||||
<Input id="email" name="email" defaultValue={user.email} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="phone">手机号</Label>
|
||||
<Input id="phone" defaultValue={user.phone} />
|
||||
<Input id="phone" name="phone" defaultValue={user.phone} />
|
||||
</div>
|
||||
<Button type="submit">保存</Button>
|
||||
</form>
|
||||
|
||||
@@ -67,7 +67,12 @@ export default function Page() {
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
<UserInfoEditor onClose={() => setEditorUserId('')} userId={editorUserId} />
|
||||
<UserInfoEditor onClose={() => setEditorUserId('')} userId={editorUserId} onUserUpdate={(user) => {
|
||||
const index = users.findIndex((u) => u.userId === user.userId);
|
||||
if (index !== -1) {
|
||||
users[index] = user;
|
||||
}
|
||||
}} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user