data-table-row-actions.tsx 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import { DotsHorizontalIcon } from '@radix-ui/react-icons'
  2. import { type Row } from '@tanstack/react-table'
  3. import { type User } from '@/types/users.types'
  4. import { Trash2, UserPen, Eye } from 'lucide-react'
  5. import { PERMISSIONS } from '@/constants/permissions'
  6. import { useCan } from '@/hooks/use-can'
  7. import { Button } from '@/components/ui/button'
  8. import {
  9. DropdownMenu,
  10. DropdownMenuContent,
  11. DropdownMenuItem,
  12. DropdownMenuSeparator,
  13. DropdownMenuShortcut,
  14. DropdownMenuTrigger,
  15. } from '@/components/ui/dropdown-menu'
  16. import { useUsers } from './users-provider'
  17. interface Props {
  18. row: Row<User>
  19. }
  20. export function DataTableRowActions({ row }: Props) {
  21. const { setOpen, setCurrentRow } = useUsers()
  22. const { can } = useCan()
  23. const canUpdate = can(PERMISSIONS.users.update)
  24. const canDelete = can(PERMISSIONS.users.delete)
  25. const user = row.original
  26. const handleEdit = () => {
  27. setCurrentRow(user)
  28. setOpen('edit')
  29. }
  30. const handleView = () => {
  31. setCurrentRow(user)
  32. setOpen('view')
  33. }
  34. const handleDelete = () => {
  35. setCurrentRow(user)
  36. setOpen('delete')
  37. }
  38. return (
  39. <DropdownMenu>
  40. <DropdownMenuTrigger asChild>
  41. <Button variant='ghost' className='flex h-8 w-8 p-0'>
  42. <DotsHorizontalIcon className='h-4 w-4' />
  43. </Button>
  44. </DropdownMenuTrigger>
  45. <DropdownMenuContent align='end'>
  46. <DropdownMenuItem onClick={handleView}>
  47. مشاهده
  48. <DropdownMenuShortcut>
  49. <Eye size={16} />
  50. </DropdownMenuShortcut>
  51. </DropdownMenuItem>
  52. {canUpdate && (
  53. <DropdownMenuItem onClick={handleEdit}>
  54. ویرایش
  55. <DropdownMenuShortcut>
  56. <UserPen size={16} />
  57. </DropdownMenuShortcut>
  58. </DropdownMenuItem>
  59. )}
  60. {canDelete && (
  61. <>
  62. <DropdownMenuSeparator />
  63. <DropdownMenuItem onClick={handleDelete} className='text-red-600'>
  64. حذف
  65. <DropdownMenuShortcut>
  66. <Trash2 size={16} color='red' />
  67. </DropdownMenuShortcut>
  68. </DropdownMenuItem>
  69. </>
  70. )}
  71. </DropdownMenuContent>
  72. </DropdownMenu>
  73. )
  74. }