josedario87
05bf0e3c91
Agregar sección de Templates debajo del Constructor en la vista desktop para poder cargar templates guardados sin necesidad de estar en mobile.
100 lines
3.1 KiB
Vue
100 lines
3.1 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 space-y-6">
|
|
<!-- En mobile: mostrar según tab activo -->
|
|
<!-- En desktop: mostrar constructor + templates -->
|
|
<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>
|
|
|
|
<!-- En desktop: mostrar templates debajo del constructor -->
|
|
<template v-if="isDesktop">
|
|
<TemplatesTemplateList />
|
|
</template>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Navegación mobile -->
|
|
<LayoutMobileNavigation v-model="activeTab" />
|
|
|
|
<!-- Modal para gestionar impresoras (desktop) -->
|
|
<UModal v-model:open="showPrintersDrawer" title="Gestión de Impresoras" description="Configurar impresoras disponibles">
|
|
<template #body>
|
|
<PrintersList />
|
|
</template>
|
|
</UModal>
|
|
</div>
|
|
</template>
|