109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import Dropdown from '@/components/ui/Dropdown';
|
|
import Button from '@/components/ui/Button';
|
|
import {
|
|
PencilIcon,
|
|
TrashIcon,
|
|
KeyIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
import type { UserWithAvatar } from './types';
|
|
|
|
type UserRowActionsProps = {
|
|
user: UserWithAvatar;
|
|
currentUserId: string | null;
|
|
onEdit: () => void;
|
|
onChangePassword: () => void;
|
|
onDelete: () => void;
|
|
isDeleting?: boolean;
|
|
isSavingPassword?: boolean;
|
|
};
|
|
|
|
export default function UserRowActions({
|
|
user,
|
|
currentUserId,
|
|
onEdit,
|
|
onChangePassword,
|
|
onDelete,
|
|
isDeleting = false,
|
|
isSavingPassword = false,
|
|
}: UserRowActionsProps) {
|
|
const isCurrentUser =
|
|
!!currentUserId && user.nwkennung === currentUserId;
|
|
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
{/* Desktop / Tablet: Buttons */}
|
|
<div className="hidden sm:flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
size="lg"
|
|
variant="secondary"
|
|
icon={<PencilIcon className="size-5" />}
|
|
onClick={onEdit}
|
|
/>
|
|
|
|
<Button
|
|
type="button"
|
|
size="lg"
|
|
variant="soft"
|
|
tone="indigo"
|
|
icon={<KeyIcon className="size-5" />}
|
|
onClick={onChangePassword}
|
|
/>
|
|
|
|
{!isCurrentUser && (
|
|
<Button
|
|
type="button"
|
|
size="lg"
|
|
variant="soft"
|
|
tone="rose"
|
|
icon={<TrashIcon className="size-5" />}
|
|
onClick={onDelete}
|
|
disabled={isDeleting}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Mobile: Dropdown mit denselben Actions */}
|
|
<div className="sm:hidden">
|
|
<Dropdown
|
|
triggerVariant="icon"
|
|
ariaLabel="Weitere Aktionen"
|
|
align="right"
|
|
sections={[
|
|
{
|
|
id: 'main',
|
|
items: [
|
|
{
|
|
id: 'edit',
|
|
label: 'Bearbeiten',
|
|
onClick: onEdit,
|
|
},
|
|
{
|
|
id: 'change-password',
|
|
label: isSavingPassword
|
|
? 'Passwort …'
|
|
: 'Passwort ändern',
|
|
onClick: onChangePassword,
|
|
},
|
|
...(!isCurrentUser
|
|
? [
|
|
{
|
|
id: 'delete',
|
|
label: isDeleting ? 'Lösche …' : 'Löschen',
|
|
tone: 'danger' as const,
|
|
onClick: onDelete,
|
|
disabled: isDeleting,
|
|
},
|
|
]
|
|
: []),
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|