From d4c4802046345b5bee04402f249ddad706740c55 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Mon, 14 Sep 2020 11:27:36 -0400
Subject: [PATCH 1/8] Add Auto Fill to m2m junction

---
 app/src/auth.ts                               |  2 +-
 app/src/lang/en-US/index.json                 |  2 ++
 .../components/relationship-m2m.vue           | 31 +++++++++++++------
 .../routes/data-model/field-detail/store.ts   | 25 +++++++++++++--
 .../routes/data-model/new-collection.vue      |  2 +-
 5 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/app/src/auth.ts b/app/src/auth.ts
index 016118c2fc..f3c147cc1a 100644
--- a/app/src/auth.ts
+++ b/app/src/auth.ts
@@ -31,7 +31,7 @@ export async function login(credentials: LoginCredentials) {
 	await hydrate();
 }
 
-let refreshTimeout: number;
+let refreshTimeout: any;
 
 export async function refresh({ navigate }: LogoutOptions = { navigate: true }) {
 	const appStore = useAppStore();
diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 4c666a8276..b4ac904430 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -538,6 +538,8 @@
 	"inline_title": "Inline Title",
 	"auto_format_casing": "Auto-format casing",
 
+	"auto_fill": "Auto Fill",
+
 	"errors": {
 		"COLLECTION_NOT_FOUND": "Collection doesn't exist.",
 		"FIELD_NOT_FOUND": "Field not found.",
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
index 31d7270729..947090a799 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -8,7 +8,7 @@
 			</div>
 			<div class="field">
 				<div class="type-label">{{ $t('junction_collection') }}</div>
-				<v-input :class="{ matches: junctionCollectionExists }" v-model="junctionCollection" :placeholder="$t('collection') + '...'" :disabled="isExisting" db-safe>
+				<v-input :class="{ matches: junctionCollectionExists }" v-model="junctionCollection" :placeholder="$t('collection') + '...'" :disabled="autoFill || isExisting" db-safe>
 					<template #append>
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
@@ -33,7 +33,7 @@
 			</div>
 			<div class="field">
 				<div class="type-label">{{ $t('related_collection') }}</div>
-				<v-input :class="{ matches: relatedCollectionExists }" v-model="relations[1].one_collection" :placeholder="$t('collection') + '...'" :disabled="type === 'files' || isExisting" db-safe>
+				<v-input :autofocus="autoFill" :class="{ matches: relatedCollectionExists }" v-model="relations[1].one_collection" :placeholder="$t('collection') + '...'" :disabled="type === 'files' || isExisting" db-safe>
 					<template #append>
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
@@ -57,7 +57,7 @@
 				</v-input>
 			</div>
 			<v-input disabled :value="relations[0].one_primary" />
-			<v-input v-model="relations[0].many_field" :placeholder="$t('foreign_key') + '...'" :disabled="isExisting" db-safe>
+			<v-input v-model="relations[0].many_field" :placeholder="$t('foreign_key') + '...'" :disabled="autoFill || isExisting" db-safe>
 				<template #append v-if="junctionCollectionExists">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
@@ -81,7 +81,7 @@
 			</v-input>
 			<div class="spacer" />
 			<div class="spacer" />
-			<v-input v-model="relations[1].many_field" :placeholder="$t('foreign_key') + '...'" :disabled="isExisting" db-safe>
+			<v-input v-model="relations[1].many_field" :placeholder="$t('foreign_key') + '...'" :disabled="autoFill || isExisting" db-safe>
 				<template #append v-if="junctionCollectionExists">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
@@ -104,6 +104,8 @@
 				</template>
 			</v-input>
 			<v-input db-safe :disabled="relatedCollectionExists" v-model="relations[1].one_primary" :placeholder="$t('primary_key') + '...'" />
+			<div class="spacer" />
+			<v-checkbox block v-model="autoFill" :label="$t('auto_fill')" />
 			<v-icon class="arrow" name="arrow_forward" />
 			<v-icon class="arrow" name="arrow_backward" />
 		</div>
@@ -111,7 +113,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed, ref } from '@vue/composition-api';
 import { orderBy } from 'lodash';
 import { useCollectionsStore, useFieldsStore } from '@/stores/';
 import { Field } from '@/types';
@@ -137,6 +139,15 @@ export default defineComponent({
 		const collectionsStore = useCollectionsStore();
 		const fieldsStore = useFieldsStore();
 
+		const autoFill = computed({
+			get() {
+				return state.autoFillJunctionRelation;
+			},
+			set(newAuto: boolean) {
+				state.autoFillJunctionRelation = newAuto;
+			}
+		})
+
 		const availableCollections = computed(() => {
 			return orderBy(
 				collectionsStore.state.collections.filter((collection) => {
@@ -188,7 +199,7 @@ export default defineComponent({
 			}));
 		});
 
-		return { relations: state.relations, collectionItems, junctionCollection, junctionFields, junctionCollectionExists, relatedCollectionExists };
+		return { relations: state.relations, autoFill, collectionItems, junctionCollection, junctionFields, junctionCollectionExists, relatedCollectionExists };
 	},
 });
 </script>
@@ -216,13 +227,13 @@ export default defineComponent({
 		pointer-events: none;
 
 		&:first-of-type {
-			bottom: 78px;
-			left: 32.7%;
+			bottom: 141px;
+   			left: 32.5%;
 		}
 
 		&:last-of-type {
-			bottom: 14px;
-			left: 67.5%;
+			bottom: 76px;
+    		left: 67.4%;
 		}
 	}
 }
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store.ts b/app/src/modules/settings/routes/data-model/field-detail/store.ts
index d194838ec1..9ff678d75e 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store.ts
@@ -6,7 +6,7 @@
  */
 
 import { useFieldsStore, useRelationsStore, useCollectionsStore } from '@/stores/';
-import { reactive, watch, computed, ComputedRef } from '@vue/composition-api';
+import { reactive, watch, computed, ComputedRef, WatchStopHandle } from '@vue/composition-api';
 import { clone, throttle } from 'lodash';
 import { getInterfaces } from '@/interfaces';
 import { getDisplays } from '@/displays';
@@ -55,6 +55,8 @@ function initLocalStore(
 		relations: [],
 		newCollections: [],
 		newFields: [],
+
+		autoFillJunctionRelation: true,
 	});
 
 	availableInterfaces = computed<InterfaceConfig[]>(() => {
@@ -383,8 +385,6 @@ function initLocalStore(
 					]
 				})
 			}
