Default to collection level display template, add translations interface options

Fixes #838

app/src/interfaces/translations/index.ts

@@ -1,5 +1,6 @@
 import { defineInterface } from '../define';
 import InterfaceTranslations from './translations.vue';
+import TranslationsOptions from './options.vue';
 
 export default defineInterface(({ i18n }) => ({
 	id: 'translations',
@@ -8,7 +9,5 @@ export default defineInterface(({ i18n }) => ({
 	types: ['alias'],
 	relationship: 'translations',
 	component: InterfaceTranslations,
-	options: [
-		/** @todo add custom options component */
-	],
+	options: TranslationsOptions,
 }));

app/src/interfaces/translations/options.vue

@@ -0,0 +1,71 @@
+<template>
+	<v-notice class="full" type="warning" v-if="collection === null">
+		{{ $t('interfaces.translations.no_collection') }}
+	</v-notice>
+	<div v-else class="form-grid">
+		<div class="field full">
+			<p class="type-label">{{ $t('interfaces.translations.display_template') }}</p>
+			<v-field-template :collection="relatedCollection" v-model="template" :depth="2" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { Field } from '@/types';
+import { defineComponent, PropType, computed } from '@vue/composition-api';
+import { useRelationsStore } from '@/stores/';
+import { Relation } from '@/types/relations';
+export default defineComponent({
+	props: {
+		collection: {
+			type: String,
+			required: true,
+		},
+		fieldData: {
+			type: Object as PropType<Field>,
+			default: null,
+		},
+		relations: {
+			type: Array as PropType<Relation[]>,
+			default: () => [],
+		},
+		value: {
+			type: Object as PropType<any>,
+			default: null,
+		},
+	},
+	setup(props, { emit }) {
+		const relationsStore = useRelationsStore();
+		const template = computed({
+			get() {
+				return props.value?.template;
+			},
+			set(newTemplate: string) {
+				emit('input', {
+					...(props.value || {}),
+					template: newTemplate,
+				});
+			},
+		});
+
+		const relatedCollection = computed(() => {
+			if (!props.fieldData || !props.relations || props.relations.length === 0) return null;
+			const { field } = props.fieldData;
+			const relation = props.relations.find(
+				(relation) => relation.one_collection !== props.collection && relation.one_field !== field
+			);
+			return relation?.one_collection || null;
+		});
+
+		return { template, relatedCollection };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins/form-grid';
+
+.form-grid {
+	@include form-grid;
+}
+</style>

app/src/interfaces/translations/translations.vue

@@ -35,6 +35,7 @@ import api from '@/api';
 import { Relation } from '@/types';
 import getFieldsFromTemplate from '@/utils/get-fields-from-template';
 import DrawerItem from '@/views/private/components/drawer-item/drawer-item.vue';
+import { useCollection } from '../../composables/use-collection';
 
 export default defineComponent({
 	components: { DrawerItem },
@@ -166,9 +167,15 @@ export default defineComponent({
 			const loading = ref(false);
 			const error = ref<any>(null);
 
+			const { info: languagesCollectionInfo } = useCollection(languagesCollection);
+
 			const template = computed(() => {
 				if (!languagesPrimaryKeyField.value) return '';
-				return props.template || `{{ ${languagesPrimaryKeyField.value} }}`;
+				return (
+					props.template ||
+					languagesCollectionInfo.value?.meta?.display_template ||
+					`{{ ${languagesPrimaryKeyField.value} }}`
+				);
 			});
 
 			watch(languagesCollection, fetchLanguages, { immediate: true });

app/src/lang/en-US/interfaces.json

@@ -190,6 +190,11 @@
 			"label_placeholder": "Enter a label...",
 			"label_default": "Enabled"
 		},
+		"translations": {
+			"translations": "Translations",
+			"display_template": "Display Template",
+			"no_collection": "No Collection"
+		},
 		"user": {
 			"user": "User",
 			"description": "Select an existing directus user",