App / M2O: Add option to navigate to related item (#23997)

* Add link to item * Prevent undesired actions * Remove unused styling * Create itchy-bulldogs-tan.md * Fix collection in link * Hide "Edit" icon if is readonly and has "Item Link" * refactor for consistency --------- Co-authored-by: formfcw <dev@formfcw.com>
directus · Nov 12, 2024 · 6637ed3 · 6637ed3
1 parent e7758b1
commit 6637ed3
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 7 deletions.
diff --git a/.changeset/itchy-bulldogs-tan.md b/.changeset/itchy-bulldogs-tan.md
@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Added "Item Link" option to M2O interface
diff --git a/app/src/interfaces/select-dropdown-m2o/index.ts b/app/src/interfaces/select-dropdown-m2o/index.ts
@@ -65,6 +65,20 @@ export default defineInterface({
 					},
 				},
 			},
+			{
+				field: 'enableLink',
+				name: '$t:item_link',
+				schema: {
+					default_value: false,
+				},
+				meta: {
+					interface: 'boolean',
+					options: {
+						label: '$t:show_link_to_item',
+					},
+					width: 'half',
+				},
+			},
 		];
 	},
 	recommendedDisplays: ['related-values'],

diff --git a/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue b/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue
@@ -13,6 +13,7 @@ import { get } from 'lodash';
 import { render } from 'micromustache';
 import { computed, inject, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { getItemRoute } from '@/utils/get-route';
 
 const props = withDefaults(
 	defineProps<{
@@ -26,6 +27,7 @@ const props = withDefaults(
 		enableCreate?: boolean;
 		enableSelect?: boolean;
 		loading?: boolean;
+		enableLink?: boolean;
 	}>(),
 	{
 		value: null,
@@ -35,6 +37,7 @@ const props = withDefaults(
 		filter: null,
 		enableCreate: true,
 		enableSelect: true,
+		enableLink: false,
 	},
 );
 
@@ -158,6 +161,11 @@ function onSelection(selection: (number | string)[] | null) {
 
 	selectModalActive.value = false;
 }
+
+function getLinkForItem() {
+	if (!collection.value || !currentPrimaryKey.value || !relationInfo.value) return '';
+	return getItemRoute(relationInfo.value.relatedCollection.collection, currentPrimaryKey.value);
+}
 </script>
 
 <template>
@@ -194,7 +202,16 @@ function onSelection(selection: (number | string)[] | null) {
 
 			<template #append>
 				<template v-if="displayItem">
-					<v-icon v-tooltip="t('edit')" name="open_in_new" class="edit" @click="editModalActive = true" />
+					<router-link
+						v-if="enableLink"
+						v-tooltip="t('navigate_to_item')"
+						@click.stop
+						:to="getLinkForItem()"
+						class="item-link"
+					>
+						<v-icon name="launch" />
+					</router-link>
+					<v-icon v-if="!disabled" v-tooltip="t('edit')" name="edit" class="edit" @click="editModalActive = true" />
 					<v-icon
 						v-if="!disabled"
 						v-tooltip="t('deselect')"
@@ -243,6 +260,7 @@ function onSelection(selection: (number | string)[] | null) {
 
 	:deep(.v-input .append) {
 		display: flex;
+		gap: 4px;
 	}
 }
 
@@ -266,16 +284,17 @@ function onSelection(selection: (number | string)[] | null) {
 	}
 }
 
-.edit {
-	margin-right: 4px;
-
+.item-link,
+.add {
 	&:hover {
-		--v-icon-color: var(--theme--form--field--input--foreground);
+		--v-icon-color: var(--theme--primary);
 	}
 }
 
-.add:hover {
-	--v-icon-color: var(--theme--primary);
+.edit {
+	&:hover {
+		--v-icon-color: var(--theme--form--field--input--foreground);
+	}
 }
 
 .deselect:hover {