nucleo000/printerCentral
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Corregir errores de crypto.randomUUID, hydration y UI de impresoras

Browse Source 
- Agregar fallback para crypto.randomUUID en useTemplates.ts (compatibilidad con navegadores antiguos)
- Envolver sidebar con ClientOnly para evitar hydration mismatch
- Agregar botón de configuración de impresoras en sidebar
- Agregar drawer lateral para gestión de impresoras en desktop
This commit is contained in:
josedario87
2025-11-25 00:52:36 -06:00
parent e97b2b4d8e
commit 09f5b81067
2 changed files with 58 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
app/pages/index.vue
View File

@@ -3,6 +3,7 @@ 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(() => {
@@ -18,30 +19,42 @@ onMounted(() => {
<!-- Layout principal -->
<div class="flex h-[calc(100vh-73px)]">
<!-- Sidebar solo en desktop -->
<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>
<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">
<PrintersSelector />
</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="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>
<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">
@@ -71,5 +84,15 @@ onMounted(() => {
<!-- Navegación mobile -->
<LayoutMobileNavigation v-model="activeTab" />
<!-- Drawer para gestionar impresoras (desktop) -->
<UDrawer v-model:open="showPrintersDrawer" direction="right">
<template #header>
<h3 class="text-lg font-semibold">Gestión de Impresoras</h3>
</template>
<div class="p-4">
<PrintersList />
</div>
</UDrawer>
</div>
</template>