feat: refactor AdminCreateUserForm to use defaultValues and add reset functionality

This commit is contained in:
ngc2207 2024-12-03 14:02:31 +08:00
parent dfa5179056
commit b8be02025e

View File

@ -25,6 +25,7 @@ import {
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import logger from "@/lib/logger"; import logger from "@/lib/logger";
import { useEffect } from "react";
import { Loader2 } from "lucide-react"; import { Loader2 } from "lucide-react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
@ -53,20 +54,22 @@ const formSchema = z.object({
must_change_password: z.coerce.boolean().default(true), must_change_password: z.coerce.boolean().default(true),
}); });
export default function AdminCreateUserForm() { const defaultValues: z.infer<typeof formSchema> = {
const { toast } = useToast();
const { user, error, loading, adminCreateUser } = adminCreateUserStore();
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
source_id: 0, source_id: 0,
visibility: "public", visibility: "public",
username: "", username: "",
email: "", email: "",
password: "", password: "",
must_change_password: true, must_change_password: true,
}, };
export default function AdminCreateUserForm() {
const { toast } = useToast();
const { user, error, loading, adminCreateUser } = adminCreateUserStore();
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues,
}); });
function onSubmit(values: z.infer<typeof formSchema>) { function onSubmit(values: z.infer<typeof formSchema>) {
@ -91,6 +94,14 @@ export default function AdminCreateUserForm() {
} }
} }
function onReset() {
form.reset(defaultValues);
}
useEffect(() => {
form.reset(defaultValues);
}, [form]);
return ( return (
<div className="h-full w-full flex items-center justify-center px-4"> <div className="h-full w-full flex items-center justify-center px-4">
<Card className="mx-auto min-w-80"> <Card className="mx-auto min-w-80">
@ -109,7 +120,7 @@ export default function AdminCreateUserForm() {
<FormLabel>Authentication Source</FormLabel> <FormLabel>Authentication Source</FormLabel>
<Select <Select
onValueChange={field.onChange} onValueChange={field.onChange}
defaultValue={field.value.toString()} value={field.value.toString()}
> >
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger>
@ -130,10 +141,7 @@ export default function AdminCreateUserForm() {
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>User visibility</FormLabel> <FormLabel>User visibility</FormLabel>
<Select <Select onValueChange={field.onChange} value={field.value}>
onValueChange={field.onChange}
defaultValue={field.value}
>
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger>
<SelectValue /> <SelectValue />
@ -212,6 +220,10 @@ export default function AdminCreateUserForm() {
</FormItem> </FormItem>
)} )}
/> />
<div className="flex items-center justify-between">
<Button variant="outline" onClick={onReset}>
Reset
</Button>
<Button type="submit" disabled={loading}> <Button type="submit" disabled={loading}>
{loading ? ( {loading ? (
<> <>
@ -221,6 +233,7 @@ export default function AdminCreateUserForm() {
"Submit" "Submit"
)} )}
</Button> </Button>
</div>
</form> </form>
</Form> </Form>
</CardContent> </CardContent>