-
-			console.log(state.newCollections, state.newFields);
 		}, 50);
 
 		if (!isExisting) {
@@ -462,6 +462,25 @@ function initLocalStore(
 			],
 			syncNewCollectionsM2M
 		)
+
+		let stop: WatchStopHandle;
+
+		watch(() => state.autoFillJunctionRelation, (startWatching) => {
+			if (startWatching) {
+				stop = watch([() => state.relations[1].one_collection, () => state.relations[1].one_primary], ([newRelatedCollection, newRelatedPrimary]: string[]) => {
+					if (newRelatedCollection) {
+						state.relations[0].many_collection = `${state.relations[0].one_collection}_${state.relations[1].one_collection}`;
+						state.relations[0].many_field = `${state.relations[0].one_collection}_${state.relations[0].one_primary}`;
+					}
+
+					if (newRelatedPrimary) {
+						state.relations[1].many_field = `${state.relations[1].one_collection}_${state.relations[1].one_primary}`;
+					}
+				});
+			} else {
+				stop?.();
+			}
+		}, { immediate: true });
 	}
 
 	if (type === 'presentation') {
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index e09f56fb83..5e649752e2 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -204,7 +204,7 @@ export default defineComponent({
 					type: 'success',
 				});
 
-				router.push('/settings/data-model');
+				router.push(`/settings/data-model/${collectionName.value}`);
 			} catch (error) {
 				console.log(error);
 				saveError.value = error;

From 1aa6be8d80322921db9befb8be9783e2d996d089 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Mon, 14 Sep 2020 11:58:00 -0400
Subject: [PATCH 2/8] Make generated junction table hidden by default

---
 api/src/services/collections.ts                             | 6 ++++--
 .../routes/data-model/field-detail/field-detail.vue         | 2 --
 .../settings/routes/data-model/field-detail/store.ts        | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/api/src/services/collections.ts b/api/src/services/collections.ts
index 40acbb023e..bece1e741b 100644
--- a/api/src/services/collections.ts
+++ b/api/src/services/collections.ts
@@ -73,8 +73,10 @@ export default class CollectionsService {
 					}
 				});
 
