Fix closing popups when clicking outside of them (#378)

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

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

@@ -0,0 +1,65 @@
+<template>
+	<transition name="fade">
+		<filters
+			@change="change"
+			v-if="visibleInternal"
+			v-model="params"
+			ref="filters"
+		/>
+	</transition>
+</template>
+
+<script>
+import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
+import Filters from '../../../components/list/partials/filters'
+
+export default {
+	name: 'filter-popup',
+	data() {
+		return {
+			params: null,
+			visibleInternal: false,
+		}
+	},
+	components: {
+		Filters,
+	},
+	mounted() {
+		this.params = this.value
+		document.addEventListener('click', this.hidePopup)
+	},
+	beforeDestroy() {
+		document.removeEventListener('click', this.hidePopup)
+	},
+	watch: {
+		value(newVal) {
+			this.$set(this, 'params', newVal)
+		},
+		visible() {
+			this.visibleInternal = !this.visibleInternal
+		},
+	},
+	props: {
+		value: {
+			required: true,
+		},
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	methods: {
+		change() {
+			this.$emit('change', this.params)
+			this.$emit('input', this.params)
+		},
+		hidePopup(e) {
+			if (this.visibleInternal) {
+				closeWhenClickedOutside(e, this.$refs.filters.$el, () => {
+					this.visibleInternal = false
+				})
+			}
+		},
+	},
+}
+</script>

src/components/tasks/gantt-component.vue

@@ -2,20 +2,18 @@
 	<div class="gantt-chart box">
 		<div class="filter-container">
 			<div class="items">
-				<button @click="showTaskFilter = !showTaskFilter" class="button">
+				<button @click.prevent.stop="showTaskFilter = !showTaskFilter" class="button">
 					<span class="icon is-small">
 						<icon icon="filter"/>
 					</span>
 					Filters
 				</button>
 			</div>
-			<transition name="fade">
+			<filter-popup
-				<filters
 				@change="loadTasks"
-					v-if="showTaskFilter"
+				:visible="showTaskFilter"
 				v-model="params"
 			/>
-			</transition>
 		</div>
 		<div class="dates">
 			<template v-for="(y, yk) in days">
@@ -166,12 +164,12 @@ import PriorityLabel from './partials/priorityLabel'
 import TaskCollectionService from '../../services/taskCollection'
 import {mapState} from 'vuex'
 import Rights from '../../models/rights.json'
-import Filters from '@/components/list/partials/filters'
+import FilterPopup from '@/components/list/partials/filter-popup'
 
 export default {
 	name: 'GanttChart',
 	components: {
-		Filters,
+		FilterPopup,
 		PriorityLabel,
 		EditTask,
 		VueDragResize,

src/components/tasks/partials/singleTaskInList.vue

@@ -40,14 +40,14 @@
 			/>
 			<i
 				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-				@click.stop="showDefer = !showDefer"
+				@click.prevent.stop="showDefer = !showDefer"
 				v-if="+new Date(task.dueDate) > 0"
 				v-tooltip="formatDate(task.dueDate)"
 			>
 				- Due {{ formatDateSince(task.dueDate) }}
 			</i>
 			<transition name="fade">
-				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task"/>
+				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
 			</transition>
 			<priority-label :priority="task.priority"/>
 			<span>
@@ -91,6 +91,7 @@ import Labels from './labels'
 import User from '../../misc/user'
 import Fancycheckbox from '../../input/fancycheckbox'
 import DeferTask from './defer-task'
+import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
 export default {
 	name: 'singleTaskInList',
@@ -137,11 +138,15 @@ export default {
 	},
 	mounted() {
 		this.task = this.theTask
+		document.addEventListener('click', this.hideDeferDueDatePopup)
 	},
 	created() {
 		this.task = new TaskModel()
 		this.taskService = new TaskService()
 	},
+	beforeDestroy() {
+		document.removeEventListener('click', this.hideDeferDueDatePopup)
+	},
 	computed: {
 		listColor() {
 			const list = this.$store.getters['lists/getListById'](this.task.listId)
@@ -197,6 +202,13 @@ export default {
 					this.error(e, this)
 				})
 		},
+		hideDeferDueDatePopup(e) {
+			if (this.showDefer) {
+				closeWhenClickedOutside(e, this.$refs.deferDueDate.$el, () => {
+					this.showDefer = false
+				})
+			}
+		},
 	},
 }
 </script>

src/helpers/closeWhenClickedOutside.js

@@ -11,7 +11,7 @@ export const closeWhenClickedOutside = (event, rootElement, closeCallback) => {
 	// closing callback when a click happens outside of the rootElement.
 	let parent = event.target.parentElement
 	while (parent !== rootElement) {
-		if (parent.parentElement === null) {
+		if (parent === null || parent.parentElement === null) {
 			parent = null
 			break
 		}

src/views/list/views/Kanban.vue

@@ -2,20 +2,18 @@
 	<div class="kanban-view">
 		<div class="filter-container" v-if="list.isSavedFilter && !list.isSavedFilter()">
 			<div class="items">
-				<button @click="showFilters = !showFilters" class="button">
+				<button @click.prevent.stop="showFilters = !showFilters" class="button">
 					<span class="icon is-small">
 						<icon icon="filter"/>
 					</span>
 					Filters
 				</button>
 			</div>
-			<transition name="fade">
+			<filter-popup
-				<filters
 				@change="() => {filtersChanged = true; loadBuckets()}"
-					v-if="showFilters"
+				:visible="showFilters"
 				v-model="params"
 			/>
-			</transition>
 		</div>
 		<div :class="{ 'is-loading': loading && !oneTaskUpdating}" class="kanban loader-container">
 			<div :key="`bucket${bucket.id}`" class="bucket" v-for="bucket in buckets">
@@ -265,7 +263,6 @@ import {Container, Draggable} from 'vue-smooth-dnd'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
 import User from '../../../components/misc/user'
 import Labels from '../../../components/tasks/partials/labels'
-import Filters from '../../../components/list/partials/filters'
 
 import {filterObject} from '@/helpers/filterObject'
 import {applyDrag} from '@/helpers/applyDrag'
@@ -273,16 +270,17 @@ import {mapState} from 'vuex'
 import {saveListView} from '@/helpers/saveListView'
 import Rights from '../../../models/rights.json'
 import { LOADING, LOADING_MODULE } from '../../../store/mutation-types'
+import FilterPopup from '@/components/list/partials/filter-popup'
 
 export default {
 	name: 'Kanban',
 	components: {
+		FilterPopup,
 		Container,
 		Draggable,
 		Labels,
 		User,
 		PriorityLabel,
-		Filters,
 	},
 	data() {
 		return {

src/views/list/views/List.vue

@@ -32,20 +32,18 @@
 						</span>
 					</button>
 				</div>
-				<button @click="showTaskFilter = !showTaskFilter" class="button">
+				<button @click.prevent.stop="showTaskFilter = !showTaskFilter" class="button">
 					<span class="icon is-small">
 						<icon icon="filter"/>
 					</span>
 					Filters
 				</button>
 			</div>
-			<transition name="fade">
+			<filter-popup
-				<filters
 				@change="loadTasks(1)"
-					v-if="showTaskFilter"
+				:visible="showTaskFilter"
 				v-model="params"
 			/>
-			</transition>
 		</div>
 
 		<div class="field task-add" v-if="!list.isArchived && canWrite && list.id > 0">
@@ -174,9 +172,9 @@ import EditTask from '../../../components/tasks/edit-task'
 import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
 import taskList from '../../../components/tasks/mixins/taskList'
 import {saveListView} from '@/helpers/saveListView'
-import Filters from '../../../components/list/partials/filters'
 import Rights from '../../../models/rights.json'
 import {mapState} from 'vuex'
+import FilterPopup from '@/components/list/partials/filter-popup'
 
 export default {
 	name: 'List',
@@ -196,7 +194,7 @@ export default {
 		taskList,
 	],
 	components: {
-		Filters,
+		FilterPopup,
 		SingleTaskInList,
 		EditTask,
 	},

src/views/list/views/Table.vue

@@ -2,14 +2,14 @@
 	<div :class="{'is-loading': taskCollectionService.loading}" class="table-view loader-container">
 		<div class="filter-container">
 			<div class="items">
-				<button @click="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}"
+				<button @click.prevent.stop="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}"
 						class="button">
 					<span class="icon is-small">
 						<icon icon="th"/>
 					</span>
 					Columns
 				</button>
-				<button @click="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}"
+				<button @click.prevent.stop="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}"
 						class="button">
 					<span class="icon is-small">
 						<icon icon="filter"/>
@@ -35,12 +35,12 @@
 						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">Created By</fancycheckbox>
 					</div>
 				</div>
-				<filters
+			</transition>
+			<filter-popup
 				@change="loadTasks(1)"
-					v-if="showTaskFilter"
+				:visible="showTaskFilter"
 				v-model="params"
 			/>
-			</transition>
 		</div>
 
 		<table class="table is-hoverable is-fullwidth">
@@ -198,12 +198,12 @@ 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 Filters from '../../../components/list/partials/filters'
+import FilterPopup from '@/components/list/partials/filter-popup'
 
 export default {
 	name: 'Table',
 	components: {
-		Filters,
+		FilterPopup,
 		Sort,
 		Fancycheckbox,
 		DateTableCell,