From 796199827e001614c33c2cd1a2fa72a94a67c345 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 30 Oct 2024 15:27:33 +0100
Subject: [PATCH] feat(filters): show when the current view has a filter as
 well and both will be used

This should make it clear when a filter does not bring the expected results - maybe because it contradicts with the one set in the view.
Related to https://github.com/go-vikunja/vikunja/issues/296
---
 .../project/partials/FilterPopup.vue          | 22 +++++++++++++++++++
 .../components/project/partials/Filters.vue   | 10 +++++++++
 .../project/views/ProjectKanban.vue           |  2 ++
 .../components/project/views/ProjectList.vue  |  2 ++
 .../components/project/views/ProjectTable.vue |  8 ++++++-
 frontend/src/i18n/lang/en.json                |  2 ++
 6 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/project/partials/FilterPopup.vue b/frontend/src/components/project/partials/FilterPopup.vue
index 23a069a36..765f12e45 100644
--- a/frontend/src/components/project/partials/FilterPopup.vue
+++ b/frontend/src/components/project/partials/FilterPopup.vue
@@ -20,6 +20,7 @@
 			:has-title="true"
 			class="filter-popup"
 			:change-immediately="false"
+			:filter-from-view="filterFromView"
 			@showResults="showResults"
 		/>
 	</Modal>
@@ -31,14 +32,22 @@ import {computed, ref, watch} from 'vue'
 import Filters from '@/components/project/partials/Filters.vue'
 
 import {type TaskFilterParams} from '@/services/taskCollection'
+import {type IProjectView} from '@/modelTypes/IProjectView'
+import {type IProject} from '@/modelTypes/IProject'
+import {useProjectStore} from '@/stores/projects'
 
 const props = defineProps<{
 	modelValue: TaskFilterParams,
+	projectId?: IProject['id'],
+	viewId?: IProjectView['id'],
 }>()
+
 const emit = defineEmits<{
 	'update:modelValue': [value: TaskFilterParams]
 }>()
 
+const projectStore = useProjectStore()
+
 const value = ref<TaskFilterParams>({})
 
 watch(
@@ -67,6 +76,19 @@ function showResults() {
 	})
 	modalOpen.value = false
 }
+
+const filterFromView = computed(() => {
+	if (!props.projectId || !props.viewId) {
+		return
+	}
+	
+	const project = projectStore.projects[props.projectId]
+	if (!project) {
+		return
+	}
+	const view = project.views.find(v => v.id === props.viewId)
+	return view?.filter
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/frontend/src/components/project/partials/Filters.vue b/frontend/src/components/project/partials/Filters.vue
index 7d6531482..5af1bca5a 100644
--- a/frontend/src/components/project/partials/Filters.vue
+++ b/frontend/src/components/project/partials/Filters.vue
@@ -10,6 +10,15 @@
 			@update:modelValue="() => change('modelValue')"
 			@blur="() => change('blur')"
 		/>
+		
+		<div 
+			v-if="filterFromView"
+			class="tw-text-sm tw-mb-2"
+		>
+			{{ $t('filters.fromView') }}
+			<code>{{ filterFromView }}</code><br>
+			{{ $t('filters.fromViewBoth') }}
+		</div>
 
 		<div class="field is-flex is-flex-direction-column">
 			<FancyCheckbox
@@ -64,6 +73,7 @@ const props = withDefaults(defineProps<{
 	hasTitle?: boolean,
 	hasFooter?: boolean,
 	changeImmediately?: boolean,
+	filterFromView?: string,
 }>(), {
 	hasTitle: false,
 	hasFooter: true,
diff --git a/frontend/src/components/project/views/ProjectKanban.vue b/frontend/src/components/project/views/ProjectKanban.vue
index 249e76c93..d7352c3cd 100644
--- a/frontend/src/components/project/views/ProjectKanban.vue
+++ b/frontend/src/components/project/views/ProjectKanban.vue
@@ -9,6 +9,8 @@
 				<FilterPopup
 					v-if="!isSavedFilter(project)"
 					v-model="params"
+					:view-id="viewId"
+					:project-id="projectId"
 				/>
 			</div>
 		</template>
diff --git a/frontend/src/components/project/views/ProjectList.vue b/frontend/src/components/project/views/ProjectList.vue
index cb2e6528c..23378f401 100644
--- a/frontend/src/components/project/views/ProjectList.vue
+++ b/frontend/src/components/project/views/ProjectList.vue
@@ -9,6 +9,8 @@
 				<FilterPopup
 					v-if="!isSavedFilter(project)"
 					v-model="params"
+					:view-id="viewId"
+					:project-id="projectId"
 					@update:modelValue="prepareFiltersAndLoadTasks()"
 				/>
 			</div>
diff --git a/frontend/src/components/project/views/ProjectTable.vue b/frontend/src/components/project/views/ProjectTable.vue
index 94671183a..73a575684 100644
--- a/frontend/src/components/project/views/ProjectTable.vue
+++ b/frontend/src/components/project/views/ProjectTable.vue
@@ -67,7 +67,12 @@
 						</Card>
 					</template>
 				</Popup>
-				<FilterPopup v-model="params" />
+				<FilterPopup
+					v-if="!isSavedFilter({id: projectId})"
+					v-model="params"
+					:view-id="viewId"
+					:project-id="projectId"
+				/>
 			</div>
 		</template>
 
@@ -290,6 +295,7 @@ import type {IProject} from '@/modelTypes/IProject'
 import AssigneeList from '@/components/tasks/partials/AssigneeList.vue'
 import type {IProjectView} from '@/modelTypes/IProjectView'
 import { camelCase } from 'change-case'
+import {isSavedFilter} from '@/services/savedFilter'
 
 const props = defineProps<{
 	projectId: IProject['id'],
diff --git a/frontend/src/i18n/lang/en.json b/frontend/src/i18n/lang/en.json
index 133c7a228..7fb7d4321 100644
--- a/frontend/src/i18n/lang/en.json
+++ b/frontend/src/i18n/lang/en.json
@@ -410,6 +410,8 @@
     "title": "Filters",
     "clear": "Clear Filters",
     "showResults": "Show results",
+    "fromView": "The current view has a filter set as well:",
+    "fromViewBoth": "It will be used in combination with what you enter here.",
     "attributes": {
       "title": "Title",
       "titlePlaceholder": "The saved filter title goes here…",