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">
-				<filters
-					@change="loadTasks"
-					v-if="showTaskFilter"
-					v-model="params"
-				/>
-			</transition>
+			<filter-popup
+				@change="loadTasks"
+				:visible="showTaskFilter"
+				v-model="params"
+			/>
 		</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

@@ -19,7 +19,7 @@
 					{{ $store.getters['lists/getListById'](task.listId).title }}
 				</router-link>
 
-					<!-- Show any parent tasks to make it clear this task is a sub task of something -->
+				<!-- Show any parent tasks to make it clear this task is a sub task of something -->
 				<span class="parent-tasks" v-if="typeof task.relatedTasks.parenttask !== 'undefined'">
 					<template v-for="(pt, i) in task.relatedTasks.parenttask">
 						{{ pt.title }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template>
@@ -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>