From a25834b0890af4df0786ca7269a0f8b3879979ba Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 18 Jul 2024 16:32:09 +0200
Subject: [PATCH] fix(filters): immediately emit filter query when editing
 saved filter

Resolves https://community.vikunja.io/t/filtering-unexpected-character-relative-dates/2544/12
---
 .../project/partials/FilterPopup.vue          | 21 ++++++++--------
 .../components/project/partials/Filters.vue   | 24 ++++++++++++++++---
 frontend/src/views/filters/FilterEdit.vue     |  1 +
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/project/partials/FilterPopup.vue b/frontend/src/components/project/partials/FilterPopup.vue
index c8488c252..23a069a36 100644
--- a/frontend/src/components/project/partials/FilterPopup.vue
+++ b/frontend/src/components/project/partials/FilterPopup.vue
@@ -19,8 +19,8 @@
 			v-model="value"
 			:has-title="true"
 			class="filter-popup"
-			@update:modelValue="emitChanges"
-			@showResults="() => modalOpen = false"
+			:change-immediately="false"
+			@showResults="showResults"
 		/>
 	</Modal>
 </template>
@@ -52,20 +52,21 @@ watch(
 	},
 )
 
-function emitChanges(newValue: TaskFilterParams) {
-	emit('update:modelValue', {
-		...value.value,
-		filter: newValue.filter,
-		s: newValue.s,
-	})
-}
-
 const hasFilters = computed(() => {
 	return value.value.filter !== '' ||
 		value.value.s !== ''
 })
 
 const modalOpen = ref(false)
+
+function showResults() {
+	emit('update:modelValue', {
+		...value.value,
+		filter: value.value.filter,
+		s: value.value.s,
+	})
+	modalOpen.value = false
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/frontend/src/components/project/partials/Filters.vue b/frontend/src/components/project/partials/Filters.vue
index 31e83123f..2a540e97b 100644
--- a/frontend/src/components/project/partials/Filters.vue
+++ b/frontend/src/components/project/partials/Filters.vue
@@ -7,13 +7,14 @@
 		<FilterInput
 			v-model="filterQuery"
 			:project-id="projectId"
-			@blur="change()"
+			@update:modelValue="() => change('modelValue')"
+			@blur="() => change('blur')"
 		/>
 
 		<div class="field is-flex is-flex-direction-column">
 			<FancyCheckbox
 				v-model="params.filter_include_nulls"
-				@blur="change()"
+				@change="() => change('always')"
 			>
 				{{ $t('filters.attributes.includeNulls') }}
 			</FancyCheckbox>
@@ -62,9 +63,11 @@ const props = withDefaults(defineProps<{
 	modelValue: TaskFilterParams,
 	hasTitle?: boolean,
 	hasFooter?: boolean,
+	changeImmediately?: boolean,
 }>(), {
 	hasTitle: false,
 	hasFooter: true,
+	changeImmediately: false,
 })
 
 const emit = defineEmits<{
@@ -120,7 +123,22 @@ watch(
 	},
 )
 
-function change() {
+function change(event: 'blur' | 'modelValue' | 'always') {
+	if (event !== 'always') {
+		// The filter edit setting needs to save immediately, but the filter query edit in project views should 
+		// only change on blur, or it will show the filter replaced for api when the query is not yet complete. 
+		// This is highly confusing UX, hence we want to avoid that.
+		// The approach taken here allows us to either toggle on blur or immediately, depending on the prop
+		// value provided. This probably is a hacky way to do this, but it is also the most effective.
+		if (props.changeImmediately && event === 'blur') {
+			return
+		}
+
+		if (!props.changeImmediately && event === 'modelValue') {
+			return
+		}
+	}
+
 	const filter = transformFilterStringForApi(
 		filterQuery.value,
 		labelTitle => labelStore.getLabelByExactTitle(labelTitle)?.id || null,
diff --git a/frontend/src/views/filters/FilterEdit.vue b/frontend/src/views/filters/FilterEdit.vue
index 54c5dd0f4..8ab6ab81c 100644
--- a/frontend/src/views/filters/FilterEdit.vue
+++ b/frontend/src/views/filters/FilterEdit.vue
@@ -60,6 +60,7 @@
 						:disabled="filterService.loading"
 						class="has-no-shadow has-no-border"
 						:has-footer="false"
+						:change-immediately="true"
 					/>
 				</div>
 			</div>