136 lines
3.7 KiB
TypeScript
136 lines
3.7 KiB
TypeScript
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { useState } from "react"
|
|
import { Controller, useForm } from "react-hook-form"
|
|
import { toast } from "sonner"
|
|
import z from "zod"
|
|
import { updateRole } from "@/actions/role"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog"
|
|
import {
|
|
Field,
|
|
FieldError,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
} from "@/components/ui/field"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import type { Role } from "@/models/role"
|
|
|
|
const schema = z.object({
|
|
name: z.string().min(1, "请输入角色名称"),
|
|
description: z.string().optional(),
|
|
})
|
|
|
|
export function UpdateRole(props: { role: Role; onSuccess?: () => void }) {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
const form = useForm({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: {
|
|
name: props.role.name,
|
|
description: props.role.description ?? "",
|
|
},
|
|
})
|
|
|
|
const onSubmit = async (data: z.infer<typeof schema>) => {
|
|
try {
|
|
const resp = await updateRole({ id: props.role.id, ...data })
|
|
if (resp.success) {
|
|
toast.success("角色修改成功")
|
|
props.onSuccess?.()
|
|
setOpen(false)
|
|
} else {
|
|
toast.error(resp.message)
|
|
}
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : error
|
|
toast.error(`接口请求错误: ${message}`)
|
|
}
|
|
}
|
|
|
|
const handleOpenChange = (value: boolean) => {
|
|
if (value) {
|
|
form.reset({
|
|
name: props.role.name,
|
|
description: props.role.description ?? "",
|
|
})
|
|
}
|
|
setOpen(value)
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
|
<DialogTrigger asChild>
|
|
<Button size="sm" variant="secondary">
|
|
修改
|
|
</Button>
|
|
</DialogTrigger>
|
|
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>修改角色</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<form id="role-update" onSubmit={form.handleSubmit(onSubmit)}>
|
|
<FieldGroup>
|
|
<Controller
|
|
control={form.control}
|
|
name="name"
|
|
render={({ field, fieldState }) => (
|
|
<Field>
|
|
<FieldLabel htmlFor="role-update-name">名称</FieldLabel>
|
|
<Input
|
|
id="role-update-name"
|
|
{...field}
|
|
aria-invalid={fieldState.invalid}
|
|
/>
|
|
{fieldState.invalid && (
|
|
<FieldError errors={[fieldState.error]} />
|
|
)}
|
|
</Field>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
control={form.control}
|
|
name="description"
|
|
render={({ field, fieldState }) => (
|
|
<Field>
|
|
<FieldLabel htmlFor="role-update-description">
|
|
描述
|
|
</FieldLabel>
|
|
<Textarea
|
|
id="role-update-description"
|
|
{...field}
|
|
aria-invalid={fieldState.invalid}
|
|
/>
|
|
{fieldState.invalid && (
|
|
<FieldError errors={[fieldState.error]} />
|
|
)}
|
|
</Field>
|
|
)}
|
|
/>
|
|
</FieldGroup>
|
|
</form>
|
|
|
|
<DialogFooter>
|
|
<DialogClose asChild>
|
|
<Button variant="ghost">取消</Button>
|
|
</DialogClose>
|
|
<Button type="submit" form="role-update">
|
|
保存
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|