-				const collectionInfo = omit(payload, 'fields');
-				await collectionItemsService.create(collectionInfo);
+				await collectionItemsService.create({
+					...(payload.meta || {}),
+					collection: payload.collection,
+				});
 
 				const fieldPayloads = payload
 					.fields!.filter((field) => field.meta)
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index 1cf0bd65f5..b5f6d6f538 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -220,8 +220,6 @@ export default defineComponent({
 		async function saveField() {
 			saving.value = true;
 
-			console.log(state);
-
 			try {
 				if (props.field !== '+') {
 					await api.patch(`/fields/${props.collection}/${props.field}`, state.fieldData);
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store.ts b/app/src/modules/settings/routes/data-model/field-detail/store.ts
index 9ff678d75e..5ca3666c02 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store.ts
@@ -326,6 +326,9 @@ function initLocalStore(
 				state.newCollections.push({
 					$type: 'junction',
 					collection: junctionCollection,
+					meta: {
+						hidden: true,
+					},
 					fields: [
 						{
 							field: 'id',
@@ -470,6 +473,7 @@ function initLocalStore(
 				stop = watch([() => state.relations[1].one_collection, () => state.relations[1].one_primary], ([newRelatedCollection, newRelatedPrimary]: string[]) => {
 					if (newRelatedCollection) {
 						state.relations[0].many_collection = `${state.relations[0].one_collection}_${state.relations[1].one_collection}`;
+						state.relations[1].many_collection = `${state.relations[0].one_collection}_${state.relations[1].one_collection}`;
 						state.relations[0].many_field = `${state.relations[0].one_collection}_${state.relations[0].one_primary}`;
 					}
 

From fb4b64b8db46252068c5b887355c91a2d5c36816 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Mon, 14 Sep 2020 12:40:25 -0400
Subject: [PATCH 3/8] Pre-fill m2m config if related collection matches

---
 .../components/relationship-m2m.vue             |  5 +----
 .../routes/data-model/field-detail/store.ts     | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
index 947090a799..67377c0e46 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -151,10 +151,7 @@ export default defineComponent({
 		const availableCollections = computed(() => {
 			return orderBy(
 				collectionsStore.state.collections.filter((collection) => {
-					return (
-						collection.collection.startsWith('directus_') === false &&
-						collection.collection !== props.collection
-					);
+					return (collection.collection.startsWith('directus_') === false);
 				}),
 				['collection'],
 				['asc']
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store.ts b/app/src/modules/settings/routes/data-model/field-detail/store.ts
index 5ca3666c02..85cd95717c 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store.ts
@@ -417,6 +417,19 @@ function initLocalStore(
 			() => state.fieldData.field,
 			() => {
 				state.relations[0].one_field = state.fieldData.field;
+
+				if (collectionExists(state.fieldData.field)) {
+					state.relations[0].many_collection = `${state.relations[0].one_collection}_${state.relations[1].one_collection}`;
+					state.relations[0].many_field = `${state.relations[0].one_collection}_${state.relations[0].one_primary}`;
+					state.relations[1].one_collection = state.fieldData.field;
+					state.relations[1].one_primary = fieldsStore.getPrimaryKeyFieldForCollection(collection)?.field;
+					state.relations[1].many_collection = `${state.relations[0].one_collection}_${state.relations[1].one_collection}`;
+					state.relations[1].many_field = `${state.relations[1].one_collection}_${state.relations[1].one_primary}`;
+
+					if (state.relations[0].many_field === state.relations[1].many_field) {
+						state.relations[1].many_field = `${state.relations[1].one_collection}_related_${state.relations[1].one_primary}`;
+					}
+				}
 			}
 		);
 
@@ -480,6 +493,10 @@ function initLocalStore(
 					if (newRelatedPrimary) {
 						state.relations[1].many_field = `${state.relations[1].one_collection}_${state.relations[1].one_primary}`;
 					}
+
+					if (state.relations[0].many_field === state.relations[1].many_field) {
+						state.relations[1].many_field = `${state.relations[1].one_collection}_related_${state.relations[1].one_primary}`;
+					}
 				});
 			} else {
 				stop?.();

From 0c26344f58ccb5f61f3ec7ba40b82f1902d01d79 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Mon, 14 Sep 2020 12:55:44 -0400
Subject: [PATCH 4/8] Use correct relation type on junction table setup

---
 .../settings/routes/data-model/field-detail/field-detail.vue | 4 ++++
 .../modules/settings/routes/data-model/field-detail/store.ts | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index b5f6d6f538..6bcfb95271 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -298,6 +298,10 @@ export default defineComponent({
 			}
 
 			if (relations.length === 2) {
+				const relationForCurrent = relations.find((relation: Relation) => (relation.many_collection === collection && relation.many_field === field) || (relation.one_collection === collection && relation.one_field === field));
+
+				if (relationForCurrent?.many_collection === collection && relationForCurrent?.many_field === field) return 'm2o';
+
 				if (
 					relations[0].one_collection === 'directus_files' ||
 					relations[1].one_collection === 'directus_files'
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store.ts b/app/src/modules/settings/routes/data-model/field-detail/store.ts
index 85cd95717c..ebf2a98c8b 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store.ts
@@ -247,6 +247,8 @@ function initLocalStore(
 						]
 					}
 				];
+
+				state.relations[0].many_primary = 'id';
 			}
 
 			if (collectionExists(collectionName)) {
@@ -342,6 +344,9 @@ function initLocalStore(
 						}
 					]
 				});
+
+				state.relations[0].many_primary = 'id';
+				state.relations[1].many_primary = 'id';
 			}
 
 			if (fieldExists(junctionCollection, manyCurrent) === false) {

From 9f95c651a4d0929e9314774bc15a4a5d0383797e Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Mon, 14 Sep 2020 13:05:22 -0400
Subject: [PATCH 5/8] Add matches class to junction fields

---
 .../field-detail/components/relationship-m2m.vue      | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
index 67377c0e46..f539da5bbd 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -57,7 +57,7 @@
 				</v-input>
 			</div>
 			<v-input disabled :value="relations[0].one_primary" />
-			<v-input v-model="relations[0].many_field" :placeholder="$t('foreign_key') + '...'" :disabled="autoFill || isExisting" db-safe>
+			<v-input :class="{ matches: junctionFieldExists(relations[0].many_field)}" v-model="relations[0].many_field" :placeholder="$t('foreign_key') + '...'" :disabled="autoFill || isExisting" db-safe>
 				<template #append v-if="junctionCollectionExists">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
@@ -81,7 +81,7 @@
 			</v-input>
 			<div class="spacer" />
 			<div class="spacer" />
-			<v-input v-model="relations[1].many_field" :placeholder="$t('foreign_key') + '...'" :disabled="autoFill || isExisting" db-safe>
+			<v-input :class="{ matches: junctionFieldExists(relations[1].many_field)}" v-model="relations[1].many_field" :placeholder="$t('foreign_key') + '...'" :disabled="autoFill || isExisting" db-safe>
 				<template #append v-if="junctionCollectionExists">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
@@ -196,7 +196,12 @@ export default defineComponent({
 			}));
 		});
 
-		return { relations: state.relations, autoFill, collectionItems, junctionCollection, junctionFields, junctionCollectionExists, relatedCollectionExists };
+		return { relations: state.relations, autoFill, collectionItems, junctionCollection, junctionFields, junctionCollectionExists, relatedCollectionExists, junctionFieldExists };
+
+		function junctionFieldExists(fieldKey: string) {
+			if (!junctionCollection.value) return false;
+			return !!fieldsStore.getField(junctionCollection.value, fieldKey);
+		}
 	},
 });
 </script>

From efb94213dd14686e15fa9f6cd214185699581f10 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Mon, 14 Sep 2020 13:48:27 -0400
Subject: [PATCH 6/8] Add corresponding-m2m setup

---
 app/src/lang/en-US/index.json                 |   2 +
 .../components/relationship-m2m.vue           | 114 +++++++++++++++++-
 .../components/relationship-m2o.vue           |   9 +-
 .../components/relationship-o2m.vue           |   3 +-
 4 files changed, 118 insertions(+), 10 deletions(-)

diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index b4ac904430..a611f8862b 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -540,6 +540,8 @@
 
 	"auto_fill": "Auto Fill",
 
+	"corresponding_field": "Corresponding Field",
+
 	"errors": {
 		"COLLECTION_NOT_FOUND": "Collection doesn't exist.",
 		"FIELD_NOT_FOUND": "Field not found.",
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
index f539da5bbd..15ff8a34f9 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -12,7 +12,7 @@
 					<template #append>
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
-								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
+								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="autoFill || isExisting" />
 							</template>
 
 							<v-list dense class="monospace">
@@ -20,6 +20,7 @@
 									v-for="item in collectionItems"
 									:key="item.value"
 									:active="relations[0].many_collection === item.value"
+									:disabled="item.disabled"
 									@click="relations[0].many_collection = item.value"
 								>
 									<v-list-item-content>
@@ -37,7 +38,7 @@
 					<template #append>
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
-								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
+								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="type === 'files' || isExisting" />
 							</template>
 
 							<v-list dense class="monospace">
@@ -45,6 +46,7 @@
 									v-for="item in collectionItems"
 									:key="item.value"
 									:active="relations[1].one_collection === item.value"
+									:disabled="item.disabled"
 									@click="relations[1].one_collection = item.value"
 								>
 									<v-list-item-content>
@@ -61,7 +63,7 @@
 				<template #append v-if="junctionCollectionExists">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
-							<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
+							<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="autoFill || isExisting" />
 						</template>
 
 						<v-list dense class="monospace">
@@ -69,6 +71,7 @@
 								v-for="item in junctionFields"
 								:key="item.value"
 								:active="relations[0].many_field === item.value"
+								:disabled="item.disabled"
 								@click="relations[0].many_field = item.value"
 							>
 								<v-list-item-content>
@@ -85,7 +88,7 @@
 				<template #append v-if="junctionCollectionExists">
 					<v-menu show-arrow placement="bottom-end">
 						<template #activator="{ toggle }">
-							<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
+							<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="autoFill || isExisting" />
 						</template>
 
 						<v-list dense class="monospace">
@@ -93,6 +96,7 @@
 								v-for="item in junctionFields"
 								:key="item.value"
 								:active="relations[1].many_field === item.value"
+								:disabled="item.disabled"
 								@click="relations[1].many_field = item.value"
 							>
 								<v-list-item-content>
@@ -109,6 +113,20 @@
 			<v-icon class="arrow" name="arrow_forward" />
 			<v-icon class="arrow" name="arrow_backward" />
 		</div>
+
+		<v-divider large :inline-title="false" v-if="!isExisting">{{ $t('corresponding_field') }}</v-divider>
+
+		<div class="corresponding" v-if="!isExisting">
+			<div class="field">
+				<div class="type-label">{{ $t('create_field') }}</div>
+				<v-checkbox block :label="correspondingLabel" v-model="hasCorresponding" />
+			</div>
+			<div class="field">
+				<div class="type-label">{{ $t('field_name') }}</div>
+				<v-input :disabled="hasCorresponding === false" v-model="correspondingField" :placeholder="$t('field_name') + '...'" db-safe />
+			</div>
+			<v-icon name="arrow_forward" class="arrow" />
+		</div>
 	</div>
 </template>
 
@@ -117,6 +135,7 @@ import { defineComponent, computed, ref } from '@vue/composition-api';
 import { orderBy } from 'lodash';
 import { useCollectionsStore, useFieldsStore } from '@/stores/';
 import { Field } from '@/types';
+import i18n from '@/lang';
 
 import { state } from '../store';
 
@@ -196,12 +215,72 @@ export default defineComponent({
 			}));
 		});
 
-		return { relations: state.relations, autoFill, collectionItems, junctionCollection, junctionFields, junctionCollectionExists, relatedCollectionExists, junctionFieldExists };
+		const { hasCorresponding, correspondingField, correspondingLabel } = useCorresponding();
+
+		return { relations: state.relations, autoFill, collectionItems, junctionCollection, junctionFields, junctionCollectionExists, relatedCollectionExists, junctionFieldExists, hasCorresponding, correspondingField, correspondingLabel };
 
 		function junctionFieldExists(fieldKey: string) {
 			if (!junctionCollection.value) return false;
 			return !!fieldsStore.getField(junctionCollection.value, fieldKey);
 		}
+
+		function useCorresponding() {
+			const hasCorresponding = computed({
+				get() {
+					return !!state.newFields.find((field: any) => field.$type === 'corresponding');
+				},
+				set(enabled: boolean) {
+					if (enabled === true) {
+						state.newFields = [
+							{
+								$type: 'corresponding',
+								field: state.relations[0].one_collection,
+								collection: state.relations[1].one_collection,
+								meta: {
+									special: 'm2m',
+									interface: 'many-to-many',
+								},
+							},
+						];
+
+						state.relations[1].one_field = state.relations[0].one_collection;
+					} else {
+						state.newFields = state.newFields.filter((field: any) => field.$type !== 'corresponding');
+						state.relations[1].one_field = null;
+					}
+				},
+			});
+
+			const correspondingField = computed({
+				get() {
+					return state.newFields?.find((field: any) => field.$type === 'corresponding')?.field || null;
+				},
+				set(field: string | null) {
+					state.newFields = state.newFields.map((newField: any) => {
+						if (newField.$type === 'corresponding') {
+							return {
+								...newField,
+								field: field
+							}
+						}
+
+						return newField;
+					})
+
+					state.relations[1].one_field = field;
+				},
+			});
+
+			const correspondingLabel = computed(() => {
+				if (state.relations[0].one_collection) {
+					return i18n.t('add_m2m_to_collection', { collection: state.relations[1].one_collection });
+				}
+
+				return i18n.t('add_field_related');
+			});
+
+			return { hasCorresponding, correspondingField, correspondingLabel };
+		}
 	},
 });
 </script>
@@ -243,4 +322,29 @@ export default defineComponent({
 .type-label {
 	margin-bottom: 8px;
 }
+
+.v-divider {
+	margin: 48px 0;
+}
+
+.v-list {
+	--v-list-item-content-font-family: var(--family-monospace);
+}
+
+.corresponding {
+	position: relative;
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 12px 32px;
+	margin-top: 48px;
+
+	.arrow {
+		--v-icon-color: var(--primary);
+
+		position: absolute;
+		bottom: 14px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
index e27daa21fa..0832f4f4a9 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
@@ -12,7 +12,7 @@
 					<template #append>
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
-								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
+								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="isExisting" />
 							</template>
 
 							<v-list dense class="monospace">
@@ -20,6 +20,7 @@
 									v-for="item in items"
 									:key="item.value"
 									:active="relations[0].one_collection === item.value"
+									:disabled="item.disabled"
 									@click="relations[0].one_collection = item.value"
 								>
 									<v-list-item-content>
@@ -36,15 +37,15 @@
 			<v-icon class="arrow" name="arrow_back" />
 		</div>
 
-		<v-divider v-if="!isExisting" />
+		<v-divider large :inline-title="false" v-if="!isExisting">{{ $t('corresponding_field') }}</v-divider>
 
 		<div class="grid" v-if="!isExisting">
 			<div class="field">
-				<div class="type-label">{{ $t('create_corresponding_field') }}</div>
+				<div class="type-label">{{ $t('create_field') }}</div>
 				<v-checkbox block :label="correspondingLabel" v-model="hasCorresponding" />
 			</div>
 			<div class="field">
-				<div class="type-label">{{ $t('corresponding_field_name') }}</div>
+				<div class="type-label">{{ $t('field_name') }}</div>
 				<v-input :disabled="hasCorresponding === false" v-model="correspondingField" :placeholder="$t('field_name') + '...'" db-safe />
 			</div>
 			<v-icon name="arrow_forward" class="arrow" />
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
index f3784b8034..b822e0c241 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
@@ -18,7 +18,7 @@
 					<template #append>
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
-								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
+								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="isExisting" />
 							</template>
 
 							<v-list dense class="monospace">
@@ -26,6 +26,7 @@
 									v-for="item in items"
 									:key="item.value"
 									:active="relations[0].many_collection === item.value"
+									:disabled="item.disabled"
 									@click="relations[0].many_collection = item.value"
 								>
 									<v-list-item-content>

From 165d59f26acc756ba071ecf7b68eacc7d4a850e6 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Mon, 14 Sep 2020 14:46:01 -0400
Subject: [PATCH 7/8] Add add-corresponding to o2m

---
 .../components/relationship-m2o.vue           |  44 ++++---
 .../components/relationship-o2m.vue           | 118 +++++++++++++++++-
 .../data-model/field-detail/field-detail.vue  |   7 ++
 .../routes/data-model/field-detail/store.ts   |   6 +
 4 files changed, 150 insertions(+), 25 deletions(-)

diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
index 0832f4f4a9..8fb318c3cc 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
@@ -128,40 +128,38 @@ export default defineComponent({
 				},
 				set(enabled: boolean) {
 					if (enabled === true) {
-						state.newFields = [
-							{
-								field: state.relations[0].one_collection,
-								collection: state.relations[0].one_collection,
-								meta: {
-									special: 'o2m',
-									interface: 'one-to-many',
-								},
+						state.newFields.push({
+							$type: 'corresponding',
+							field: state.relations[0].one_collection,
+							collection: state.relations[0].one_collection,
+							meta: {
+								special: 'o2m',
+								interface: 'one-to-many',
 							},
-						];
+						});
 					} else {
-						state.newFields = [];
+						state.newFields = state.newFields.filter((field: any) => field.$type !== 'corresponding');
 					}
 				},
 			});
 
 			const correspondingField = computed({
 				get() {
-					return state.newFields?.[0]?.field || null;
+					return state.newFields?.find((field: any) => field.$type === 'corresponding')?.field || null;
 				},
 				set(field: string | null) {
-					state.newFields = [
-						{
-							...(state.newFields[0] || {}),
-							field: field || '',
-						},
-					];
+					state.newFields = state.newFields.map((newField: any) => {
+						if (newField.$type === 'corresponding') {
+							return {
+								...newField,
+								field
+							}
+						}
 
-					state.relations = [
-						{
-							...state.relations[0],
-							one_field: field,
-						},
-					];
+						return newField;
+					});
+
+					state.relations[0].one_field = field;
 				},
 			});
 
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
index b822e0c241..0f3d1e6d97 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
@@ -13,7 +13,7 @@
 					:placeholder="$t('collection') + '...'"
 					v-model="relations[0].many_collection"
 					:disabled="isExisting"
-					:class="{ matches: isExisting }"
+					:class="{ matches: relatedCollectionExists }"
 				>
 					<template #append>
 						<v-menu show-arrow placement="bottom-end">
@@ -44,6 +44,7 @@
 				v-model="relations[0].many_field"
 				:disabled="isExisting"
 				:placeholder="$t('foreign_key') + '...'"
+				:class="{ matches: relatedFieldExists }"
 			>
 				<template #append v-if="fields && fields.length > 0">
 					<v-menu show-arrow placement="bottom-end">
@@ -69,6 +70,20 @@
 			</v-input>
 			<v-icon class="arrow" name="arrow_forward" />
 		</div>
+
+		<v-divider large :inline-title="false" v-if="!isExisting">{{ $t('corresponding_field') }}</v-divider>
+
+		<div class="corresponding" v-if="!isExisting">
+			<div class="field">
+				<div class="type-label">{{ $t('create_field') }}</div>
+				<v-checkbox block :label="correspondingLabel" v-model="hasCorresponding" />
+			</div>
+			<div class="field">
+				<div class="type-label">{{ $t('field_name') }}</div>
+				<v-input disabled v-model="relations[0].many_field" :placeholder="$t('field_name') + '...'" db-safe />
+			</div>
+			<v-icon name="arrow_forward" class="arrow" />
+		</div>
 	</div>
 </template>
 
@@ -102,8 +117,18 @@ export default defineComponent({
 		const fieldsStore = useFieldsStore();
 
 		const { items, fields, currentCollectionPrimaryKey, collectionMany } = useRelation();
+		const { hasCorresponding, correspondingLabel } = useCorresponding();
 
-		return { relations: state.relations, items, fields, currentCollectionPrimaryKey, collectionMany };
+		const relatedCollectionExists = computed(() => {
+			return collectionsStore.state.collections.find((col) => col.collection === state.relations?.[0].many_collection);
+		});
+
+		const relatedFieldExists = computed(() => {
+			if (!state?.relations?.[0].many_collection || !state?.relations?.[0].many_field) return false;
+			return !!fieldsStore.getField(state.relations[0].many_collection, state.relations[0].many_field);
+		});
+
+		return { relations: state.relations, items, fields, currentCollectionPrimaryKey, collectionMany, hasCorresponding, correspondingLabel, relatedCollectionExists, relatedFieldExists };
 
 		function useRelation() {
 			const availableCollections = computed(() => {
@@ -157,6 +182,74 @@ export default defineComponent({
 
 			return { availableCollections, items, fields, currentCollectionPrimaryKey, collectionMany };
 		}
+
+		function useCorresponding() {
+			const hasCorresponding = computed({
+				get() {
+					if (!state?.relations?.[0]?.many_collection || !state?.relations?.[0]?.many_field) return false;
+
+					if (relatedFieldExists.value === true) {
+						return state.updateFields.find((updateField: any) => updateField.field === state.relations[0].many_field)?.meta?.interface === 'many-to-one' || fieldsStore.getField(state.relations[0].many_collection, state.relations[0].many_field)?.meta?.interface === 'many-to-one';
+					} else {
+						return state.newFields.find((newField: any) => newField.$type === 'manyRelated')?.meta?.interface === 'many-to-one';
+					}
+				},
+				set(enabled: boolean) {
+					if (!state?.relations?.[0]?.many_field) return;
+
+					if (relatedFieldExists.value === true) {
+						if (enabled === true) {
+							state.updateFields = [
+								{
+									collection: state.relations[0].one_collection,
+									field: state.relations[0].many_field,
+									meta: {
+										interface: 'many-to-one',
+										special: 'm2o',
+									}
+								}
+							]
+						} else {
+							state.updateFields = [
+								{
+									collection: state.relations[0].one_collection,
+									field: state.relations[0].many_field,
+									meta: {
+										interface: null,
+										special: null,
+									}
+								}
+							]
+						}
+					} else {
+						state.newFields = state.newFields.map((newField: any) => {
+							if (newField.$type === 'manyRelated') {
+								if (!newField.meta) newField.meta = {};
+								if (enabled === true) {
+									newField.meta.interface = 'many-to-one';
+									newField.meta.special = 'many-to-one';
+								} else {
+									newField.meta.interface = null;
+									newField.meta.special = null;
+								}
+							}
+
+							return newField;
+						})
+					}
+				},
+			});
+
+			const correspondingLabel = computed(() => {
+				if (state.relations[0].many_collection) {
+					return i18n.t('add_m2o_to_collection', { collection: state.relations[0].many_collection });
+				}
+
+				return i18n.t('add_field_related');
+			});
+
+			return { hasCorresponding, correspondingLabel };
+		}
 	},
 });
 </script>
@@ -193,4 +286,25 @@ export default defineComponent({
 .type-label {
 	margin-bottom: 8px;
 }
+
+.v-divider {
+	margin: 48px 0;
+}
+
+.corresponding {
+	position: relative;
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 12px 32px;
+	margin-top: 48px;
+
+	.arrow {
+		--v-icon-color: var(--primary);
+
+		position: absolute;
+		bottom: 14px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index 6bcfb95271..85957912a0 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -241,6 +241,13 @@ export default defineComponent({
 					})
 				);
 
+				await Promise.all(
+					state.updateFields.map((updateField: Partial<Field> & { $type: string }) => {
+						delete updateField.$type;
+						return api.post(`/fields/${updateField.collection}/${updateField.field}`, updateField);
+					})
+				);
+
 				await Promise.all(
 					state.relations.map((relation: Partial<Relation>) => {
 						if (relation.id) {
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store.ts b/app/src/modules/settings/routes/data-model/field-detail/store.ts
index ebf2a98c8b..1d1e3109a4 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store.ts
@@ -55,6 +55,7 @@ function initLocalStore(
 		relations: [],
 		newCollections: [],
 		newFields: [],
+		updateFields: [],
 
 		autoFillJunctionRelation: true,
 	});
@@ -257,6 +258,7 @@ function initLocalStore(
 				} else {
 					state.newFields = [
 						{
+							$type: 'manyRelated',
 							collection: collectionName,
 							field: fieldName,
 							type: fieldsStore.getPrimaryKeyFieldForCollection(collection)?.type,
@@ -267,6 +269,7 @@ function initLocalStore(
 			} else {
 				state.newFields = [
 					{
+						$type: 'manyRelated',
 						collection: collectionName,
 						field: fieldName,
 						type: 'integer',
@@ -274,6 +277,8 @@ function initLocalStore(
 					}
 				]
 			}
+
+			console.log(state.newFields);
 		}, 50);
 
 		if (!isExisting) {
@@ -330,6 +335,7 @@ function initLocalStore(
 					collection: junctionCollection,
 					meta: {
 						hidden: true,
+						icon: 'import_export',
 					},
 					fields: [
 						{

From 79c65d4ca05152987b7e89b1b87faf26eca7c1fc Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Mon, 14 Sep 2020 14:52:18 -0400
Subject: [PATCH 8/8] Tweak name to match others

---
 .../field-detail/components/relationship-m2o.vue       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
index 8fb318c3cc..c9d2cae7fa 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
@@ -8,7 +8,7 @@
 			</div>
 			<div class="field">
 				<div class="type-label">{{ $t('related_collection') }}</div>
-				<v-input :class="{ matches: isNewCollection === false }" db-safe key="related-collection" v-model="relations[0].one_collection" :disabled="isExisting" :placeholder="$t('collection') + '...'">
+				<v-input :class="{ matches: relatedCollectionExists }" db-safe key="related-collection" v-model="relations[0].one_collection" :disabled="isExisting" :placeholder="$t('collection') + '...'">
 					<template #append>
 						<v-menu show-arrow placement="bottom-end">
 							<template #activator="{ toggle }">
@@ -33,7 +33,7 @@
 				</v-input>
 			</div>
 			<v-input disabled :value="relations[0].many_field" />
-			<v-input db-safe :disabled="isNewCollection === false" v-model="relations[0].one_primary" :placeholder="$t('primary_key') + '...'" />
+			<v-input db-safe :disabled="relatedCollectionExists" v-model="relations[0].one_primary" :placeholder="$t('primary_key') + '...'" />
 			<v-icon class="arrow" name="arrow_back" />
 		</div>
 
@@ -86,8 +86,8 @@ export default defineComponent({
 		const { items } = useRelation();
 		const { hasCorresponding, correspondingField, correspondingLabel } = useCorresponding();
 
-		const isNewCollection = computed(() => {
-			return collectionsStore.getCollection(state.relations[0].one_collection) === null;
+		const relatedCollectionExists = computed(() => {
+			return !!collectionsStore.getCollection(state.relations[0].one_collection);
 		});
 
 		return {
@@ -97,7 +97,7 @@ export default defineComponent({
 			correspondingField,
 			correspondingLabel,
 			fieldData: state.fieldData,
-			isNewCollection,
+			relatedCollectionExists,
 		};
 
 		function useRelation() {