josedario87
955584275b
- Agregar imports de Tailwind CSS v4 y Nuxt UI en main.css - Renombrar QueueActions.vue -> Actions.vue y QueueItem.vue -> Item.vue para evitar conflictos de nombres de componentes - Crear composable useMediaQuery para manejo de responsive - Corregir referencias a componentes en index.vue y PrintQueue.vue - Actualizar imports de servidor a rutas relativas - Instalar @iconify-json/heroicons y @iconify-json/lucide - Actualizar Jimp a sintaxis v1.x
112 lines
3.4 KiB
Vue
112 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
const queue = usePrintQueue()
|
|
const templates = useTemplates()
|
|
|
|
const saveDrawerOpen = ref(false)
|
|
const templateName = ref('')
|
|
const templateDescription = ref('')
|
|
|
|
function saveAsTemplate() {
|
|
if (!templateName.value.trim()) return
|
|
templates.saveTemplate(
|
|
templateName.value.trim(),
|
|
templateDescription.value.trim(),
|
|
queue.operations.value as any
|
|
)
|
|
templateName.value = ''
|
|
templateDescription.value = ''
|
|
saveDrawerOpen.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-3">
|
|
<!-- Resultado de la última impresión -->
|
|
<UCard v-if="queue.result.value" variant="soft" :class="queue.result.value.ok ? '' : 'border-red-500'">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon
|
|
:name="queue.result.value.ok ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-circle'"
|
|
:class="queue.result.value.ok ? 'text-green-500' : 'text-red-500'"
|
|
class="w-5 h-5"
|
|
/>
|
|
<span class="text-sm">
|
|
{{ queue.result.value.ok ? (queue.result.value.msg || 'Listo') : (queue.result.value.error || 'Error') }}
|
|
</span>
|
|
</div>
|
|
<pre v-if="queue.result.value.code" class="text-xs text-gray-500 mt-2 overflow-auto">{{ queue.result.value.code }}</pre>
|
|
</UCard>
|
|
|
|
<!-- Botones de acción -->
|
|
<div class="flex flex-wrap gap-2">
|
|
<UButton
|
|
color="primary"
|
|
:loading="queue.loading.value"
|
|
:disabled="queue.operations.value.length === 0"
|
|
@click="queue.sendToPrinter"
|
|
>
|
|
<template #leading>
|
|
<UIcon name="i-heroicons-printer" class="w-4 h-4" />
|
|
</template>
|
|
Imprimir ({{ queue.operations.value.length }})
|
|
</UButton>
|
|
|
|
<UButton
|
|
variant="outline"
|
|
:disabled="queue.operations.value.length === 0"
|
|
@click="saveDrawerOpen = true"
|
|
>
|
|
<template #leading>
|
|
<UIcon name="i-heroicons-bookmark" class="w-4 h-4" />
|
|
</template>
|
|
Guardar template
|
|
</UButton>
|
|
|
|
<UButton
|
|
variant="ghost"
|
|
color="error"
|
|
:disabled="queue.operations.value.length === 0"
|
|
@click="queue.clearQueue"
|
|
>
|
|
<template #leading>
|
|
<UIcon name="i-heroicons-trash" class="w-4 h-4" />
|
|
</template>
|
|
Limpiar
|
|
</UButton>
|
|
</div>
|
|
|
|
<!-- Drawer para guardar template -->
|
|
<UDrawer v-model:open="saveDrawerOpen" direction="bottom" title="Guardar como Template">
|
|
<template #body>
|
|
<div class="space-y-4 p-4">
|
|
<UFormField label="Nombre del template" required>
|
|
<UInput v-model="templateName" placeholder="Ej: Ticket de venta" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Descripción (opcional)">
|
|
<UTextarea
|
|
v-model="templateDescription"
|
|
:rows="2"
|
|
placeholder="Breve descripción del template..."
|
|
/>
|
|
</UFormField>
|
|
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
Se guardarán {{ queue.operations.value.length }} comandos de la cola actual.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<div class="flex gap-2 justify-end p-4">
|
|
<UButton variant="ghost" @click="saveDrawerOpen = false">
|
|
Cancelar
|
|
</UButton>
|
|
<UButton color="primary" :disabled="!templateName.trim()" @click="saveAsTemplate">
|
|
Guardar
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
</UDrawer>
|
|
</div>
|
|
</template>
|