Bookmarks (#494)

* Add support for bookmarks in collection preset composition

* Add strings for bookmark 404

* Use bookmarks prop in collections browse

* Use exact for active link in navs

* Show bookmarks in navigation

* Make bookmark optional in collection preset

src/modules/collections/components/navigation/navigation.vue

@@ -4,19 +4,49 @@
 			<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
 			<v-list-item-content>{{ navItem.name }}</v-list-item-content>
 		</v-list-item>
+
+		<template v-if="bookmarks.length > 0">
+			<v-divider />
+
+			<v-list-item v-for="bookmark in bookmarks" :key="bookmark.id" :to="bookmark.to">
+				<v-list-item-icon><v-icon name="bookmark" /></v-list-item-icon>
+				<v-list-item-content>{{ bookmark.title }}</v-list-item-content>
+			</v-list-item>
+		</template>
 	</v-list>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import useNavigation from '../../compositions/use-navigation';
+import useCollectionPresetsStore from '@/stores/collection-presets';
+import useProjectsStore from '@/stores/projects';
 
 export default defineComponent({
 	props: {},
 	setup() {
+		const collectionPresetsStore = useCollectionPresetsStore();
+		const projectsStore = useProjectsStore();
 		const { navItems } = useNavigation();
 
-		return { navItems };
+		const bookmarks = computed(() => {
+			const { currentProjectKey } = projectsStore.state;
+
+			return collectionPresetsStore.state.collectionPresets
+				.filter((preset) => {
+					return (
+						preset.title !== null && preset.collection.startsWith('directus_') === false
+					);
+				})
+				.map((preset) => {
+					return {
+						...preset,
+						to: `/${currentProjectKey}/collections/${preset.collection}?bookmark=${preset.id}`,
+					};
+				});
+		});
+
+		return { navItems, bookmarks };
 	},
 });
 </script>

src/modules/collections/index.ts

@@ -18,7 +18,10 @@ export default defineModule(({ i18n }) => ({
 			name: 'collections-browse',
 			path: '/:collection',
 			component: CollectionsBrowse,
-			props: true,
+			props: (route) => ({
+				collection: route.params.collection,
+				bookmark: route.query.bookmark,
+			}),
 		},
 		{
 			name: 'collections-detail',

src/modules/collections/routes/browse/browse.vue

@@ -53,7 +53,23 @@
 			<collections-navigation />
 		</template>
 
+		<v-info
+			type="warning"
+			v-if="bookmark && bookmarkExists === false"
+			:title="$t('bookmark_doesnt_exist')"
+			icon="bookmark"
+		>
+			{{ $t('bookmark_doesnt_exist_copy') }}
+
+			<template #append>
+				<v-button :to="currentCollectionLink">
+					{{ $t('bookmark_doesnt_exist_cta') }}
+				</v-button>
+			</template>
+		</v-info>
+
 		<component
+			v-else
 			class="layout"
 			ref="layout"
 			:is="`layout-${viewType}`"
@@ -129,20 +145,31 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+		bookmark: {
+			type: String,
+			default: null,
+		},
 	},
 	setup(props) {
 		const layout = ref<LayoutComponent>(null);
 
 		const { collection } = toRefs(props);
+		const bookmarkID = computed(() => (props.bookmark ? +props.bookmark : null));
 
 		const projectsStore = useProjectsStore();
 
 		const { selection } = useSelection();
 		const { info: currentCollection, primaryKeyField } = useCollection(collection);
-		const { addNewLink, batchLink, collectionsLink } = useLinks();
-		const { viewType, viewOptions, viewQuery, filters, searchQuery } = useCollectionPreset(
-			collection
-		);
+		const { addNewLink, batchLink, collectionsLink, currentCollectionLink } = useLinks();
+		const {
+			viewType,
+			viewOptions,
+			viewQuery,
+			filters,
+			searchQuery,
+			savePreset,
+			bookmarkExists,
+		} = useCollectionPreset(collection, bookmarkID);
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 
 		if (viewType.value === null) {
@@ -164,6 +191,9 @@ export default defineComponent({
 			viewQuery,
 			viewType,
 			searchQuery,
+			savePreset,
+			bookmarkExists,
+			currentCollectionLink,
 		};
 
 		function useSelection() {
@@ -229,7 +259,13 @@ export default defineComponent({
 				return `/${currentProjectKey}/collections`;
 			});
 
-			return { addNewLink, batchLink, collectionsLink };
+			const currentCollectionLink = computed<string>(() => {
+				const currentProjectKey = projectsStore.state.currentProjectKey;
+
+				return `/${currentProjectKey}/collections/${props.collection}`;
+			});
+
+			return { addNewLink, batchLink, collectionsLink, currentCollectionLink };
 		}
 	},
 });
@@ -259,4 +295,8 @@ export default defineComponent({
 .layout {
 	--layout-offset-top: 64px;
 }
+
+.v-info {
+	margin: 20vh 0;
+}
 </style>