From e44897e0d4aaf0cc3dec9895e829c6950f00efd8 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 12 Mar 2024 21:28:31 +0100
Subject: [PATCH] fix(filter): do not match join operator

Partial fix for https://kolaente.dev/vikunja/vikunja/issues/2194
---
 .../project/partials/FilterInput.vue          | 19 +++++++++++--------
 frontend/src/helpers/filters.ts               |  2 +-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/project/partials/FilterInput.vue b/frontend/src/components/project/partials/FilterInput.vue
index e02eb6838..d668fde47 100644
--- a/frontend/src/components/project/partials/FilterInput.vue
+++ b/frontend/src/components/project/partials/FilterInput.vue
@@ -10,13 +10,15 @@ import User from '@/components/misc/user.vue'
 import ProjectUserService from '@/services/projectUsers'
 import {useProjectStore} from '@/stores/projects'
 import {
-	DATE_FIELDS,
 	ASSIGNEE_FIELDS,
 	AUTOCOMPLETE_FIELDS,
 	AVAILABLE_FILTER_FIELDS,
+	DATE_FIELDS,
 	FILTER_JOIN_OPERATOR,
 	FILTER_OPERATORS,
-	FILTER_OPERATORS_REGEX, LABEL_FIELDS, getFilterFieldRegexPattern,
+	FILTER_OPERATORS_REGEX,
+	getFilterFieldRegexPattern,
+	LABEL_FIELDS,
 } from '@/helpers/filters'
 
 const {
@@ -110,9 +112,9 @@ const highlightedFilterQuery = computed(() => {
 				if (typeof value === 'undefined') {
 					value = ''
 				}
-				
-				let labelTitles = [value]
-				if(operator === 'in' || operator === '?=') {
+
+				let labelTitles = [value.trim()]
+				if (operator === 'in' || operator === '?=') {
 					labelTitles = value.split(',').map(v => v.trim())
 				}
 
@@ -122,7 +124,8 @@ const highlightedFilterQuery = computed(() => {
 					labelsHtml.push(`<span class="filter-query__label_value" style="background-color: ${label?.hexColor}; color: ${label?.textColor}">${label?.title ?? t}</span>`)
 				})
 
-				return `${f} ${operator} ${labelsHtml.join(', ')}`
+				const endSpace = value.endsWith(' ') ? ' ' : ''
+				return `${f} ${operator} ${labelsHtml.join(', ')}${endSpace}`
 			})
 		})
 	FILTER_OPERATORS
@@ -195,7 +198,7 @@ function handleFieldInput() {
 			const [matched, prefix, operator, space, keyword] = match
 			if (keyword) {
 				let search = keyword
-				if(operator === 'in' || operator === '?=') {
+				if (operator === 'in' || operator === '?=') {
 					const keywords = keyword.split(',')
 					search = keywords[keywords.length - 1].trim()
 				}
@@ -348,7 +351,7 @@ function autocompleteSelect(value) {
 		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);
diff --git a/frontend/src/helpers/filters.ts b/frontend/src/helpers/filters.ts
index de10f57f6..4a15696e3 100644
--- a/frontend/src/helpers/filters.ts
+++ b/frontend/src/helpers/filters.ts
@@ -58,7 +58,7 @@ export const FILTER_JOIN_OPERATOR = [
 export const FILTER_OPERATORS_REGEX = '(&lt;|&gt;|&lt;=|&gt;=|=|!=|in)'
 
 export function getFilterFieldRegexPattern(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(