From 8313bb8a9b901e5e6615f2844e798a110089c1da Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 1 Dec 2023 17:13:49 +0100
Subject: [PATCH] feat(filter): add basic highlighting filter query component

---
 .../project/partials/FilterInput.vue          | 130 ++++++++++++++++++
 src/components/project/partials/filters.vue   |   7 +
 src/i18n/lang/en.json                         |   3 +
 3 files changed, 140 insertions(+)
 create mode 100644 src/components/project/partials/FilterInput.vue

diff --git a/src/components/project/partials/FilterInput.vue b/src/components/project/partials/FilterInput.vue
new file mode 100644
index 000000000..52e41acd9
--- /dev/null
+++ b/src/components/project/partials/FilterInput.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import {computed, ref, watch} from 'vue'
+
+const {
+	modelValue,
+} = defineProps<{
+	modelValue: string,
+}>()
+
+const filterQuery = ref('')
+
+watch(
+	() => modelValue,
+	() => {
+		filterQuery.value = modelValue
+	},
+	{immediate: true},
+)
+
+const availableFilterFields = [
+	'done',
+	'dueDate',
+	'priority',
+	'usePriority',
+	'startDate',
+	'endDate',
+	'percentDone',
+	'reminders',
+	'assignees',
+	'labels',
+]
+
+const filterOperators = [
+	'!=',
+	'=',
+	'>',
+	'>=',
+	'<',
+	'<=',
+	'like',
+	'in',
+	'?=',
+]
+
+const filterJoinOperators = [
+	'&&',
+	'||',
+	'(',
+	')',
+]
+
+const highlightedFilterQuery = computed(() => {
+	let highlighted = escapeHtml(filterQuery.value)
+	filterOperators
+		.map(o => ` ${escapeHtml(o)} `)
+		.forEach(o => {
+			highlighted = highlighted.replaceAll(o, `<span class="filter-query__operator">${o}</span>`)
+		})
+	filterJoinOperators
+		.map(o => escapeHtml(o))
+		.forEach(o => {
+			highlighted = highlighted.replaceAll(o, `<span class="filter-query__join-operator">${o}</span>`)
+		})
+	availableFilterFields.forEach(f => {
+		highlighted = highlighted.replaceAll(f, `<span class="filter-query__field">${f}</span>`)
+	})
+	return highlighted
+})
+
+function escapeHtml(unsafe: string): string {
+	return unsafe
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#039;')
+}
+</script>
+
+<template>
+	<div class="field">
+		<label class="label">{{ $t('filters.query.title') }}</label>
+		<div class="control filter-input">
+			<textarea
+				autocomplete="off"
+				autocorrect="off"
+				autocapitalize="off"
+				spellcheck="false"
+				v-model="filterQuery"
+				class="input"
+			></textarea>
+			<div class="filter-input-highlight" v-html="highlightedFilterQuery"></div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss">
+.filter-input-highlight span {	
+	&.filter-query__field {
+		color: #faf594;
+	}
+
+	&.filter-query__operator {
+		color: hsla(var(--primary-h), var(--primary-s), 80%);
+	}
+
+	&.filter-query__join-operator {
+		color: hsla(var(--primary-h), var(--primary-s), 90%);
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+.filter-input {
+	position: relative;
+	
+	textarea {
+		position: absolute;
+		text-fill-color: transparent;
+		-webkit-text-fill-color: transparent;
+		background: transparent !important;
+	}
+	
+	.filter-input-highlight {
+		height: 2.5em;
+		line-height: 1.5;
+		padding: .5em .75em;
+	}
+}
+</style>
diff --git a/src/components/project/partials/filters.vue b/src/components/project/partials/filters.vue
index 31ee569e7..53c7a3638 100644
--- a/src/components/project/partials/filters.vue
+++ b/src/components/project/partials/filters.vue
@@ -27,6 +27,9 @@
 				{{ $t('filters.attributes.sortAlphabetically') }}
 			</fancycheckbox>
 		</div>
+		
+		<FilterInput v-model="filterQuery"/>
+		
 		<div class="field">
 			<label class="label">{{ $t('misc.search') }}</label>
 			<div class="control">
@@ -204,6 +207,7 @@ import ProjectService from '@/services/project'
 
 // FIXME: do not use this here for now. instead create new version from DEFAULT_PARAMS
 import {getDefaultParams} from '@/composables/useTaskList'
+import FilterInput from '@/components/project/partials/FilterInput.vue'
 
 // FIXME: merge with DEFAULT_PARAMS in taskProject.js
 const DEFAULT_PARAMS = {
@@ -217,6 +221,9 @@ const DEFAULT_PARAMS = {
 	s: '',
 } as const
 
+// FIXME: use params
+const filterQuery = ref('')
+
 const DEFAULT_FILTERS = {
 	done: false,
 	dueDate: '',
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index a16ff0959..008f6caf7 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -410,6 +410,9 @@
     "edit": {
       "title": "Edit This Saved Filter",
       "success": "The filter was saved successfully."
+    },
+    "query": {
+      "title": "Query"
     }
   },
   "migrate": {