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>

cypress/integration/list/list.spec.js

@@ -219,10 +219,10 @@ describe('Lists', () => {
 			cy.get('.table-view .filter-container .items .button')
 				.contains('Columns')
 				.click()
-			cy.get('.table-view .filter-container .card .card-content .fancycheckbox .check')
+			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
 				.contains('Priority')
 				.click()
-			cy.get('.table-view .filter-container .card .card-content .fancycheckbox .check')
+			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
 				.contains('Done')
 				.click()
 

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) {

src/components/misc/popup.vue

@@ -0,0 +1,54 @@
+<template>
+	<slot name="trigger" :isOpen="open" :toggle="toggle"></slot>
+	<div class="popup" :class="{'is-open': open}" ref="popup">
+		<slot name="content" :isOpen="open"/>
+	</div>
+</template>
+
+<script setup>
+import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
+import {onBeforeUnmount, onMounted, ref} from 'vue'
+
+const open = ref(false)
+const popup = ref(null)
+
+const toggle = () => {
+	open.value = !open.value
+}
+
+function hidePopup(e) {
+	if (!open.value) {
+		return
+	}
+
+	// we actually want to use popup.$el, not its value.
+	// eslint-disable-next-line vue/no-ref-as-operand
+	closeWhenClickedOutside(e, popup.value, () => {
+		open.value = false
+	})
+}
+
+onMounted(() => {
+	document.addEventListener('click', hidePopup)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('click', hidePopup)
+})
+</script>
+
+<style scoped lang="scss">
+.popup {
+	transition: opacity $transition;
+	opacity: 0;
+	height: 0;
+	overflow: hidden;
+	position: absolute;
+	top: 1rem;
+
+	&.is-open {
+		opacity: 1;
+		height: auto;
+	}
+}
+</style>

src/components/tasks/gantt-component.vue

@@ -9,12 +9,12 @@
 				>
 					{{ $t('filters.title') }}
 				</x-button>
+				<filter-popup
+					:visible="showTaskFilter"
+					v-model="params"
+					@update:modelValue="loadTasks()"
+				/>
 			</div>
-			<filter-popup
-				:visible="showTaskFilter"
-				v-model="params"
-				@update:modelValue="loadTasks()"
-			/>
 		</div>
 		<div class="dates">
 			<template v-for="(y, yk) in days" :key="yk + 'year'">
@@ -347,7 +347,7 @@ export default {
 				return
 			}
 
-			let newTask = { ...taskDragged }
+			let newTask = {...taskDragged}
 
 			const didntHaveDates = newTask.startDate === null ? true : false
 

src/components/tasks/mixins/taskList.js

@@ -1,14 +1,14 @@
 import TaskCollectionService from '@/services/taskCollection'
 
 // FIXME: merge with DEFAULT_PARAMS in filters.vue
-const DEFAULT_PARAMS = {
+export const getDefaultParams = () => ({
 	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 +26,7 @@ export default {
 			searchTerm: '',
 
 			showTaskFilter: false,
-			params: DEFAULT_PARAMS,
+			params: {...getDefaultParams()},
 		}
 	},
 	watch: {
@@ -94,7 +94,7 @@ export default {
 			this.initTasks(page, search)
 		},
 		loadTasksOnSavedFilter() {
-			if(typeof this.$route.params.listId !== 'undefined' && parseInt(this.$route.params.listId) < 0) {
+			if (typeof this.$route.params.listId !== 'undefined' && parseInt(this.$route.params.listId) < 0) {
 				this.loadTasks(1, '', null, true)
 			}
 		},

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

@@ -34,7 +34,6 @@ $filter-container-top-link-share-list: -47px;
 
   .card {
     text-align: left;
-    margin-top: calc(1rem - 1px);
   }
 
   .fancycheckbox {
@@ -47,10 +46,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

@@ -2,18 +2,11 @@
 	<div class="kanban-view">
 		<div class="filter-container" v-if="isSavedFilter">
 			<div class="items">
-				<x-button
-					@click.prevent.stop="toggleFilterPopup"
-					icon="filter"
-					type="secondary"
-				>
-					{{ $t('filters.title') }}
-				</x-button>
+				<filter-popup
+					v-model="params"
+					@update:modelValue="loadBuckets"
+				/>
 			</div>
-			<filter-popup
-				:visible="showFilters"
-				v-model="params"
-			/>
 		</div>
 		<div
 			:class="{ 'is-loading': loading && !oneTaskUpdating}"
@@ -143,7 +136,7 @@
 								:component-data="taskDraggableTaskComponentData"
 							>
 								<template #item="{element: task}">
-									<kanban-card :task="task" />
+									<kanban-card :task="task"/>
 								</template>
 							</draggable>
 						</div>
@@ -213,7 +206,7 @@
 		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
 		<router-view v-slot="{ Component }">
 			<transition name="modal">
-				<component :is="Component" />
+				<component :is="Component"/>
 			</transition>
 		</router-view>
 
@@ -224,10 +217,10 @@
 				v-if="showBucketDeleteModal"
 			>
 				<template #header><span>{{ $t('list.kanban.deleteHeaderBucket') }}</span></template>
-		
+
 				<template #text>
 					<p>{{ $t('list.kanban.deleteBucketText1') }}<br/>
-					{{ $t('list.kanban.deleteBucketText2') }}</p>
+						{{ $t('list.kanban.deleteBucketText2') }}</p>
 				</template>
 			</modal>
 		</transition>
@@ -300,7 +293,6 @@ export default {
 				filter_comparator: [],
 				filter_concat: 'and',
 			},
-			showFilters: false,
 		}
 	},
 	created() {
@@ -328,10 +320,10 @@ export default {
 			return {
 				type: 'transition',
 				tag: 'div',
-				name: !this.dragBucket ? 'move-bucket': null,
+				name: !this.dragBucket ? 'move-bucket' : null,
 				class: [
 					'kanban-bucket-container',
-					{ 'dragging-disabled': !this.canWrite },
+					{'dragging-disabled': !this.canWrite},
 				],
 			}
 		},
@@ -339,10 +331,10 @@ export default {
 			return {
 				type: 'transition',
 				tag: 'div',
-				name: !this.drag ? 'move-card': null,
+				name: !this.drag ? 'move-card' : null,
 				class: [
 					'dropper',
-					{ 'dragging-disabled': !this.canWrite },
+					{'dragging-disabled': !this.canWrite},
 				],
 			}
 		},
@@ -357,19 +349,15 @@ export default {
 			list: state => state.currentList,
 		}),
 	},
- 
-	methods: {
-		toggleFilterPopup() {
-			this.showFilters = !this.showFilters
-		},
 
+	methods: {
 		loadBuckets() {
 			// Prevent trying to load buckets if the task popup view is active
 			if (this.$route.name !== 'list.kanban') {
 				return
 			}
 
-			const { listId, params } = this.loadBucketParameter
+			const {listId, params} = this.loadBucketParameter
 
 			this.collapsedBuckets = getCollapsedBucketState(listId)
 
@@ -424,7 +412,7 @@ export default {
 
 			const newTask = cloneDeep(task) // cloning the task to avoid vuex store mutations
 			newTask.bucketId = newBucket.id,
-			newTask.kanbanPosition = calculateItemPosition(taskBefore !== null ? taskBefore.kanbanPosition : null, taskAfter !== null ? taskAfter.kanbanPosition : null)
+				newTask.kanbanPosition = calculateItemPosition(taskBefore !== null ? taskBefore.kanbanPosition : null, taskAfter !== null ? taskAfter.kanbanPosition : null)
 
 			try {
 				await this.$store.dispatch('tasks/update', newTask)

src/views/list/views/List.vue

@@ -41,19 +41,11 @@
 						v-if="!showTaskSearch"
 					/>
 				</div>
-				<x-button
-					@click.prevent.stop="showTaskFilter = !showTaskFilter"
-					type="secondary"
-					icon="filter"
-				>
-					{{ $t('filters.title') }}
-				</x-button>
+				<filter-popup
+					v-model="params"
+					@update:modelValue="loadTasks()"
+				/>
 			</div>
-			<filter-popup
-				:visible="showTaskFilter"
-				v-model="params"
-				@update:modelValue="loadTasks()"
-			/>
 		</div>
 
 		<card :padding="false" :has-content="false" class="has-overflow">
@@ -126,7 +118,7 @@
 				/>
 			</div>
 
-			<Pagination 
+			<Pagination
 				:total-pages="taskCollectionService.totalPages"
 				:current-page="currentPage"
 			/>
@@ -135,7 +127,7 @@
 		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
 		<router-view v-slot="{ Component }">
 			<transition name="modal">
-				<component :is="Component" />
+				<component :is="Component"/>
 			</transition>
 		</router-view>
 	</div>
@@ -155,6 +147,7 @@ import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import {HAS_TASKS} from '@/store/mutation-types'
 import Nothing from '@/components/misc/nothing.vue'
 import Pagination from '@/components/misc/pagination.vue'
+import Popup from '@/components/misc/popup'
 
 import draggable from 'vuedraggable'
 import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
@@ -198,6 +191,7 @@ export default {
 		taskList,
 	],
 	components: {
+		Popup,
 		Nothing,
 		FilterPopup,
 		SingleTaskInList,
@@ -294,11 +288,11 @@ export default {
 
 		async saveTaskPosition(e) {
 			this.drag = false
-			
+
 			const task = this.tasks[e.newIndex]
 			const taskBefore = this.tasks[e.newIndex - 1] ?? null
-			const taskAfter = this.tasks[e.newIndex + 1] ??  null
-			
+			const taskAfter = this.tasks[e.newIndex + 1] ?? null
+
 			const newTask = {
 				...task,
 				position: calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null),

src/views/list/views/Table.vue

@@ -2,67 +2,63 @@
 	<div :class="{'is-loading': taskCollectionService.loading}" class="table-view loader-container">
 		<div class="filter-container">
 			<div class="items">
-				<x-button
-					@click.prevent.stop="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}"
-					icon="th"
-					type="secondary"
-				>
-					{{ $t('list.table.columns') }}
-				</x-button>
-				<x-button
-					@click.prevent.stop="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}"
-					icon="filter"
-					type="secondary"
-				>
-					{{ $t('filters.title') }}
-				</x-button>
+				<popup>
+					<template #trigger="{toggle}">
+						<x-button
+							@click.prevent.stop="toggle()"
+							icon="th"
+							type="secondary"
+						>
+							{{ $t('list.table.columns') }}
+						</x-button>
+					</template>
+					<template #content="{isOpen}">
+						<card class="columns-filter" :class="{'is-open': isOpen}">
+							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
+							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">
+								{{ $t('task.attributes.done') }}
+							</fancycheckbox>
+							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.title">
+								{{ $t('task.attributes.title') }}
+							</fancycheckbox>
+							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">
+								{{ $t('task.attributes.priority') }}
+							</fancycheckbox>
+							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">
+								{{ $t('task.attributes.labels') }}
+							</fancycheckbox>
+							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">
+								{{ $t('task.attributes.assignees') }}
+							</fancycheckbox>
+							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">
+								{{ $t('task.attributes.dueDate') }}
+							</fancycheckbox>
+							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">
+								{{ $t('task.attributes.startDate') }}
+							</fancycheckbox>
+							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">
+								{{ $t('task.attributes.endDate') }}
+							</fancycheckbox>
+							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">
+								{{ $t('task.attributes.percentDone') }}
+							</fancycheckbox>
+							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">
+								{{ $t('task.attributes.created') }}
+							</fancycheckbox>
+							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">
+								{{ $t('task.attributes.updated') }}
+							</fancycheckbox>
+							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">
+								{{ $t('task.attributes.createdBy') }}
+							</fancycheckbox>
+						</card>
+					</template>
+				</popup>
+				<filter-popup
+					v-model="params"
+					@update:modelValue="loadTasks()"
+				/>
 			</div>
-			<transition name="fade">
-				<card v-if="showActiveColumnsFilter">
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">
-						{{ $t('task.attributes.done') }}
-					</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.title">
-						{{ $t('task.attributes.title') }}
-					</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">
-						{{ $t('task.attributes.priority') }}
-					</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">
-						{{ $t('task.attributes.labels') }}
-					</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">
-						{{ $t('task.attributes.assignees') }}
-					</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">
-						{{ $t('task.attributes.dueDate') }}
-					</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">
-						{{ $t('task.attributes.startDate') }}
-					</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">
-						{{ $t('task.attributes.endDate') }}
-					</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">
-						{{ $t('task.attributes.percentDone') }}
-					</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">
-						{{ $t('task.attributes.created') }}
-					</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">
-						{{ $t('task.attributes.updated') }}
-					</fancycheckbox>
-					<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">
-						{{ $t('task.attributes.createdBy') }}
-					</fancycheckbox>
-				</card>
-			</transition>
-			<filter-popup
-				:visible="showTaskFilter"
-				v-model="params"
-				@update:modelValue="loadTasks()"
-			/>
 		</div>
 
 		<card :padding="false" :has-content="false">
@@ -189,21 +185,23 @@
 </template>
 
 <script>
-import taskList from '../../../components/tasks/mixins/taskList'
+import taskList from '@/components/tasks/mixins/taskList'
 import Done from '@/components/misc/Done.vue'
-import User from '../../../components/misc/user'
-import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
-import Labels from '../../../components/tasks/partials/labels'
-import DateTableCell from '../../../components/tasks/partials/date-table-cell'
-import Fancycheckbox from '../../../components/input/fancycheckbox'
-import Sort from '../../../components/tasks/partials/sort'
+import User from '@/components/misc/user'
+import PriorityLabel from '@/components/tasks/partials/priorityLabel'
+import Labels from '@/components/tasks/partials/labels'
+import DateTableCell from '@/components/tasks/partials/date-table-cell'
+import Fancycheckbox from '@/components/input/fancycheckbox'
+import Sort from '@/components/tasks/partials/sort'
 import {saveListView} from '@/helpers/saveListView'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import Pagination from '@/components/misc/pagination.vue'
+import Popup from '@/components/misc/popup'
 
 export default {
 	name: 'Table',
 	components: {
+		Popup,
 		Done,
 		FilterPopup,
 		Sort,
@@ -219,7 +217,6 @@ export default {
 	],
 	data() {
 		return {
-			showActiveColumnsFilter: false,
 			activeColumns: {
 				id: true,
 				done: true,
@@ -323,4 +320,12 @@ export default {
 		}
 	}
 }
+
+.columns-filter {
+	margin: 0;
+
+	&.is-open {
+		margin: 2rem 0 1rem;
+	}
+}
 </style>