From 15640e98ec0495c0a743da0d64dbeaaa1adae79c Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 1 Oct 2021 20:14:21 +0200
Subject: [PATCH] feat: simplify filter-popup

---
 src/components/list/partials/filter-popup.vue | 52 +++++++++++--------
 src/components/tasks/gantt-component.vue      |  2 +-
 src/views/list/views/Kanban.vue               |  2 +-
 src/views/list/views/List.vue                 |  2 +-
 src/views/list/views/Table.vue                |  2 +-
 5 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/components/list/partials/filter-popup.vue b/src/components/list/partials/filter-popup.vue
index 2e249fe2..e761fb9e 100644
--- a/src/components/list/partials/filter-popup.vue
+++ b/src/components/list/partials/filter-popup.vue
@@ -1,9 +1,8 @@
 <template>
 	<transition name="fade">
 		<filters
-			@change="change"
 			v-if="visibleInternal"
-			v-model="params"
+			v-model="value"
 			ref="filters"
 		/>
 	</transition>
@@ -15,15 +14,33 @@ import Filters from '../../../components/list/partials/filters'
 
 export default {
 	name: 'filter-popup',
-	emits: ['update:modelValue', 'change'],
+	components: {
+		Filters,
+	},
+	props: {
+		modelValue: {
+			required: true,
+		},
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['update:modelValue'],
 	data() {
 		return {
-			params: null,
 			visibleInternal: false,
 		}
 	},
-	components: {
-		Filters,
+	computed: {
+		value: {
+			get() {
+				return this.modelValue
+			},
+			set(value) {
+				this.$emit('update:modelValue', value)
+			},
+		},
 	},
 	mounted() {
 		document.addEventListener('click', this.hidePopup)
@@ -42,26 +59,15 @@ export default {
 			this.visibleInternal = !this.visibleInternal
 		},
 	},
-	props: {
-		modelValue: {
-			required: true,
-		},
-		visible: {
-			type: Boolean,
-			default: false,
-		},
-	},
 	methods: {
-		change() {
-			this.$emit('change', this.params)
-			this.$emit('update:modelValue', this.params)
-		},
 		hidePopup(e) {
-			if (this.visibleInternal) {
-				closeWhenClickedOutside(e, this.$refs.filters.$el, () => {
-					this.visibleInternal = false
-				})
+			if (!this.visibleInternal) {
+				return
 			}
+
+			closeWhenClickedOutside(e, this.$refs.filters.$el, () => {
+				this.visibleInternal = false
+			})
 		},
 	},
 }
diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index f2e46718..220d3d03 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -11,9 +11,9 @@
 				</x-button>
 			</div>
 			<filter-popup
-				@change="loadTasks()"
 				:visible="showTaskFilter"
 				v-model="params"
+				@update:modelValue="loadTasks()"
 			/>
 		</div>
 		<div class="dates">
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 72dc4721..63f18bd9 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -11,7 +11,7 @@
 				</x-button>
 			</div>
 			<filter-popup
-				@change="() => {filtersChanged = true; loadBuckets()}"
+				@update:modelValue="() => {filtersChanged = true; loadBuckets()}"
 				:visible="showFilters"
 				v-model="params"
 			/>
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index 93805932..c68720ab 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -50,9 +50,9 @@
 				</x-button>
 			</div>
 			<filter-popup
-				@change="loadTasks(1)"
 				:visible="showTaskFilter"
 				v-model="params"
+				@update:modelValue="loadTasks(1)"
 			/>
 		</div>
 
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index 37adfff0..4b519e3b 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@@ -59,9 +59,9 @@
 				</card>
 			</transition>
 			<filter-popup
-				@change="loadTasks(1)"
 				:visible="showTaskFilter"
 				v-model="params"
+				@update:modelValue="loadTasks(1)"
 			/>
 		</div>