feat: add button to clear active filters (#924)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/924
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>

src/components/list/partials/filter-popup.vue

@@ -1,37 +1,49 @@
 <template>
-	<transition name="fade">
-		<filters
-			v-if="visibleInternal"
-			v-model="value"
-			ref="filters"
-		/>
-	</transition>
+	<x-button
+		v-if="hasFilters"
+		type="secondary"
+		@click="clearFilters"
+	>
+		{{ $t('filters.clear') }}
+	</x-button>
+	<popup>
+		<template #trigger="{toggle}">
+			<x-button
+				@click.prevent.stop="toggle()"
+				type="secondary"
+				icon="filter"
+			>
+				{{ $t('filters.title') }}
+			</x-button>
+		</template>
+		<template #content="{isOpen}">
+			<filters
+				v-model="value"
+				ref="filters"
+				class="filter-popup"
+				:class="{'is-open': isOpen}"
+			/>
+		</template>
+	</popup>
 </template>
 
 <script>
-import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import Filters from '../../../components/list/partials/filters'
+import Filters from '@/components/list/partials/filters'
+import {getDefaultParams} from '@/components/tasks/mixins/taskList'
+import Popup from '@/components/misc/popup'
 
 export default {
 	name: 'filter-popup',
 	components: {
+		Popup,
 		Filters,
 	},
 	props: {
 		modelValue: {
 			required: true,
 		},
-		visible: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	emits: ['update:modelValue'],
-	data() {
-		return {
-			visibleInternal: false,
-		}
-	},
 	computed: {
 		value: {
 			get() {
@@ -41,34 +53,46 @@ export default {
 				this.$emit('update:modelValue', value)
 			},
 		},
-	},
-	mounted() {
-		document.addEventListener('click', this.hidePopup)
-	},
-	beforeUnmount() {
-		document.removeEventListener('click', this.hidePopup)
+		hasFilters() {
+			// this.value also contains the page parameter which we don't want to include in filters
+			// eslint-disable-next-line no-unused-vars
+			const {filter_by, filter_value, filter_comparator, filter_concat, s} = this.value
+			const def = {...getDefaultParams()}
+
+			const params = {filter_by, filter_value, filter_comparator, filter_concat, s}
+			const defaultParams = {
+				filter_by: def.filter_by,
+				filter_value: def.filter_value,
+				filter_comparator: def.filter_comparator,
+				filter_concat: def.filter_concat,
+				s: s ? def.s : undefined,
+			}
+
+			return JSON.stringify(params) !== JSON.stringify(defaultParams)
+		},
 	},
 	watch: {
 		modelValue: {
 			handler(value) {
-				this.params = value
+				this.value = value
 			},
 			immediate: true,
 		},
-		visible() {
-			this.visibleInternal = !this.visibleInternal
-		},
 	},
 	methods: {
-		hidePopup(e) {
-			if (!this.visibleInternal) {
-				return
-			}
-
-			closeWhenClickedOutside(e, this.$refs.filters.$el, () => {
-				this.visibleInternal = false
-			})
+		clearFilters() {
+			this.value = {...getDefaultParams()}
 		},
 	},
 }
 </script>
+
+<style scoped lang="scss">
+.filter-popup {
+	margin: 0;
+
+	&.is-open {
+		margin: 2rem 0 1rem;
+	}
+}
+</style>

src/components/list/partials/filters.vue

@@ -458,15 +458,7 @@ export default {
 				return
 			}
 
-			let foundDone = false
-			this.params.filter_by.forEach((f, i) => {
-				if (f === 'done') {
-					foundDone = i
-				}
-			})
-			if (foundDone === false) {
-				this.filters.done = true
-			}
+			this.filters.done = this.params.filter_by.some((f) => f === 'done') === false
 		},
 		async prepareRelatedObjectFilter(kind, filterName = null, servicePrefix = null) {
 			if (filterName === null) {