From 4e6e0608c756c59b575c45f9971979b4663e499b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 9 Mar 2024 19:24:17 +0100
Subject: [PATCH] fix(filters): lint

---
 .../components/date/datepickerWithRange.vue   |   2 +-
 .../components/date/datepickerWithValues.vue  |   3 +-
 .../src/components/input/Autocomplete.vue     | 316 ------------------
 .../components/input/AutocompleteDropdown.vue |  98 +++---
 frontend/src/components/misc/popup.vue        |  22 +-
 .../project/partials/FilterInput.story.vue    |   2 +-
 .../project/partials/FilterInput.vue          |  34 +-
 .../project/partials/FilterInputDocs.vue      |  16 +-
 .../project/partials/filter-popup.vue         |  28 +-
 .../components/project/partials/filters.vue   |  57 ++--
 .../src/composables/useAutoHeightTextarea.ts  |   2 +-
 frontend/src/helpers/filters.ts               |   6 +-
 pkg/models/kanban_test.go                     |   6 +-
 13 files changed, 149 insertions(+), 443 deletions(-)
 delete mode 100644 frontend/src/components/input/Autocomplete.vue

diff --git a/frontend/src/components/date/datepickerWithRange.vue b/frontend/src/components/date/datepickerWithRange.vue
index 83a853f018..da35d013f8 100644
--- a/frontend/src/components/date/datepickerWithRange.vue
+++ b/frontend/src/components/date/datepickerWithRange.vue
@@ -91,7 +91,7 @@
 							variant="hint-modal"
 							@close="() => showHowItWorks = false"
 						>
-							<DatemathHelp/>
+							<DatemathHelp />
 						</modal>
 					</div>
 				</div>
diff --git a/frontend/src/components/date/datepickerWithValues.vue b/frontend/src/components/date/datepickerWithValues.vue
index dd92591032..c84f0fc1ac 100644
--- a/frontend/src/components/date/datepickerWithValues.vue
+++ b/frontend/src/components/date/datepickerWithValues.vue
@@ -68,7 +68,7 @@
 							variant="hint-modal"
 							@close="() => showHowItWorks = false"
 						>
-							<DatemathHelp/>
+							<DatemathHelp />
 						</modal>
 					</div>
 				</div>
