Files
printerCentral/app/components/templates/TemplateList.vue
josedario87 155995c773 feat: Templates persistentes en servidor + Constructor con tabs por tipo de comando
- Templates ahora se guardan en servidor (data/templates.json) disponibles para todos
- API CRUD para templates: GET/POST /api/templates, GET/PUT/DELETE /api/templates/[id]
- Constructor de comandos rediseñado con tabs: Texto, Feed, Cortar, Pulse, QR, Barcode
- Cada tipo de comando tiene su formulario específico con campos relevantes
- Eliminado QuickActions (integrado en tabs del constructor)
- Mejorada UI de lista de impresoras con renderizado condicional
- Agregado data/ a .gitignore (datos de runtime)
2025-11-25 01:18:36 -06:00

77 lines
2.3 KiB
Vue

<script setup lang="ts">
const templates = useTemplates()
const queue = usePrintQueue()
const toast = useToast()
// Cargar templates al montar
onMounted(() => {
templates.fetchTemplates()
})
function loadTemplate(id: string) {
const ops = templates.loadTemplate(id)
if (ops) {
queue.loadFromTemplate(ops)
toast.add({ title: 'Template cargado en la cola', color: 'success' })
}
}
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>
</div>
</template>