feat: add button to clear active filters

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

@@ -1,16 +1,24 @@
 <template>
-	<transition name="fade">
+	<x-button
+		v-if="hasFilters"
+		type="secondary"
+		@click="clearFilters"
+	>
+		{{ $t('filters.clear') }}
+	</x-button>
 	<filters
-			v-if="visibleInternal"
+		:class="{'is-open': visibleInternal}"
+		class="filter-popup"
 		v-model="value"
+		@change="update"
 		ref="filters"
 	/>
-	</transition>
 </template>
 
 <script>
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import Filters from '../../../components/list/partials/filters'
+import {defaultParams} from '../../tasks/mixins/taskList'
 
 export default {
 	name: 'filter-popup',
@@ -30,16 +38,25 @@ export default {
 	data() {
 		return {
 			visibleInternal: false,
+			value: null,
 		}
 	},
 	computed: {
-		value: {
-			get() {
-				return this.modelValue
-			},
-			set(value) {
-				this.$emit('update:modelValue', value)
-			},
+		hasFilters() {
+			// this.value also contains the page parameter which we don't want to include in filters
+			const {sort_by, order_by, filter_by, filter_value, filter_comparator, filter_concat, s} = this.value
+			const filterParams = {
+				sort_by,
+				order_by,
+				filter_by,
+				filter_value,
+				filter_comparator,
+				filter_concat,
+				s: s ?? null,
+			}
+			const def = {...defaultParams(), s: null}
+
+			return JSON.stringify(filterParams) !== JSON.stringify(def)
 		},
 	},
 	mounted() {
@@ -51,10 +68,13 @@ export default {
 	watch: {
 		modelValue: {
 			handler(value) {
-				this.params = value
+				this.value = value
 			},
 			immediate: true,
 		},
+		value() {
+			this.update()
+		},
 		visible() {
 			this.visibleInternal = !this.visibleInternal
 		},
@@ -69,6 +89,28 @@ export default {
 				this.visibleInternal = false
 			})
 		},
+		clearFilters() {
+			this.value = {...defaultParams()}
+		},
+		update() {
+			this.$emit('update:modelValue', this.value)
+		},
 	},
 }
 </script>
+
+<style lang="scss">
+.filter-popup {
+	transition: opacity $transition;
+	opacity: 0;
+	height: 0;
+	overflow: hidden;
+	position: absolute;
+	top: 2rem;
+
+	&.is-open {
+		opacity: 1;
+		height: auto;
+	}
+}
+</style>

src/components/list/partials/filters.vue

@@ -464,9 +464,7 @@ export default {
 					foundDone = i
 				}
 			})
-			if (foundDone === false) {
-				this.filters.done = true
-			}
+			this.filters.done = foundDone === false
 		},
 		async prepareRelatedObjectFilter(kind, filterName = null, servicePrefix = null) {
 			if (filterName === null) {

src/components/tasks/gantt-component.vue

@@ -9,13 +9,13 @@
 				>
 					{{ $t('filters.title') }}
 				</x-button>
-			</div>
 				<filter-popup
 					:visible="showTaskFilter"
 					v-model="params"
 					@update:modelValue="loadTasks()"
 				/>
 			</div>
+		</div>
 		<div class="dates">
 			<template v-for="(y, yk) in days" :key="yk + 'year'">
 				<div class="months">

src/components/tasks/mixins/taskList.js

@@ -1,7 +1,7 @@
 import TaskCollectionService from '@/services/taskCollection'
 
 // FIXME: merge with DEFAULT_PARAMS in filters.vue
-const DEFAULT_PARAMS = {
+export const DEFAULT_PARAMS = {
 	sort_by: ['position', 'id'],
 	order_by: ['asc', 'desc'],
 	filter_by: ['done'],
@@ -10,6 +10,17 @@ const DEFAULT_PARAMS = {
 	filter_concat: 'and',
 }
 
+export const defaultParams = () => {
+	return {
+		sort_by: ['position', 'id'],
+		order_by: ['asc', 'desc'],
+		filter_by: ['done'],
+		filter_value: ['false'],
+		filter_comparator: ['equals'],
+		filter_concat: 'and',
+	}
+}
+
 /**
  * This mixin provides a base set of methods and properties to get tasks on a list.
  */
@@ -26,7 +37,7 @@ export default {
 			searchTerm: '',
 
 			showTaskFilter: false,
-			params: DEFAULT_PARAMS,
+			params: {...DEFAULT_PARAMS},
 		}
 	},
 	watch: {

src/i18n/lang/en.json

@@ -344,6 +344,7 @@
   },
   "filters": {
     "title": "Filters",
+    "clear": "Clear Filters",
     "attributes": {
       "title": "Title",
       "titlePlaceholder": "The saved filter title goes here…",

src/styles/components/list.scss

@@ -47,10 +47,6 @@ $filter-container-top-link-share-list: -47px;
     justify-content: space-between;
     margin-right: .5rem;
 
-    .button, .input {
-      height: $switch-view-height;
-    }
-
     .field {
       transition: width $transition;
       width: 100%;

src/views/list/views/Kanban.vue

@@ -9,12 +9,12 @@
 				>
 					{{ $t('filters.title') }}
 				</x-button>
-			</div>
 				<filter-popup
 					:visible="showFilters"
 					v-model="params"
 				/>
 			</div>
+		</div>
 		<div
 			:class="{ 'is-loading': loading && !oneTaskUpdating}"
 			class="kanban kanban-bucket-container loader-container"

src/views/list/views/List.vue

@@ -48,13 +48,13 @@
 				>
 					{{ $t('filters.title') }}
 				</x-button>
-			</div>
 				<filter-popup
 					:visible="showTaskFilter"
 					v-model="params"
 					@update:modelValue="loadTasks()"
 				/>
 			</div>
+		</div>
 
 		<card :padding="false" :has-content="false" class="has-overflow">
 			<template

src/views/list/views/Table.vue

@@ -16,6 +16,11 @@
 				>
 					{{ $t('filters.title') }}
 				</x-button>
+				<filter-popup
+					:visible="showTaskFilter"
+					v-model="params"
+					@update:modelValue="loadTasks()"
+				/>
 			</div>
 			<transition name="fade">
 				<card v-if="showActiveColumnsFilter">
@@ -58,11 +63,6 @@
 					</fancycheckbox>
 				</card>
 			</transition>
-			<filter-popup
-				:visible="showTaskFilter"
-				v-model="params"
-				@update:modelValue="loadTasks()"
-			/>
 		</div>
 
 		<card :padding="false" :has-content="false">