From ec927d65642cee01769e0b22f3185109d7d45c9b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 2 Nov 2021 22:17:35 +0100
Subject: [PATCH] feat: move active columns filter to new popup component

---
 src/components/misc/popup.vue  |   1 +
 src/views/list/views/Table.vue | 103 +++++++++++++++++----------------
 2 files changed, 55 insertions(+), 49 deletions(-)

diff --git a/src/components/misc/popup.vue b/src/components/misc/popup.vue
index 0739a1129..7ea0c5dea 100644
--- a/src/components/misc/popup.vue
+++ b/src/components/misc/popup.vue
@@ -15,6 +15,7 @@ export default {
 		const popup = ref(null)
 
 		const toggle = () => {
+			console.log('toggle')
 			open.value = !open.value
 		}
 		
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index 0d3656945..a66e3cd76 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@@ -2,59 +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"
-					icon="th"
-					type="secondary"
-				>
-					{{ $t('list.table.columns') }}
-				</x-button>
+				<popup>
+					<template #trigger="{toggle}">
+						<x-button
+							@click.prevent.stop="toggle()"
+							icon="th"
+							type="secondary"
+						>
+							{{ $t('list.table.columns') }}
+						</x-button>
+					</template>
+					<template #default>
+						<card class="columns-filter">
+							<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" class="columns-filter">
-					<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>
 		</div>
 
 		<card :padding="false" :has-content="false">
@@ -192,10 +196,12 @@ 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,
@@ -211,7 +217,6 @@ export default {
 	],
 	data() {
 		return {
-			showActiveColumnsFilter: false,
 			activeColumns: {
 				id: true,
 				done: true,