From 4518ec888661db2af384a95459f1984a4a9cd963 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Tue, 30 Mar 2021 18:21:33 +0200
Subject: [PATCH] add display template option (#4758)

---
 .../v-field-template/field-list-item.vue      |  2 +-
 app/src/interfaces/tree-view/index.ts         |  3 +-
 app/src/interfaces/tree-view/options.vue      | 60 +++++++++++++++++++
 3 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 app/src/interfaces/tree-view/options.vue

diff --git a/app/src/components/v-field-template/field-list-item.vue b/app/src/components/v-field-template/field-list-item.vue
index a55dde2109..e51e3e38b6 100644
--- a/app/src/components/v-field-template/field-list-item.vue
+++ b/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"
 		:disabled="field.disabled"
 		@click="$emit('add', `${parent ? parent + '.' : ''}${field.field}`)"
 	>
diff --git a/app/src/interfaces/tree-view/index.ts b/app/src/interfaces/tree-view/index.ts
index 407d59c187..0005297f59 100644
--- a/app/src/interfaces/tree-view/index.ts
+++ b/app/src/interfaces/tree-view/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '../define';
 import InterfaceTreeView from './tree-view.vue';
+import Options from './options.vue';
 
 export default defineInterface(({ i18n }) => ({
 	id: 'tree-view',
@@ -10,5 +11,5 @@ export default defineInterface(({ i18n }) => ({
 	groups: ['o2m'],
 	relational: true,
 	component: InterfaceTreeView,
-	options: [],
+	options: Options,
 }));
diff --git a/app/src/interfaces/tree-view/options.vue b/app/src/interfaces/tree-view/options.vue
new file mode 100644
index 0000000000..c44c14d9b7
--- /dev/null
+++ b/app/src/interfaces/tree-view/options.vue
@@ -0,0 +1,60 @@
+<template>
+	<v-notice class="full" type="warning" v-if="collection === null">
+		{{ $t('interfaces.one-to-many.no_collection') }}
+	</v-notice>
+	<div v-else class="form-grid">
+		<div class="field full">
+			<p class="type-label">{{ $t('interfaces.many-to-one.display_template') }}</p>
+			<v-field-template :collection="collection" v-model="template" :depth="1"></v-field-template>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { Field } from '@/types';
+import { defineComponent, PropType, computed } from '@vue/composition-api';
+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 template = computed({
+			get() {
+				return props.value?.displayTemplate;
+			},
+			set(newTemplate: string) {
+				emit('input', {
+					...(props.value || {}),
+					displayTemplate: newTemplate,
+				});
+			},
+		});
+
+		return { template };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins/form-grid';
+
+.form-grid {
+	@include form-grid;
+}
+</style>