UpdateUserDialog.tsx•6.37 kB
import { useEffect, useState } from "react";
import { ActionButton } from "@/components/ui/action-button";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { toast } from "@/components/ui/use-toast";
import { api } from "@/lib/trpc";
import { zodResolver } from "@hookform/resolvers/zod";
import { TRPCClientError } from "@trpc/client";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { updateUserSchema } from "@karakeep/shared/types/admin";
type UpdateUserSchema = z.infer<typeof updateUserSchema>;
interface UpdateUserDialogProps {
userId: string;
currentRole: "user" | "admin";
currentQuota: number | null;
currentStorageQuota: number | null;
children?: React.ReactNode;
}
export default function UpdateUserDialog({
userId,
currentRole,
currentQuota,
currentStorageQuota,
children,
}: UpdateUserDialogProps) {
const apiUtils = api.useUtils();
const [isOpen, onOpenChange] = useState(false);
const defaultValues = {
userId,
role: currentRole,
bookmarkQuota: currentQuota,
storageQuota: currentStorageQuota,
};
const form = useForm<UpdateUserSchema>({
resolver: zodResolver(updateUserSchema),
defaultValues,
});
const { mutate, isPending } = api.admin.updateUser.useMutation({
onSuccess: () => {
toast({
description: "User updated successfully",
});
apiUtils.users.list.invalidate();
onOpenChange(false);
},
onError: (error) => {
if (error instanceof TRPCClientError) {
toast({
variant: "destructive",
description: error.message,
});
} else {
toast({
variant: "destructive",
description: "Failed to update user",
});
}
},
});
useEffect(() => {
if (isOpen) {
form.reset(defaultValues);
}
}, [isOpen, form]);
return (
<Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent>
<DialogTrigger asChild></DialogTrigger>
<DialogHeader>
<DialogTitle>Edit User</DialogTitle>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit((val) => mutate(val))}>
<div className="flex w-full flex-col space-y-4">
<FormField
control={form.control}
name="role"
render={({ field }) => (
<FormItem>
<FormLabel>Role</FormLabel>
<FormControl>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="user">User</SelectItem>
<SelectItem value="admin">Admin</SelectItem>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="bookmarkQuota"
render={({ field }) => (
<FormItem>
<FormLabel>Bookmark Quota</FormLabel>
<FormControl>
<Input
type="number"
min="0"
placeholder="Unlimited (leave empty)"
{...field}
value={field.value ?? ""}
onChange={(e) => {
const value = e.target.value;
field.onChange(value === "" ? null : parseInt(value));
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="storageQuota"
render={({ field }) => (
<FormItem>
<FormLabel>Storage Quota (bytes)</FormLabel>
<FormControl>
<Input
type="number"
min="0"
placeholder="Unlimited (leave empty)"
{...field}
value={field.value ?? ""}
onChange={(e) => {
const value = e.target.value;
field.onChange(value === "" ? null : parseInt(value));
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="userId"
render={({ field }) => (
<FormItem>
<FormControl>
<input type="hidden" {...field} />
</FormControl>
</FormItem>
)}
/>
<DialogFooter className="sm:justify-end">
<DialogClose asChild>
<Button type="button" variant="secondary">
Close
</Button>
</DialogClose>
<ActionButton
type="submit"
loading={isPending}
disabled={isPending}
>
Update
</ActionButton>
</DialogFooter>
</div>
</form>
</Form>
</DialogContent>
</Dialog>
);
}