fix(filter): bubble filter query changes up on blur only
This commit is contained in:
parent
1d2f3ca546
commit
533e778b93
|
@ -29,7 +29,7 @@ const {
|
|||
projectId?: number,
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const emit = defineEmits(['update:modelValue', 'blur'])
|
||||
|
||||
const filterQuery = ref<string>('')
|
||||
const {
|
||||
|
@ -257,6 +257,8 @@ function autocompleteSelect(value) {
|
|||
class="input"
|
||||
:class="{'has-autocomplete-results': autocompleteResults.length > 0}"
|
||||
ref="filterInput"
|
||||
:placeholder="$t('filters.query.placeholder')"
|
||||
@blur="e => emit('blur', e)"
|
||||
></textarea>
|
||||
<div
|
||||
class="filter-input-highlight"
|
||||
|
@ -344,10 +346,15 @@ function autocompleteSelect(value) {
|
|||
|
||||
textarea {
|
||||
position: absolute;
|
||||
text-fill-color: transparent;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background: transparent !important;
|
||||
resize: none;
|
||||
text-fill-color: transparent;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
&::placeholder {
|
||||
text-fill-color: var(--input-placeholder-color);
|
||||
-webkit-text-fill-color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
&.has-autocomplete-results {
|
||||
border-radius: var(--input-radius) var(--input-radius) 0 0;
|
||||
|
|
|
@ -4,20 +4,21 @@
|
|||
:title="hasTitle ? $t('filters.title') : ''"
|
||||
role="search"
|
||||
>
|
||||
<FilterInput
|
||||
v-model="params.filter"
|
||||
:project-id="projectId"
|
||||
@blur="change()"
|
||||
/>
|
||||
|
||||
<div class="field is-flex is-flex-direction-column">
|
||||
<Fancycheckbox
|
||||
v-model="params.filter_include_nulls"
|
||||
@update:modelValue="change()"
|
||||
@blur="change()"
|
||||
>
|
||||
{{ $t('filters.attributes.includeNulls') }}
|
||||
</Fancycheckbox>
|
||||
</div>
|
||||
|
||||
<FilterInput
|
||||
v-model="params.filter"
|
||||
:project-id="projectId"
|
||||
/>
|
||||
|
||||
<template #footer>
|
||||
<x-button
|
||||
variant="primary"
|
||||
|
@ -37,7 +38,6 @@ export const ALPHABETICAL_SORT = 'title'
|
|||
import {computed, ref} from 'vue'
|
||||
import {watchDebounced} from '@vueuse/core'
|
||||
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
|
||||
import {objectToSnakeCase} from '@/helpers/case'
|
||||
import FilterInput from '@/components/project/partials/FilterInput.vue'
|
||||
import {useRoute} from 'vue-router'
|
||||
import type {TaskFilterParams} from '@/services/taskCollection'
|
||||
|
@ -75,7 +75,7 @@ const params = ref<TaskFilterParams>({
|
|||
watchDebounced(
|
||||
() => modelValue.value,
|
||||
(value: TaskFilterParams) => {
|
||||
const val = value
|
||||
const val = {...value}
|
||||
val.filter = transformFilterStringFromApi(
|
||||
val?.filter || '',
|
||||
labelId => labelStore.getLabelById(labelId),
|
||||
|
|
|
@ -418,7 +418,8 @@
|
|||
"success": "The filter was saved successfully."
|
||||
},
|
||||
"query": {
|
||||
"title": "Query"
|
||||
"title": "Query",
|
||||
"placeholder": "Type a search or filter query…"
|
||||
}
|
||||
},
|
||||
"migrate": {
|
||||
|
|
Loading…
Reference in New Issue