feat: Sistema de gestión de impresoras persistente
- Crear modelo Printer con campos: id, name, host, deviceId, timeout, isDefault - Almacenamiento persistente en data/printers.json - APIs CRUD: GET/POST /api/printers, GET/PUT/DELETE /api/printers/:id - API para seleccionar impresora activa: POST /api/printers/select - Endpoint de impresión ahora usa la impresora seleccionada o la especificada por printerId - Composable usePrinters() para el cliente - UI: Selector de impresora en sidebar, tab Impresoras en mobile - Componentes: PrintersList, PrintersCard, PrintersForm, PrintersSelector
This commit is contained in:
89
app/components/printers/Card.vue
Normal file
89
app/components/printers/Card.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<script setup lang="ts">
|
||||
import type { Printer } from '~/composables/usePrinters'
|
||||
|
||||
const props = defineProps<{
|
||||
printer: Printer
|
||||
isSelected: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: []
|
||||
edit: []
|
||||
delete: []
|
||||
setDefault: []
|
||||
}>()
|
||||
|
||||
const menuItems = computed(() => [
|
||||
[
|
||||
{
|
||||
label: 'Editar',
|
||||
icon: 'i-heroicons-pencil-square',
|
||||
click: () => emit('edit')
|
||||
},
|
||||
{
|
||||
label: props.printer.isDefault ? 'Es predeterminada' : 'Hacer predeterminada',
|
||||
icon: 'i-heroicons-star',
|
||||
disabled: props.printer.isDefault,
|
||||
click: () => emit('setDefault')
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Eliminar',
|
||||
icon: 'i-heroicons-trash',
|
||||
color: 'error' as const,
|
||||
click: () => emit('delete')
|
||||
}
|
||||
]
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCard
|
||||
:class="[
|
||||
'cursor-pointer transition-all',
|
||||
isSelected ? 'ring-2 ring-primary-500' : 'hover:bg-gray-50 dark:hover:bg-gray-800'
|
||||
]"
|
||||
@click="emit('select')"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white">
|
||||
{{ printer.name }}
|
||||
</h3>
|
||||
<UBadge v-if="printer.isDefault" color="primary" variant="subtle" size="xs">
|
||||
Default
|
||||
</UBadge>
|
||||
<UBadge v-if="isSelected" color="success" variant="subtle" size="xs">
|
||||
Seleccionada
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 space-y-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-globe-alt" class="w-4 h-4" />
|
||||
<span>{{ printer.host }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-identification" class="w-4 h-4" />
|
||||
<span>{{ printer.deviceId }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-clock" class="w-4 h-4" />
|
||||
<span>{{ printer.timeout }}ms timeout</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UDropdownMenu :items="menuItems" @click.stop>
|
||||
<UButton
|
||||
icon="i-heroicons-ellipsis-vertical"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
/>
|
||||
</UDropdownMenu>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
114
app/components/printers/Form.vue
Normal file
114
app/components/printers/Form.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<script setup lang="ts">
|
||||
import type { Printer } from '~/composables/usePrinters'
|
||||
|
||||
const props = defineProps<{
|
||||
printer?: Printer | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [data: {
|
||||
name: string
|
||||
host: string
|
||||
deviceId: string
|
||||
timeout: number
|
||||
isDefault: boolean
|
||||
}]
|
||||
cancel: []
|
||||
}>()
|
||||
|
||||
const form = reactive({
|
||||
name: props.printer?.name || '',
|
||||
host: props.printer?.host || '',
|
||||
deviceId: props.printer?.deviceId || '',
|
||||
timeout: props.printer?.timeout || 60000,
|
||||
isDefault: props.printer?.isDefault || false
|
||||
})
|
||||
|
||||
// Actualizar form cuando cambia el printer
|
||||
watch(() => props.printer, (newPrinter) => {
|
||||
if (newPrinter) {
|
||||
form.name = newPrinter.name
|
||||
form.host = newPrinter.host
|
||||
form.deviceId = newPrinter.deviceId
|
||||
form.timeout = newPrinter.timeout
|
||||
form.isDefault = newPrinter.isDefault
|
||||
} else {
|
||||
form.name = ''
|
||||
form.host = ''
|
||||
form.deviceId = ''
|
||||
form.timeout = 60000
|
||||
form.isDefault = false
|
||||
}
|
||||
})
|
||||
|
||||
function handleSubmit() {
|
||||
if (!form.name || !form.host || !form.deviceId) return
|
||||
|
||||
emit('submit', {
|
||||
name: form.name,
|
||||
host: form.host,
|
||||
deviceId: form.deviceId,
|
||||
timeout: form.timeout,
|
||||
isDefault: form.isDefault
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="space-y-4" @submit.prevent="handleSubmit">
|
||||
<UFormField label="Nombre" required>
|
||||
<UInput
|
||||
v-model="form.name"
|
||||
placeholder="Ej: Impresora Cocina"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Host / IP" required>
|
||||
<UInput
|
||||
v-model="form.host"
|
||||
placeholder="Ej: 192.168.1.100"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Device ID" required>
|
||||
<UInput
|
||||
v-model="form.deviceId"
|
||||
placeholder="Ej: local_printer"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Timeout (ms)">
|
||||
<UInput
|
||||
v-model.number="form.timeout"
|
||||
type="number"
|
||||
placeholder="60000"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UCheckbox
|
||||
v-model="form.isDefault"
|
||||
label="Establecer como impresora predeterminada"
|
||||
/>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-4">
|
||||
<UButton
|
||||
type="button"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
@click="emit('cancel')"
|
||||
>
|
||||
Cancelar
|
||||
</UButton>
|
||||
<UButton
|
||||
type="submit"
|
||||
:disabled="!form.name || !form.host || !form.deviceId"
|
||||
>
|
||||
{{ printer ? 'Guardar cambios' : 'Agregar impresora' }}
|
||||
</UButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
132
app/components/printers/List.vue
Normal file
132
app/components/printers/List.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<script setup lang="ts">
|
||||
const printers = usePrinters()
|
||||
const toast = useToast()
|
||||
|
||||
const showDrawer = ref(false)
|
||||
const editingPrinter = ref<typeof printers.printers.value[0] | null>(null)
|
||||
|
||||
// Cargar impresoras al montar
|
||||
onMounted(() => {
|
||||
printers.fetchPrinters()
|
||||
})
|
||||
|
||||
function openNewPrinter() {
|
||||
editingPrinter.value = null
|
||||
showDrawer.value = true
|
||||
}
|
||||
|
||||
function openEditPrinter(printer: typeof printers.printers.value[0]) {
|
||||
editingPrinter.value = printer
|
||||
showDrawer.value = true
|
||||
}
|
||||
|
||||
async function handleSubmit(data: {
|
||||
name: string
|
||||
host: string
|
||||
deviceId: string
|
||||
timeout: number
|
||||
isDefault: boolean
|
||||
}) {
|
||||
if (editingPrinter.value) {
|
||||
const result = await printers.updatePrinter(editingPrinter.value.id, data)
|
||||
if (result) {
|
||||
toast.add({ title: 'Impresora actualizada', color: 'success' })
|
||||
showDrawer.value = false
|
||||
} else {
|
||||
toast.add({ title: printers.error.value || 'Error', color: 'error' })
|
||||
}
|
||||
} else {
|
||||
const result = await printers.createPrinter(data)
|
||||
if (result) {
|
||||
toast.add({ title: 'Impresora agregada', color: 'success' })
|
||||
showDrawer.value = false
|
||||
} else {
|
||||
toast.add({ title: printers.error.value || 'Error', color: 'error' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSelect(printer: typeof printers.printers.value[0]) {
|
||||
await printers.selectPrinter(printer.id)
|
||||
}
|
||||
|
||||
async function handleSetDefault(printer: typeof printers.printers.value[0]) {
|
||||
const result = await printers.updatePrinter(printer.id, { isDefault: true })
|
||||
if (result) {
|
||||
toast.add({ title: 'Impresora predeterminada actualizada', color: 'success' })
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(printer: typeof printers.printers.value[0]) {
|
||||
if (!confirm(`¿Eliminar la impresora "${printer.name}"?`)) return
|
||||
|
||||
const result = await printers.deletePrinter(printer.id)
|
||||
if (result) {
|
||||
toast.add({ title: 'Impresora eliminada', color: 'success' })
|
||||
} else {
|
||||
toast.add({ title: printers.error.value || 'Error', color: 'error' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Impresoras
|
||||
</h2>
|
||||
<UButton
|
||||
icon="i-heroicons-plus"
|
||||
@click="openNewPrinter"
|
||||
>
|
||||
Agregar
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<div v-if="printers.loading.value" class="flex justify-center py-8">
|
||||
<UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-gray-400" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="printers.printers.value.length === 0" class="text-center py-8">
|
||||
<UIcon name="i-heroicons-printer" class="w-12 h-12 text-gray-400 mx-auto mb-2" />
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
No hay impresoras configuradas
|
||||
</p>
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500 mb-4">
|
||||
Agrega una impresora para comenzar a imprimir
|
||||
</p>
|
||||
<UButton @click="openNewPrinter">
|
||||
Agregar primera impresora
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid gap-3 sm:grid-cols-2">
|
||||
<PrintersCard
|
||||
v-for="printer in printers.printers.value"
|
||||
:key="printer.id"
|
||||
:printer="printer"
|
||||
:is-selected="printer.id === printers.selectedPrinterId.value"
|
||||
@select="handleSelect(printer)"
|
||||
@edit="openEditPrinter(printer)"
|
||||
@delete="handleDelete(printer)"
|
||||
@set-default="handleSetDefault(printer)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<UDrawer v-model:open="showDrawer">
|
||||
<template #header>
|
||||
<h3 class="text-lg font-semibold">
|
||||
{{ editingPrinter ? 'Editar impresora' : 'Nueva impresora' }}
|
||||
</h3>
|
||||
</template>
|
||||
|
||||
<div class="p-4">
|
||||
<PrintersForm
|
||||
:printer="editingPrinter"
|
||||
@submit="handleSubmit"
|
||||
@cancel="showDrawer = false"
|
||||
/>
|
||||
</div>
|
||||
</UDrawer>
|
||||
</div>
|
||||
</template>
|
||||
36
app/components/printers/Selector.vue
Normal file
36
app/components/printers/Selector.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
const printers = usePrinters()
|
||||
|
||||
// Cargar impresoras al montar
|
||||
onMounted(() => {
|
||||
printers.fetchPrinters()
|
||||
})
|
||||
|
||||
const options = computed(() =>
|
||||
printers.printers.value.map(p => ({
|
||||
label: p.name + (p.isDefault ? ' (default)' : ''),
|
||||
value: p.id
|
||||
}))
|
||||
)
|
||||
|
||||
async function handleChange(value: string) {
|
||||
await printers.selectPrinter(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-printer" class="w-5 h-5 text-gray-500" />
|
||||
<USelect
|
||||
v-if="printers.printers.value.length > 0"
|
||||
:model-value="printers.selectedPrinterId.value"
|
||||
:items="options"
|
||||
placeholder="Seleccionar impresora"
|
||||
class="min-w-[200px]"
|
||||
@update:model-value="handleChange"
|
||||
/>
|
||||
<span v-else class="text-sm text-gray-500">
|
||||
No hay impresoras configuradas
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user