use display template for button links (#7546)

app/src/interfaces/_system/system-display-template/system-display-template.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="system-display-template">
-		<v-notice v-if="!collectionField" type="warning">
+		<v-notice v-if="!collectionField && !collectionName" type="warning">
 			{{ t('interfaces.system-display-template.collection_field_not_setup') }}
 		</v-notice>
 		<v-notice v-else-if="collection === null" type="warning">
@@ -35,6 +35,10 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		collectionName: {
+			type: String,
+			default: null,
+		},
 	},
 	emits: ['input'],
 	setup(props) {
@@ -45,7 +49,11 @@ export default defineComponent({
 		const values = inject('values', ref<Record<string, any>>({}));
 
 		const collection = computed(() => {
-			if (!props.collectionField) return null;
+			if (!props.collectionField) {
+				if (props.collectionName) return props.collectionName;
+				return null;
+			}
+
 			const collectionName = values.value[props.collectionField];
 
 			const collectionExists = !!collectionsStore.collections.find(

app/src/interfaces/presentation-links/index.ts

@@ -1,5 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfacePresentationLinks from './presentation-links.vue';
+import Options from './options.vue';
 
 export default defineInterface({
 	id: 'presentation-links',
@@ -11,78 +12,5 @@ export default defineInterface({
 	hideLoader: true,
 	types: ['alias'],
 	groups: ['presentation'],
-	options: [
-		{
-			field: 'links',
-			type: 'json',
-			name: '$t:interfaces.presentation-links.links',
-			meta: {
-				width: 'full',
-				interface: 'list',
-				options: {
-					placeholder: '$t:title',
-					template: '{{ label }}',
-					fields: [
-						{
-							field: 'label',
-							type: 'string',
-							name: '$t:label',
-							meta: {
-								width: 'full',
-								interface: 'input',
-								options: {
-									placeholder: '$t:label',
-								},
-							},
-						},
-						{
-							field: 'icon',
-							name: '$t:icon',
-							type: 'string',
-							meta: {
-								width: 'half',
-								interface: 'select-icon',
-							},
-						},
-						{
-							field: 'type',
-							name: '$t:type',
-							type: 'string',
-							meta: {
-								width: 'half',
-								interface: 'select-dropdown',
-								default_value: 'normal',
-								options: {
-									choices: [
-										{ text: '$t:primary', value: 'primary' },
-										{ text: '$t:normal', value: 'normal' },
-										{ text: '$t:info', value: 'info' },
-										{ text: '$t:success', value: 'success' },
-										{ text: '$t:warning', value: 'warning' },
-										{ text: '$t:danger', value: 'danger' },
-									],
-								},
-							},
-							schema: {
-								default_value: 'normal',
-							},
-						},
-						{
-							field: 'url',
-							type: 'string',
-							name: '$t:url',
-							meta: {
-								width: 'full',
-								interface: 'input',
-								options: {
-									font: 'monospace',
-									placeholder: 'https://example.com/articles/{{ id }}/{{ slug }}',
-								},
-							},
-						},
-					],
-				},
-			},
-		},
-	],
+	options: Options,
 });

app/src/interfaces/presentation-links/options.vue

@@ -0,0 +1,126 @@
+<template>
+	<div class="form-grid">
+		<div class="field full">
+			<p class="type-label">{{ t('interfaces.presentation-links.links') }}</p>
+			<interface-list
+				:collection="collection"
+				:value="links"
+				:placeholder="t('title')"
+				template="{{ label }}"
+				:fields="fields"
+				@input="links = $event"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { useI18n } from 'vue-i18n';
+import { Field } from '@directus/shared/types';
+import { defineComponent, PropType, computed } from 'vue';
+export default defineComponent({
+	props: {
+		collection: {
+			type: String,
+			required: true,
+		},
+		fieldData: {
+			type: Object as PropType<Field>,
+			default: null,
+		},
+		value: {
+			type: Object as PropType<Record<string, any>>,
+			default: null,
+		},
+	},
+	emits: ['input'],
+	setup(props, { emit }) {
+		const { t } = useI18n();
+
+		const links = computed({
+			get() {
+				return props.value?.links;
+			},
+			set(newLinks: string) {
+				emit('input', {
+					...(props.value || {}),
+					links: newLinks,
+				});
+			},
+		});
+
+		const fields = computed(() => {
+			return [
+				{
+					field: 'label',
+					type: 'string',
+					name: '$t:label',
+					meta: {
+						width: 'full',
+						interface: 'input',
+						options: {
+							placeholder: '$t:label',
+						},
+					},
+				},
+				{
+					field: 'icon',
+					name: '$t:icon',
+					type: 'string',
+					meta: {
+						width: 'half',
+						interface: 'select-icon',
+					},
+				},
+				{
+					field: 'type',
+					name: '$t:type',
+					type: 'string',
+					meta: {
+						width: 'half',
+						interface: 'select-dropdown',
+						default_value: 'normal',
+						options: {
+							choices: [
+								{ text: '$t:primary', value: 'primary' },
+								{ text: '$t:normal', value: 'normal' },
+								{ text: '$t:info', value: 'info' },
+								{ text: '$t:success', value: 'success' },
+								{ text: '$t:warning', value: 'warning' },
+								{ text: '$t:danger', value: 'danger' },
+							],
+						},
+					},
+					schema: {
+						default_value: 'normal',
+					},
+				},
+				{
+					field: 'url',
+					type: 'string',
+					name: '$t:url',
+					meta: {
+						width: 'full',
+						interface: 'system-display-template',
+						options: {
+							collectionName: props.collection,
+							font: 'monospace',
+							placeholder: 'https://example.com/articles/{{ id }}/{{ slug }}',
+						},
+					},
+				},
+			];
+		});
+
+		return { t, links, fields };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins/form-grid';
+
+.form-grid {
+	@include form-grid;
+}
+</style>