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">
|
<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
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user