Refactor bookmark query navigation (directus#6170)

* Revert back to using query params for bookmarks Aka "this hurts so much" * Fix collection navigation active state * Add active and query props to v-button Also unify active and activated state. * Remove not needed exact prop from collections navigation
baranelitez · Jun 10, 2021 · f55a207 · f55a207
1 parent 976baa7
commit f55a207
Show file tree

Hide file tree

Showing 19 changed files with 142 additions and 103 deletions.
diff --git a/app/src/components/v-button/v-button.vue b/app/src/components/v-button/v-button.vue
@@ -4,19 +4,17 @@
 		<component
 			v-focus="autofocus"
 			:is="component"
-			:active-class="!exact && to ? 'activated' : null"
-			:exact-active-class="exact && to ? 'activated' : null"
 			:download="download"
 			class="button"
 			:class="[
 				sizeClass,
 				`align-${align}`,
 				{
+					active: isActiveRoute,
 					rounded,
 					icon,
 					outlined,
 					loading,
-					active,
 					dashed,
 					tile,
 					'full-width': fullWidth,
@@ -45,10 +43,11 @@
 
 <script lang="ts">
 import { defineComponent, computed, PropType } from 'vue';
-import { RouteLocation } from 'vue-router';
+import { RouteLocation, useRoute, useLink } from 'vue-router';
 import useSizeClass, { sizeProps } from '@/composables/size-class';
 import { useGroupable } from '@/composables/groupable';
 import { notEmpty } from '@/utils/is-empty';
+import { isEqual } from 'lodash';
 
 export default defineComponent({
 	emits: ['click'],
@@ -93,10 +92,18 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		active: {
+			type: Boolean,
+			default: undefined,
+		},
 		exact: {
 			type: Boolean,
 			default: false,
 		},
+		query: {
+			type: Boolean,
+			default: false,
+		},
 		secondary: {
 			type: Boolean,
 			default: false,
@@ -125,6 +132,9 @@ export default defineComponent({
 		...sizeProps,
 	},
 	setup(props, { emit }) {
+		const route = useRoute();
+
+		const { route: linkRoute, isActive, isExactActive } = useLink(props);
 		const sizeClass = useSizeClass(props);
 
 		const component = computed<'a' | 'router-link' | 'button'>(() => {
@@ -139,7 +149,23 @@ export default defineComponent({
 			group: 'item-group',
 		});
 
-		return { sizeClass, onClick, component, active, toggle };
+		const isActiveRoute = computed(() => {
+			if (props.active !== undefined) return props.active;
+
+			if (props.to) {
+				const isQueryActive = !props.query || isEqual(route.query, linkRoute.value.query);
+
+				if (!props.exact) {
+					return (isActive.value && isQueryActive) || active.value;
+				} else {
+					return (isExactActive.value && isQueryActive) || active.value;
+				}
+			}
+
+			return false;
+		});
+
+		return { sizeClass, onClick, component, isActiveRoute, toggle };
 
 		function onClick(event: MouseEvent) {
 			if (props.loading === true) return;
@@ -157,11 +183,11 @@ export default defineComponent({
 	--v-button-height: 44px;
 	--v-button-color: var(--foreground-inverted);
 	--v-button-color-hover: var(--foreground-inverted);
-	--v-button-color-activated: var(--foreground-inverted);
+	--v-button-color-active: var(--foreground-inverted);
 	--v-button-color-disabled: var(--foreground-subdued);
 	--v-button-background-color: var(--primary);
 	--v-button-background-color-hover: var(--primary-125);
-	--v-button-background-color-activated: var(--primary);
+	--v-button-background-color-active: var(--primary);
 	--v-button-background-color-disabled: var(--background-normal);
 	--v-button-font-size: 16px;
 	--v-button-font-weight: 600;
@@ -177,10 +203,10 @@ export default defineComponent({
 .secondary {
 	--v-button-color: var(--foreground-normal);
 	--v-button-color-hover: var(--foreground-normal);
-	--v-button-color-activated: var(--foreground-normal);
+	--v-button-color-active: var(--foreground-normal);
 	--v-button-background-color: var(--border-subdued);
 	--v-button-background-color-hover: var(--background-normal-alt);
-	--v-button-background-color-activated: var(--background-normal-alt);
+	--v-button-background-color-active: var(--background-normal-alt);
 }
 
 .v-button.full-width {
@@ -248,7 +274,7 @@ export default defineComponent({
 	background-color: transparent;
 }
 
-.outlined:not(.activated):hover {
+.outlined:not(.active):hover {
 	color: var(--v-button-background-color-hover);
 	background-color: transparent;
 	border-color: var(--v-button-background-color-hover);
@@ -338,12 +364,11 @@ export default defineComponent({
 	--v-progress-circular-background-color: transparent;
 }
 
-.activated,
 .active {
-	--v-button-color: var(--v-button-color-activated) !important;
-	--v-button-color-hover: var(--v-button-color-activated) !important;
-	--v-button-background-color: var(--v-button-background-color-activated) !important;
-	--v-button-background-color-hover: var(--v-button-background-color-activated) !important;
+	--v-button-color: var(--v-button-color-active) !important;
+	--v-button-color-hover: var(--v-button-color-active) !important;
+	--v-button-background-color: var(--v-button-background-color-active) !important;
+	--v-button-background-color-hover: var(--v-button-background-color-active) !important;
 }
 
 .tile {

diff --git a/app/src/components/v-drawer/v-drawer.vue b/app/src/components/v-drawer/v-drawer.vue
@@ -149,7 +149,7 @@ body {
 
 	.header-icon {
 		--v-button-background-color: var(--background-normal);
-		--v-button-background-color-activated: var(--background-normal);
+		--v-button-background-color-active: var(--background-normal);
 		--v-button-background-color-hover: var(--background-normal-alt);
 		--v-button-color-disabled: var(--foreground-normal);
 	}

diff --git a/app/src/components/v-list/v-list-item.vue b/app/src/components/v-list/v-list-item.vue
@@ -2,12 +2,10 @@
 	<component
 		:is="component"
 		v-bind="disabled === false && $attrs"
-		:active-class="!exact && to ? 'active' : null"
-		:exact-active-class="exact && to ? 'active' : null"
 		class="v-list-item"
 		:to="to"
 		:class="{
-			active,
+			active: isActiveRoute,
 			dense,
 			link: isLink,
 			disabled,
@@ -24,9 +22,10 @@
 </template>
 
 <script lang="ts">
-import { RouteLocation } from 'vue-router';
+import { RouteLocation, useLink, useRoute } from 'vue-router';
 import { defineComponent, PropType, computed } from 'vue';
 import { useGroupable } from '@/composables/groupable';
+import { isEqual } from 'lodash';
 
 export default defineComponent({
 	props: {
@@ -56,7 +55,7 @@ export default defineComponent({
 		},
 		active: {
 			type: Boolean,
-			default: false,
+			default: undefined,
 		},
 		dashed: {
 			type: Boolean,
@@ -66,6 +65,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		query: {
+			type: Boolean,
+			default: false,
+		},
 		download: {
 			type: String,
 			default: null,
@@ -80,6 +83,10 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
+		const route = useRoute();
+
+		const { route: linkRoute, isActive, isExactActive } = useLink(props);
+
 		const component = computed<string>(() => {
 			if (props.to) return 'router-link';
 			if (props.href) return 'a';
@@ -92,7 +99,23 @@ export default defineComponent({
 
 		const isLink = computed(() => Boolean(props.to || props.href || props.clickable));
 
-		return { component, isLink };
+		const isActiveRoute = computed(() => {
+			if (props.active !== undefined) return props.active;
+
+			if (props.to) {
+				const isQueryActive = !props.query || isEqual(route.query, linkRoute.value.query);
+
+				if (!props.exact) {
+					return isActive.value && isQueryActive;
+				} else {
+					return isExactActive.value && isQueryActive;
+				}
+			}
+
+			return false;
+		});
+
+		return { component, isLink, isActiveRoute };
 	},
 });
 </script>

diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
@@ -104,7 +104,7 @@ export default defineComponent({
 			if (!relatedCollection.value || !primaryKeyField.value) return null;
 			const primaryKey = item[primaryKeyField.value.field];
 
-			return `/collections/${relatedCollection.value}/-/${encodeURIComponent(primaryKey)}`;
+			return `/collections/${relatedCollection.value}/${encodeURIComponent(primaryKey)}`;
 		}
 	},
 });

diff --git a/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue b/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue
@@ -519,8 +519,8 @@ textarea {
 		--v-button-color: var(--foreground-subdued);
 		--v-button-background-color-hover: var(--border-normal);
 		--v-button-color-hover: var(--foreground-normal);
-		--v-button-background-color-activated: var(--border-normal);
-		--v-button-color-activated: var(--foreground-normal);
+		--v-button-background-color-active: var(--border-normal);
+		--v-button-color-active: var(--foreground-normal);
 	}
 }
 

diff --git a/app/src/layouts/calendar/index.ts b/app/src/layouts/calendar/index.ts
@@ -188,7 +188,7 @@ export default defineLayout<LayoutOptions>({
 					const endpoint = collection.value.startsWith('directus')
 						? collection.value.substring(9)
 						: `/collections/${collection.value}`;
-					router.push(`${endpoint}/-/${primaryKey}`);
+					router.push(`${endpoint}/${primaryKey}`);
 				},
 				async eventChange(info) {
 					if (!collection.value || !startDateField.value || !startDateFieldInfo.value) return;

diff --git a/app/src/layouts/cards/index.ts b/app/src/layouts/cards/index.ts
@@ -81,7 +81,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		});
 
 		const newLink = computed(() => {
-			return `/collections/${collection.value}/-/+`;
+			return `/collections/${collection.value}/+`;
 		});
 
 		const showingCount = computed(() => {
@@ -273,7 +273,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 
 		function getLinkForItem(item: Record<string, any>) {
 			if (!primaryKeyField.value) return;
-			return `/collections/${props.collection}/-/${encodeURIComponent(item[primaryKeyField.value.field])}`;
+			return `/collections/${props.collection}/${encodeURIComponent(item[primaryKeyField.value.field])}`;
 		}
 
 		function selectAll() {

diff --git a/app/src/layouts/tabular/index.ts b/app/src/layouts/tabular/index.ts
@@ -362,7 +362,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 				} else {
 					const primaryKey = item[primaryKeyField.value.field];
 
-					router.push(`/collections/${collection.value}/-/${encodeURIComponent(primaryKey)}`);
+					router.push(`/collections/${collection.value}/${encodeURIComponent(primaryKey)}`);
 				}
 			}
 

diff --git a/app/src/modules/activity/routes/item.vue b/app/src/modules/activity/routes/item.vue
@@ -89,7 +89,7 @@ export default defineComponent({
 
 		const openItemLink = computed(() => {
 			if (!item.value) return;
-			return `/collections/${item.value.collection}/-/${encodeURIComponent(item.value.item)}`;
+			return `/collections/${item.value.collection}/${encodeURIComponent(item.value.item)}`;
 		});
 
 		watch(() => props.primaryKey, loadActivity, { immediate: true });

diff --git a/app/src/modules/collections/components/navigation-bookmark.vue b/app/src/modules/collections/components/navigation-bookmark.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-list-item :to="bookmark.to" class="bookmark" @contextmenu.prevent.stop="activateContextMenu">
+	<v-list-item :to="bookmark.to" query class="bookmark" @contextmenu.prevent.stop="activateContextMenu">
 		<v-list-item-icon><v-icon name="bookmark" /></v-list-item-icon>
 		<v-list-item-content>
 			<v-text-overflow :text="bookmark.bookmark" />
@@ -142,7 +142,7 @@ export default defineComponent({
 					let navigateTo: string | null = null;
 
 					if (+route.query?.bookmark === props.bookmark.id) {
-						navigateTo = `/collections/${props.bookmark.collection}/-`;
+						navigateTo = `/collections/${props.bookmark.collection}`;
 					}
 
 					await presetsStore.delete(props.bookmark.id);

diff --git a/app/src/modules/collections/components/navigation.vue b/app/src/modules/collections/components/navigation.vue
@@ -11,7 +11,7 @@
 				<template
 					v-if="(group.name === undefined || group.name === null) && group.accordion === 'always_open' && index === 0"
 				>
-					<v-list-item :exact="exact" v-for="navItem in group.items" :key="navItem.to" :to="navItem.to">
+					<v-list-item v-for="navItem in group.items" :key="navItem.to" :to="navItem.to" query>
 						<v-list-item-icon><v-icon :name="navItem.icon" :color="navItem.color" /></v-list-item-icon>
 						<v-list-item-content>
 							<v-text-overflow :text="navItem.name" />
@@ -26,7 +26,7 @@
 						:label="group.name || null"
 						@update:model-value="toggleActive(group.name)"
 					>
-						<v-list-item :exact="exact" v-for="navItem in group.items" :key="navItem.to" :to="navItem.to">
+						<v-list-item v-for="navItem in group.items" :key="navItem.to" :to="navItem.to" query>
 							<v-list-item-icon><v-icon :name="navItem.icon" :color="navItem.color" /></v-list-item-icon>
 							<v-list-item-content>
 								<v-text-overflow :text="navItem.name" />
@@ -37,7 +37,7 @@
 			</template>
 		</template>
 
-		<v-list-item v-else :exact="exact" v-for="navItem in navItems" :key="navItem.to" :to="navItem.to">
+		<v-list-item v-else v-for="navItem in navItems" :key="navItem.to" :to="navItem.to" query>
 			<v-list-item-icon><v-icon :name="navItem.icon" :color="navItem.color" /></v-list-item-icon>
 			<v-list-item-content>
 				<v-text-overflow :text="navItem.name" />
@@ -65,13 +65,7 @@
 		<template v-if="hiddenShown">
 			<v-divider />
 
-			<v-list-item
-				class="hidden-collection"
-				:exact="exact"
-				v-for="navItem in hiddenNavItems"
-				:key="navItem.to"
-				:to="navItem.to"
-			>
+			<v-list-item class="hidden-collection" v-for="navItem in hiddenNavItems" :key="navItem.to" :to="navItem.to" query>
 				<v-list-item-icon><v-icon :name="navItem.icon" :color="navItem.color" /></v-list-item-icon>
 				<v-list-item-content>
 					<v-text-overflow :text="navItem.name" />
@@ -105,12 +99,6 @@ import { useSearch } from '../composables/use-search';
 
 export default defineComponent({
 	components: { NavigationBookmark },
-	props: {
-		exact: {
-			type: Boolean,
-			default: false,
-		},
-	},
 	setup() {
 		const { t } = useI18n();
 
@@ -142,7 +130,7 @@ export default defineComponent({
 
 						return {
 							...preset,
-							to: `/collections/${preset.collection}/${preset.id}`,
+							to: `/collections/${preset.collection}?bookmark=${preset.id}`,
 							scope,
 						};
 					}),

diff --git a/app/src/modules/collections/composables/use-navigation.ts b/app/src/modules/collections/composables/use-navigation.ts
@@ -27,7 +27,7 @@ function collectionToNavItem(collection: Collection): NavItem {
 		icon: collection.meta?.icon || 'label',
 		color: collection.meta?.color,
 		note: collection.meta?.note || null,
-		to: `/collections/${collection.collection}/-`,
+		to: `/collections/${collection.collection}`,
 	};
 }