store/resources/js/components/hr/employees/data-table-dropdown.vue

60 lines
1.8 KiB
Vue

<script setup lang="ts">
import { Link, router } from '@inertiajs/vue3';
import { MoreHorizontal, Pencil, Trash2 } from '@lucide/vue';
import { toast } from 'vue-sonner';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import type { EmployeeListItem } from '@/types/employee';
const props = defineProps<{
employee: EmployeeListItem;
}>();
function destroyEmployee() {
if (!confirm(`Hapus pegawai ${props.employee.full_name ?? ''}?`)) {
return;
}
router.delete(`/admin/hr/employees/${props.employee.id}`, {
onError: () => {
toast.error('Gagal menghapus pegawai.');
},
});
}
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" class="h-8 w-8 p-0">
<span class="sr-only">Buka menu</span>
<MoreHorizontal class="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Aksi</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem as-child>
<Link :href="`/admin/hr/employees/${employee.id}/edit`" class="flex items-center gap-2">
<Pencil class="size-4" />
Ubah
</Link>
</DropdownMenuItem>
<DropdownMenuItem
class="text-destructive focus:text-destructive flex items-center gap-2"
@click="destroyEmployee"
>
<Trash2 class="size-4" />
Hapus
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</template>