Finish reset page preferences button on tabular

app/src/composables/use-collection-preset/index.ts

@@ -1,4 +0,0 @@
-import { usePreset } from './use-collection-preset';
-
-export { usePreset };
-export default usePreset;

app/src/composables/use-preset/index.ts

@@ -0,0 +1,4 @@
+import { usePreset } from './use-preset';
+
+export { usePreset };
+export default usePreset;

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 = {

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>

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';

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() {

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';

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';
 

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';

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);