From b874b024122980d3e598b51e7a250fa448b4c72e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 9 Mar 2024 18:58:59 +0100
Subject: [PATCH] feat(filters): highlight label colors in filter

---
 .../project/partials/FilterInput.vue          | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/project/partials/FilterInput.vue b/frontend/src/components/project/partials/FilterInput.vue
index ebf25c52f..0afa87a1b 100644
--- a/frontend/src/components/project/partials/FilterInput.vue
+++ b/frontend/src/components/project/partials/FilterInput.vue
@@ -18,7 +18,7 @@ import {
 	AVAILABLE_FILTER_FIELDS,
 	FILTER_JOIN_OPERATOR,
 	FILTER_OPERATORS,
-	FILTER_OPERATORS_REGEX,
+	FILTER_OPERATORS_REGEX, LABEL_FIELDS,
 } from '@/helpers/filters'
 
 const {
@@ -99,16 +99,29 @@ const highlightedFilterQuery = computed(() => {
 				return `${f} ${token} <span class="filter-query__assignee_value">${value}<span>`
 			})
 		})
-	FILTER_OPERATORS
-		.map(o => ` ${escapeHtml(o)} `)
-		.forEach(o => {
-			highlighted = highlighted.replaceAll(o, `<span class="filter-query__operator">${o}</span>`)
-		})
 	FILTER_JOIN_OPERATOR
 		.map(o => escapeHtml(o))
 		.forEach(o => {
 			highlighted = highlighted.replaceAll(o, `<span class="filter-query__join-operator">${o}</span>`)
 		})
+	LABEL_FIELDS
+		.forEach(f => {
+			const pattern = new RegExp(f + '\\s*' + FILTER_OPERATORS_REGEX + '\\s*([\'"]?)([^\'"\\s]+\\1?)?', 'ig')
+			highlighted = highlighted.replaceAll(pattern, (match, token, start, value) => {
+				if (typeof value === 'undefined') {
+					value = ''
+				}
+
+				const label = labelStore.getLabelsByExactTitles([value])[0] || undefined
+
+				return `${f} ${token} <span class="filter-query__label_value" style="background-color: ${label?.hexColor}; color: ${label?.textColor}">${label?.title ?? value}<span>`
+			})
+		})
+	FILTER_OPERATORS
+		.map(o => ` ${escapeHtml(o)} `)
+		.forEach(o => {
+			highlighted = highlighted.replaceAll(o, `<span class="filter-query__operator">${o}</span>`)
+		})
 	AVAILABLE_FILTER_FIELDS.forEach(f => {
 		highlighted = highlighted.replaceAll(f, `<span class="filter-query__field">${f}</span>`)
 	})
@@ -286,7 +299,7 @@ function autocompleteSelect(value) {
 			color: transparent;
 		}
 
-		&.filter-query__assignee_value {
+		&.filter-query__assignee_value, &.filter-query__label_value {
 			border-radius: $radius;
 			background-color: var(--grey-200);
 			color: var(--grey-700);