Corregir binding reactivo de filtros en ContactsFilters
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 57s
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:
@@ -4,16 +4,16 @@
|
||||
<div class="search-input-wrapper">
|
||||
<UIcon name="i-heroicons-magnifying-glass" class="search-icon" />
|
||||
<input
|
||||
v-model="localFilters.search"
|
||||
v-model="searchFilter"
|
||||
type="text"
|
||||
placeholder="Buscar por nombre..."
|
||||
class="search-input"
|
||||
/>
|
||||
<button
|
||||
v-if="localFilters.search"
|
||||
v-if="searchFilter"
|
||||
class="search-clear"
|
||||
title="Limpiar búsqueda"
|
||||
@click="localFilters.search = ''"
|
||||
@click="searchFilter = ''"
|
||||
>
|
||||
<UIcon name="i-heroicons-x-mark" class="w-4 h-4" />
|
||||
</button>
|
||||
@@ -24,7 +24,7 @@
|
||||
<!-- Filtro por ID -->
|
||||
<div class="filter-field filter-id">
|
||||
<UInput
|
||||
v-model="localFilters.id"
|
||||
v-model="idFilter"
|
||||
type="number"
|
||||
placeholder="ID"
|
||||
size="sm"
|
||||
@@ -34,7 +34,7 @@
|
||||
<!-- Filtro por teléfono -->
|
||||
<div class="filter-field filter-phone">
|
||||
<UInput
|
||||
v-model="localFilters.telefono"
|
||||
v-model="telefonoFilter"
|
||||
placeholder="Teléfono"
|
||||
size="sm"
|
||||
/>
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
<!-- Checkbox empleados -->
|
||||
<label class="filter-checkbox">
|
||||
<UCheckbox v-model="localFilters.empleado" />
|
||||
<UCheckbox v-model="empleadoFilter" />
|
||||
<span>Solo empleados</span>
|
||||
</label>
|
||||
|
||||
@@ -73,17 +73,33 @@ const emit = defineEmits<{
|
||||
'clear': []
|
||||
}>()
|
||||
|
||||
const localFilters = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
// Computed individuales para cada filtro con emisión reactiva
|
||||
const searchFilter = computed({
|
||||
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(() => {
|
||||
return (
|
||||
localFilters.value.search ||
|
||||
localFilters.value.id ||
|
||||
localFilters.value.telefono ||
|
||||
!localFilters.value.empleado
|
||||
props.modelValue.search ||
|
||||
props.modelValue.id ||
|
||||
props.modelValue.telefono ||
|
||||
!props.modelValue.empleado
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user