75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import AdminUpdateUserInfoForm from '@form/user/admin-update-user-info-form';
|
|
import useHasPermission from '@hooks/use-has-permission';
|
|
import usePreventAutoFocus from '@hooks/use-prevent-auto-focus';
|
|
import { m } from '@paraglide/messages';
|
|
import { PenIcon } from '@phosphor-icons/react';
|
|
import { Button } from '@ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@ui/dialog';
|
|
import { Label } from '@ui/label';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@ui/tooltip';
|
|
import { UserWithRole } from 'better-auth/plugins';
|
|
import { useState } from 'react';
|
|
|
|
type EditUserProps = {
|
|
data: UserWithRole;
|
|
};
|
|
|
|
const EditUserAction = ({ data }: EditUserProps) => {
|
|
const [_open, _setOpen] = useState(false);
|
|
const prevent = usePreventAutoFocus();
|
|
const { hasPermission, isLoading } = useHasPermission('user', 'update');
|
|
|
|
if (isLoading) return null;
|
|
|
|
if (hasPermission) {
|
|
return (
|
|
<Dialog open={_open} onOpenChange={_setOpen}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="rounded-full cursor-pointer text-blue-500 hover:bg-blue-100 hover:text-blue-600"
|
|
>
|
|
<PenIcon size={16} />
|
|
<span className="sr-only">{m.ui_edit_user_btn()}</span>
|
|
</Button>
|
|
</DialogTrigger>
|
|
</TooltipTrigger>
|
|
<TooltipContent className="bg-blue-500 [&_svg]:bg-blue-500 [&_svg]:fill-blue-500 text-white">
|
|
<Label>{m.ui_edit_user_btn()}</Label>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<DialogContent
|
|
className="max-w-80 xl:max-w-sm"
|
|
{...prevent}
|
|
onPointerDownOutside={(e) => e.preventDefault()}
|
|
>
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-3 text-lg font-bold text-blue-600">
|
|
<PenIcon size={16} /> {m.ui_edit_user_btn()}
|
|
</DialogTitle>
|
|
<DialogDescription className="sr-only">
|
|
{m.ui_edit_user_btn()}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<AdminUpdateUserInfoForm data={data} onSubmit={_setOpen} />
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
export default EditUserAction;
|