From 0a266e098ac26a3efee8ddf6bf55459423ec82c2 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 22 Sep 2020 11:32:29 -0400
Subject: [PATCH] Fix creation of junction fields on m2m when using
 corresponding

Fixes #368
---
 api/src/controllers/fields.ts                 |   2 +-
 .../components/relationship-m2m.vue           | 113 ++++++++++++++----
 .../routes/data-model/field-detail/store.ts   |   8 +-
 3 files changed, 96 insertions(+), 27 deletions(-)

diff --git a/api/src/controllers/fields.ts b/api/src/controllers/fields.ts
index 4d36982244..6530f8c0ad 100644
--- a/api/src/controllers/fields.ts
+++ b/api/src/controllers/fields.ts
@@ -55,7 +55,7 @@ router.get(
 const newFieldSchema = Joi.object({
 	collection: Joi.string().optional(),
 	field: Joi.string().required(),
-	type: Joi.string().valid(...types),
+	type: Joi.string().valid(...types, null),
 	schema: Joi.object({
 		comment: Joi.string().allow(null),
 		default_value: Joi.any(),
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 15ff8a34f9..2f1b87c607 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,11 +8,22 @@
 			</div>
 			<div class="field">
 				<div class="type-label">{{ $t('junction_collection') }}</div>
-				<v-input :class="{ matches: junctionCollectionExists }" v-model="junctionCollection" :placeholder="$t('collection') + '...'" :disabled="autoFill || 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 }">
-								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="autoFill || isExisting" />
+								<v-icon
+									name="list_alt"
+									@click="toggle"
+									v-tooltip="$t('select_existing')"
+									:disabled="autoFill || isExisting"
+								/>
 							</template>
 
 							<v-list dense class="monospace">
@@ -34,11 +45,23 @@
 			</div>
 			<div class="field">
 				<div class="type-label">{{ $t('related_collection') }}</div>
-				<v-input :autofocus="autoFill" :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 }">
-								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="type === 'files' || isExisting" />
+								<v-icon
+									name="list_alt"
+									@click="toggle"
+									v-tooltip="$t('select_existing')"
+									:disabled="type === 'files' || isExisting"
+								/>
 							</template>
 
 							<v-list dense class="monospace">
@@ -59,11 +82,22 @@
 				</v-input>
 			</div>
 			<v-input disabled :value="relations[0].one_primary" />
-			<v-input :class="{ matches: junctionFieldExists(relations[0].many_field)}" 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 }">
-							<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="autoFill || isExisting" />
+							<v-icon
+								name="list_alt"
+								@click="toggle"
+								v-tooltip="$t('select_existing')"
+								:disabled="autoFill || isExisting"
+							/>
 						</template>
 
 						<v-list dense class="monospace">
@@ -84,11 +118,22 @@
 			</v-input>
 			<div class="spacer" />
 			<div class="spacer" />
-			<v-input :class="{ matches: junctionFieldExists(relations[1].many_field)}" 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 }">
-							<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="autoFill || isExisting" />
+							<v-icon
+								name="list_alt"
+								@click="toggle"
+								v-tooltip="$t('select_existing')"
+								:disabled="autoFill || isExisting"
+							/>
 						</template>
 
 						<v-list dense class="monospace">
@@ -107,9 +152,14 @@
 					</v-menu>
 				</template>
 			</v-input>
-			<v-input db-safe :disabled="relatedCollectionExists" v-model="relations[1].one_primary" :placeholder="$t('primary_key') + '...'" />
+			<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-checkbox :disabled="isExisting" block v-model="autoFill" :label="$t('auto_fill')" />
 			<v-icon class="arrow" name="arrow_forward" />
 			<v-icon class="arrow" name="arrow_backward" />
 		</div>
@@ -123,7 +173,12 @@
 			</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 />
+				<v-input
+					:disabled="hasCorresponding === false"
+					v-model="correspondingField"
+					:placeholder="$t('field_name') + '...'"
+					db-safe
+				/>
 			</div>
 			<v-icon name="arrow_forward" class="arrow" />
 		</div>
@@ -164,13 +219,13 @@ export default defineComponent({
 			},
 			set(newAuto: boolean) {
 				state.autoFillJunctionRelation = newAuto;
-			}
-		})
+			},
+		});
 
 		const availableCollections = computed(() => {
 			return orderBy(
 				collectionsStore.state.collections.filter((collection) => {
-					return (collection.collection.startsWith('directus_') === false);
+					return collection.collection.startsWith('directus_') === false;
 				}),
 				['collection'],
 				['asc']
@@ -217,7 +272,19 @@ export default defineComponent({
 
 		const { hasCorresponding, correspondingField, correspondingLabel } = useCorresponding();
 
-		return { relations: state.relations, autoFill, collectionItems, junctionCollection, junctionFields, junctionCollectionExists, relatedCollectionExists, junctionFieldExists, hasCorresponding, correspondingField, correspondingLabel };
+		return {
+			relations: state.relations,
+			autoFill,
+			collectionItems,
+			junctionCollection,
+			junctionFields,
+			junctionCollectionExists,
+			relatedCollectionExists,
+			junctionFieldExists,
+			hasCorresponding,
+			correspondingField,
+			correspondingLabel,
+		};
 
 		function junctionFieldExists(fieldKey: string) {
 			if (!junctionCollection.value) return false;
@@ -230,8 +297,12 @@ export default defineComponent({
 					return !!state.newFields.find((field: any) => field.$type === 'corresponding');
 				},
 				set(enabled: boolean) {
-					if (enabled === true) {
+					if (
+						enabled === true &&
+						!!state.newFields.find((field: any) => field.$type === 'corresponding') === false
+					) {
 						state.newFields = [
+							...state.newFields,
 							{
 								$type: 'corresponding',
 								field: state.relations[0].one_collection,
@@ -260,12 +331,12 @@ export default defineComponent({
 						if (newField.$type === 'corresponding') {
 							return {
 								...newField,
-								field: field
-							}
+								field: field,
+							};
 						}
 
 						return newField;
-					})
+					});
 
 					state.relations[1].one_field = field;
 				},
@@ -309,12 +380,12 @@ export default defineComponent({
 
 		&:first-of-type {
 			bottom: 141px;
-   			left: 32.5%;
+			left: 32.5%;
 		}
 
 		&:last-of-type {
 			bottom: 76px;
-    		left: 67.4%;
+			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 862bf975ad..7122950771 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
@@ -81,8 +81,6 @@ function initLocalStore(
 					matchesRelation = inter.relationship === type;
 				}
 
-				console.log(inter.id, matchesType, matchesRelation);
-
 				return matchesType && matchesRelation;
 			})
 			.sort((a, b) => (a.name > b.name ? 1 : -1));
@@ -225,7 +223,7 @@ function initLocalStore(
 	}
 
 	if (type === 'o2m') {
-		state.fieldData.schema = null;
+		delete state.fieldData.schema;
 		state.fieldData.type = null;
 
 		const syncNewCollectionsO2M = throttle(() => {
@@ -321,7 +319,7 @@ function initLocalStore(
 	}
 
 	if (type === 'm2m' || type === 'files' || type === 'translations') {
-		state.fieldData.schema = null;
+		delete state.fieldData.schema;
 		state.fieldData.type = null;
 
 		const syncNewCollectionsM2M = throttle(([junctionCollection, manyCurrent, manyRelated, relatedCollection]) => {
@@ -558,7 +556,7 @@ function initLocalStore(
 	}
 
 	if (type === 'presentation') {
-		state.fieldData.schema = null;
+		delete state.fieldData.schema;
 		state.fieldData.type = null;
 
 		state.fieldData.meta.special = ['alias'];