josedario87
155995c773
- 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)
98 lines
3.0 KiB
Vue
98 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
const activeTab = ref('constructor')
|
|
const isDesktop = useMediaQuery('(min-width: 768px)')
|
|
const queue = usePrintQueue()
|
|
const printers = usePrinters()
|
|
const showPrintersDrawer = ref(false)
|
|
|
|
// Cargar impresoras al iniciar
|
|
onMounted(() => {
|
|
printers.fetchPrinters()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
|
<!-- Header -->
|
|
<LayoutAppHeader />
|
|
|
|
<!-- Layout principal -->
|
|
<div class="flex h-[calc(100vh-73px)]">
|
|
<!-- Sidebar solo en desktop -->
|
|
<ClientOnly>
|
|
<aside
|
|
v-if="isDesktop"
|
|
class="w-80 border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 flex flex-col"
|
|
>
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-800">
|
|
<h2 class="font-semibold text-gray-900 dark:text-white">Cola de Impresión</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
{{ queue.operations.value.length }} comandos
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Selector de impresora -->
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-800">
|
|
<div class="flex items-center gap-2">
|
|
<PrintersSelector class="flex-1" />
|
|
<UButton
|
|
icon="i-heroicons-cog-6-tooth"
|
|
color="neutral"
|
|
variant="ghost"
|
|
size="sm"
|
|
title="Configurar impresoras"
|
|
@click="showPrintersDrawer = true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto p-4">
|
|
<QueuePrintQueue />
|
|
</div>
|
|
|
|
<div class="p-4 border-t border-gray-200 dark:border-gray-800">
|
|
<QueueActions />
|
|
</div>
|
|
</aside>
|
|
</ClientOnly>
|
|
|
|
<!-- Panel principal -->
|
|
<main class="flex-1 overflow-y-auto pb-mobile-nav md:pb-0">
|
|
<div class="max-w-3xl mx-auto p-4">
|
|
<!-- En mobile: mostrar según tab activo -->
|
|
<!-- En desktop: siempre mostrar constructor -->
|
|
<template v-if="isDesktop || activeTab === 'constructor'">
|
|
<ConstructorCommandBuilder />
|
|
</template>
|
|
|
|
<template v-else-if="activeTab === 'queue'">
|
|
<QueuePrintQueue />
|
|
<QueueActions class="mt-4" />
|
|
</template>
|
|
|
|
<template v-else-if="activeTab === 'templates'">
|
|
<TemplatesTemplateList />
|
|
</template>
|
|
|
|
<template v-else-if="activeTab === 'printers'">
|
|
<PrintersList />
|
|
</template>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Navegación mobile -->
|
|
<LayoutMobileNavigation v-model="activeTab" />
|
|
|
|
<!-- Modal para gestionar impresoras (desktop) -->
|
|
<UModal v-model:open="showPrintersDrawer">
|
|
<template #header>
|
|
<h3 class="text-lg font-semibold">Gestión de Impresoras</h3>
|
|
</template>
|
|
<template #body>
|
|
<PrintersList />
|
|
</template>
|
|
</UModal>
|
|
</div>
|
|
</template>
|