From c54f525277440d80ce0d318f3da186ce46560c5f Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 18:12:24 +0200
Subject: [PATCH 01/15] suggest fields on m2o

---
 .../v-field-template/field-list-item.vue      |  5 +-
 .../v-field-template/v-field-template.vue     |  6 +-
 app/src/interfaces/many-to-one/index.ts       | 13 +----
 app/src/interfaces/many-to-one/options.vue    | 56 +++++++++++++++++++
 4 files changed, 67 insertions(+), 13 deletions(-)
 create mode 100644 app/src/interfaces/many-to-one/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 ca48b7cdb4..6224403790 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"
 		@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>
diff --git a/app/src/components/v-field-template/v-field-template.vue b/app/src/components/v-field-template/v-field-template.vue
index 5dc7c4db91..1203f95074 100644
--- a/app/src/components/v-field-template/v-field-template.vue
+++ b/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();
diff --git a/app/src/interfaces/many-to-one/index.ts b/app/src/interfaces/many-to-one/index.ts
index b0a41bd7a3..addb0eac52 100644
--- a/app/src/interfaces/many-to-one/index.ts
+++ b/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'],
 }));
diff --git a/app/src/interfaces/many-to-one/options.vue b/app/src/interfaces/many-to-one/options.vue
new file mode 100644
index 0000000000..589fcef8b0
--- /dev/null
+++ b/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>

From 9078947d2037d3840e6d5942bdc3eb58287db078 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 18:34:01 +0200
Subject: [PATCH 02/15] add missing depth downpass

---
 app/src/components/v-field-template/field-list-item.vue | 2 ++
 1 file changed, 2 insertions(+)

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 6224403790..4d3c6a67aa 100644
--- a/app/src/components/v-field-template/field-list-item.vue
+++ b/app/src/components/v-field-template/field-list-item.vue
@@ -12,6 +12,7 @@
 			:key="childField.field"
 			:parent="`${parent ? parent + '.' : ''}${field.field}`"
 			:field="childField"
+			:depth="depth - 1"
 			@add="$emit('add', $event)"
 		/>
 	</v-list-group>
@@ -34,6 +35,7 @@ export default defineComponent({
 		},
 		depth: {
 			type: Number,
+			default: 10,
 		},
 	},
 });

From a54e8f10e6ebef8babc845cb05f9dcddf2de911c Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 19:10:38 +0200
Subject: [PATCH 03/15] change to imported styles

---
 app/src/interfaces/many-to-one/options.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/src/interfaces/many-to-one/options.vue b/app/src/interfaces/many-to-one/options.vue
index 589fcef8b0..95d93eae8e 100644
--- a/app/src/interfaces/many-to-one/options.vue
+++ b/app/src/interfaces/many-to-one/options.vue
@@ -1,10 +1,12 @@
 <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 class="grid">
+		<v-notice type="warning" v-if="collection == null">
+			{{ $t('interfaces.one-to-many.no_collection') }}
+		</v-notice>
+		<div v-else class="full">
+			<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>
 	</div>
 </template>
 
@@ -50,7 +52,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.type-label {
-	margin-bottom: 4px;
+@import '@/styles/mixins/form-grid';
+
+.grid {
+	@include form-grid;
 }
 </style>

From 4a4f79b0b6238d5be335beda8d16929193022bc4 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 18 Sep 2020 10:58:02 +0200
Subject: [PATCH 04/15] fix depth options and clean code

---
 .../v-field-template/field-list-item.vue           |  4 ++--
 .../v-field-template/v-field-template.vue          |  2 +-
 app/src/interfaces/many-to-one/options.vue         | 14 ++++++++------
 app/src/lang/en-US/interfaces.json                 |  3 ++-
 app/src/stores/relations.ts                        |  2 +-
 5 files changed, 14 insertions(+), 11 deletions(-)

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 4d3c6a67aa..5e9d3aa5c5 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 || depth == 0"
+		v-if="field.children === undefined || depth === 0"
 		@click="$emit('add', `${parent ? parent + '.' : ''}${field.field}`)"
 	>
 		<v-list-item-content>{{ field.name }}</v-list-item-content>
@@ -35,7 +35,7 @@ export default defineComponent({
 		},
 		depth: {
 			type: Number,
-			default: 10,
+			default: 2,
 		},
 	},
 });
