From 81faa88c62bfc44f85f016835657acd98b9da4a2 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 14:18:05 +0200
Subject: [PATCH 01/20] 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 37cd51cb611efd3f265d7221f8d6da3565e4ddb8 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 16:42:18 +0200
Subject: [PATCH 02/20] 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 1fcec4f675d5b97563ccbe562a1b4a0839849958 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 17:04:48 +0200
Subject: [PATCH 03/20] 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 82eb62b4e3416687d6b20294999a811da4051b68 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 17:08:56 +0200
Subject: [PATCH 04/20] 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 2e112af5ebfaf4dcba8b2aefbf244abe149885ff Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 18:26:48 +0200
Subject: [PATCH 05/20] add component to m2m interface

---
 app/src/interfaces/many-to-many/index.ts    | 16 +----
 app/src/interfaces/many-to-many/options.vue | 66 +++++++++++++++++++++
 app/src/lang/en-US/interfaces.json          |  3 +-
 3 files changed, 70 insertions(+), 15 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>
diff --git a/app/src/lang/en-US/interfaces.json b/app/src/lang/en-US/interfaces.json
index 5db43a7f0d..4a962fef3e 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": "The collection could not be found"
 		},
 		"radio-buttons": {
 			"radio-buttons": "Radio Buttons",

From ee2da51950304277f9407a76dc3eb0ef1990f8b0 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 18:32:32 +0200
Subject: [PATCH 06/20] 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 4a1509bf5d5f17064c16add2e44fcf7eaf866415 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 11 Sep 2020 19:26:36 +0200
Subject: [PATCH 07/20] 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 ff1627d3221993c44affe0a25706a308fd8ddaa1 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Wed, 23 Sep 2020 11:29:38 +0200
Subject: [PATCH 08/20] 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 447802264dba0420c575195e67e52757ba5bfbe2 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Thu, 24 Sep 2020 14:47:27 -0400
Subject: [PATCH 09/20] Update app/src/interfaces/many-to-many/options.vue

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

diff --git a/app/src/interfaces/many-to-many/options.vue b/app/src/interfaces/many-to-many/options.vue
index c23eef6076..07d68f59b0 100644
--- a/app/src/interfaces/many-to-many/options.vue
+++ b/app/src/interfaces/many-to-many/options.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-notice type="warning" v-if="collection == null">
+	<v-notice type="warning" v-if="collection === null">
 		{{ $t('interfaces.one-to-many.no_collection') }}
 	</v-notice>
 	<div v-else>

From aafebf6f06dac57370b3f60fd79d935a1148f4b8 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 24 Sep 2020 15:53:23 -0400
Subject: [PATCH 10/20] Make standard v-chip height button-small height

and change default colors
---
 app/src/components/v-chip/v-chip.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/components/v-chip/v-chip.vue b/app/src/components/v-chip/v-chip.vue
index d385c9a6e7..30dbe930e8 100644
--- a/app/src/components/v-chip/v-chip.vue
+++ b/app/src/components/v-chip/v-chip.vue
@@ -75,8 +75,8 @@ export default defineComponent({
 
 <style>
 body {
-	--v-chip-color: var(--white);
-	--v-chip-background-color: var(--primary);
+	--v-chip-color: var(--black);
+	--v-chip-background-color: var(--background-normal-alt);
 	--v-chip-color-hover: var(--white);
 	--v-chip-background-color-hover: var(--primary-125);
 	--v-chip-close-color: var(--danger);
@@ -89,7 +89,7 @@ body {
 .v-chip {
 	display: inline-flex;
 	align-items: center;
-	height: 32px;
+	height: 36px;
 	padding: 0 8px;
 	color: var(--v-chip-color);
 	font-weight: var(--weight-normal);

From 18d7bce6ecd47bbe11f76a370c58da24710d7150 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 24 Sep 2020 15:53:49 -0400
Subject: [PATCH 11/20] Allow disabled list items in fields picker

---
 app/src/components/v-field-template/field-list-item.vue | 1 +
 app/src/components/v-field-template/types.ts            | 1 +
 2 files 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 ca48b7cdb4..3ebb7c5407 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,7 @@
 <template>
 	<v-list-item
 		v-if="field.children === undefined"
+		:disabled="field.disabled"
 		@click="$emit('add', `${parent ? parent + '.' : ''}${field.field}`)"
 	>
 		<v-list-item-content>{{ field.name }}</v-list-item-content>
diff --git a/app/src/components/v-field-template/types.ts b/app/src/components/v-field-template/types.ts
index 017198e912..9db5a47a4c 100644
--- a/app/src/components/v-field-template/types.ts
+++ b/app/src/components/v-field-template/types.ts
@@ -3,5 +3,6 @@ import { TranslateResult } from 'vue-i18n';
 export type FieldTree = {
 	field: string;
 	name: string | TranslateResult;
+	disabled?: boolean;
 	children?: FieldTree[];
 };

From 8a92900e261789a9da8287de4719b7d470c0c017 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 24 Sep 2020 15:54:12 -0400
Subject: [PATCH 12/20] Fix v-field-select not using _value

---
 .../v-field-select/v-field-select.vue         | 67 ++++++++++---------
 1 file changed, 34 insertions(+), 33 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..17c4ba7de0 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -1,5 +1,8 @@
 <template>
-	<draggable v-model="selectedFields" draggable=".draggable" :set-data="hideDragImage" class="v-field-select">
+	<v-notice v-if="!availableFields || availableFields.length === 0">
+		{{ $t('no_fields_in_collection', { collection: (collectionInfo && collectionInfo.name) || collection }) }}
+	</v-notice>
+	<draggable v-else v-model="selectedFields" draggable=".draggable" :set-data="hideDragImage" class="v-field-select">
 		<v-chip
 			v-for="(field, index) in selectedFields"
 			:key="index"
@@ -9,27 +12,21 @@
 		>
 			{{ field.name }}
 		</v-chip>
-		<v-menu
-			show-arrow
-			v-model="menuActive"
-			v-show="selectableFields.length > 0"
-			slot="footer"
-			class="add"
-			placement="bottom-end"
-		>
+		<v-menu show-arrow v-model="menuActive" slot="footer" class="add" placement="bottom">
 			<template #activator="{ toggle }">
-				<v-chip @click="toggle">
-					<v-icon name="add" />
-				</v-chip>
+				<v-button @click="toggle" small>
+					{{ $t('add_field') }}
+					<v-icon small name="add" />
+				</v-button>
 			</template>
 
 			<v-list dense>
 				<field-list-item
-					@add="addField"
-					v-for="field in selectableFields"
-					:key="field.field"
+					v-for="field in availableFields"
+					:key="field.collection + field.field"
 					:field="field"
 					:depth="depth"
+					@add="addField"
 				/>
 			</v-list>
 		</v-menu>
@@ -87,7 +84,7 @@ export default defineComponent({
 
 		const selectedFields = computed({
 			get() {
-				return props.value.map((field) => ({
+				return _value.value.map((field) => ({
 					field,
 					name: findTree(tree.value, field.split('.'))?.name as string,
 				}));
@@ -97,11 +94,20 @@ export default defineComponent({
 			},
 		});
 
-		const selectableFields = computed(() => {
-			return filterTree(tree.value, (field, prefix) => props.value.includes(prefix + field.field) === false);
+		const availableFields = computed(() => {
+			return filterTree(tree.value);
 		});
 
-		return { menuActive, addField, removeField, selectableFields, selectedFields, hideDragImage, tree };
+		return {
+			menuActive,
+			addField,
+			removeField,
+			availableFields,
+			selectedFields,
+			hideDragImage,
+			tree,
+			collectionInfo: info,
+		};
 
 		function findTree(tree: FieldTree[] | undefined, fieldSections: string[]): FieldTree | undefined {
 			if (tree === undefined) return undefined;
@@ -113,23 +119,18 @@ export default defineComponent({
 			return findTree(fieldObject.children, fieldSections.slice(1));
 		}
 
-		function filterTree(
-			tree: FieldTree[] | undefined,
-			f: (field: FieldTree, prefix: string) => boolean,
-			prefix = ''
-		) {
+		function filterTree(tree: FieldTree[] | undefined, 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 + '.'),
-					});
-				}
+			const newTree: FieldTree[] = tree.map((field) => {
+				return {
+					name: field.name,
+					field: field.field,
+					disabled: _value.value.includes(prefix + field.field),
+					children: filterTree(field.children, prefix + field.field + '.'),
+				};
 			});
+
 			return newTree.length === 0 ? undefined : newTree;
 		}
 

From 69221bcb29443d1e398cb12729b6b63a72c9c44c Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 24 Sep 2020 15:56:02 -0400
Subject: [PATCH 13/20] Use new slot syntax, don't stop propagation on chip'

---
 .../v-field-select/v-field-select.vue         | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 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 17c4ba7de0..3113275b3a 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -8,28 +8,31 @@
 			:key="index"
 			class="field draggable"
 			v-tooltip="field.field"
-			@click.stop="removeField(field.field)"
+			@click="removeField(field.field)"
 		>
 			{{ field.name }}
 		</v-chip>
-		<v-menu show-arrow v-model="menuActive" slot="footer" class="add" placement="bottom">
-			<template #activator="{ toggle }">
-				<v-button @click="toggle" small>
-					{{ $t('add_field') }}
-					<v-icon small name="add" />
-				</v-button>
-			</template>
 
-			<v-list dense>
-				<field-list-item
-					v-for="field in availableFields"
-					:key="field.collection + field.field"
-					:field="field"
-					:depth="depth"
-					@add="addField"
-				/>
-			</v-list>
-		</v-menu>
+		<template #footer>
+			<v-menu show-arrow v-model="menuActive" class="add" placement="bottom">
+				<template #activator="{ toggle }">
+					<v-button @click="toggle" small>
+						{{ $t('add_field') }}
+						<v-icon small name="add" />
+					</v-button>
+				</template>
+
+				<v-list dense>
+					<field-list-item
+						v-for="field in availableFields"
+						:key="field.collection + field.field"
+						:field="field"
+						:depth="depth"
+						@add="addField"
+					/>
+				</v-list>
+			</v-menu>
+		</template>
 	</draggable>
 </template>
 

From b64e1cdcf591297ec15d2056b41d2cdffa60313f Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 24 Sep 2020 15:56:59 -0400
Subject: [PATCH 14/20] Cleanup filter

---
 .../composables/use-field-tree/use-field-tree.ts   | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

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..b15696504c 100644
--- a/app/src/composables/use-field-tree/use-field-tree.ts
+++ b/app/src/composables/use-field-tree/use-field-tree.ts
@@ -10,11 +10,15 @@ export default function useFieldTree(collection: Ref<string>, showHidden = false
 	const tree = computed<FieldTree[]>(() => {
 		return fieldsStore
 			.getFieldsForCollection(collection.value)
-			.filter(
-				(field: Field) =>
-					showHidden ||
-					(field.meta?.hidden === false && (field.meta?.special || []).includes('alias') === false)
-			)
+			.filter((field: Field) => {
+				let shown = (field.meta?.special || []).includes('alias') === false;
+
+				if (showHidden === false && field.meta?.hidden === false) {
+					shown = false;
+				}
+
+				return shown;
+			})
 			.map((field: Field) => parseField(field, []));
 
 		function parseField(field: Field, parents: Field[]) {

From f2875688aff9c5fed08c1d999baa9a891a064112 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 24 Sep 2020 15:57:13 -0400
Subject: [PATCH 15/20] Use correct related collection, add form grid

---
 app/src/interfaces/many-to-many/options.vue | 45 ++++++++++++---------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/app/src/interfaces/many-to-many/options.vue b/app/src/interfaces/many-to-many/options.vue
index 07d68f59b0..a6fbb4862b 100644
--- a/app/src/interfaces/many-to-many/options.vue
+++ b/app/src/interfaces/many-to-many/options.vue
@@ -1,10 +1,12 @@
 <template>
-	<v-notice type="warning" v-if="collection === null">
+	<v-notice type="warning" v-if="junctionCollection === 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="form-grid">
+		<div class="field full">
+			<p class="type-label">{{ $t('select_fields') }}</p>
+			<v-field-select :collection="junctionCollection" v-model="fields"></v-field-select>
+		</div>
 	</div>
 </template>
 
@@ -16,10 +18,18 @@ import { Relation } from '@/types';
 
 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,
@@ -40,27 +50,24 @@ export default defineComponent({
 			},
 		});
 
-		const collection = computed(() => {
-			if (props.fieldData.field == null || props.fieldData.meta?.collection == null) return null;
-
-			const collection = props.fieldData.meta.collection;
-			const field = props.fieldData.field;
-
-			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;
+		const junctionCollection = computed(() => {
+			if (!props.fieldData || !props.relations || props.relations.length === 0) return null;
+			const { field } = props.fieldData;
+			const junctionRelation = props.relations.find(
+				(relation) => relation.one_collection === props.collection && relation.one_field === field
+			);
+			return junctionRelation?.many_collection || null;
 		});
 
-		return { fields, collection };
+		return { fields, junctionCollection };
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-.type-label {
-	margin-bottom: 4px;
+@import '@/styles/mixins/form-grid';
+
+.form-grid {
+	@include form-grid;
 }
 </style>

From ed5e6006dcbe004661109a5e6323d8193e80d045 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 24 Sep 2020 15:57:45 -0400
Subject: [PATCH 16/20] Add translation for no fields in col

---
 app/src/lang/en-US/index.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index bbe13d0df8..065da128ac 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -10,6 +10,8 @@
 	"only_show_the_file_extension": "Only show the file extension",
 	"textarea": "Textarea",
 
+	"add_field": "Add Field",
+
 	"role_name": "Role Name",
 
 	"db_only_click_to_configure": "Database Only: Click to Configure ",
@@ -1036,6 +1038,8 @@
 	}
   },
 
+  "no_fields_in_collection": "There are no fields in \"{collection}\" yet",
+
   "do_nothing": "Do Nothing",
   "generate_and_save_uuid": "Generate and Save UUID",
   "save_current_user_id": "Save Current User ID",

From 27d7370aec69b30ae60b97053c61423c278c8f50 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 24 Sep 2020 15:58:35 -0400
Subject: [PATCH 17/20] Pass current collection and relations to interface
 options

---
 .../data-model/field-detail/components/interface.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
index c1da0d9529..2af73fbab3 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
@@ -24,7 +24,9 @@
 
 			<component
 				v-model="fieldData.meta.options"
+				:collection="collection"
 				:field-data="fieldData"
+				:relations="relations"
 				:is="`interface-options-${selectedInterface.id}`"
 				v-else
 			/>
@@ -33,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, watch } from '@vue/composition-api';
+import { defineComponent, computed, watch, toRefs } from '@vue/composition-api';
 import { getInterfaces } from '@/interfaces';
 import { FancySelectItem } from '@/components/v-fancy-select/types';
 
@@ -45,6 +47,10 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+		collection: {
+			type: String,
+			required: true,
+		},
 	},
 	setup(props) {
 		const interfaces = getInterfaces();
@@ -109,7 +115,9 @@ export default defineComponent({
 			return interfaces.value.find((inter) => inter.id === state.fieldData.meta.interface);
 		});
 
-		return { fieldData: state.fieldData, selectItems, selectedInterface };
+		const { fieldData, relations } = toRefs(state);
+
+		return { fieldData, relations, selectItems, selectedInterface };
 	},
 });
 </script>

From 6d021f386b47d61d37c0a833ad3239afdcc469fd Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 24 Sep 2020 16:07:12 -0400
Subject: [PATCH 18/20] Apply similar fixes to o2m

---
 .../v-field-select/v-field-select.vue         |  2 +-
 app/src/components/v-field-template/types.ts  |  2 ++
 app/src/interfaces/many-to-many/options.vue   |  2 +-
 app/src/interfaces/one-to-many/options.vue    | 34 +++++++++++--------
 4 files changed, 24 insertions(+), 16 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 3113275b3a..9fba4853dc 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -25,7 +25,7 @@
 				<v-list dense>
 					<field-list-item
 						v-for="field in availableFields"
-						:key="field.collection + field.field"
+						:key="field.field"
 						:field="field"
 						:depth="depth"
 						@add="addField"
diff --git a/app/src/components/v-field-template/types.ts b/app/src/components/v-field-template/types.ts
index 9db5a47a4c..399c9a239b 100644
--- a/app/src/components/v-field-template/types.ts
+++ b/app/src/components/v-field-template/types.ts
@@ -1,8 +1,10 @@
+import { Field } from '@/types';
 import { TranslateResult } from 'vue-i18n';
 
 export type FieldTree = {
 	field: string;
 	name: string | TranslateResult;
+	fieldInfo?: Field;
 	disabled?: boolean;
 	children?: FieldTree[];
 };
diff --git a/app/src/interfaces/many-to-many/options.vue b/app/src/interfaces/many-to-many/options.vue
index a6fbb4862b..ecc35fa30f 100644
--- a/app/src/interfaces/many-to-many/options.vue
+++ b/app/src/interfaces/many-to-many/options.vue
@@ -5,7 +5,7 @@
 	<div v-else class="form-grid">
 		<div class="field full">
 			<p class="type-label">{{ $t('select_fields') }}</p>
-			<v-field-select :collection="junctionCollection" v-model="fields"></v-field-select>
+			<v-field-select :collection="junctionCollection" v-model="fields" />
 		</div>
 	</div>
 </template>
diff --git a/app/src/interfaces/one-to-many/options.vue b/app/src/interfaces/one-to-many/options.vue
index 1ac74395b9..b2033e5317 100644
--- a/app/src/interfaces/one-to-many/options.vue
+++ b/app/src/interfaces/one-to-many/options.vue
@@ -1,11 +1,11 @@
 <template>
-	<v-notice type="warning" v-if="collection == null">
+	<v-notice type="warning" v-if="relatedCollection === null">
 		{{ $t('interfaces.one-to-many.no_collection') }}
 	</v-notice>
 	<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>
+			<v-field-select :collection="relatedCollection" v-model="fields" />
 		</div>
 	</div>
 </template>
@@ -17,10 +17,18 @@ import { useRelationsStore } from '@/stores/';
 
 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,
@@ -33,26 +41,24 @@ 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(() => {
-			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;
+		const relatedCollection = computed(() => {
+			if (!props.fieldData || !props.relations || props.relations.length === 0) return null;
+			const { field } = props.fieldData;
+			const relatedRelation = props.relations.find(
+				(relation) => relation.one_collection === props.collection && relation.one_field === field
+			);
+			return relatedRelation?.many_collection || null;
 		});
 
-		return { fields, collection };
+		return { fields, relatedCollection };
 	},
 });
 </script>

From 4b43585dd31bc13dc8c84211f79d9357e6f38d00 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 24 Sep 2020 16:08:15 -0400
Subject: [PATCH 19/20] remove unused type

---
 app/src/components/v-field-template/types.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/src/components/v-field-template/types.ts b/app/src/components/v-field-template/types.ts
index 399c9a239b..f3606450c7 100644
--- a/app/src/components/v-field-template/types.ts
+++ b/app/src/components/v-field-template/types.ts
@@ -4,7 +4,6 @@ import { TranslateResult } from 'vue-i18n';
 export type FieldTree = {
 	field: string;
 	name: string | TranslateResult;
-	fieldInfo?: Field;
 	disabled?: boolean;
 	children?: FieldTree[];
 };

From c0874e0133cdb6b42f7c7f06a8cd696363781bc8 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 24 Sep 2020 16:08:47 -0400
Subject: [PATCH 20/20] Make classes in options consistent

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

diff --git a/app/src/interfaces/one-to-many/options.vue b/app/src/interfaces/one-to-many/options.vue
index b2033e5317..aa0ab974d5 100644
--- a/app/src/interfaces/one-to-many/options.vue
+++ b/app/src/interfaces/one-to-many/options.vue
@@ -2,8 +2,8 @@
 	<v-notice type="warning" v-if="relatedCollection === null">
 		{{ $t('interfaces.one-to-many.no_collection') }}
 	</v-notice>
-	<div v-else class="grid">
-		<div class="full">
+	<div v-else class="form-grid">
+		<div class="field full">
 			<p class="type-label">{{ $t('select_fields') }}</p>
 			<v-field-select :collection="relatedCollection" v-model="fields" />
 		</div>
@@ -66,7 +66,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '@/styles/mixins/form-grid.scss';
 
-.grid {
+.form-grid {
 	@include form-grid;
 }
 </style>