josedario87
c7c32d8c54
Permite definir variables en templates con sintaxis {{nombre🏷️default}}
- Auto-detección de variables al guardar templates
- Drawer para completar valores al cargar template con variables
- Badge mostrando cantidad de variables en tarjeta de template
- Resolución de variables antes de cargar en cola
112 lines
3.4 KiB
Vue
112 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import type { PrintTemplate } from '~/composables/useTemplates'
|
|
import { resolveVariables } from '~/composables/useTemplates'
|
|
|
|
const templates = useTemplates()
|
|
const queue = usePrintQueue()
|
|
const toast = useToast()
|
|
|
|
// Estado para el drawer de variables
|
|
const variablesDrawerOpen = ref(false)
|
|
const selectedTemplate = ref<PrintTemplate | null>(null)
|
|
|
|
// Cargar templates al montar
|
|
onMounted(() => {
|
|
templates.fetchTemplates()
|
|
})
|
|
|
|
function loadTemplate(id: string) {
|
|
const template = templates.templates.value.find(t => t.id === id)
|
|
if (!template) return
|
|
|
|
// Si tiene variables, abrir el drawer
|
|
if (template.variables && template.variables.length > 0) {
|
|
selectedTemplate.value = template
|
|
variablesDrawerOpen.value = true
|
|
} else {
|
|
// Sin variables, cargar directo
|
|
const ops = templates.loadTemplate(id)
|
|
if (ops) {
|
|
queue.loadFromTemplate(ops)
|
|
toast.add({ title: 'Template cargado en la cola', color: 'success' })
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleLoadWithVariables(values: Record<string, string>) {
|
|
if (!selectedTemplate.value) return
|
|
|
|
const ops = resolveVariables(selectedTemplate.value.operations, values)
|
|
queue.loadFromTemplate(ops)
|
|
toast.add({ title: 'Template cargado en la cola', color: 'success' })
|
|
variablesDrawerOpen.value = false
|
|
selectedTemplate.value = null
|
|
}
|
|
|
|
async function duplicateTemplate(id: string) {
|
|
const result = await templates.duplicateTemplate(id)
|
|
if (result) {
|
|
toast.add({ title: 'Template duplicado', color: 'success' })
|
|
} else {
|
|
toast.add({ title: 'Error al duplicar template', color: 'error' })
|
|
}
|
|
}
|
|
|
|
async function deleteTemplate(id: string) {
|
|
if (!confirm('¿Eliminar este template?')) return
|
|
|
|
const result = await templates.deleteTemplate(id)
|
|
if (result) {
|
|
toast.add({ title: 'Template eliminado', color: 'success' })
|
|
} else {
|
|
toast.add({ title: 'Error al eliminar template', color: 'error' })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
Templates guardados
|
|
</h2>
|
|
<UBadge v-if="templates.templates.value.length > 0" variant="subtle">
|
|
{{ templates.templates.value.length }}
|
|
</UBadge>
|
|
</div>
|
|
|
|
<div v-if="templates.loading.value" class="flex justify-center py-12">
|
|
<UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-gray-400" />
|
|
</div>
|
|
|
|
<div v-else-if="templates.templates.value.length === 0" class="text-center py-12">
|
|
<UIcon name="i-heroicons-document-duplicate" class="w-12 h-12 text-gray-400 dark:text-gray-600 mx-auto mb-3" />
|
|
<p class="text-gray-500 dark:text-gray-400 mb-2">
|
|
No hay templates guardados
|
|
</p>
|
|
<p class="text-sm text-gray-400 dark:text-gray-500">
|
|
Crea comandos en el constructor y guárdalos como template desde la cola
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else class="grid gap-3 sm:grid-cols-2">
|
|
<TemplatesTemplateCard
|
|
v-for="template in templates.templates.value"
|
|
:key="template.id"
|
|
:template="template"
|
|
@load="loadTemplate"
|
|
@duplicate="duplicateTemplate"
|
|
@delete="deleteTemplate"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Drawer para completar variables -->
|
|
<TemplatesVariablesDrawer
|
|
:template="selectedTemplate"
|
|
:open="variablesDrawerOpen"
|
|
@update:open="variablesDrawerOpen = $event"
|
|
@load="handleLoadWithVariables"
|
|
/>
|
|
</div>
|
|
</template>
|