Corregir binding reactivo de filtros en ContactsFilters
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 57s

- Cambiar de computed único a computed individuales por filtro
- Cada filtro ahora emite correctamente update:modelValue
- Los filtros funcionan en tiempo real (nombre fuzzy, ID, teléfono, empleado)
This commit is contained in:
2025-12-05 12:06:03 -06:00
parent 6da1552ae1
commit a017423282

View File

@@ -4,16 +4,16 @@
<div class="search-input-wrapper"> <div class="search-input-wrapper">
<UIcon name="i-heroicons-magnifying-glass" class="search-icon" /> <UIcon name="i-heroicons-magnifying-glass" class="search-icon" />
<input <input
v-model="localFilters.search" v-model="searchFilter"
type="text" type="text"
placeholder="Buscar por nombre..." placeholder="Buscar por nombre..."
class="search-input" class="search-input"
/> />
<button <button
v-if="localFilters.search" v-if="searchFilter"
class="search-clear" class="search-clear"
title="Limpiar búsqueda" title="Limpiar búsqueda"
@click="localFilters.search = ''" @click="searchFilter = ''"
> >
<UIcon name="i-heroicons-x-mark" class="w-4 h-4" /> <UIcon name="i-heroicons-x-mark" class="w-4 h-4" />
</button> </button>
@@ -24,7 +24,7 @@
<!-- Filtro por ID --> <!-- Filtro por ID -->
<div class="filter-field filter-id"> <div class="filter-field filter-id">
<UInput <UInput
v-model="localFilters.id" v-model="idFilter"
type="number" type="number"
placeholder="ID" placeholder="ID"
size="sm" size="sm"
@@ -34,7 +34,7 @@
<!-- Filtro por teléfono --> <!-- Filtro por teléfono -->
<div class="filter-field filter-phone"> <div class="filter-field filter-phone">
<UInput <UInput
v-model="localFilters.telefono" v-model="telefonoFilter"
placeholder="Teléfono" placeholder="Teléfono"
size="sm" size="sm"
/> />
@@ -42,7 +42,7 @@
<!-- Checkbox empleados --> <!-- Checkbox empleados -->
<label class="filter-checkbox"> <label class="filter-checkbox">
<UCheckbox v-model="localFilters.empleado" /> <UCheckbox v-model="empleadoFilter" />
<span>Solo empleados</span> <span>Solo empleados</span>
</label> </label>
@@ -73,17 +73,33 @@ const emit = defineEmits<{
'clear': [] 'clear': []
}>() }>()
const localFilters = computed({ // Computed individuales para cada filtro con emisión reactiva
get: () => props.modelValue, const searchFilter = computed({
set: (val) => emit('update:modelValue', val) get: () => props.modelValue.search,
set: (val) => emit('update:modelValue', { ...props.modelValue, search: val })
})
const idFilter = computed({
get: () => props.modelValue.id,
set: (val) => emit('update:modelValue', { ...props.modelValue, id: val })
})
const telefonoFilter = computed({
get: () => props.modelValue.telefono,
set: (val) => emit('update:modelValue', { ...props.modelValue, telefono: val })
})
const empleadoFilter = computed({
get: () => props.modelValue.empleado,
set: (val) => emit('update:modelValue', { ...props.modelValue, empleado: val })
}) })
const hasActiveFilters = computed(() => { const hasActiveFilters = computed(() => {
return ( return (
localFilters.value.search || props.modelValue.search ||
localFilters.value.id || props.modelValue.id ||
localFilters.value.telefono || props.modelValue.telefono ||
!localFilters.value.empleado !props.modelValue.empleado
) )
}) })