feat(filters): make date values in filter query editable

frontend/src/components/project/partials/FilterInput.story.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import FilterInput from '@/components/project/partials/FilterInput.vue'
+
+function initState(value: string) {
+	return {
+		value,
+	}
+}
+</script>
+
+<template>
+	<Story title="Filter Input">
+		<Variant 
+			title="With date values"
+			:init-state="initState('dueDate < now && done = false && dueDate > now/w+1w')"
+		>
+			<template #default="{state}">
+				<FilterInput v-model="state.value"/>
+			</template>
+		</Variant>
+	</Story>
+</template>

frontend/src/components/project/partials/FilterInput.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import {computed, ref, watch} from 'vue'
+import {computed, nextTick, ref, watch} from 'vue'
 import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea'
+import DatepickerWithValues from '@/components/date/datepickerWithValues.vue'
 
 const {
 	modelValue,
@@ -59,16 +60,36 @@ const filterJoinOperators = [
 	')',
 ]
 
+function escapeHtml(unsafe: string): string {
+	return unsafe
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#039;')
+}
+
+function unEscapeHtml(unsafe: string): string {
+	return unsafe
+		.replace(/&amp;/g, '&')
+		.replace(/&lt;/g, '<')
+		.replace(/&gt;/g, '>')
+		.replace(/&quot/g, '"')
+		.replace(/&#039;/g, "'")
+}
+
 const highlightedFilterQuery = computed(() => {
 	let highlighted = escapeHtml(filterQuery.value)
 	dateFields
 		.map(o => escapeHtml(o))
 		.forEach(o => {
 			const pattern = new RegExp(o + '\\s*(&lt;|&gt;|&lt;=|&gt;=|=|!=)\\s*([\'"]?)([^\'"\\s]+\\1?)?', 'ig');
-			highlighted = highlighted.replaceAll(pattern, (match, token, start, value, position) => {
-				console.log({match, token, value, position})
-				return `${o} ${token} <span class="filter-query__special_value">${value}</span><span class="filter-query__special_value_placeholder">${value}</span>`
-				// TODO: make special value a button with datepicker popup
+			highlighted = highlighted.replaceAll(pattern, (match, token, start, value, position, last) => {
+				console.log({position, last})
+				if (typeof value === 'undefined') {
+					value = ''
+				}
+				return `${o} ${token} <button class="button is-primary filter-query__date_value" data-position="${position}">${value}</button><span class="filter-query__date_value_placeholder">${value}</span>`
 			})
 		})
 	filterOperators
@@ -87,13 +108,41 @@ const highlightedFilterQuery = computed(() => {
 	return highlighted
 })
 
-function escapeHtml(unsafe: string): string {
-	return unsafe
-		.replace(/&/g, '&amp;')
-		.replace(/</g, '&lt;')
-		.replace(/>/g, '&gt;')
-		.replace(/"/g, '&quot;')
-		.replace(/'/g, '&#039;')
+const currentOldDatepickerValue = ref('')
+const currentDatepickerValue = ref('')
+const currentDatepickerPos = ref()
+const datePickerPopupOpen = ref(false)
+
+watch(
+	() => highlightedFilterQuery.value,
+	async () => {
+		await nextTick()
+		document.querySelectorAll('button.filter-query__date_value')
+			.forEach(b => {
+				b.addEventListener('click', event => {
+					event.preventDefault()
+					event.stopPropagation()
+
+					const button = event.target
+					currentOldDatepickerValue.value = button?.innerText
+					currentDatepickerPos.value = parseInt(button?.dataset.position)
+					datePickerPopupOpen.value = true
+				})
+			})
+	},
+	{immediate: true}
+)
+
+function updateDateInQuery(newDate: string) {
+	// Need to escape and unescape the query because the positions are based on the escaped query
+	let escaped = escapeHtml(filterQuery.value) 
+	escaped = escaped
+			.substring(0, currentDatepickerPos.value)
+		+ escaped
+			.substring(currentDatepickerPos.value)
+			.replace(currentOldDatepickerValue.value, newDate)
+	currentOldDatepickerValue.value = newDate
+	filterQuery.value = unEscapeHtml(escaped)
 }
 </script>
 
@@ -110,41 +159,48 @@ function escapeHtml(unsafe: string): string {
 				class="input"
 				ref="filterInput"
 			></textarea>
-			<div 
-				class="filter-input-highlight" 
+			<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"
+			/>
 		</div>
 	</div>
 </template>
 
 <style lang="scss">
-.filter-input-highlight span {
-	&.filter-query__field {
-		color: var(--code-literal);
+.filter-input-highlight {
+	span {
+		&.filter-query__field {
+			color: var(--code-literal);
+		}
+
+		&.filter-query__operator {
+			color: var(--code-keyword);
+		}
+
+		&.filter-query__join-operator {
+			color: var(--code-section);
+		}
+
+		&.filter-query__date_value_placeholder {
+			padding: .125rem .25rem;
+			display: inline-block;
+		}
 	}
 
-	&.filter-query__operator {
-		color: var(--code-keyword);
-	}
-
-	&.filter-query__join-operator {
-		color: var(--code-section);
-	}
-
-	&.filter-query__special_value_placeholder {
+	button.filter-query__date_value {
 		padding: .125rem .25rem;
-		display: inline-block;
-	}
-	
-	&.filter-query__special_value {
-		background: var(--primary);
-		padding: .125rem .25rem;
-		color: white;
 		border-radius: $radius;
 		position: absolute;
 		margin-top: calc((0.25em - 0.125rem) * -1);
+		height: 1.75rem;
 	}
 }
 </style>