67 lines
1.6 KiB
Svelte
67 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { Button } from "$lib/components/ui/button";
|
|
import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
|
|
import type { Port } from "$lib/api/dashboard/a76/general_catalogs/ports";
|
|
import { EllipsisVertical, Pencil, Trash2 } from 'lucide-svelte';
|
|
import CreateEditDialog from "./create-edit-dialog.svelte";
|
|
import DeleteDialog from "./delete-dialog.svelte";
|
|
|
|
let {
|
|
item,
|
|
onSuccess,
|
|
canEdit = true,
|
|
canDelete = true
|
|
}: {
|
|
item: Port;
|
|
onSuccess?: () => void;
|
|
canEdit?: boolean;
|
|
canDelete?: boolean;
|
|
} = $props();
|
|
|
|
let editDialogOpen = $state(false);
|
|
let deleteDialogOpen = $state(false);
|
|
</script>
|
|
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger disabled={!canEdit && !canDelete}>
|
|
{#snippet child({ props })}
|
|
<Button {...props} variant="ghost" size="icon" class="h-8 w-8 p-0">
|
|
<span class="sr-only">Abrir menú</span>
|
|
<EllipsisVertical class="h-4 w-4" />
|
|
</Button>
|
|
{/snippet}
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content align="end">
|
|
<DropdownMenu.Label>Acciones</DropdownMenu.Label>
|
|
{#if canEdit}
|
|
<DropdownMenu.Item onclick={() => editDialogOpen = true}>
|
|
<Pencil class="mr-2 h-4 w-4" />
|
|
Editar
|
|
</DropdownMenu.Item>
|
|
{/if}
|
|
{#if canDelete}
|
|
<DropdownMenu.Item onclick={() => deleteDialogOpen = true} class="text-destructive">
|
|
<Trash2 class="mr-2 h-4 w-4" />
|
|
Eliminar
|
|
</DropdownMenu.Item>
|
|
{/if}
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
|
|
{#if canEdit}
|
|
<CreateEditDialog
|
|
bind:open={editDialogOpen}
|
|
mode="edit"
|
|
{item}
|
|
{onSuccess}
|
|
/>
|
|
{/if}
|
|
|
|
{#if canDelete}
|
|
<DeleteDialog
|
|
bind:open={deleteDialogOpen}
|
|
{item}
|
|
{onSuccess}
|
|
/>
|
|
{/if}
|