@@ -94,6 +94,7 @@ import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
 const props = defineProps({
 	modelValue: {
 		required: false,
+		default: null,
 	},
 	open: {
 		type: Boolean,
diff --git a/frontend/src/components/input/Autocomplete.vue b/frontend/src/components/input/Autocomplete.vue
deleted file mode 100644
index ea8a27b60e..0000000000
--- a/frontend/src/components/input/Autocomplete.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/frontend/src/components/input/AutocompleteDropdown.vue b/frontend/src/components/input/AutocompleteDropdown.vue
index e5eb018cd6..64545214df 100644
--- a/frontend/src/components/input/AutocompleteDropdown.vue
+++ b/frontend/src/components/input/AutocompleteDropdown.vue
@@ -1,16 +1,26 @@
 <script setup lang="ts">
-import {type ComponentPublicInstance, computed, nextTick, ref, watch} from 'vue'
+import {type ComponentPublicInstance, nextTick, ref, watch} from 'vue'
 
-const TAB = 9,
-	ENTER = 13,
-	ESCAPE = 27,
+const props = withDefaults(defineProps<{
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	options: any[],
+	suggestion?: string,
+	maxHeight?: number,
+}>(), {
+	maxHeight: 200,
+	suggestion: '',
+})
+
+const emit = defineEmits(['blur'])
+
+const ESCAPE = 27,
 	ARROW_UP = 38,
 	ARROW_DOWN = 40
 
-type state = 'unfocused' | 'focused'
+type StateType = 'unfocused' | 'focused'
 
 const selectedIndex = ref(-1)
-const state = ref<state>('unfocused')
+const state = ref<StateType>('unfocused')
 const val = ref<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() {
 	nextTick(() => {
 		const scroller = suggestionScrollerRef.value
@@ -52,14 +43,14 @@ function updateSuggestionScroll() {
 	})
 }
 
-function setState(stateName: state) {
+function setState(stateName: StateType) {
 	state.value = stateName
 	if (stateName === 'unfocused') {
 		emit('blur')
 	}
 }
 
-function onFocusField(e) {
+function onFocusField() {
 	setState('focused')
 }
 
@@ -103,7 +94,7 @@ function select(offset: number) {
 		// Arrow up but we're already at the top
 		index = props.options.length - 1
 	}
-	let elems = resultRefs.value[index]
+	const elems = resultRefs.value[index]
 	if (
 		typeof elems === 'undefined'
 	) {
@@ -133,37 +124,48 @@ function onUpdateField(e) {
 </script>
 
 <template>
-	<div class="autocomplete" ref="containerRef">
+	<div
+		ref="containerRef"
+		class="autocomplete"
+	>
 		<div class="entry-box">
 			<slot
 				name="input"
-				:onUpdateField
-				:onFocusField
-				:onKeydown
+				:on-update-field
+				:on-focus-field
+				:on-keydown
 			>
-				<textarea class="field"
-						  @input="onUpdateField"
-						  @focus="onFocusField"
-						  @keydown="onKeydown"
-						  :class="state"
-						  :value="val"
-						  ref="editorRef"></textarea>
+				<textarea
+					ref="editorRef"
+					class="field"
+					:class="state"
+					:value="val"
+					@input="onUpdateField"
+					@focus="onFocusField"
+					@keydown="onKeydown"
+				/>
 			</slot>
 		</div>
-		<div class="suggestion-list" v-if="state === 'focused' && options.length">
-			<div v-if="options && options.length" class="scroll-list">
+		<div
+			v-if="state === 'focused' && options.length"
+			class="suggestion-list"
+		>
+			<div
+				v-if="options && options.length"
+				class="scroll-list"
+			>
 				<div
-					class="items"
 					ref="suggestionScrollerRef"
+					class="items"
 					@keydown="onKeydown"
 				>
 					<button
 						v-for="(item, index) in options"
-						class="item"
-						@click="onSelectValue(item)"
-						:class="{ selected: index === selectedIndex }"
 						:key="item"
 						:ref="(el: Element | ComponentPublicInstance | null) => setResultRefs(el, index)"
+						class="item"
+						:class="{ selected: index === selectedIndex }"
+						@click="onSelectValue(item)"
 					>
 						<slot
 							name="result"
@@ -182,10 +184,10 @@ function onUpdateField(e) {
 <style scoped lang="scss">
 .autocomplete {
 	position: relative;
-	
+
 	.suggestion-list {
 		position: absolute;
-		
+
 		background: var(--white);
 		border-radius: 0 0 var(--input-radius) var(--input-radius);
 		border: 1px solid var(--primary);
@@ -197,7 +199,7 @@ function onUpdateField(e) {
 		max-width: 100%;
 		min-width: 100%;
 		margin-top: -2px;
-		
+
 		button {
 			width: 100%;
 			background: transparent;
diff --git a/frontend/src/components/misc/popup.vue b/frontend/src/components/misc/popup.vue
index 4286d64f38..24b8235e89 100644
--- a/frontend/src/components/misc/popup.vue
+++ b/frontend/src/components/misc/popup.vue
@@ -1,7 +1,7 @@
 <template>
 	<slot
 		name="trigger"
-		:is-open="open"
+		:is-open="openValue"
 		:toggle="toggle"
 		:close="close"
 	/>
@@ -9,13 +9,13 @@
 		ref="popup"
 		class="popup"
 		:class="{
-			'is-open': open,
-			'has-overflow': props.hasOverflow && open
+			'is-open': openValue,
+			'has-overflow': props.hasOverflow && openValue
 		}"
 	>
 		<slot
 			name="content"
-			:is-open="open"
+			:is-open="openValue"
 			:toggle="toggle"
 			:close="close"
 		/>
@@ -37,29 +37,29 @@ const props = defineProps({
 	},
 })
 
+const emit = defineEmits(['close'])
+
 watch(
 	() => props.open,
 	nowOpen => {
-		open.value = nowOpen
+		openValue.value = nowOpen
 	},
 )
 
-const emit = defineEmits(['close'])
-
-const open = ref(false)
+const openValue = ref(false)
 const popup = ref<HTMLElement | null>(null)
 
 function close() {
-	open.value = false
+	openValue.value = false
 	emit('close')
 }
 
 function toggle() {
-	open.value = !open.value
+	openValue.value = !openValue.value
 }
 
 onClickOutside(popup, () => {
-	if (!open.value) {
+	if (!openValue.value) {
 		return
 	}
 	close()
diff --git a/frontend/src/components/project/partials/FilterInput.story.vue b/frontend/src/components/project/partials/FilterInput.story.vue
index 09ab942b76..97653dda06 100644
--- a/frontend/src/components/project/partials/FilterInput.story.vue
+++ b/frontend/src/components/project/partials/FilterInput.story.vue
@@ -15,7 +15,7 @@ function initState(value: string) {
 			:init-state="initState('dueDate < now && done = false && dueDate > now/w+1w')"
 		>
 			<template #default="{state}">
-				<FilterInput v-model="state.value"/>
+				<FilterInput v-model="state.value" />
 			</template>
 		</Variant>
 	</Story>
diff --git a/frontend/src/components/project/partials/FilterInput.vue b/frontend/src/components/project/partials/FilterInput.vue
index 0afa87a1bf..e4221a1fc8 100644
--- a/frontend/src/components/project/partials/FilterInput.vue
+++ b/frontend/src/components/project/partials/FilterInput.vue
@@ -3,8 +3,6 @@ import {computed, nextTick, ref, watch} from 'vue'
 import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea'
 import DatepickerWithValues from '@/components/date/datepickerWithValues.vue'
 import UserService from '@/services/user'
-import {getAvatarUrl, getDisplayName} from '@/models/user'
-import {createRandomID} from '@/helpers/randomId'
 import AutocompleteDropdown from '@/components/input/AutocompleteDropdown.vue'
 import {useLabelStore} from '@/stores/labels'
 import XLabel from '@/components/tasks/partials/label.vue'
@@ -169,19 +167,21 @@ function updateDateInQuery(newDate: string) {
 const autocompleteMatchPosition = ref(0)
 const autocompleteMatchText = ref('')
 const autocompleteResultType = ref<'labels' | 'assignees' | 'projects' | null>(null)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const autocompleteResults = ref<any[]>([])
 const labelStore = useLabelStore()
 const projectStore = useProjectStore()
 
-function handleFieldInput(e, autocompleteOnInput) {
+function handleFieldInput() {
 	const cursorPosition = filterInput.value.selectionStart
 	const textUpToCursor = filterQuery.value.substring(0, cursorPosition)
 
 	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)
 
 		if (match !== null) {
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
 			const [matched, prefix, operator, space, keyword] = match
 			if (keyword) {
 				if (matched.startsWith('label')) {
@@ -229,40 +229,40 @@ function autocompleteSelect(value) {
 			@update:modelValue="autocompleteSelect"
 		>
 			<template
-				v-slot:input="{ onKeydown, onFocusField, onUpdateField }"
+				#input="{ onKeydown, onFocusField }"
 			>
 				<div class="control filter-input">
 					<textarea
-						@input="e => handleFieldInput(e, onUpdateField)"
-						@focus="onFocusField"
-						@keydown="onKeydown"
-
+						ref="filterInput"
+						v-model="filterQuery"
 						autocomplete="off"
+
 						autocorrect="off"
 						autocapitalize="off"
 						spellcheck="false"
-						v-model="filterQuery"
 						class="input"
 						:class="{'has-autocomplete-results': autocompleteResults.length > 0}"
-						ref="filterInput"
 						:placeholder="$t('filters.query.placeholder')"
+						@input="handleFieldInput"
+						@focus="onFocusField"
+						@keydown="onKeydown"
 						@blur="e => emit('blur', e)"
-					></textarea>
+					/>
 					<div
 						class="filter-input-highlight"
 						:style="{'height': height}"
 						v-html="highlightedFilterQuery"
-					></div>
+					/>
 					<DatepickerWithValues
 						v-model="currentDatepickerValue"
 						:open="datePickerPopupOpen"
 						@close="() => datePickerPopupOpen = false"
-						@update:model-value="updateDateInQuery"
+						@update:modelValue="updateDateInQuery"
 					/>
 				</div>
 			</template>
 			<template
-				v-slot:result="{ item }"
+				#result="{ item }"
 			>
 				<XLabel
 					v-if="autocompleteResultType === 'labels'"
@@ -273,7 +273,9 @@ function autocompleteSelect(value) {
 					:user="item"
 					:avatar-size="25"
 				/>
-				<template v-else> {{ item.title }}</template>
+				<template v-else>
+					{{ item.title }}
+				</template>
 			</template>
 		</AutocompleteDropdown>
 	</div>
diff --git a/frontend/src/components/project/partials/FilterInputDocs.vue b/frontend/src/components/project/partials/FilterInputDocs.vue
index cd6602bcb0..3ed58008fe 100644
--- a/frontend/src/components/project/partials/FilterInputDocs.vue
+++ b/frontend/src/components/project/partials/FilterInputDocs.vue
@@ -6,12 +6,18 @@ const showDocs = ref(false)
 </script>
 
 <template>
-	<BaseButton @click="showDocs = !showDocs" class="has-text-primary">
+	<BaseButton
+		class="has-text-primary"
+		@click="showDocs = !showDocs"
+	>
 		{{ $t('filters.query.help.link') }}
 	</BaseButton>
 
 	<Transition>
-		<div v-if="showDocs" class="content">
+		<div
+			v-if="showDocs"
+			class="content"
+		>
 			<p>{{ $t('filters.query.help.intro') }}</p>
 			<ul>
 				<li><code>done</code>: {{ $t('filters.query.help.fields.done') }}</li>
@@ -47,11 +53,13 @@ const showDocs = ref(false)
 			<ul>
 				<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>done = false &amp;&amp; priority &gt;= 3</code>:
+				<li>
+					<code>done = false &amp;&amp; priority &gt;= 3</code>:
 					{{ $t('filters.query.help.examples.undoneHighPriority') }}
 				</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') }}
 				</li>
 			</ul>
diff --git a/frontend/src/components/project/partials/filter-popup.vue b/frontend/src/components/project/partials/filter-popup.vue
index b523a887ac..1238ee9b1c 100644
--- a/frontend/src/components/project/partials/filter-popup.vue
+++ b/frontend/src/components/project/partials/filter-popup.vue
@@ -25,6 +25,7 @@
 			v-model="value"
 			:has-title="true"
 			class="filter-popup"
+			@update:modelValue="emitChanges"
 		/>
 	</modal>
 </template>
@@ -36,28 +37,27 @@ import Filters from '@/components/project/partials/filters.vue'
 
 import {getDefaultTaskFilterParams, type TaskFilterParams} from '@/services/taskCollection'
 
-const modelValue = defineModel<TaskFilterParams>()
+const modelValue = defineModel<TaskFilterParams>({})
 
-const value = computed<TaskFilterParams>({
-	get() {
-		return modelValue.value
-	},
-	set(value) {
-		if(modelValue === value) {
-			return
-		}
-		modelValue.value = value
-	},
-})
+const value = ref<TaskFilterParams>({})
 
 watch(
-	() => modelValue,
-	(modelValue) => {
+	() => modelValue.value,
+	(modelValue: TaskFilterParams) => {
 		value.value = modelValue
 	},
 	{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(() => {
 	// this.value also contains the page parameter which we don't want to include in filters
 	// eslint-disable-next-line no-unused-vars
diff --git a/frontend/src/components/project/partials/filters.vue b/frontend/src/components/project/partials/filters.vue
index 07351d09a3..837b23d41e 100644
--- a/frontend/src/components/project/partials/filters.vue
+++ b/frontend/src/components/project/partials/filters.vue
@@ -4,12 +4,12 @@
 		:title="hasTitle ? $t('filters.title') : ''"
 		role="search"
 	>
-		<FilterInput 
+		<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"
@@ -18,10 +18,13 @@
 				{{ $t('filters.attributes.includeNulls') }}
 			</Fancycheckbox>
 		</div>
-		
-		<FilterInputDocs/>
-		
-		<template v-if="hasFooter" #footer>
+
+		<FilterInputDocs />
+
+		<template
+			v-if="hasFooter"
+			#footer
+		>
 			<x-button
 				variant="primary"
 				@click.prevent.stop="change()"
@@ -48,25 +51,24 @@ import {useProjectStore} from '@/stores/projects'
 import {FILTER_OPERATORS, transformFilterStringForApi, transformFilterStringFromApi} from '@/helpers/filters'
 import FilterInputDocs from '@/components/project/partials/FilterInputDocs.vue'
 
-const props = defineProps({
-	hasTitle: {
-		type: Boolean,
-		default: false,
-	},
-	hasFooter: {
-		type: Boolean,
-		default: true,
-	},
-})
+const  {
+	hasTitle= false,
+	hasFooter = true,
+	modelValue,
+} = defineProps<{
+	hasTitle?: boolean,
+	hasFooter?: boolean,
+	modelValue: TaskFilterParams,
+}>()
 
-const modelValue = defineModel<TaskFilterParams>()
+const emit = defineEmits(['update:modelValue'])
 
 const route = useRoute()
 const projectId = computed(() => {
 	if (route.name?.startsWith('project.')) {
 		return Number(route.params.projectId)
 	}
-	
+
 	return undefined
 })
 
@@ -80,7 +82,7 @@ const params = ref<TaskFilterParams>({
 
 // Using watchDebounced to prevent the filter re-triggering itself.
 watchDebounced(
-	() => modelValue.value,
+	() => modelValue,
 	(value: TaskFilterParams) => {
 		const val = {...value}
 		val.filter = transformFilterStringFromApi(
@@ -102,22 +104,25 @@ function change() {
 		labelTitle => labelStore.filterLabelsByQuery([], labelTitle)[0]?.id || null,
 		projectTitle => projectStore.searchProject(projectTitle)[0]?.id || null,
 	)
-	
+
 	let s = ''
-	
+
 	// 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
 	if (!hasFilterQueries) {
 		s = filter
 	}
-	
-	modelValue.value = {
+
+	const newParams = {
 		...params.value,
 		filter: s === '' ? filter : '',
 		s,
 	}
+
+	if (JSON.stringify(modelValue) === JSON.stringify(newParams)) {
+		return
+	}
+
+	emit('update:modelValue', newParams)
 }
 </script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/frontend/src/composables/useAutoHeightTextarea.ts b/frontend/src/composables/useAutoHeightTextarea.ts
index 3baf6b109c..6527ae2bdd 100644
--- a/frontend/src/composables/useAutoHeightTextarea.ts
+++ b/frontend/src/composables/useAutoHeightTextarea.ts
@@ -20,7 +20,7 @@ export function useAutoHeightTextarea(value: MaybeRef<string>) {
 			textareaEl.value = textareaEl.placeholder
 		}
 
-		const cs = getComputedStyle(textareaEl)
+		// const cs = getComputedStyle(textareaEl)
 
 		textareaEl.style.minHeight = ''
 		textareaEl.style.height = '0'
diff --git a/frontend/src/helpers/filters.ts b/frontend/src/helpers/filters.ts
index 84f8fb369d..d8e4b2bd51 100644
--- a/frontend/src/helpers/filters.ts
+++ b/frontend/src/helpers/filters.ts
@@ -57,7 +57,7 @@ export const FILTER_JOIN_OPERATOR = [
 export const FILTER_OPERATORS_REGEX = '(&lt;|&gt;|&lt;=|&gt;=|=|!=)'
 
 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(
@@ -76,6 +76,7 @@ export function transformFilterStringForApi(
 
 		let match: RegExpExecArray | null
 		while ((match = pattern.exec(filter)) !== null) {
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
 			const [matched, prefix, operator, space, keyword] = match
 			if (keyword) {
 				const labelId = labelResolver(keyword.trim())
@@ -91,6 +92,7 @@ export function transformFilterStringForApi(
 
 		let match: RegExpExecArray | null
 		while ((match = pattern.exec(filter)) !== null) {
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
 			const [matched, prefix, operator, space, keyword] = match
 			if (keyword) {
 				const projectId = projectResolver(keyword.trim())
@@ -130,6 +132,7 @@ export function transformFilterStringFromApi(
 
 		let match: RegExpExecArray | null
 		while ((match = pattern.exec(filter)) !== null) {
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
 			const [matched, prefix, operator, space, keyword] = match
 			if (keyword) {
 				const labelTitle = labelResolver(Number(keyword.trim()))
@@ -146,6 +149,7 @@ export function transformFilterStringFromApi(
 
 		let match: RegExpExecArray | null
 		while ((match = pattern.exec(filter)) !== null) {
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
 			const [matched, prefix, operator, space, keyword] = match
 			if (keyword) {
 				const project = projectResolver(Number(keyword.trim()))
diff --git a/pkg/models/kanban_test.go b/pkg/models/kanban_test.go
index 8a1f59a87d..e972b126b1 100644
--- a/pkg/models/kanban_test.go
+++ b/pkg/models/kanban_test.go
@@ -105,13 +105,13 @@ func TestBucket_ReadAll(t *testing.T) {
 			},
 		}
 		bucketsInterface, _, _, err := b.ReadAll(s, testuser, "", -1, 0)
-		assert.NoError(t, err)
+		require.NoError(t, err)
 
 		buckets := bucketsInterface.([]*Bucket)
 		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[2].Tasks, 0)
+		assert.Empty(t, buckets[2].Tasks, 0)
 		assert.Equal(t, int64(3), buckets[1].Tasks[0].ID)
 		assert.Equal(t, int64(4), buckets[1].Tasks[1].ID)
 		assert.Equal(t, int64(5), buckets[1].Tasks[2].ID)