From 6d768285b2af2f33d7db64134ffb08137df9c9e2 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 3 Sep 2020 10:07:43 -0400
Subject: [PATCH] Finish reset page preferences button on tabular

---
 .../use-collection-preset/index.ts            |  4 ----
 app/src/composables/use-preset/index.ts       |  4 ++++
 .../types.ts                                  |  0
 .../use-preset.ts}                            | 15 +++++++++++--
 app/src/layouts/tabular/tabular.vue           | 21 ++++++++++++-------
 app/src/modules/activity/routes/browse.vue    |  2 +-
 app/src/modules/collections/routes/browse.vue |  7 ++++++-
 app/src/modules/files/routes/browse.vue       |  2 +-
 .../settings/routes/webhooks/browse.vue       |  2 +-
 app/src/modules/users/routes/browse.vue       |  2 +-
 .../components/modal-browse/modal-browse.vue  |  4 ++--
 11 files changed, 43 insertions(+), 20 deletions(-)
 delete mode 100644 app/src/composables/use-collection-preset/index.ts
 create mode 100644 app/src/composables/use-preset/index.ts
 rename app/src/composables/{use-collection-preset => use-preset}/types.ts (100%)
 rename app/src/composables/{use-collection-preset/use-collection-preset.ts => use-preset/use-preset.ts} (95%)

diff --git a/app/src/composables/use-collection-preset/index.ts b/app/src/composables/use-collection-preset/index.ts
deleted file mode 100644
index 36a84654a7..0000000000
--- a/app/src/composables/use-collection-preset/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { usePreset } from './use-collection-preset';
-
-export { usePreset };
-export default usePreset;
diff --git a/app/src/composables/use-preset/index.ts b/app/src/composables/use-preset/index.ts
new file mode 100644
index 0000000000..9596abf57b
--- /dev/null
+++ b/app/src/composables/use-preset/index.ts
@@ -0,0 +1,4 @@
+import { usePreset } from './use-preset';
+
+export { usePreset };
+export default usePreset;
diff --git a/app/src/composables/use-collection-preset/types.ts b/app/src/composables/use-preset/types.ts
similarity index 100%
rename from app/src/composables/use-collection-preset/types.ts
rename to app/src/composables/use-preset/types.ts
diff --git a/app/src/composables/use-collection-preset/use-collection-preset.ts b/app/src/composables/use-preset/use-preset.ts
similarity index 95%
rename from app/src/composables/use-collection-preset/use-collection-preset.ts
rename to app/src/composables/use-preset/use-preset.ts
index 6f318a2502..709a35f33d 100644
--- a/app/src/composables/use-collection-preset/use-collection-preset.ts
+++ b/app/src/composables/use-preset/use-preset.ts
@@ -22,9 +22,7 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 
 	const savePreset = async (preset?: Partial<Preset>) => {
 		const updatedValues = await presetsStore.savePreset(preset ? preset : localPreset.value);
-
 		localPreset.value.id = updatedValues.id;
-
 		return updatedValues;
 	};
 
@@ -144,8 +142,21 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 		savePreset,
 		saveCurrentAsBookmark,
 		title,
+		resetPreset,
 	};
 
