add permission

This commit is contained in:
2026-02-01 17:12:59 +07:00
parent ed7e5baaea
commit 468d55d291
7 changed files with 289 additions and 216 deletions

View File

@@ -1,3 +1,4 @@
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';
@@ -23,44 +24,51 @@ type EditUserProps = {
const EditUserAction = ({ data }: EditUserProps) => {
const [_open, _setOpen] = useState(false);
const prevent = usePreventAutoFocus();
const { hasPermission, isLoading } = useHasPermission('user', 'update');
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>
);
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;