josedario87
413ec6d27e
- Nuevo composable usePreview.ts para procesar operaciones en líneas de preview - Nuevo componente PaperSimulator.vue que simula el papel térmico - Nuevo modal PreviewModal.vue para vista previa con edición inline de variables - Botón "Vista previa" agregado a TemplateCard.vue - Integración del modal en TemplateList.vue
95 lines
2.5 KiB
Vue
95 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import type { PrintTemplate } from '~/composables/useTemplates'
|
|
|
|
const props = defineProps<{
|
|
template: PrintTemplate
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
load: [id: string]
|
|
preview: [id: string]
|
|
duplicate: [id: string]
|
|
delete: [id: string]
|
|
}>()
|
|
|
|
const menuItems = computed(() => [
|
|
[
|
|
{
|
|
label: 'Duplicar',
|
|
icon: 'i-heroicons-document-duplicate',
|
|
click: () => emit('duplicate', props.template.id)
|
|
}
|
|
],
|
|
[
|
|
{
|
|
label: 'Eliminar',
|
|
icon: 'i-heroicons-trash',
|
|
color: 'error' as const,
|
|
click: () => emit('delete', props.template.id)
|
|
}
|
|
]
|
|
])
|
|
|
|
function formatDate(date: string | number) {
|
|
return new Date(date).toLocaleDateString('es-AR', {
|
|
day: '2-digit',
|
|
month: 'short',
|
|
year: 'numeric'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UCard variant="outline" class="hover:border-primary-500 dark:hover:border-primary-400 transition-colors">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="min-w-0 flex-1">
|
|
<h3 class="font-medium text-gray-900 dark:text-white truncate">
|
|
{{ template.name }}
|
|
</h3>
|
|
<p
|
|
v-if="template.description"
|
|
class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 mt-1"
|
|
>
|
|
{{ template.description }}
|
|
</p>
|
|
<div class="flex items-center gap-2 mt-2 flex-wrap">
|
|
<UBadge variant="subtle" size="xs">
|
|
{{ template.operations.length }} comandos
|
|
</UBadge>
|
|
<UBadge v-if="template.variables?.length" variant="subtle" size="xs" color="primary">
|
|
{{ template.variables.length }} {{ template.variables.length === 1 ? 'variable' : 'variables' }}
|
|
</UBadge>
|
|
<span class="text-xs text-gray-400 dark:text-gray-500">
|
|
{{ formatDate(template.updatedAt) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<UDropdownMenu :items="menuItems">
|
|
<UButton icon="i-heroicons-ellipsis-vertical" variant="ghost" size="sm" />
|
|
</UDropdownMenu>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="flex gap-2">
|
|
<UButton
|
|
icon="i-heroicons-eye"
|
|
variant="outline"
|
|
class="flex-1"
|
|
@click="$emit('preview', template.id)"
|
|
>
|
|
Vista previa
|
|
</UButton>
|
|
<UButton
|
|
icon="i-heroicons-play"
|
|
color="primary"
|
|
class="flex-1"
|
|
@click="$emit('load', template.id)"
|
|
>
|
|
Cargar
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</template>
|