testapi/resources/js/pages/Project/ProjectDropdown.vue

97 lines
3.1 KiB
Vue

<script setup lang="ts">
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { MoreHorizontal } from 'lucide-vue-next';
import {
AlertDialog,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogCancel,
AlertDialogAction,
} from '@/components/ui/alert-dialog';
import { Link } from '@inertiajs/vue3';
defineProps<{
project: {
id: number
}
}>();
function copy(id: number) {
navigator.clipboard.writeText(id.toString());
}
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" class="w-8 h-8 p-0">
<span class="sr-only">Åpne meny</span>
<MoreHorizontal class="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Handlinger</DropdownMenuLabel>
<DropdownMenuItem @click="copy(project.id)">
Kopier ID
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem as-child>
<Link :href="route('smartdok.projects.show', project.id)">
Vis prosjekt
</Link>
</DropdownMenuItem>
<DropdownMenuItem as-child>
<Link :href="route('smartdok.projects.edit', project.id)">
Rediger
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<AlertDialog>
<AlertDialogTrigger asChild>
<DropdownMenuItem
className="text-red-600 rounded-sm hover:!bg-zinc-800 cursor-pointer flex items-center py-1 px-2"
:onSelect="(e) => e.preventDefault()"
>Slett</DropdownMenuItem>
</AlertDialogTrigger>
<!-- Confirmation dialog -->
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Er du sikker at du vil slette dette prosjektet?</AlertDialogTitle>
<AlertDialogDescription>
Denne handlingen kan ikke angres.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Avbryt</AlertDialogCancel>
<AlertDialogAction as-child>
<Link
method="delete"
:href="route('smartdok.projects.destroy', project.id)"
class="text-red-600"
as="button"
>
Slett
</Link>
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</DropdownMenuContent>
</DropdownMenu>
</template>