josedario87
3c076415ff
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 46s
Problemas corregidos: 1. Error "Cannot read properties of undefined (reading 'toLowerCase')": - Agregar validación para filtrar items undefined/null - Verificar que cada item tenga label y value antes de usar toLowerCase - Prevenir errores cuando el array de ubicaciones tiene items inválidos 2. Selección múltiple no funcionaba: - Mejorar onSelectionChange para manejar diferentes tipos de valores - Agregar validación de array antes de procesar - Filtrar items null/undefined antes de extraer valores - Manejar tanto objetos como strings en el array de valores 3. Tags no aparecían en el input: - El problema estaba en el procesamiento de valores seleccionados - Ahora maneja correctamente item.value y strings directos El componente ahora funciona igual que ClienteMultiSelector: - Sin errores en consola - Tags visuales aparecen correctamente - Selección múltiple funciona perfectamente
118 lines
3.7 KiB
Vue
118 lines
3.7 KiB
Vue
<template>
|
|
<div class="space-y-3">
|
|
<!-- InputMenu for ubicacion search and selection -->
|
|
<UInputMenu
|
|
:model-value="selectedUbicacionesObjects"
|
|
:items="filteredItems"
|
|
multiple
|
|
label-key="label"
|
|
value-key="value"
|
|
icon="i-lucide-map-pin"
|
|
placeholder="Buscar ubicaciones..."
|
|
size="sm"
|
|
ignore-filter
|
|
:ui="{
|
|
root: 'focus-within:ring-1 focus-within:ring-[var(--brand-primary)] transition-shadow',
|
|
base: 'bg-[var(--brand-surface)] text-[var(--brand-text)] border border-[var(--brand-border)] focus:ring-1 focus:ring-[var(--brand-primary)] focus:border-[var(--brand-primary)]',
|
|
placeholder: 'placeholder-[var(--brand-text-muted)]',
|
|
leadingIcon: 'text-[var(--brand-text-muted)]',
|
|
content: 'bg-[var(--brand-surface)] border border-[var(--brand-border)]',
|
|
item: 'text-[var(--brand-text)] data-highlighted:bg-[rgba(224,192,128,0.12)] data-highlighted:text-[var(--brand-text)]',
|
|
itemLeadingIcon: 'text-[var(--brand-text-muted)]',
|
|
tagsItem: 'bg-[rgba(224,192,128,0.14)] border border-[rgba(224,192,128,0.28)] text-[var(--brand-primary)]',
|
|
tagsItemText: 'text-[var(--brand-primary)]',
|
|
tagsItemDelete: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[rgba(224,192,128,0.2)]'
|
|
}"
|
|
@update:model-value="onSelectionChange"
|
|
@update:search-term="searchQuery = $event"
|
|
>
|
|
<template #empty>
|
|
<div class="text-center py-2">
|
|
<span class="text-[var(--brand-text-muted)] text-sm">
|
|
No se encontraron ubicaciones
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</UInputMenu>
|
|
|
|
<!-- Selected count and clear all -->
|
|
<div v-if="selectedUbicaciones.length > 0" class="flex items-center justify-between text-sm">
|
|
<span class="text-[var(--brand-text-muted)]">
|
|
{{ selectedUbicaciones.length }} ubicación{{ selectedUbicaciones.length !== 1 ? 'es' : '' }} seleccionada{{ selectedUbicaciones.length !== 1 ? 's' : '' }}
|
|
</span>
|
|
<UButton
|
|
size="xs"
|
|
color="gray"
|
|
variant="link"
|
|
@click="clearAll"
|
|
>
|
|
Limpiar todo
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { InputMenuItem } from '@nuxt/ui'
|
|
|
|
interface UbicacionItem {
|
|
label: string
|
|
value: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
selectedUbicaciones: string[]
|
|
ubicaciones: UbicacionItem[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:selectedUbicaciones': [value: string[]]
|
|
}>()
|
|
|
|
// State
|
|
const searchQuery = ref('')
|
|
|
|
// Computed - Get selected ubicaciones as objects for InputMenu
|
|
const selectedUbicacionesObjects = computed(() => {
|
|
return props.ubicaciones.filter(u => props.selectedUbicaciones.includes(u.value))
|
|
})
|
|
|
|
// Computed - Filter items based on search
|
|
const filteredItems = computed((): InputMenuItem[] => {
|
|
const query = searchQuery.value.trim().toLowerCase()
|
|
|
|
// Filter out undefined/null items and ensure they have label and value
|
|
const validUbicaciones = props.ubicaciones.filter(u => u && u.label && u.value)
|
|
|
|
if (!query) {
|
|
return validUbicaciones
|
|
}
|
|
|
|
return validUbicaciones.filter(u =>
|
|
u.label.toLowerCase().includes(query)
|
|
)
|
|
})
|
|
|
|
// Methods
|
|
function onSelectionChange(value: any[]) {
|
|
if (!Array.isArray(value)) {
|
|
emit('update:selectedUbicaciones', [])
|
|
return
|
|
}
|
|
|
|
// Extract values from selected items
|
|
const values = value
|
|
.filter(item => item && (item.value || typeof item === 'string'))
|
|
.map(item => {
|
|
if (typeof item === 'string') return item
|
|
return item.value || item
|
|
})
|
|
|
|
emit('update:selectedUbicaciones', values)
|
|
}
|
|
|
|
function clearAll() {
|
|
emit('update:selectedUbicaciones', [])
|
|
}
|
|
</script>
|