suggest fields on m2o

app/src/components/v-field-template/field-list-item.vue

@@ -1,6 +1,6 @@
 <template>
 	<v-list-item
-		v-if="field.children === undefined"
+		v-if="field.children === undefined || depth == 0"
 		@click="$emit('add', `${parent ? parent + '.' : ''}${field.field}`)"
 	>
 		<v-list-item-content>{{ field.name }}</v-list-item-content>
@@ -32,6 +32,9 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		depth: {
+			type: Number,
+		},
 	},
 });
 </script>

app/src/components/v-field-template/v-field-template.vue

@@ -22,7 +22,7 @@
 		</template>
 
 		<v-list dense>
-			<field-list-item @add="addField" v-for="field in tree" :key="field.field" :field="field" />
+			<field-list-item @add="addField" v-for="field in tree" :key="field.field" :field="field" :depth="depth" />
 		</v-list>
 	</v-menu>
 </template>
@@ -49,6 +49,10 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+		depth: {
+			type: Number,
+			default: 10,
+		},
 	},
 	setup(props, { emit }) {
 		const fieldsStore = useFieldsStore();

app/src/interfaces/many-to-one/index.ts

@@ -1,5 +1,6 @@
 import { defineInterface } from '../define';
 import InterfaceManyToOne from './many-to-one.vue';
+import Options from './options.vue';
 
 export default defineInterface(({ i18n }) => ({
 	id: 'many-to-one',
@@ -9,16 +10,6 @@ export default defineInterface(({ i18n }) => ({
 	component: InterfaceManyToOne,
 	types: ['uuid', 'string', 'text', 'integer', 'bigInteger'],
 	relationship: 'm2o',
-	options: [
-		{
-			field: 'template',
-			name: i18n.t('interfaces.many-to-one.display_template'),
-			type: 'string',
-			meta: {
-				width: 'half',
-				interface: 'text-input',
-			},
-		},
-	],
+	options: Options,
 	recommendedDisplays: ['related-values'],
 }));

app/src/interfaces/many-to-one/options.vue

@@ -0,0 +1,56 @@
+<template>
+	<v-notice type="warning" v-if="collection == null">
+		{{ $t('interfaces.one-to-many.no_collection') }}
+	</v-notice>
+	<div v-else>
+		<p class="type-label">{{ $t('interfaces.many-to-one.display_template') }}</p>
+		<v-field-template :collection="collection" v-model="template" :depth="0"></v-field-template>
+	</div>
+</template>
+
+<script lang="ts">
+import { Field } from '@/types';
+import { defineComponent, PropType, computed } from '@vue/composition-api';
+import { useRelationsStore } from '@/stores/';
+export default defineComponent({
+	props: {
+		fieldData: {
+			type: Object as PropType<Field>,
+			default: null,
+		},
+		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 collection = computed(() => {
+			if (props.fieldData.field == null || props.fieldData.meta?.collection == null) return null;
+			const relationData = relationsStore.getRelationsForField(
+				props.fieldData.meta.collection,
+				props.fieldData.field
+			)?.[0];
+			return relationData.one_collection;
+		});
+		return { template, collection };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.type-label {
+	margin-bottom: 4px;
+}
+</style>