fix(filters): lint

This commit is contained in:
kolaente 2024-03-09 19:24:17 +01:00
parent 6fea5640e8
commit 4e6e0608c7
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B
13 changed files with 149 additions and 443 deletions

View File

@ -91,7 +91,7 @@
variant="hint-modal" variant="hint-modal"
@close="() => showHowItWorks = false" @close="() => showHowItWorks = false"
> >
<DatemathHelp/> <DatemathHelp />
</modal> </modal>
</div> </div>
</div> </div>

View File

@ -68,7 +68,7 @@
variant="hint-modal" variant="hint-modal"
@close="() => showHowItWorks = false" @close="() => showHowItWorks = false"
> >
<DatemathHelp/> <DatemathHelp />
</modal> </modal>
</div> </div>
</div> </div>
@ -94,6 +94,7 @@ import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
required: false, required: false,
default: null,
}, },
open: { open: {
type: Boolean, type: Boolean,

View File

@ -1,316 +0,0 @@
<script setup lang="ts">
import {computed, nextTick, ref, watch} from 'vue'
const TAB = 9,
ENTER = 13,
ESCAPE = 27,
ARROW_UP = 38,
ARROW_DOWN = 40
type state = 'unfocused' | 'focused'
const selectedIndex = ref(0)
const state = ref<state>('unfocused')
const val = ref<string>('')
const isResizing = ref(false)
const model = defineModel<string>()
const suggestionScrollerRef = ref<HTMLInputElement | null>(null)
const containerRef = ref<HTMLInputElement | null>(null)
const editorRef = ref<HTMLInputElement | null>(null)
watch(
() => model.value,
newValue => {
val.value = newValue
},
)
const placeholderText = computed(() => {
const value = (model.value || '').replace(/[\n\r\t]/gi, ' ')
if (state.value === 'unfocused') {
return value ? '' : props.suggestion
}
if (!value || !value.trim()) {
return props.suggestion
}
return lookahead()
})
const spacerText = computed(() => {
const value = (model.value || '').replace(/[\n\r\t]/gi, ' ')
if (!value || !value.trim()) {
return props.suggestion
}
return value
})
const props = withDefaults(defineProps<{
options: string[],
suggestion?: string,
maxHeight?: number,
}>(), {
maxHeight: 200,
})
function addSelectedIndex(offset: number) {
let nextIndex = Math.max(
0,
Math.min(selectedIndex.value + offset, props.options.length - 1),
)
if (!isFinite(nextIndex)) {
nextIndex = 0
}
selectedIndex.value = nextIndex
updateSuggestionScroll()
}
function highlight(words: string, query: string) {
return (words || '').replace(new RegExp(query, 'i'), '<mark class="scroll-term">' + query + '</mark>')
}
function lookahead() {
if (!props.options.length) {
return model.value
}
const index = Math.max(0, Math.min(selectedIndex.value, props.options.length - 1))
const match = props.options[index]
return model.value + (match ? match.substring(model.value?.length) : '')
}
function updateSuggestionScroll() {
nextTick(() => {
const scroller = suggestionScrollerRef.value
const selectedItem = scroller?.querySelector('.selected')
scroller.scrollTop = selectedItem ? selectedItem.offsetTop : 0
})
}
function updateScrollWindowSize() {
if (isResizing.value) {
return
}
isResizing.value = true
nextTick(() => {
isResizing.value = false
const scroller = suggestionScrollerRef.value
const parent = containerRef.value
if (scroller) {
const rect = parent.getBoundingClientRect()
const pxTop = rect.top
const pxBottom = window.innerHeight - rect.bottom
const maxHeight = Math.max(pxTop, pxBottom, props.maxHeight)
const isReversed = pxBottom < props.maxHeight && pxTop > pxBottom
scroller.style.maxHeight = Math.min(isReversed ? pxTop : pxBottom, props.maxHeight) + 'px'
scroller.parentNode.style.transform =
isReversed ? 'translateY(-100%) translateY(-1.4rem)'
: 'translateY(.4rem)'
}
})
}
function setState(stateName: state) {
state.value = stateName
if (stateName === 'unfocused') {
editorRef.value.blur()
} else {
updateScrollWindowSize()
}
}
function onFocusField(e) {
setState('focused')
}
function onKeydown(e) {
switch (e.keyCode || e.which) {
case ESCAPE:
e.preventDefault()
setState('unfocused')
break
case ARROW_UP:
e.preventDefault()
addSelectedIndex(-1)
break
case ARROW_DOWN:
e.preventDefault()
addSelectedIndex(1)
break
case ENTER:
case TAB:
e.preventDefault()
onSelectValue(lookahead() || model.value)
break
}
}
function onSelectValue(value) {
model.value = value
selectedIndex.value = 0
setState('unfocused')
}
function onUpdateField(e) {
setState('focused')
model.value = e.currentTarget.value
}
</script>
<template>
<div class="autocomplete" ref="containerRef">
<div class="entry-box">
<div class="spacer">{{ spacerText }}</div>
<div class="placeholder">{{ placeholderText }}</div>
<textarea class="field"
@input="onUpdateField"
@focus="onFocusField"
@keydown="onKeydown"
:class="state"
:value="val"
ref="editorRef"></textarea>
</div>
<div class="suggestion-list" v-if="state === 'focused' && options.length">
<div v-if="options && options.length" class="scroll-list">
<div class="items" ref="suggestionScrollerRef" @keydown="onKeydown">
<button
v-for="(item, index) in options"
class="item"
@click="onSelectValue(item)"
:class="{ selected: index === selectedIndex }"
:key="item"
v-html="highlight(item, val)"></button>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.autocomplete {
position: relative;
* {
font-size: 1rem;
font-family: Consolas, Lucida Console, Courier New, monospace;
}
.entry-box {
position: relative;
width: 180px;
}
.spacer,
.placeholder,
.field {
border: none;
height: 100%;
padding: .1rem .2rem;
width: 100%;
}
.spacer {
min-height: 1rem;
visibility: hidden;
}
.placeholder {
user-select: none;
pointer-events: none;
opacity: 0.4;
z-index: 2;
}
.field {
z-index: 1;
&.focused {
color: blue;
}
}
.placeholder,
.field {
left: 0;
outline: none;
overflow: hidden;
position: absolute;
resize: none;
top: 0;
}
.suggestion-list {
position: absolute;
width: 100%;
}
.scroll-list {
position: absolute;
width: 100%;
border: solid 1px lightgray;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.items {
margin: 0;
max-height: 150px;
overflow-y: auto;
overflow-x: hidden;
padding: 0;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-thumb {
background: #045068;
border-radius: 20px;
}
&::-webkit-scrollbar-track {
background: #dfe1e5;
}
}
.item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: solid 1px transparent;
background-color: white;
display: block;
width: 100%;
text-align: left;
&:hover {
cursor: pointer;
}
&:not(.selected):hover {
background-color: #c1dae2;
color: black;
}
&.selected {
background-color: #00aee6;
color: white;
}
}
.scroll-term {
font-weight: bold;
background-color: unset;
color: unset;
}
}
</style>

View File

@ -1,16 +1,26 @@
<script setup lang="ts"> <script setup lang="ts">
import {type ComponentPublicInstance, computed, nextTick, ref, watch} from 'vue' import {type ComponentPublicInstance, nextTick, ref, watch} from 'vue'
const TAB = 9, const props = withDefaults(defineProps<{
ENTER = 13, // eslint-disable-next-line @typescript-eslint/no-explicit-any
ESCAPE = 27, options: any[],
suggestion?: string,
maxHeight?: number,
}>(), {
maxHeight: 200,
suggestion: '',
})
const emit = defineEmits(['blur'])
const ESCAPE = 27,
ARROW_UP = 38, ARROW_UP = 38,
ARROW_DOWN = 40 ARROW_DOWN = 40
type state = 'unfocused' | 'focused' type StateType = 'unfocused' | 'focused'
const selectedIndex = ref(-1) const selectedIndex = ref(-1)
const state = ref<state>('unfocused') const state = ref<StateType>('unfocused')
const val = ref<string>('') const val = ref<string>('')
const model = defineModel<string>() const model = defineModel<string>()
@ -25,25 +35,6 @@ watch(
}, },
) )
const emit = defineEmits(['blur'])
const props = withDefaults(defineProps<{
options: any[],
suggestion?: string,
maxHeight?: number,
}>(), {
maxHeight: 200,
})
function lookahead() {
if (!props.options.length) {
return model.value
}
const index = Math.max(0, Math.min(selectedIndex.value, props.options.length - 1))
const match = props.options[index]
return model.value + (match ? match.substring(model.value?.length) : '')
}
function updateSuggestionScroll() { function updateSuggestionScroll() {
nextTick(() => { nextTick(() => {
const scroller = suggestionScrollerRef.value const scroller = suggestionScrollerRef.value
@ -52,14 +43,14 @@ function updateSuggestionScroll() {
}) })
} }
function setState(stateName: state) { function setState(stateName: StateType) {
state.value = stateName state.value = stateName
if (stateName === 'unfocused') { if (stateName === 'unfocused') {
emit('blur') emit('blur')
} }
} }
function onFocusField(e) { function onFocusField() {
setState('focused') setState('focused')
} }
@ -103,7 +94,7 @@ function select(offset: number) {
// Arrow up but we're already at the top // Arrow up but we're already at the top
index = props.options.length - 1 index = props.options.length - 1
} }
let elems = resultRefs.value[index] const elems = resultRefs.value[index]
if ( if (
typeof elems === 'undefined' typeof elems === 'undefined'
) { ) {
@ -133,37 +124,48 @@ function onUpdateField(e) {
</script> </script>
<template> <template>
<div class="autocomplete" ref="containerRef"> <div
ref="containerRef"
class="autocomplete"
>
<div class="entry-box"> <div class="entry-box">
<slot <slot
name="input" name="input"
:onUpdateField :on-update-field
:onFocusField :on-focus-field
:onKeydown :on-keydown
> >
<textarea class="field" <textarea
@input="onUpdateField" ref="editorRef"
@focus="onFocusField" class="field"
@keydown="onKeydown" :class="state"
:class="state" :value="val"
:value="val" @input="onUpdateField"
ref="editorRef"></textarea> @focus="onFocusField"
@keydown="onKeydown"
/>
</slot> </slot>
</div> </div>
<div class="suggestion-list" v-if="state === 'focused' && options.length"> <div
<div v-if="options && options.length" class="scroll-list"> v-if="state === 'focused' && options.length"
class="suggestion-list"
>
<div
v-if="options && options.length"
class="scroll-list"
>
<div <div
class="items"
ref="suggestionScrollerRef" ref="suggestionScrollerRef"
class="items"
@keydown="onKeydown" @keydown="onKeydown"
> >
<button <button
v-for="(item, index) in options" v-for="(item, index) in options"
class="item"
@click="onSelectValue(item)"
:class="{ selected: index === selectedIndex }"
:key="item" :key="item"
:ref="(el: Element | ComponentPublicInstance | null) => setResultRefs(el, index)" :ref="(el: Element | ComponentPublicInstance | null) => setResultRefs(el, index)"
class="item"
:class="{ selected: index === selectedIndex }"
@click="onSelectValue(item)"
> >
<slot <slot
name="result" name="result"
@ -182,10 +184,10 @@ function onUpdateField(e) {
<style scoped lang="scss"> <style scoped lang="scss">
.autocomplete { .autocomplete {
position: relative; position: relative;
.suggestion-list { .suggestion-list {
position: absolute; position: absolute;
background: var(--white); background: var(--white);
border-radius: 0 0 var(--input-radius) var(--input-radius); border-radius: 0 0 var(--input-radius) var(--input-radius);
border: 1px solid var(--primary); border: 1px solid var(--primary);
@ -197,7 +199,7 @@ function onUpdateField(e) {
max-width: 100%; max-width: 100%;
min-width: 100%; min-width: 100%;
margin-top: -2px; margin-top: -2px;
button { button {
width: 100%; width: 100%;
background: transparent; background: transparent;

View File

@ -1,7 +1,7 @@
<template> <template>
<slot <slot
name="trigger" name="trigger"
:is-open="open" :is-open="openValue"
:toggle="toggle" :toggle="toggle"
:close="close" :close="close"
/> />
@ -9,13 +9,13 @@
ref="popup" ref="popup"
class="popup" class="popup"
:class="{ :class="{
'is-open': open, 'is-open': openValue,
'has-overflow': props.hasOverflow && open 'has-overflow': props.hasOverflow && openValue
}" }"
> >
<slot <slot
name="content" name="content"
:is-open="open" :is-open="openValue"
:toggle="toggle" :toggle="toggle"
:close="close" :close="close"
/> />
@ -37,29 +37,29 @@ const props = defineProps({
}, },
}) })
const emit = defineEmits(['close'])
watch( watch(
() => props.open, () => props.open,
nowOpen => { nowOpen => {
open.value = nowOpen openValue.value = nowOpen
}, },
) )
const emit = defineEmits(['close']) const openValue = ref(false)
const open = ref(false)
const popup = ref<HTMLElement | null>(null) const popup = ref<HTMLElement | null>(null)
function close() { function close() {
open.value = false openValue.value = false
emit('close') emit('close')
} }
function toggle() { function toggle() {
open.value = !open.value openValue.value = !openValue.value
} }
onClickOutside(popup, () => { onClickOutside(popup, () => {
if (!open.value) { if (!openValue.value) {
return return
} }
close() close()

View File

@ -15,7 +15,7 @@ function initState(value: string) {
:init-state="initState('dueDate < now && done = false && dueDate > now/w+1w')" :init-state="initState('dueDate < now && done = false && dueDate > now/w+1w')"
> >
<template #default="{state}"> <template #default="{state}">
<FilterInput v-model="state.value"/> <FilterInput v-model="state.value" />
</template> </template>
</Variant> </Variant>
</Story> </Story>

View File

@ -3,8 +3,6 @@ import {computed, nextTick, ref, watch} from 'vue'
import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea' import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea'
import DatepickerWithValues from '@/components/date/datepickerWithValues.vue' import DatepickerWithValues from '@/components/date/datepickerWithValues.vue'
import UserService from '@/services/user' import UserService from '@/services/user'
import {getAvatarUrl, getDisplayName} from '@/models/user'
import {createRandomID} from '@/helpers/randomId'
import AutocompleteDropdown from '@/components/input/AutocompleteDropdown.vue' import AutocompleteDropdown from '@/components/input/AutocompleteDropdown.vue'
import {useLabelStore} from '@/stores/labels' import {useLabelStore} from '@/stores/labels'
import XLabel from '@/components/tasks/partials/label.vue' import XLabel from '@/components/tasks/partials/label.vue'
@ -169,19 +167,21 @@ function updateDateInQuery(newDate: string) {
const autocompleteMatchPosition = ref(0) const autocompleteMatchPosition = ref(0)
const autocompleteMatchText = ref('') const autocompleteMatchText = ref('')
const autocompleteResultType = ref<'labels' | 'assignees' | 'projects' | null>(null) const autocompleteResultType = ref<'labels' | 'assignees' | 'projects' | null>(null)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const autocompleteResults = ref<any[]>([]) const autocompleteResults = ref<any[]>([])
const labelStore = useLabelStore() const labelStore = useLabelStore()
const projectStore = useProjectStore() const projectStore = useProjectStore()
function handleFieldInput(e, autocompleteOnInput) { function handleFieldInput() {
const cursorPosition = filterInput.value.selectionStart const cursorPosition = filterInput.value.selectionStart
const textUpToCursor = filterQuery.value.substring(0, cursorPosition) const textUpToCursor = filterQuery.value.substring(0, cursorPosition)
AUTOCOMPLETE_FIELDS.forEach(field => { AUTOCOMPLETE_FIELDS.forEach(field => {
const pattern = new RegExp('(' + field + '\\s*' + FILTER_OPERATORS_REGEX + '\\s*)([\'"]?)([^\'"&\|\(\)]+\\1?)?$', 'ig') const pattern = new RegExp('(' + field + '\\s*' + FILTER_OPERATORS_REGEX + '\\s*)([\'"]?)([^\'"&|()]+\\1?)?$', 'ig')
const match = pattern.exec(textUpToCursor) const match = pattern.exec(textUpToCursor)
if (match !== null) { if (match !== null) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [matched, prefix, operator, space, keyword] = match const [matched, prefix, operator, space, keyword] = match
if (keyword) { if (keyword) {
if (matched.startsWith('label')) { if (matched.startsWith('label')) {
@ -229,40 +229,40 @@ function autocompleteSelect(value) {
@update:modelValue="autocompleteSelect" @update:modelValue="autocompleteSelect"
> >
<template <template
v-slot:input="{ onKeydown, onFocusField, onUpdateField }" #input="{ onKeydown, onFocusField }"
> >
<div class="control filter-input"> <div class="control filter-input">
<textarea <textarea
@input="e => handleFieldInput(e, onUpdateField)" ref="filterInput"
@focus="onFocusField" v-model="filterQuery"
@keydown="onKeydown"
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
autocapitalize="off" autocapitalize="off"
spellcheck="false" spellcheck="false"
v-model="filterQuery"
class="input" class="input"
:class="{'has-autocomplete-results': autocompleteResults.length > 0}" :class="{'has-autocomplete-results': autocompleteResults.length > 0}"
ref="filterInput"
:placeholder="$t('filters.query.placeholder')" :placeholder="$t('filters.query.placeholder')"
@input="handleFieldInput"
@focus="onFocusField"
@keydown="onKeydown"
@blur="e => emit('blur', e)" @blur="e => emit('blur', e)"
></textarea> />
<div <div
class="filter-input-highlight" class="filter-input-highlight"
:style="{'height': height}" :style="{'height': height}"
v-html="highlightedFilterQuery" v-html="highlightedFilterQuery"
></div> />
<DatepickerWithValues <DatepickerWithValues
v-model="currentDatepickerValue" v-model="currentDatepickerValue"
:open="datePickerPopupOpen" :open="datePickerPopupOpen"
@close="() => datePickerPopupOpen = false" @close="() => datePickerPopupOpen = false"
@update:model-value="updateDateInQuery" @update:modelValue="updateDateInQuery"
/> />
</div> </div>
</template> </template>
<template <template
v-slot:result="{ item }" #result="{ item }"
> >
<XLabel <XLabel
v-if="autocompleteResultType === 'labels'" v-if="autocompleteResultType === 'labels'"
@ -273,7 +273,9 @@ function autocompleteSelect(value) {
:user="item" :user="item"
:avatar-size="25" :avatar-size="25"
/> />
<template v-else> {{ item.title }}</template> <template v-else>
{{ item.title }}
</template>
</template> </template>
</AutocompleteDropdown> </AutocompleteDropdown>
</div> </div>

View File

@ -6,12 +6,18 @@ const showDocs = ref(false)
</script> </script>
<template> <template>
<BaseButton @click="showDocs = !showDocs" class="has-text-primary"> <BaseButton
class="has-text-primary"
@click="showDocs = !showDocs"
>
{{ $t('filters.query.help.link') }} {{ $t('filters.query.help.link') }}
</BaseButton> </BaseButton>
<Transition> <Transition>
<div v-if="showDocs" class="content"> <div
v-if="showDocs"
class="content"
>
<p>{{ $t('filters.query.help.intro') }}</p> <p>{{ $t('filters.query.help.intro') }}</p>
<ul> <ul>
<li><code>done</code>: {{ $t('filters.query.help.fields.done') }}</li> <li><code>done</code>: {{ $t('filters.query.help.fields.done') }}</li>
@ -47,11 +53,13 @@ const showDocs = ref(false)
<ul> <ul>
<li><code>priority = 4</code>: {{ $t('filters.query.help.examples.priorityEqual') }}</li> <li><code>priority = 4</code>: {{ $t('filters.query.help.examples.priorityEqual') }}</li>
<li><code>dueDate &lt; now</code>: {{ $t('filters.query.help.examples.dueDatePast') }}</li> <li><code>dueDate &lt; now</code>: {{ $t('filters.query.help.examples.dueDatePast') }}</li>
<li><code>done = false &amp;&amp; priority &gt;= 3</code>: <li>
<code>done = false &amp;&amp; priority &gt;= 3</code>:
{{ $t('filters.query.help.examples.undoneHighPriority') }} {{ $t('filters.query.help.examples.undoneHighPriority') }}
</li> </li>
<li><code>assignees in [user1, user2]</code>: {{ $t('filters.query.help.examples.assigneesIn') }}</li> <li><code>assignees in [user1, user2]</code>: {{ $t('filters.query.help.examples.assigneesIn') }}</li>
<li><code>(priority = 1 || priority = 2) &amp;&amp; dueDate &lt;= now</code>: <li>
<code>(priority = 1 || priority = 2) &amp;&amp; dueDate &lt;= now</code>:
{{ $t('filters.query.help.examples.priorityOneOrTwoPastDue') }} {{ $t('filters.query.help.examples.priorityOneOrTwoPastDue') }}
</li> </li>
</ul> </ul>

View File

@ -25,6 +25,7 @@
v-model="value" v-model="value"
:has-title="true" :has-title="true"
class="filter-popup" class="filter-popup"
@update:modelValue="emitChanges"
/> />
</modal> </modal>
</template> </template>
@ -36,28 +37,27 @@ import Filters from '@/components/project/partials/filters.vue'
import {getDefaultTaskFilterParams, type TaskFilterParams} from '@/services/taskCollection' import {getDefaultTaskFilterParams, type TaskFilterParams} from '@/services/taskCollection'
const modelValue = defineModel<TaskFilterParams>() const modelValue = defineModel<TaskFilterParams>({})
const value = computed<TaskFilterParams>({ const value = ref<TaskFilterParams>({})
get() {
return modelValue.value
},
set(value) {
if(modelValue === value) {
return
}
modelValue.value = value
},
})
watch( watch(
() => modelValue, () => modelValue.value,
(modelValue) => { (modelValue: TaskFilterParams) => {
value.value = modelValue value.value = modelValue
}, },
{immediate: true}, {immediate: true},
) )
function emitChanges(newValue: TaskFilterParams) {
if (modelValue.value?.filter === newValue.filter && modelValue.value?.s === newValue.s) {
return
}
modelValue.value.filter = newValue.filter
modelValue.value.s = newValue.s
}
const hasFilters = computed(() => { const hasFilters = computed(() => {
// this.value also contains the page parameter which we don't want to include in filters // this.value also contains the page parameter which we don't want to include in filters
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars

View File

@ -4,12 +4,12 @@
:title="hasTitle ? $t('filters.title') : ''" :title="hasTitle ? $t('filters.title') : ''"
role="search" role="search"
> >
<FilterInput <FilterInput
v-model="params.filter" v-model="params.filter"
:project-id="projectId" :project-id="projectId"
@blur="change()" @blur="change()"
/> />
<div class="field is-flex is-flex-direction-column"> <div class="field is-flex is-flex-direction-column">
<Fancycheckbox <Fancycheckbox
v-model="params.filter_include_nulls" v-model="params.filter_include_nulls"
@ -18,10 +18,13 @@
{{ $t('filters.attributes.includeNulls') }} {{ $t('filters.attributes.includeNulls') }}
</Fancycheckbox> </Fancycheckbox>
</div> </div>
<FilterInputDocs/> <FilterInputDocs />
<template v-if="hasFooter" #footer> <template
v-if="hasFooter"
#footer
>
<x-button <x-button
variant="primary" variant="primary"
@click.prevent.stop="change()" @click.prevent.stop="change()"
@ -48,25 +51,24 @@ import {useProjectStore} from '@/stores/projects'
import {FILTER_OPERATORS, transformFilterStringForApi, transformFilterStringFromApi} from '@/helpers/filters' import {FILTER_OPERATORS, transformFilterStringForApi, transformFilterStringFromApi} from '@/helpers/filters'
import FilterInputDocs from '@/components/project/partials/FilterInputDocs.vue' import FilterInputDocs from '@/components/project/partials/FilterInputDocs.vue'
const props = defineProps({ const {
hasTitle: { hasTitle= false,
type: Boolean, hasFooter = true,
default: false, modelValue,
}, } = defineProps<{
hasFooter: { hasTitle?: boolean,
type: Boolean, hasFooter?: boolean,
default: true, modelValue: TaskFilterParams,
}, }>()
})
const modelValue = defineModel<TaskFilterParams>() const emit = defineEmits(['update:modelValue'])
const route = useRoute() const route = useRoute()
const projectId = computed(() => { const projectId = computed(() => {
if (route.name?.startsWith('project.')) { if (route.name?.startsWith('project.')) {
return Number(route.params.projectId) return Number(route.params.projectId)
} }
return undefined return undefined
}) })
@ -80,7 +82,7 @@ const params = ref<TaskFilterParams>({
// Using watchDebounced to prevent the filter re-triggering itself. // Using watchDebounced to prevent the filter re-triggering itself.
watchDebounced( watchDebounced(
() => modelValue.value, () => modelValue,
(value: TaskFilterParams) => { (value: TaskFilterParams) => {
const val = {...value} const val = {...value}
val.filter = transformFilterStringFromApi( val.filter = transformFilterStringFromApi(
@ -102,22 +104,25 @@ function change() {
labelTitle => labelStore.filterLabelsByQuery([], labelTitle)[0]?.id || null, labelTitle => labelStore.filterLabelsByQuery([], labelTitle)[0]?.id || null,
projectTitle => projectStore.searchProject(projectTitle)[0]?.id || null, projectTitle => projectStore.searchProject(projectTitle)[0]?.id || null,
) )
let s = '' let s = ''
// When the filter does not contain any filter tokens, assume a simple search and redirect the input // When the filter does not contain any filter tokens, assume a simple search and redirect the input
const hasFilterQueries = FILTER_OPERATORS.find(o => filter.includes(o)) || false const hasFilterQueries = FILTER_OPERATORS.find(o => filter.includes(o)) || false
if (!hasFilterQueries) { if (!hasFilterQueries) {
s = filter s = filter
} }
modelValue.value = { const newParams = {
...params.value, ...params.value,
filter: s === '' ? filter : '', filter: s === '' ? filter : '',
s, s,
} }
if (JSON.stringify(modelValue) === JSON.stringify(newParams)) {
return
}
emit('update:modelValue', newParams)
} }
</script> </script>
<style lang="scss" scoped>
</style>

View File

@ -20,7 +20,7 @@ export function useAutoHeightTextarea(value: MaybeRef<string>) {
textareaEl.value = textareaEl.placeholder textareaEl.value = textareaEl.placeholder
} }
const cs = getComputedStyle(textareaEl) // const cs = getComputedStyle(textareaEl)
textareaEl.style.minHeight = '' textareaEl.style.minHeight = ''
textareaEl.style.height = '0' textareaEl.style.height = '0'

View File

@ -57,7 +57,7 @@ export const FILTER_JOIN_OPERATOR = [
export const FILTER_OPERATORS_REGEX = '(&lt;|&gt;|&lt;=|&gt;=|=|!=)' export const FILTER_OPERATORS_REGEX = '(&lt;|&gt;|&lt;=|&gt;=|=|!=)'
function getFieldPattern(field: string): RegExp { function getFieldPattern(field: string): RegExp {
return new RegExp('(' + field + '\\s*' + FILTER_OPERATORS_REGEX + '\\s*)([\'"]?)([^\'"&\|\(\)]+\\1?)?', 'ig') return new RegExp('(' + field + '\\s*' + FILTER_OPERATORS_REGEX + '\\s*)([\'"]?)([^\'"&|()]+\\1?)?', 'ig')
} }
export function transformFilterStringForApi( export function transformFilterStringForApi(
@ -76,6 +76,7 @@ export function transformFilterStringForApi(
let match: RegExpExecArray | null let match: RegExpExecArray | null
while ((match = pattern.exec(filter)) !== null) { while ((match = pattern.exec(filter)) !== null) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [matched, prefix, operator, space, keyword] = match const [matched, prefix, operator, space, keyword] = match
if (keyword) { if (keyword) {
const labelId = labelResolver(keyword.trim()) const labelId = labelResolver(keyword.trim())
@ -91,6 +92,7 @@ export function transformFilterStringForApi(
let match: RegExpExecArray | null let match: RegExpExecArray | null
while ((match = pattern.exec(filter)) !== null) { while ((match = pattern.exec(filter)) !== null) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [matched, prefix, operator, space, keyword] = match const [matched, prefix, operator, space, keyword] = match
if (keyword) { if (keyword) {
const projectId = projectResolver(keyword.trim()) const projectId = projectResolver(keyword.trim())
@ -130,6 +132,7 @@ export function transformFilterStringFromApi(
let match: RegExpExecArray | null let match: RegExpExecArray | null
while ((match = pattern.exec(filter)) !== null) { while ((match = pattern.exec(filter)) !== null) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [matched, prefix, operator, space, keyword] = match const [matched, prefix, operator, space, keyword] = match
if (keyword) { if (keyword) {
const labelTitle = labelResolver(Number(keyword.trim())) const labelTitle = labelResolver(Number(keyword.trim()))
@ -146,6 +149,7 @@ export function transformFilterStringFromApi(
let match: RegExpExecArray | null let match: RegExpExecArray | null
while ((match = pattern.exec(filter)) !== null) { while ((match = pattern.exec(filter)) !== null) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [matched, prefix, operator, space, keyword] = match const [matched, prefix, operator, space, keyword] = match
if (keyword) { if (keyword) {
const project = projectResolver(Number(keyword.trim())) const project = projectResolver(Number(keyword.trim()))

View File

@ -105,13 +105,13 @@ func TestBucket_ReadAll(t *testing.T) {
}, },
} }
bucketsInterface, _, _, err := b.ReadAll(s, testuser, "", -1, 0) bucketsInterface, _, _, err := b.ReadAll(s, testuser, "", -1, 0)
assert.NoError(t, err) require.NoError(t, err)
buckets := bucketsInterface.([]*Bucket) buckets := bucketsInterface.([]*Bucket)
assert.Len(t, buckets, 3) assert.Len(t, buckets, 3)
assert.Len(t, buckets[0].Tasks, 0) assert.Empty(t, buckets[0].Tasks, 0)
assert.Len(t, buckets[1].Tasks, 3) assert.Len(t, buckets[1].Tasks, 3)
assert.Len(t, buckets[2].Tasks, 0) assert.Empty(t, buckets[2].Tasks, 0)
assert.Equal(t, int64(3), buckets[1].Tasks[0].ID) assert.Equal(t, int64(3), buckets[1].Tasks[0].ID)
assert.Equal(t, int64(4), buckets[1].Tasks[1].ID) assert.Equal(t, int64(4), buckets[1].Tasks[1].ID)
assert.Equal(t, int64(5), buckets[1].Tasks[2].ID) assert.Equal(t, int64(5), buckets[1].Tasks[2].ID)