225 lines
9.1 KiB
TypeScript
225 lines
9.1 KiB
TypeScript
'use client';
|
||
import * as React from "react"
|
||
|
||
import { cn } from "@/lib/utils"
|
||
import { Button } from "@/components/ui/button"
|
||
import {
|
||
Drawer,
|
||
DrawerClose,
|
||
DrawerContent,
|
||
DrawerDescription,
|
||
DrawerFooter,
|
||
DrawerHeader,
|
||
DrawerTitle,
|
||
} from "@/components/ui/drawer"
|
||
import { Input } from "@/components/ui/input"
|
||
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";
|
||
import {
|
||
Alert,
|
||
AlertDescription,
|
||
AlertTitle,
|
||
} from "@/components/ui/alert"
|
||
import { AlertCircle } from "lucide-react";
|
||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
|
||
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||
|
||
export function UserInfoEditor({
|
||
onClose,
|
||
onUserUpdate,
|
||
onUserDelete,
|
||
userId,
|
||
}: {
|
||
onClose: () => void,
|
||
onUserUpdate: (user: User) => void,
|
||
onUserDelete: (userId: string) => void,
|
||
userId: string
|
||
}) {
|
||
const { user, isLoading, error } = useUser(userId);
|
||
|
||
const [saveLoading, setSaveLoading] = React.useState(false);
|
||
const handleSave = async (user: updateUser) => {
|
||
try {
|
||
setSaveLoading(true);
|
||
const res = await AdminApi.user.update(userId, user);
|
||
if (res) {
|
||
toast.success("保存成功");
|
||
onUserUpdate(res);
|
||
} else {
|
||
throw new Error();
|
||
}
|
||
} catch (error) {
|
||
toast.error((error as Error).message || "保存失败");
|
||
} finally {
|
||
setSaveLoading(false);
|
||
}
|
||
}
|
||
|
||
const [removeLoading, setRemoveLoading] = React.useState(false);
|
||
const handleRemove = async (userId: string) => {
|
||
try {
|
||
setRemoveLoading(true);
|
||
await AdminApi.user.remove(userId);
|
||
toast.success("删除成功");
|
||
onUserDelete(userId);
|
||
onClose();
|
||
} catch (error) {
|
||
toast.error((error as Error).message || "删除失败");
|
||
} finally {
|
||
setRemoveLoading(false);
|
||
}
|
||
}
|
||
|
||
const [setPasswordLoading, setSetPasswordLoading] = React.useState(false);
|
||
const handleSetPassword = async (userId: string, password: string) => {
|
||
try {
|
||
setSetPasswordLoading(true);
|
||
await AdminApi.user.setPassword(userId, password);
|
||
toast.success("密码修改成功");
|
||
} catch (error) {
|
||
toast.error((error as Error).message || "密码修改失败");
|
||
} finally {
|
||
setSetPasswordLoading(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Drawer open={!!userId} onClose={onClose} >
|
||
<DrawerContent>
|
||
<DrawerHeader className="text-left">
|
||
<DrawerTitle>编辑用户信息</DrawerTitle>
|
||
<DrawerDescription>确保你在保存之前检查所有更改</DrawerDescription>
|
||
</DrawerHeader>
|
||
|
||
{user && <ProfileForm className="px-4"
|
||
user={user}
|
||
onSetPassword={handleSetPassword}
|
||
onRemove={handleRemove}
|
||
onSubmit={(e) => {
|
||
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 &&
|
||
[...Array(5)].map((_, i) => (
|
||
<Skeleton className="h-20 mx-4 my-1" key={i} />
|
||
))
|
||
}
|
||
|
||
{
|
||
error && (
|
||
<Alert variant="destructive" className="mx-4">
|
||
<AlertCircle className="h-6 w-6" />
|
||
<AlertTitle>出错啦!</AlertTitle>
|
||
<AlertDescription>{error.message}</AlertDescription>
|
||
</Alert>
|
||
)
|
||
}
|
||
|
||
<DrawerFooter className="pt-2">
|
||
<DrawerClose asChild>
|
||
<Button variant="outline">关闭</Button>
|
||
</DrawerClose>
|
||
</DrawerFooter>
|
||
</DrawerContent>
|
||
</Drawer>
|
||
)
|
||
}
|
||
|
||
function ProfileForm({ className, user, onSetPassword, onRemove, ...props }:
|
||
React.ComponentProps<"form"> & {
|
||
user: User,
|
||
onSetPassword: (userId: string, password: string) => Promise<void>,
|
||
onRemove: (userId: string) => Promise<void>,
|
||
}) {
|
||
const [newPassword, setNewPassword] = React.useState<string>("");
|
||
|
||
return (
|
||
<form className={cn("grid items-start gap-4", className)} {...props}>
|
||
<div className="grid gap-2">
|
||
<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" name="username" defaultValue={user.username} />
|
||
</div>
|
||
<div className="grid gap-2">
|
||
<Label htmlFor="nickname">昵称</Label>
|
||
<Input id="nickname" name="nickname" defaultValue={user.nickname} />
|
||
</div>
|
||
<div className="grid gap-2">
|
||
<Label htmlFor="email">电子邮箱</Label>
|
||
<Input id="email" name="email" defaultValue={user.email} />
|
||
</div>
|
||
<div className="grid gap-2">
|
||
<Label htmlFor="phone">手机号</Label>
|
||
<Input id="phone" name="phone" defaultValue={user.phone} />
|
||
</div>
|
||
<div className="w-full flex gap-5">
|
||
<Dialog>
|
||
<DialogTrigger asChild>
|
||
<Button type="button" variant="secondary" className="flex-1" onClick={() => setNewPassword('')}>修改密码</Button>
|
||
</DialogTrigger>
|
||
<DialogContent className="sm:max-w-[425px]" >
|
||
<DialogHeader>
|
||
<DialogTitle>修改密码</DialogTitle>
|
||
<DialogDescription>
|
||
新密码长度在6-32位之间，且至少包含一个字母和一个数字，可以包含特殊字符
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="grid gap-4 py-4">
|
||
<div className="grid grid-cols-4 items-center gap-4">
|
||
<Label htmlFor="password" className="text-right">
|
||
新密码
|
||
</Label>
|
||
<Input
|
||
id="password"
|
||
name="password"
|
||
value={newPassword}
|
||
onChange={(e) => setNewPassword(e.target.value)}
|
||
className="col-span-3"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<DialogClose asChild>
|
||
<Button type="button" onClick={() => onSetPassword(user.userId, newPassword)}>保存密码</Button>
|
||
</DialogClose>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
<AlertDialog>
|
||
<AlertDialogTrigger asChild>
|
||
<Button type="button" variant="destructive" className="flex-1">删除用户</Button>
|
||
</AlertDialogTrigger>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>是否要删除该用户?</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
该操作无法撤销，这会永久删除该用户的所有数据
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction onClick={() => onRemove(user.userId)}>删除</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</div>
|
||
<Button type="submit">保存</Button>
|
||
</form>
|
||
)
|
||
} |