+	async function resetPreset() {
+		localPreset.value = {
+			view_query: null,
+			view_options: null,
+			view_type: 'tabular',
+			filters: null,
+			search_query: null,
+		};
+
+		await savePreset();
+	}
+
 	function initLocalPreset() {
 		if (bookmark.value === null) {
 			localPreset.value = {
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index a29ce9b7ed..ecc1fa5f9c 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -130,7 +130,9 @@
 			<template #append>
 				<v-error :error="error" />
 
-				<v-button @click="resetPreset">{{ $t('reset_page_preferences') }}</v-button>
+				<v-button small @click="resetPresetAndRefresh" class="reset-preset">
+					{{ $t('reset_page_preferences') }}
+				</v-button>
 			</template>
 		</v-info>
 
@@ -203,6 +205,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		resetPreset: {
+			type: Function as PropType<() => Promise<void>>,
+			default: null,
+		},
 	},
 	setup(props, { emit }) {
 		const table = ref<Vue | null>(null);
@@ -287,14 +293,11 @@ export default defineComponent({
 			hideDragImage,
 			activeFilterCount,
 			refresh,
-			resetPreset,
+			resetPresetAndRefresh,
 		};
 
-		function resetPreset() {
-			_viewQuery.value = {};
-			_filters.value = [];
-			_searchQuery.value = null;
-
+		async function resetPresetAndRefresh() {
+			await props?.resetPreset?.();
 			refresh();
 		}
 
@@ -604,4 +607,8 @@ export default defineComponent({
 .fade-leave-to {
 	opacity: 0;
 }
+
+.reset-preset {
+	margin-top: 24px;
+}
 </style>
diff --git a/app/src/modules/activity/routes/browse.vue b/app/src/modules/activity/routes/browse.vue
index 1815458208..7d57878547 100644
--- a/app/src/modules/activity/routes/browse.vue
+++ b/app/src/modules/activity/routes/browse.vue
@@ -47,7 +47,7 @@ import { defineComponent, computed, ref } from '@vue/composition-api';
 import ActivityNavigation from '../components/navigation.vue';
 import { i18n } from '@/lang';
 import { LayoutComponent } from '@/layouts/types';
-import usePreset from '@/composables/use-collection-preset';
+import usePreset from '@/composables/use-preset';
 import marked from 'marked';
 import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
diff --git a/app/src/modules/collections/routes/browse.vue b/app/src/modules/collections/routes/browse.vue
index 47ffe02bae..950abcd9f1 100644
--- a/app/src/modules/collections/routes/browse.vue
+++ b/app/src/modules/collections/routes/browse.vue
@@ -159,6 +159,7 @@
 			:view-query.sync="viewQuery"
 			:filters.sync="filters"
 			:search-query.sync="searchQuery"
+			:reset-preset="resetPreset"
 		>
 			<template #no-results>
 				<v-info :title="$t('no_results')" icon="search" center>
@@ -219,7 +220,7 @@ import api from '@/api';
 import { LayoutComponent } from '@/layouts/types';
 import CollectionsNotFound from './not-found.vue';
 import useCollection from '@/composables/use-collection';
-import usePreset from '@/composables/use-collection-preset';
+import usePreset from '@/composables/use-preset';
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 import SearchInput from '@/views/private/components/search-input';
 import BookmarkAdd from '@/views/private/components/bookmark-add';
@@ -264,6 +265,7 @@ export default defineComponent({
 		const { info: currentCollection } = useCollection(collection);
 		const { addNewLink, batchLink, collectionsLink, currentCollectionLink } = useLinks();
 		const { breadcrumb } = useBreadcrumb();
+
 		const {
 			viewType,
 			viewOptions,
@@ -274,7 +276,9 @@ export default defineComponent({
 			bookmarkExists,
 			saveCurrentAsBookmark,
 			title: bookmarkName,
+			resetPreset,
 		} = usePreset(collection, bookmarkID);
+
 		const {
 			confirmDelete,
 			deleting,
@@ -340,6 +344,7 @@ export default defineComponent({
 			batchDeleteAllowed,
 			deleteError,
 			createAllowed,
+			resetPreset,
 		};
 
 		function useBreadcrumb() {
diff --git a/app/src/modules/files/routes/browse.vue b/app/src/modules/files/routes/browse.vue
index b05d7f3fd9..b6829b2655 100644
--- a/app/src/modules/files/routes/browse.vue
+++ b/app/src/modules/files/routes/browse.vue
@@ -142,7 +142,7 @@ import FilesNavigation from '../components/navigation.vue';
 import { i18n } from '@/lang';
 import api from '@/api';
 import { LayoutComponent } from '@/layouts/types';
-import usePreset from '@/composables/use-collection-preset';
+import usePreset from '@/composables/use-preset';
 import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 import AddFolder from '../components/add-folder.vue';
diff --git a/app/src/modules/settings/routes/webhooks/browse.vue b/app/src/modules/settings/routes/webhooks/browse.vue
index 80f2557af8..e29c96c2ac 100644
--- a/app/src/modules/settings/routes/webhooks/browse.vue
+++ b/app/src/modules/settings/routes/webhooks/browse.vue
@@ -76,7 +76,7 @@ import SettingsNavigation from '../../components/navigation.vue';
 import { i18n } from '@/lang';
 import api from '@/api';
 import { LayoutComponent } from '@/layouts/types';
-import usePreset from '@/composables/use-collection-preset';
+import usePreset from '@/composables/use-preset';
 import marked from 'marked';
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 
diff --git a/app/src/modules/users/routes/browse.vue b/app/src/modules/users/routes/browse.vue
index 0e3f44ecf8..18252b772a 100644
--- a/app/src/modules/users/routes/browse.vue
+++ b/app/src/modules/users/routes/browse.vue
@@ -108,7 +108,7 @@ import UsersNavigation from '../components/navigation.vue';
 import { i18n } from '@/lang';
 import api from '@/api';
 import { LayoutComponent } from '@/layouts/types';
-import usePreset from '@/composables/use-collection-preset';
+import usePreset from '@/composables/use-preset';
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 import SearchInput from '@/views/private/components/search-input';
 import marked from 'marked';
diff --git a/app/src/views/private/components/modal-browse/modal-browse.vue b/app/src/views/private/components/modal-browse/modal-browse.vue
index 24382ef7b1..2e8301d004 100644
--- a/app/src/views/private/components/modal-browse/modal-browse.vue
+++ b/app/src/views/private/components/modal-browse/modal-browse.vue
@@ -30,7 +30,7 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, computed, toRefs, onUnmounted } from '@vue/composition-api';
 import { Filter } from '@/types';
-import usePreset from '@/composables/use-collection-preset';
+import usePreset from '@/composables/use-preset';
 import useCollection from '@/composables/use-collection';
 
 export default defineComponent({
@@ -67,7 +67,7 @@ export default defineComponent({
 		const { viewType, viewOptions, viewQuery } = usePreset(collection);
 
 		// This is a local copy of the viewtype. This means that we can sync it the layout without
-		// having use-collection-preset auto-save the values
+		// having use-preset auto-save the values
 		const layout = ref(viewType.value || 'tabular');
 		const options = ref(viewOptions.value);
 		const query = ref(viewQuery.value);