diff --git a/app/src/components/v-field-template/v-field-template.vue b/app/src/components/v-field-template/v-field-template.vue
index 1203f95074..14682da64a 100644
--- a/app/src/components/v-field-template/v-field-template.vue
+++ b/app/src/components/v-field-template/v-field-template.vue
@@ -51,7 +51,7 @@ export default defineComponent({
 		},
 		depth: {
 			type: Number,
-			default: 10,
+			default: 2,
 		},
 	},
 	setup(props, { emit }) {
diff --git a/app/src/interfaces/many-to-one/options.vue b/app/src/interfaces/many-to-one/options.vue
index 95d93eae8e..317498aa96 100644
--- a/app/src/interfaces/many-to-one/options.vue
+++ b/app/src/interfaces/many-to-one/options.vue
@@ -5,7 +5,7 @@
 		</v-notice>
 		<div v-else class="full">
 			<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>
+			<v-field-template :collection="collection" v-model="template" :depth="1"></v-field-template>
 		</div>
 	</div>
 </template>
@@ -14,6 +14,7 @@
 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: {
 		fieldData: {
@@ -39,12 +40,13 @@ export default defineComponent({
 			},
 		});
 		const collection = computed(() => {
-			if (props.fieldData.field == null || props.fieldData.meta?.collection == null) return null;
-			const relationData = relationsStore.getRelationsForField(
-				props.fieldData.meta.collection,
+			if (props.fieldData.field === null || props.fieldData.meta?.collection === null) return null;
+			const relationData: Relation[] = relationsStore.getRelationsForField(
+				props.fieldData.meta?.collection,
 				props.fieldData.field
-			)?.[0];
-			return relationData.one_collection;
+			);
+
+			return relationData[0]?.one_collection;
 		});
 		return { template, collection };
 	},
diff --git a/app/src/lang/en-US/interfaces.json b/app/src/lang/en-US/interfaces.json
index 5db43a7f0d..df6183ea09 100644
--- a/app/src/lang/en-US/interfaces.json
+++ b/app/src/lang/en-US/interfaces.json
@@ -131,7 +131,8 @@
 		"one-to-many": {
 			"one-to-many": "One to Many",
 			"description": "Select multiple related items",
-			"readable_fields_copy": "Select the fields that the user can view"
+			"readable_fields_copy": "Select the fields that the user can view",
+			"no_collection": "No matching relation could be found"
 		},
 		"radio-buttons": {
 			"radio-buttons": "Radio Buttons",
diff --git a/app/src/stores/relations.ts b/app/src/stores/relations.ts
index 166dd2253f..c253e8d746 100644
--- a/app/src/stores/relations.ts
+++ b/app/src/stores/relations.ts
@@ -52,7 +52,7 @@ export const useRelationsStore = createStore({
 				] as Relation[];
 			}
 
-			const relations = this.getRelationsForCollection(collection).filter((relation: Relation) => {
+			const relations: Relation[] = this.getRelationsForCollection(collection).filter((relation: Relation) => {
 				return relation.many_field === field || relation.one_field === field;
 			});
 

From b93025858c485ccdd8db3fbb327503a39c67831e Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 18 Sep 2020 11:06:35 +0200
Subject: [PATCH 05/15] fix collection not null

---
 app/src/interfaces/many-to-one/options.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/interfaces/many-to-one/options.vue b/app/src/interfaces/many-to-one/options.vue
index 317498aa96..6da15a6f75 100644
--- a/app/src/interfaces/many-to-one/options.vue
+++ b/app/src/interfaces/many-to-one/options.vue
@@ -40,7 +40,7 @@ export default defineComponent({
 			},
 		});
 		const collection = computed(() => {
-			if (props.fieldData.field === null || props.fieldData.meta?.collection === null) return null;
+			if (props.fieldData.field === null || props.fieldData.meta?.collection === undefined) return null;
 			const relationData: Relation[] = relationsStore.getRelationsForField(
 				props.fieldData.meta?.collection,
 				props.fieldData.field

From 8fcd65de430abf83ff873f78c19bb191ae3a4772 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 14:18:05 +0200
Subject: [PATCH 06/15] add v-field-select

---
 app/src/components/register.ts                |   2 +
 .../v-field-select/field-list-item.vue        |  37 +++++
 app/src/components/v-field-select/index.ts    |   4 +
 app/src/components/v-field-select/readme.md   |   1 +
 app/src/components/v-field-select/types.ts    |   7 +
 .../v-field-select/v-field-select.vue         | 138 ++++++++++++++++++
 app/src/layouts/tabular/tabular.vue           |   7 +
 7 files changed, 196 insertions(+)
 create mode 100644 app/src/components/v-field-select/field-list-item.vue
 create mode 100644 app/src/components/v-field-select/index.ts
 create mode 100644 app/src/components/v-field-select/readme.md
 create mode 100644 app/src/components/v-field-select/types.ts
 create mode 100644 app/src/components/v-field-select/v-field-select.vue

diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index b0ddc02027..791834dcaa 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -13,6 +13,7 @@ import VDivider from './v-divider';
 import VError from './v-error';
 import VFancySelect from './v-fancy-select';
 import VFieldTemplate from './v-field-template';
+import VFieldSelect from './v-field-select';
 import VForm from './v-form';
 import VHover from './v-hover/';
 import VIcon from './v-icon/';
@@ -64,6 +65,7 @@ Vue.component('v-divider', VDivider);
 Vue.component('v-error', VError);
 Vue.component('v-fancy-select', VFancySelect);
 Vue.component('v-field-template', VFieldTemplate);
+Vue.component('v-field-select', VFieldSelect);
 Vue.component('v-form', VForm);
 Vue.component('v-hover', VHover);
 Vue.component('v-icon', VIcon);
diff --git a/app/src/components/v-field-select/field-list-item.vue b/app/src/components/v-field-select/field-list-item.vue
new file mode 100644
index 0000000000..ca48b7cdb4
--- /dev/null
+++ b/app/src/components/v-field-select/field-list-item.vue
@@ -0,0 +1,37 @@
+<template>
+	<v-list-item
+		v-if="field.children === undefined"
+		@click="$emit('add', `${parent ? parent + '.' : ''}${field.field}`)"
+	>
+		<v-list-item-content>{{ field.name }}</v-list-item-content>
+	</v-list-item>
+	<v-list-group v-else>
+		<template #activator>{{ field.name }}</template>
+		<field-list-item
+			v-for="childField in field.children"
+			:key="childField.field"
+			:parent="`${parent ? parent + '.' : ''}${field.field}`"
+			:field="childField"
+			@add="$emit('add', $event)"
+		/>
+	</v-list-group>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from '@vue/composition-api';
+import { FieldTree } from './types';
+
+export default defineComponent({
+	name: 'field-list-item',
+	props: {
+		field: {
+			type: Object as PropType<FieldTree>,
+			required: true,
+		},
+		parent: {
+			type: String,
+			default: null,
+		},
+	},
+});
+</script>
diff --git a/app/src/components/v-field-select/index.ts b/app/src/components/v-field-select/index.ts
new file mode 100644
index 0000000000..b1c710c945
--- /dev/null
+++ b/app/src/components/v-field-select/index.ts
@@ -0,0 +1,4 @@
+import VFieldSelect from './v-field-select.vue';
+
+export default VFieldSelect;
+export { VFieldSelect };
diff --git a/app/src/components/v-field-select/readme.md b/app/src/components/v-field-select/readme.md
new file mode 100644
index 0000000000..0797026f8a
--- /dev/null
+++ b/app/src/components/v-field-select/readme.md
@@ -0,0 +1 @@
+# Field Select
diff --git a/app/src/components/v-field-select/types.ts b/app/src/components/v-field-select/types.ts
new file mode 100644
index 0000000000..017198e912
--- /dev/null
+++ b/app/src/components/v-field-select/types.ts
@@ -0,0 +1,7 @@
+import { TranslateResult } from 'vue-i18n';
+
+export type FieldTree = {
+	field: string;
+	name: string | TranslateResult;
+	children?: FieldTree[];
+};
diff --git a/app/src/components/v-field-select/v-field-select.vue b/app/src/components/v-field-select/v-field-select.vue
new file mode 100644
index 0000000000..3135187a4a
--- /dev/null
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -0,0 +1,138 @@
+<template>
+	<div class="v-field-select">
+		<draggable v-model="activeFields" handle=".drag-handle" :set-data="hideDragImage">
+			<div
+				v-for="(field, index) in activeFields"
+				:key="index"
+				:value="field.field"
+				:label="field.name"
+				class="field"
+			>
+				<v-icon @click.stop="removeField(field.field)" name="close" />
+				<span class="name">{{ field.name }}</span>
+				<v-icon @click.stop name="drag_handle" class="drag-handle" />
+			</div>
+		</draggable>
+		<v-menu attached v-model="menuActive" v-show="selectableFields.length > 0">
+			<template #activator="{ toggle }">
+				<div class="field" @click="toggle">
+					<v-icon name="add" />
+					<span class="name">Add field</span>
+				</div>
+			</template>
+
+			<v-list dense>
+				<field-list-item @add="addField" v-for="field in selectableFields" :key="field.field" :field="field" />
+			</v-list>
+		</v-menu>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, ref, watch, onMounted, onUnmounted, PropType, computed } from '@vue/composition-api';
+import FieldListItem from './field-list-item.vue';
+import { useFieldsStore } from '@/stores';
+import { Field } from '@/types/';
+import Draggable from 'vuedraggable';
+import useFieldTree from '@/composables/use-field-tree';
+import useCollection from '@/composables/use-collection';
+import { FieldTree } from '../v-field-template/types';
+import hideDragImage from '@/utils/hide-drag-image';
+
+export default defineComponent({
+	components: { FieldListItem, Draggable },
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		value: {
+			type: Array as PropType<string[]>,
+			default: null,
+		},
+		collection: {
+			type: String,
+			required: true,
+		},
+	},
+	setup(props, { emit }) {
+		const fieldsStore = useFieldsStore();
+
+		const menuActive = ref(false);
+
+		const { collection } = toRefs(props);
+		const { tree } = useFieldTree(collection);
+		const { info, primaryKeyField, fields: fieldsInCollection, sortField } = useCollection(collection);
+
+		const _value = computed({
+			get() {
+				return props.value;
+			},
+			set(newVal: string[]) {
+				emit('input', newVal);
+			},
+		});
+
+		const treeFlattened = computed(() => {
+			const fields: FieldTree[] = [];
+			const stack: FieldTree[] = tree.value;
+
+			while (stack.length > 0) {
+				const field = stack.shift();
+				if (field === undefined) continue;
+				fields.push(field);
+				if (field.children === undefined) continue;
+				stack.push(...field.children);
+			}
+			return fields;
+		});
+
+		const activeFields = computed({
+			get() {
+				const list = _value.value.map((field) => fieldsInCollection.value.find((f) => f.field === field));
+				const filteredList: Field[] = [];
+				list.forEach((field) => {
+					if (field !== undefined) filteredList.push(field);
+				});
+
+				return filteredList;
+			},
+			set(newVal: Field[]) {
+				_value.value = newVal.map((field) => field.field);
+			},
+		});
+
+		const selectableFields = computed(() => {
+			return fieldsInCollection.value.filter((field) => _value.value.includes(field.field) === false);
+		});
+
+		return { tree, menuActive, addField, activeFields, removeField, selectableFields, hideDragImage };
+
+		function removeField(field: string) {
+			_value.value = _value.value.filter((f) => f !== field);
+		}
+
+		function addField(field: string) {
+			const newArray = _value.value;
+			newArray.push(field);
+			_value.value = newArray;
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.field {
+	display: flex;
+	justify-content: space-between;
+
+	.name {
+		flex: 1;
+		padding: 0 5px;
+	}
+
+	.v-icon {
+		--v-icon-color: var(--foreground-subdued);
+	}
+}
+</style>
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index 939b05d6ae..c7883a33c5 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -1,6 +1,11 @@
 <template>
 	<div class="layout-tabular">
 		<portal to="layout-options">
+			<div class="layout-option">
+				<div class="option-label">Test</div>
+				<v-field-select :collection="collection" v-model="selectedFields" />
+			</div>
+
 			<div class="layout-option">
 				<div class="option-label">{{ $t('layouts.tabular.spacing') }}</div>
 				<v-select
@@ -211,6 +216,7 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
+		const selectedFields = ref(['title']);
 		const table = ref<Vue | null>(null);
 		const mainElement = inject('main-element', ref<Element | null>(null));
 
@@ -290,6 +296,7 @@ export default defineComponent({
 			activeFilterCount,
 			refresh,
 			resetPresetAndRefresh,
+			selectedFields,
 		};
 
 		async function resetPresetAndRefresh() {

From 1e4e865a12ac0764ce51fef42cdaaa0a075857ff Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 16:42:18 +0200
Subject: [PATCH 07/15] add O2M options and change v-field-select to use tags

---
 .../v-field-select/v-field-select.vue         | 49 +++++++------------
 app/src/interfaces/one-to-many/index.ts       | 16 +-----
 app/src/interfaces/one-to-many/options.vue    | 47 ++++++++++++++++++
 app/src/layouts/tabular/tabular.vue           |  7 ---
 4 files changed, 68 insertions(+), 51 deletions(-)
 create mode 100644 app/src/interfaces/one-to-many/options.vue

diff --git a/app/src/components/v-field-select/v-field-select.vue b/app/src/components/v-field-select/v-field-select.vue
index 3135187a4a..67b7240799 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -1,31 +1,25 @@
 <template>
-	<div class="v-field-select">
-		<draggable v-model="activeFields" handle=".drag-handle" :set-data="hideDragImage">
-			<div
-				v-for="(field, index) in activeFields"
-				:key="index"
-				:value="field.field"
-				:label="field.name"
-				class="field"
-			>
-				<v-icon @click.stop="removeField(field.field)" name="close" />
-				<span class="name">{{ field.name }}</span>
-				<v-icon @click.stop name="drag_handle" class="drag-handle" />
-			</div>
-		</draggable>
-		<v-menu attached v-model="menuActive" v-show="selectableFields.length > 0">
+	<draggable v-model="activeFields" draggable=".draggable" :set-data="hideDragImage" class="v-field-select">
+		<v-chip
+			v-for="(field, index) in activeFields"
+			:key="index"
+			class="field draggable"
+			@click.stop="removeField(field.field)"
+		>
+			{{ field.name }}
+		</v-chip>
+		<v-menu showArrow v-model="menuActive" v-show="selectableFields.length > 0" slot="footer" class="add">
 			<template #activator="{ toggle }">
-				<div class="field" @click="toggle">
+				<v-chip class="field" @click="toggle">
 					<v-icon name="add" />
-					<span class="name">Add field</span>
-				</div>
+				</v-chip>
 			</template>
 
 			<v-list dense>
 				<field-list-item @add="addField" v-for="field in selectableFields" :key="field.field" :field="field" />
 			</v-list>
 		</v-menu>
-	</div>
+	</draggable>
 </template>
 
 <script lang="ts">
@@ -66,7 +60,7 @@ export default defineComponent({
 
 		const _value = computed({
 			get() {
-				return props.value;
+				return props.value || [];
 			},
 			set(newVal: string[]) {
 				emit('input', newVal);
@@ -122,17 +116,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.field {
+.v-field-select {
 	display: flex;
-	justify-content: space-between;
+	flex-wrap: wrap;
+}
 
-	.name {
-		flex: 1;
-		padding: 0 5px;
-	}
-
-	.v-icon {
-		--v-icon-color: var(--foreground-subdued);
-	}
+.v-chip.field {
+	margin-right: 5px;
 }
 </style>
diff --git a/app/src/interfaces/one-to-many/index.ts b/app/src/interfaces/one-to-many/index.ts
index 531321ff8a..9bb215b1e9 100644
--- a/app/src/interfaces/one-to-many/index.ts
+++ b/app/src/interfaces/one-to-many/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '../define';
 import InterfaceOneToMany from './one-to-many.vue';
+import Options from './options.vue';
 
 export default defineInterface(({ i18n }) => ({
 	id: 'one-to-many',
@@ -9,19 +10,6 @@ export default defineInterface(({ i18n }) => ({
 	component: InterfaceOneToMany,
 	types: ['alias'],
 	relationship: 'o2m',
-	options: [
-		{
-			field: 'fields',
-			type: 'json',
-			name: i18n.tc('field', 0),
-			meta: {
-				interface: 'tags',
-				width: 'full',
-				options: {
-					placeholder: i18n.t('interfaces.one-to-many.readable_fields_copy'),
-				},
-			},
-		},
-	],
+	options: Options,
 	recommendedDisplays: ['related-values'],
 }));
diff --git a/app/src/interfaces/one-to-many/options.vue b/app/src/interfaces/one-to-many/options.vue
new file mode 100644
index 0000000000..54221e6b0e
--- /dev/null
+++ b/app/src/interfaces/one-to-many/options.vue
@@ -0,0 +1,47 @@
+<template>
+	<v-notice type="warning" v-if="fieldData.meta.collection == null">
+		{{ $t('interfaces.one-to-many.no_collection') }}
+	</v-notice>
+	<div v-else>
+		<p class="type-label">{{ $t('select_fields') }}</p>
+		<v-field-select :collection="fieldData.meta.collection" v-model="fields"></v-field-select>
+	</div>
+</template>
+
+<script lang="ts">
+import { Field } from '@/types';
+import { defineComponent, PropType, computed } from '@vue/composition-api';
+
+export default defineComponent({
+	props: {
+		fieldData: {
+			type: Object as PropType<Field>,
+			default: null,
+		},
+		value: {
+			type: Object as PropType<any>,
+			default: null,
+		},
+	},
+	setup(props, { emit }) {
+		const fields = computed({
+			get() {
+				return props.value?.fields;
+			},
+			set(newTemplate: string) {
+				emit('input', {
+					...(props.value || {}),
+					fields: newTemplate,
+				});
+			},
+		});
+		return { fields };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.type-label {
+	margin-bottom: 4px;
+}
+</style>
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index c7883a33c5..939b05d6ae 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -1,11 +1,6 @@
 <template>
 	<div class="layout-tabular">
 		<portal to="layout-options">
-			<div class="layout-option">
-				<div class="option-label">Test</div>
-				<v-field-select :collection="collection" v-model="selectedFields" />
-			</div>
-
 			<div class="layout-option">
 				<div class="option-label">{{ $t('layouts.tabular.spacing') }}</div>
 				<v-select
@@ -216,7 +211,6 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		const selectedFields = ref(['title']);
 		const table = ref<Vue | null>(null);
 		const mainElement = inject('main-element', ref<Element | null>(null));
 
@@ -296,7 +290,6 @@ export default defineComponent({
 			activeFilterCount,
 			refresh,
 			resetPresetAndRefresh,
-			selectedFields,
 		};
 
 		async function resetPresetAndRefresh() {

From 704cf3ade0f73b272bf75a697f5dedaf5d3e5522 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 17:04:48 +0200
Subject: [PATCH 08/15] use right collection on O2M

---
 .../v-field-select/v-field-select.vue         |  9 ++++++++-
 app/src/interfaces/one-to-many/options.vue    | 19 ++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/src/components/v-field-select/v-field-select.vue b/app/src/components/v-field-select/v-field-select.vue
index 67b7240799..bb8cc3e59d 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -8,7 +8,14 @@
 		>
 			{{ field.name }}
 		</v-chip>
-		<v-menu showArrow v-model="menuActive" v-show="selectableFields.length > 0" slot="footer" class="add">
+		<v-menu
+			showArrow
+			v-model="menuActive"
+			v-show="selectableFields.length > 0"
+			slot="footer"
+			class="add"
+			placement="bottom-end"
+		>
 			<template #activator="{ toggle }">
 				<v-chip class="field" @click="toggle">
 					<v-icon name="add" />
diff --git a/app/src/interfaces/one-to-many/options.vue b/app/src/interfaces/one-to-many/options.vue
index 54221e6b0e..0fe8d8f20a 100644
--- a/app/src/interfaces/one-to-many/options.vue
+++ b/app/src/interfaces/one-to-many/options.vue
@@ -1,16 +1,17 @@
 <template>
-	<v-notice type="warning" v-if="fieldData.meta.collection == null">
+	<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('select_fields') }}</p>
-		<v-field-select :collection="fieldData.meta.collection" v-model="fields"></v-field-select>
+		<v-field-select :collection="collection" v-model="fields"></v-field-select>
 	</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: {
@@ -24,6 +25,8 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
+		const relationsStore = useRelationsStore();
+
 		const fields = computed({
 			get() {
 				return props.value?.fields;
@@ -35,7 +38,17 @@ export default defineComponent({
 				});
 			},
 		});
-		return { fields };
+
+		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.many_collection;
+		});
+
+		return { fields, collection };
 	},
 });
 </script>

From b3eb2c78195d7ff6608e828173fd52578addb4cb Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 17:08:56 +0200
Subject: [PATCH 09/15] danger color on hover

---
 app/src/components/v-field-select/v-field-select.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/src/components/v-field-select/v-field-select.vue b/app/src/components/v-field-select/v-field-select.vue
index bb8cc3e59d..dbe0a4a82c 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -17,7 +17,7 @@
 			placement="bottom-end"
 		>
 			<template #activator="{ toggle }">
-				<v-chip class="field" @click="toggle">
+				<v-chip @click="toggle">
 					<v-icon name="add" />
 				</v-chip>
 			</template>
@@ -130,5 +130,10 @@ export default defineComponent({
 
 .v-chip.field {
 	margin-right: 5px;
+
+	&:hover {
+		background-color: var(--danger);
+		border-color: var(--danger);
+	}
 }
 </style>

From cc00138f8baa5eb977097000d3428695f62c0152 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 18:26:48 +0200
Subject: [PATCH 10/15] add component to m2m interface

---
 app/src/interfaces/many-to-many/index.ts    | 16 +----
 app/src/interfaces/many-to-many/options.vue | 66 +++++++++++++++++++++
 2 files changed, 68 insertions(+), 14 deletions(-)
 create mode 100644 app/src/interfaces/many-to-many/options.vue

diff --git a/app/src/interfaces/many-to-many/index.ts b/app/src/interfaces/many-to-many/index.ts
index 2c9be51c25..506a5912ce 100644
--- a/app/src/interfaces/many-to-many/index.ts
+++ b/app/src/interfaces/many-to-many/index.ts
@@ -1,5 +1,6 @@
 import { defineInterface } from '../define';
 import InterfaceManyToMany from './many-to-many.vue';
+import Options from './options.vue';
 
 export default defineInterface(({ i18n }) => ({
 	id: 'many-to-many',
@@ -9,19 +10,6 @@ export default defineInterface(({ i18n }) => ({
 	component: InterfaceManyToMany,
 	relationship: 'm2m',
 	types: ['alias'],
-	options: [
-		{
-			field: 'fields',
-			type: 'json',
-			name: i18n.tc('field', 0),
-			meta: {
-				interface: 'tags',
-				width: 'full',
-				options: {
-					placeholder: i18n.t('readable_fields_copy'),
-				},
-			},
-		},
-	],
+	options: Options,
 	recommendedDisplays: ['related-values'],
 }));
diff --git a/app/src/interfaces/many-to-many/options.vue b/app/src/interfaces/many-to-many/options.vue
new file mode 100644
index 0000000000..dfec9fd9a8
--- /dev/null
+++ b/app/src/interfaces/many-to-many/options.vue
@@ -0,0 +1,66 @@
+<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('select_fields') }}</p>
+		<v-field-select :collection="collection" v-model="fields"></v-field-select>
+	</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 fields = computed({
+			get() {
+				return props.value?.fields;
+			},
+			set(newTemplate: string) {
+				emit('input', {
+					...(props.value || {}),
+					fields: newTemplate,
+				});
+			},
+		});
+
+		const collection = computed(() => {
+			if (props.fieldData.field == null || props.fieldData.meta?.collection == null) return null;
+			const junction = relationsStore.getRelationsForField(
+				props.fieldData.meta.collection,
+				props.fieldData.field
+			)?.[0];
+
+			const relationData = relationsStore.getRelationsForField(
+				junction.many_collection,
+				junction.junction_field
+			)?.[0];
+
+			return relationData.one_collection;
+		});
+
+		return { fields, collection };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.type-label {
+	margin-bottom: 4px;
+}
+</style>

From 654a045582eb644b44382f6fa8ab8bdd26f24b57 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 18:32:32 +0200
Subject: [PATCH 11/15] add depth prop

---
 .../v-field-select/field-list-item.vue        | 37 -------------------
 app/src/components/v-field-select/types.ts    |  7 ----
 .../v-field-select/v-field-select.vue         | 14 ++++++-
 3 files changed, 12 insertions(+), 46 deletions(-)
 delete mode 100644 app/src/components/v-field-select/field-list-item.vue
 delete mode 100644 app/src/components/v-field-select/types.ts

diff --git a/app/src/components/v-field-select/field-list-item.vue b/app/src/components/v-field-select/field-list-item.vue
deleted file mode 100644
index ca48b7cdb4..0000000000
--- a/app/src/components/v-field-select/field-list-item.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-	<v-list-item
-		v-if="field.children === undefined"
-		@click="$emit('add', `${parent ? parent + '.' : ''}${field.field}`)"
-	>
-		<v-list-item-content>{{ field.name }}</v-list-item-content>
-	</v-list-item>
-	<v-list-group v-else>
-		<template #activator>{{ field.name }}</template>
-		<field-list-item
-			v-for="childField in field.children"
-			:key="childField.field"
-			:parent="`${parent ? parent + '.' : ''}${field.field}`"
-			:field="childField"
-			@add="$emit('add', $event)"
-		/>
-	</v-list-group>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from '@vue/composition-api';
-import { FieldTree } from './types';
-
-export default defineComponent({
-	name: 'field-list-item',
-	props: {
-		field: {
-			type: Object as PropType<FieldTree>,
-			required: true,
-		},
-		parent: {
-			type: String,
-			default: null,
-		},
-	},
-});
-</script>
diff --git a/app/src/components/v-field-select/types.ts b/app/src/components/v-field-select/types.ts
deleted file mode 100644
index 017198e912..0000000000
--- a/app/src/components/v-field-select/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { TranslateResult } from 'vue-i18n';
-
-export type FieldTree = {
-	field: string;
-	name: string | TranslateResult;
-	children?: FieldTree[];
-};
diff --git a/app/src/components/v-field-select/v-field-select.vue b/app/src/components/v-field-select/v-field-select.vue
index dbe0a4a82c..2177d2f663 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -23,7 +23,13 @@
 			</template>
 
 			<v-list dense>
-				<field-list-item @add="addField" v-for="field in selectableFields" :key="field.field" :field="field" />
+				<field-list-item
+					@add="addField"
+					v-for="field in selectableFields"
+					:key="field.field"
+					:field="field"
+					:depth="depth"
+				/>
 			</v-list>
 		</v-menu>
 	</draggable>
@@ -31,7 +37,7 @@
 
 <script lang="ts">
 import { defineComponent, toRefs, ref, watch, onMounted, onUnmounted, PropType, computed } from '@vue/composition-api';
-import FieldListItem from './field-list-item.vue';
+import FieldListItem from '../v-field-template/field-list-item.vue';
 import { useFieldsStore } from '@/stores';
 import { Field } from '@/types/';
 import Draggable from 'vuedraggable';
@@ -55,6 +61,10 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+		depth: {
+			type: Number,
+			default: 1,
+		},
 	},
 	setup(props, { emit }) {
 		const fieldsStore = useFieldsStore();

From 09d35b0f886bfdf5fc6916417a17536dbd42191a Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 19:26:36 +0200
Subject: [PATCH 12/15] import grid styles

---
 app/src/interfaces/one-to-many/options.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/src/interfaces/one-to-many/options.vue b/app/src/interfaces/one-to-many/options.vue
index 0fe8d8f20a..bf6b800e1c 100644
--- a/app/src/interfaces/one-to-many/options.vue
+++ b/app/src/interfaces/one-to-many/options.vue
@@ -2,9 +2,11 @@
 	<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('select_fields') }}</p>
-		<v-field-select :collection="collection" v-model="fields"></v-field-select>
+	<div v-else class="grid">
+		<div class="full">
+			<p class="type-label">{{ $t('select_fields') }}</p>
+			<v-field-select :collection="collection" v-model="fields"></v-field-select>
+		</div>
 	</div>
 </template>
 
@@ -54,7 +56,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.type-label {
-	margin-bottom: 4px;
+@import '@/styles/mixins/form-grid.scss';
+
+.grid {
+	@include form-grid;
 }
 </style>

From 07ba2d4bd080c29fdef056eea56191eb111a3b8e Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Wed, 23 Sep 2020 11:29:38 +0200
Subject: [PATCH 13/15] finish relations

---
 .../v-field-select/v-field-select.vue         | 76 +++++++++++--------
 .../use-field-tree/use-field-tree.ts          |  5 +-
 app/src/interfaces/many-to-many/options.vue   | 22 +++---
 app/src/interfaces/one-to-many/options.vue    | 16 ++--
 4 files changed, 68 insertions(+), 51 deletions(-)

diff --git a/app/src/components/v-field-select/v-field-select.vue b/app/src/components/v-field-select/v-field-select.vue
index 2177d2f663..c794009767 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -1,15 +1,16 @@
 <template>
-	<draggable v-model="activeFields" draggable=".draggable" :set-data="hideDragImage" class="v-field-select">
+	<draggable v-model="selectedFields" draggable=".draggable" :set-data="hideDragImage" class="v-field-select">
 		<v-chip
-			v-for="(field, index) in activeFields"
+			v-for="(field, index) in selectedFields"
 			:key="index"
 			class="field draggable"
+			v-tooltip="field.field"
 			@click.stop="removeField(field.field)"
 		>
 			{{ field.name }}
 		</v-chip>
 		<v-menu
-			showArrow
+			show-arrow
 			v-model="menuActive"
 			v-show="selectableFields.length > 0"
 			slot="footer"
@@ -70,10 +71,10 @@ export default defineComponent({
 		const fieldsStore = useFieldsStore();
 
 		const menuActive = ref(false);
-
 		const { collection } = toRefs(props);
-		const { tree } = useFieldTree(collection);
+
 		const { info, primaryKeyField, fields: fieldsInCollection, sortField } = useCollection(collection);
+		const { tree } = useFieldTree(collection, true);
 
 		const _value = computed({
 			get() {
@@ -84,40 +85,53 @@ export default defineComponent({
 			},
 		});
 
-		const treeFlattened = computed(() => {
-			const fields: FieldTree[] = [];
-			const stack: FieldTree[] = tree.value;
-
-			while (stack.length > 0) {
-				const field = stack.shift();
-				if (field === undefined) continue;
-				fields.push(field);
-				if (field.children === undefined) continue;
-				stack.push(...field.children);
-			}
-			return fields;
-		});
-
-		const activeFields = computed({
+		const selectedFields = computed({
 			get() {
-				const list = _value.value.map((field) => fieldsInCollection.value.find((f) => f.field === field));
-				const filteredList: Field[] = [];
-				list.forEach((field) => {
-					if (field !== undefined) filteredList.push(field);
-				});
-
-				return filteredList;
+				return props.value.map((field) => ({
+					field,
+					name: findTree(tree.value, field.split('.'))?.name as string,
+				}));
 			},
-			set(newVal: Field[]) {
+			set(newVal: { field: string; name: string }[]) {
 				_value.value = newVal.map((field) => field.field);
 			},
 		});
 
 		const selectableFields = computed(() => {
-			return fieldsInCollection.value.filter((field) => _value.value.includes(field.field) === false);
+			return filterTree(tree.value, (field, prefix) => props.value.includes(prefix + field.field) === false);
 		});
 
-		return { tree, menuActive, addField, activeFields, removeField, selectableFields, hideDragImage };
+		return { menuActive, addField, removeField, selectableFields, selectedFields, hideDragImage, tree };
+
+		function findTree(tree: FieldTree[] | undefined, fieldSections: string[]): FieldTree | undefined {
+			if (tree === undefined) return undefined;
+
+			const fieldObject = tree.find((f) => f.field === fieldSections[0]);
+
+			if (fieldObject === undefined) return undefined;
+			if (fieldSections.length === 1) return fieldObject;
+			return findTree(fieldObject.children, fieldSections.slice(1));
+		}
+
+		function filterTree(
+			tree: FieldTree[] | undefined,
+			f: (field: FieldTree, prefix: string) => boolean,
+			prefix = ''
+		) {
+			if (tree === undefined) return undefined;
+
+			const newTree: FieldTree[] = [];
+			tree.forEach((field) => {
+				if (f(field, prefix)) {
+					newTree.push({
+						field: field.field,
+						name: field.name,
+						children: filterTree(field.children, f, prefix + field.field + '.'),
+					});
+				}
+			});
+			return newTree.length === 0 ? undefined : newTree;
+		}
 
 		function removeField(field: string) {
 			_value.value = _value.value.filter((f) => f !== field);
@@ -126,7 +140,7 @@ export default defineComponent({
 		function addField(field: string) {
 			const newArray = _value.value;
 			newArray.push(field);
-			_value.value = newArray;
+			_value.value = [...new Set(newArray)];
 		}
 	},
 });
diff --git a/app/src/composables/use-field-tree/use-field-tree.ts b/app/src/composables/use-field-tree/use-field-tree.ts
index 63c17f1fc8..6c6c7c79c8 100644
--- a/app/src/composables/use-field-tree/use-field-tree.ts
+++ b/app/src/composables/use-field-tree/use-field-tree.ts
@@ -3,7 +3,7 @@ import { FieldTree } from './types';
 import { useFieldsStore, useRelationsStore } from '@/stores/';
 import { Field, Relation } from '@/types';
 
-export default function useFieldTree(collection: Ref<string>) {
+export default function useFieldTree(collection: Ref<string>, showHidden = false) {
 	const fieldsStore = useFieldsStore();
 	const relationsStore = useRelationsStore();
 
@@ -12,7 +12,8 @@ export default function useFieldTree(collection: Ref<string>) {
 			.getFieldsForCollection(collection.value)
 			.filter(
 				(field: Field) =>
-					field.meta?.hidden === false && (field.meta?.special || []).includes('alias') === false
+					showHidden ||
+					(field.meta?.hidden === false && (field.meta?.special || []).includes('alias') === false)
 			)
 			.map((field: Field) => parseField(field, []));
 
diff --git a/app/src/interfaces/many-to-many/options.vue b/app/src/interfaces/many-to-many/options.vue
index dfec9fd9a8..c23eef6076 100644
--- a/app/src/interfaces/many-to-many/options.vue
+++ b/app/src/interfaces/many-to-many/options.vue
@@ -12,6 +12,7 @@
 import { Field } from '@/types';
 import { defineComponent, PropType, computed } from '@vue/composition-api';
 import { useRelationsStore } from '@/stores/';
+import { Relation } from '@/types';
 
 export default defineComponent({
 	props: {
@@ -31,27 +32,26 @@ export default defineComponent({
 			get() {
 				return props.value?.fields;
 			},
-			set(newTemplate: string) {
+			set(newFields: string) {
 				emit('input', {
 					...(props.value || {}),
-					fields: newTemplate,
+					fields: newFields,
 				});
 			},
 		});
 
 		const collection = computed(() => {
 			if (props.fieldData.field == null || props.fieldData.meta?.collection == null) return null;
-			const junction = relationsStore.getRelationsForField(
-				props.fieldData.meta.collection,
-				props.fieldData.field
-			)?.[0];
 
-			const relationData = relationsStore.getRelationsForField(
-				junction.many_collection,
-				junction.junction_field
-			)?.[0];
+			const collection = props.fieldData.meta.collection;
+			const field = props.fieldData.field;
 
-			return relationData.one_collection;
+			const relations: Relation[] = relationsStore.getRelationsForField(collection, field);
+
+			const junction = relations.find((r) => r.one_collection === collection && r.one_field === field);
+			if (junction === undefined) return null;
+
+			return junction.many_collection;
 		});
 
 		return { fields, collection };
diff --git a/app/src/interfaces/one-to-many/options.vue b/app/src/interfaces/one-to-many/options.vue
index bf6b800e1c..1ac74395b9 100644
--- a/app/src/interfaces/one-to-many/options.vue
+++ b/app/src/interfaces/one-to-many/options.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { Field } from '@/types';
+import { Field, Relation } from '@/types';
 import { defineComponent, PropType, computed } from '@vue/composition-api';
 import { useRelationsStore } from '@/stores/';
 
@@ -42,12 +42,14 @@ export default defineComponent({
 		});
 
 		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.many_collection;
+			const collection = props.fieldData.meta?.collection;
+			const field = props.fieldData.field;
+
+			if (collection == null || field == null) return null;
+
+			const relationData: Relation[] = relationsStore.getRelationsForField(collection, field);
+
+			return relationData.find((r) => r.one_collection === collection && r.one_field === field)?.many_collection;
 		});
 
 		return { fields, collection };

From eebf3b8fce24569aa3ebf3039175ac02f91f59df Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Wed, 23 Sep 2020 12:04:10 +0200
Subject: [PATCH 14/15] finish field suggestion

---
 .../v-field-select/v-field-select.vue         | 32 +------------------
 .../v-field-template/v-field-template.vue     | 14 ++++++--
 app/src/composables/use-field-tree/index.ts   |  4 +--
 .../use-field-tree/use-field-tree.ts          | 30 +++++++++++++++++
 app/src/interfaces/many-to-one/options.vue    | 12 +++----
 5 files changed, 50 insertions(+), 42 deletions(-)

diff --git a/app/src/components/v-field-select/v-field-select.vue b/app/src/components/v-field-select/v-field-select.vue
index c794009767..aa36c44b2d 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -42,7 +42,7 @@ import FieldListItem from '../v-field-template/field-list-item.vue';
 import { useFieldsStore } from '@/stores';
 import { Field } from '@/types/';
 import Draggable from 'vuedraggable';
-import useFieldTree from '@/composables/use-field-tree';
+import useFieldTree, { findTree, filterTree } from '@/composables/use-field-tree';
 import useCollection from '@/composables/use-collection';
 import { FieldTree } from '../v-field-template/types';
 import hideDragImage from '@/utils/hide-drag-image';
@@ -103,36 +103,6 @@ export default defineComponent({
 
 		return { menuActive, addField, removeField, selectableFields, selectedFields, hideDragImage, tree };
 
-		function findTree(tree: FieldTree[] | undefined, fieldSections: string[]): FieldTree | undefined {
-			if (tree === undefined) return undefined;
-
-			const fieldObject = tree.find((f) => f.field === fieldSections[0]);
-
-			if (fieldObject === undefined) return undefined;
-			if (fieldSections.length === 1) return fieldObject;
-			return findTree(fieldObject.children, fieldSections.slice(1));
-		}
-
-		function filterTree(
-			tree: FieldTree[] | undefined,
-			f: (field: FieldTree, prefix: string) => boolean,
-			prefix = ''
-		) {
-			if (tree === undefined) return undefined;
-
-			const newTree: FieldTree[] = [];
-			tree.forEach((field) => {
-				if (f(field, prefix)) {
-					newTree.push({
-						field: field.field,
-						name: field.name,
-						children: filterTree(field.children, f, prefix + field.field + '.'),
-					});
-				}
-			});
-			return newTree.length === 0 ? undefined : newTree;
-		}
-
 		function removeField(field: string) {
 			_value.value = _value.value.filter((f) => f !== field);
 		}
diff --git a/app/src/components/v-field-template/v-field-template.vue b/app/src/components/v-field-template/v-field-template.vue
index 14682da64a..9735850727 100644
--- a/app/src/components/v-field-template/v-field-template.vue
+++ b/app/src/components/v-field-template/v-field-template.vue
@@ -32,7 +32,7 @@ import { defineComponent, toRefs, ref, watch, onMounted, onUnmounted } from '@vu
 import FieldListItem from './field-list-item.vue';
 import { useFieldsStore } from '@/stores';
 import { Field } from '@/types/';
-import useFieldTree from '@/composables/use-field-tree';
+import useFieldTree, { findTree } from '@/composables/use-field-tree';
 
 export default defineComponent({
 	components: { FieldListItem },
@@ -152,8 +152,10 @@ export default defineComponent({
 		}
 
 		function addField(fieldKey: string) {
+			console.log(fieldKey);
+
 			if (!contentEl.value) return;
-			const field: Field | null = fieldsStore.getField(props.collection, fieldKey);
+			const field = findTree(tree.value, fieldKey.split('.'));
 			if (!field) return;
 
 			const button = document.createElement('button');
@@ -161,6 +163,12 @@ export default defineComponent({
 			button.setAttribute('contenteditable', 'false');
 			button.innerText = String(field.name);
 
+			if (window.getSelection()?.rangeCount == 0) {
+				const range = document.createRange();
+				range.selectNodeContents(contentEl.value.children[0]);
+				window.getSelection()?.addRange(range);
+			}
+
 			const range = window.getSelection()?.getRangeAt(0);
 			if (!range) return;
 			range.deleteContents();
@@ -245,7 +253,7 @@ export default defineComponent({
 							return `<span class="text">${part}</span>`;
 						}
 						const fieldKey = part.replaceAll(/({|})/g, '').trim();
-						const field: Field | null = fieldsStore.getField(props.collection, fieldKey);
+						const field = findTree(tree.value, fieldKey.split('.'));
 
 						if (!field) return '';
 
diff --git a/app/src/composables/use-field-tree/index.ts b/app/src/composables/use-field-tree/index.ts
index 1f1c1de159..7b57a783a2 100644
--- a/app/src/composables/use-field-tree/index.ts
+++ b/app/src/composables/use-field-tree/index.ts
@@ -1,4 +1,4 @@
-import useFieldTree from './use-field-tree';
+import useFieldTree, { filterTree, findTree } from './use-field-tree';
 
 export default useFieldTree;
-export { useFieldTree };
+export { useFieldTree, filterTree, findTree };
diff --git a/app/src/composables/use-field-tree/use-field-tree.ts b/app/src/composables/use-field-tree/use-field-tree.ts
index 6c6c7c79c8..d6711f1ad0 100644
--- a/app/src/composables/use-field-tree/use-field-tree.ts
+++ b/app/src/composables/use-field-tree/use-field-tree.ts
@@ -3,6 +3,36 @@ import { FieldTree } from './types';
 import { useFieldsStore, useRelationsStore } from '@/stores/';
 import { Field, Relation } from '@/types';
 
+export function findTree(tree: FieldTree[] | undefined, fieldSections: string[]): FieldTree | undefined {
+	if (tree === undefined) return undefined;
+
+	const fieldObject = tree.find((f) => f.field === fieldSections[0]);
+
+	if (fieldObject === undefined) return undefined;
+	if (fieldSections.length === 1) return fieldObject;
+	return findTree(fieldObject.children, fieldSections.slice(1));
+}
+
+export function filterTree(
+	tree: FieldTree[] | undefined,
+	f: (field: FieldTree, prefix: string) => boolean,
+	prefix = ''
+) {
+	if (tree === undefined) return undefined;
+
+	const newTree: FieldTree[] = [];
+	tree.forEach((field) => {
+		if (f(field, prefix)) {
+			newTree.push({
+				field: field.field,
+				name: field.name,
+				children: filterTree(field.children, f, prefix + field.field + '.'),
+			});
+		}
+	});
+	return newTree.length === 0 ? undefined : newTree;
+}
+
 export default function useFieldTree(collection: Ref<string>, showHidden = false) {
 	const fieldsStore = useFieldsStore();
 	const relationsStore = useRelationsStore();
diff --git a/app/src/interfaces/many-to-one/options.vue b/app/src/interfaces/many-to-one/options.vue
index 6da15a6f75..5492673025 100644
--- a/app/src/interfaces/many-to-one/options.vue
+++ b/app/src/interfaces/many-to-one/options.vue
@@ -40,13 +40,13 @@ export default defineComponent({
 			},
 		});
 		const collection = computed(() => {
-			if (props.fieldData.field === null || props.fieldData.meta?.collection === undefined) return null;
-			const relationData: Relation[] = relationsStore.getRelationsForField(
-				props.fieldData.meta?.collection,
-				props.fieldData.field
-			);
+			const collection = props.fieldData.meta?.collection;
+			const field = props.fieldData.field;
 
-			return relationData[0]?.one_collection;
+			if (collection === null || field === undefined) return null;
+			const relationData: Relation[] = relationsStore.getRelationsForField(collection, field);
+
+			return relationData.find((r) => r.many_collection === collection && r.many_field === field)?.one_collection;
 		});
 		return { template, collection };
 	},

From 6ab36e6a85c8cd8c1cd075848e934dd2fe1ce97b Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 24 Sep 2020 16:26:08 -0400
Subject: [PATCH 15/15] Have m2o options pull from correct collection

---
 api/src/database/run-ast.ts                   |  2 +-
 .../v-field-template/v-field-template.vue     | 17 ++++++--
 .../use-field-tree/use-field-tree.ts          |  2 +-
 app/src/interfaces/many-to-one/options.vue    | 39 ++++++++++++-------
 4 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/api/src/database/run-ast.ts b/api/src/database/run-ast.ts
index cdff8bd06e..fbc6aa136a 100644
--- a/api/src/database/run-ast.ts
+++ b/api/src/database/run-ast.ts
@@ -27,7 +27,7 @@ export default async function runAST(originalAST: AST, options?: RunASTOptions):
 
 	const rawItems: Item | Item[] = await dbQuery;
 
-	if (!rawItems || (Array.isArray(rawItems) && rawItems.length === 0)) return null;
+	if (!rawItems) return null;
 
 	// Run the items through the special transforms
 	const payloadService = new PayloadService(ast.name, { knex });
diff --git a/app/src/components/v-field-template/v-field-template.vue b/app/src/components/v-field-template/v-field-template.vue
index 9735850727..6e0efa0605 100644
--- a/app/src/components/v-field-template/v-field-template.vue
+++ b/app/src/components/v-field-template/v-field-template.vue
@@ -32,7 +32,8 @@ import { defineComponent, toRefs, ref, watch, onMounted, onUnmounted } from '@vu
 import FieldListItem from './field-list-item.vue';
 import { useFieldsStore } from '@/stores';
 import { Field } from '@/types/';
-import useFieldTree, { findTree } from '@/composables/use-field-tree';
+import useFieldTree from '@/composables/use-field-tree';
+import { FieldTree } from './types';
 
 export default defineComponent({
 	components: { FieldListItem },
@@ -152,10 +153,10 @@ export default defineComponent({
 		}
 
 		function addField(fieldKey: string) {
-			console.log(fieldKey);
-
 			if (!contentEl.value) return;
+
 			const field = findTree(tree.value, fieldKey.split('.'));
+
 			if (!field) return;
 
 			const button = document.createElement('button');
@@ -188,6 +189,16 @@ export default defineComponent({
 			onInput();
 		}
 
+		function findTree(tree: FieldTree[] | undefined, fieldSections: string[]): FieldTree | undefined {
+			if (tree === undefined) return undefined;
+
+			const fieldObject = tree.find((f) => f.field === fieldSections[0]);
+
+			if (fieldObject === undefined) return undefined;
+			if (fieldSections.length === 1) return fieldObject;
+			return findTree(fieldObject.children, fieldSections.slice(1));
+		}
+
 		function joinElements(first: HTMLElement, second: HTMLElement) {
 			first.innerText += second.innerText;
 			second.remove();
diff --git a/app/src/composables/use-field-tree/use-field-tree.ts b/app/src/composables/use-field-tree/use-field-tree.ts
index b15696504c..c2d5d2f0ba 100644
--- a/app/src/composables/use-field-tree/use-field-tree.ts
+++ b/app/src/composables/use-field-tree/use-field-tree.ts
@@ -13,7 +13,7 @@ export default function useFieldTree(collection: Ref<string>, showHidden = false
 			.filter((field: Field) => {
 				let shown = (field.meta?.special || []).includes('alias') === false;
 
-				if (showHidden === false && field.meta?.hidden === false) {
+				if (showHidden === false && field.meta?.hidden === true) {
 					shown = false;
 				}
 
diff --git a/app/src/interfaces/many-to-one/options.vue b/app/src/interfaces/many-to-one/options.vue
index 5492673025..23cfe86dfd 100644
--- a/app/src/interfaces/many-to-one/options.vue
+++ b/app/src/interfaces/many-to-one/options.vue
@@ -1,11 +1,11 @@
 <template>
-	<div class="grid">
-		<v-notice type="warning" v-if="collection == null">
-			{{ $t('interfaces.one-to-many.no_collection') }}
-		</v-notice>
-		<div v-else class="full">
+	<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>
+			<v-field-template :collection="relatedCollection" v-model="template" :depth="2"></v-field-template>
 		</div>
 	</div>
 </template>
@@ -17,10 +17,18 @@ 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,
@@ -39,16 +47,17 @@ export default defineComponent({
 				});
 			},
 		});
-		const collection = computed(() => {
-			const collection = props.fieldData.meta?.collection;
-			const field = props.fieldData.field;
 
-			if (collection === null || field === undefined) return null;
-			const relationData: Relation[] = relationsStore.getRelationsForField(collection, field);
-
-			return relationData.find((r) => r.many_collection === collection && r.many_field === field)?.one_collection;
+		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.many_collection === props.collection && relation.many_field === field
+			);
+			return relation?.one_collection || null;
 		});
-		return { template, collection };
+
+		return { template, relatedCollection };
 	},
 });
 </script>
@@ -56,7 +65,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '@/styles/mixins/form-grid';
 
-.grid {
+.form-grid {
 	@include form-grid;
 }
 </style>