From 9c8b144453d8f6158332c408bce284d60f6fe7d1 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Wed, 14 Oct 2020 23:38:10 +0200
Subject: [PATCH 1/5] support junction fields

---
 app/src/interfaces/files/files.vue            |  6 +--
 .../interfaces/many-to-many/many-to-many.vue  | 24 ++++-----
 app/src/interfaces/many-to-many/options.vue   | 35 ++++---------
 .../interfaces/many-to-many/use-actions.ts    | 20 ++-----
 app/src/interfaces/many-to-many/use-edit.ts   | 52 ++++++++-----------
 .../interfaces/many-to-many/use-preview.ts    | 39 ++++++++++----
 .../interfaces/many-to-many/use-selection.ts  | 19 +++----
 7 files changed, 89 insertions(+), 106 deletions(-)

diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index 5db7f7a33d..e4f2ca262e 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -45,7 +45,7 @@
 			:collection="relationFields.junctionCollection"
 			:primary-key="currentlyEditing || '+'"
 			:edits="editsAtStart"
-			:related-primary-key="relationFields.relationPkField"
+			:related-primary-key="relationFields.relationPkField || '+'"
 			:junction-field="relationFields.junctionRelation"
 			@input="stageEdits"
 			@update:active="cancelEdit"
@@ -165,10 +165,8 @@ export default defineComponent({
 
 		const { cancelEdit, stageEdits, editsAtStart, editItem, currentlyEditing } = useEdit(
 			value,
-			items,
 			relationFields,
-			emitter,
-			getJunctionFromRelatedId
+			emitter
 		);
 
 		const { stageSelection, selectModalActive, selectionFilters } = useSelection(
diff --git a/app/src/interfaces/many-to-many/many-to-many.vue b/app/src/interfaces/many-to-many/many-to-many.vue
index af3de9b0e6..21f23e5254 100644
--- a/app/src/interfaces/many-to-many/many-to-many.vue
+++ b/app/src/interfaces/many-to-many/many-to-many.vue
@@ -5,7 +5,7 @@
 	<div class="one-to-many" v-else>
 		<v-table
 			:loading="loading"
-			:items="displayItems"
+			:items="items"
 			:headers.sync="tableHeaders"
 			show-resize
 			inline
@@ -15,13 +15,13 @@
 			<template v-for="header in tableHeaders" v-slot:[`item.${header.value}`]="{ item }">
 				<render-display
 					:key="header.value"
-					:value="item[header.value]"
+					:value="get(item, header.value)"
 					:display="header.field.display"
 					:options="header.field.displayOptions"
 					:interface="header.field.interface"
 					:interface-options="header.field.interfaceOptions"
 					:type="header.field.type"
-					:collection="junctionCollection.collection"
+					:collection="relationFields.junctionCollection"
 					:field="header.field.field"
 				/>
 			</template>
@@ -46,9 +46,9 @@
 		<modal-detail
 			v-if="!disabled"
 			:active="currentlyEditing !== null"
-			:collection="relationCollection.collection"
+			:collection="relationFields.junctionCollection"
 			:primary-key="currentlyEditing || '+'"
-			:related-primary-key="relationFields.relationPkField"
+			:related-primary-key="relatedPrimaryKey || '+'"
 			:junction-field="relationFields.junctionRelation"
 			:edits="editsAtStart"
 			@input="stageEdits"
@@ -71,6 +71,7 @@
 import { defineComponent, ref, computed, watch, PropType, toRefs } from '@vue/composition-api';
 import ModalDetail from '@/views/private/components/modal-detail';
 import ModalBrowse from '@/views/private/components/modal-browse';
+import { get } from 'lodash';
 
 import useActions from './use-actions';
 import useRelation from './use-relation';
@@ -128,7 +129,7 @@ export default defineComponent({
 			getJunctionFromRelatedId,
 		} = useActions(value, relationFields, emitter);
 
-		const { tableHeaders, items, loading, error, displayItems } = usePreview(
+		const { tableHeaders, items, loading, error } = usePreview(
 			value,
 			fields,
 			relationFields,
@@ -138,17 +139,15 @@ export default defineComponent({
 			getPrimaryKeys
 		);
 
-		const { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit } = useEdit(
+		const { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit, relatedPrimaryKey } = useEdit(
 			value,
-			items,
 			relationFields,
-			emitter,
-			getJunctionFromRelatedId
+			emitter
 		);
 
 		const { stageSelection, selectModalActive, selectionFilters } = useSelection(
 			value,
-			displayItems,
+			items,
 			relationFields,
 			emitter
 		);
@@ -168,10 +167,11 @@ export default defineComponent({
 			stageSelection,
 			selectModalActive,
 			deleteItem,
-			displayItems,
 			selectionFilters,
 			items,
 			relationFields,
+			relatedPrimaryKey,
+			get,
 		};
 	},
 });
diff --git a/app/src/interfaces/many-to-many/options.vue b/app/src/interfaces/many-to-many/options.vue
index ecec4efd72..43750161a9 100644
--- a/app/src/interfaces/many-to-many/options.vue
+++ b/app/src/interfaces/many-to-many/options.vue
@@ -1,14 +1,16 @@
 <template>
-	<v-notice type="warning" v-if="relatedCollection === null">
+	<v-notice type="warning" v-if="junctionCollection === null">
 		{{ $t('interfaces.one-to-many.no_collection') }}
 	</v-notice>
 	<div v-else class="form-grid">
 		<div class="field full">
 			<p class="type-label">{{ $t('select_fields') }}</p>
 			<v-field-select
-				:collection="relatedCollection"
+				:collection="junctionCollection"
 				v-model="fields"
-				:inject="relatedCollectionExists ? null : { fields: newFields, collections: newCollections, relations }"
+				:inject="
+					junctionCollectionExists ? null : { fields: newFields, collections: newCollections, relations }
+				"
 			/>
 		</div>
 	</div>
@@ -20,7 +22,6 @@ import { defineComponent, PropType, computed } from '@vue/composition-api';
 import { useRelationsStore } from '@/stores/';
 import { Relation, Collection } from '@/types';
 import { useCollectionsStore } from '../../stores';
-
 export default defineComponent({
 	props: {
 		collection: {
@@ -51,7 +52,6 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const collectionsStore = useCollectionsStore();
 		const relationsStore = useRelationsStore();
-
 		const fields = computed({
 			get() {
 				return props.value?.fields;
@@ -63,41 +63,26 @@ export default defineComponent({
 				});
 			},
 		});
-
-		const relatedCollection = computed(() => {
+		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
 			);
-
-			if (junctionRelation === undefined) return;
-
-			const relatedCollection = props.relations.find(
-				(relation) =>
-					relation.one_collection !== props.collection &&
-					relation.many_field === junctionRelation.junction_field
-			);
-
-			return relatedCollection?.one_collection || null;
+			return junctionRelation?.many_collection || null;
 		});
-
-		const relatedCollectionExists = computed(() => {
+		const junctionCollectionExists = computed(() => {
 			return !!collectionsStore.state.collections.find(
-				(collection) => collection.collection === relatedCollection.value
+				(collection) => collection.collection === junctionCollection.value
 			);
 		});
-
-		return { fields, relatedCollection, relatedCollectionExists };
+		return { fields, junctionCollection, junctionCollectionExists };
 	},
 });
 </script>
 
 <style lang="scss" scoped>
 @import '@/styles/mixins/form-grid';
-
 .form-grid {
 	@include form-grid;
 }
diff --git a/app/src/interfaces/many-to-many/use-actions.ts b/app/src/interfaces/many-to-many/use-actions.ts
index c709275f2a..87de49ca27 100644
--- a/app/src/interfaces/many-to-many/use-actions.ts
+++ b/app/src/interfaces/many-to-many/use-actions.ts
@@ -1,5 +1,6 @@
 import { Ref } from '@vue/composition-api';
 import { RelationInfo } from './use-relation';
+import { get, has } from 'lodash';
 
 export default function useActions(
 	value: Ref<(string | number | Record<string, any>)[] | null>,
@@ -12,8 +13,7 @@ export default function useActions(
 
 		return (
 			value.value.find(
-				(item) =>
-					(typeof item === 'object' && junctionPkField in item && item[junctionPkField] === id) || item === id
+				(item) => get(item, junctionPkField) === id || (['string', 'number'].includes(typeof item), item === id)
 			) || null
 		);
 	}
@@ -34,11 +34,7 @@ export default function useActions(
 		if (value.value === null || junctionRelation === null) return [];
 
 		return value.value.filter(
-			(item) =>
-				typeof item === 'object' &&
-				junctionRelation in item &&
-				typeof item[junctionRelation] === 'object' &&
-				relationPkField in item[junctionRelation] === false
+			(item) => has(item, junctionRelation) && has(item, [junctionRelation, relationPkField]) === false
 		) as Record<string, any>[];
 	}
 
@@ -47,19 +43,13 @@ export default function useActions(
 
 		if (value.value === null || junctionRelation === null) return [];
 
-		return value.value.filter(
-			(item) =>
-				typeof item === 'object' &&
-				junctionRelation in item &&
-				typeof item[junctionRelation] === 'object' &&
-				relationPkField in item[junctionRelation] === true
-		) as Record<string, any>[];
+		return value.value.filter((item) => has(item, [junctionRelation, relationPkField])) as Record<string, any>[];
 	}
 
 	function getExistingItems() {
 		if (value.value === null) return [];
 
-		return value.value.filter((item) => typeof item === 'string' || typeof item === 'number');
+		return value.value.filter((item) => ['string', 'number'].includes(typeof item));
 	}
 
 	function getPrimaryKeys(): (string | number)[] {
diff --git a/app/src/interfaces/many-to-many/use-edit.ts b/app/src/interfaces/many-to-many/use-edit.ts
index 86756e0a4c..1f0bbeed50 100644
--- a/app/src/interfaces/many-to-many/use-edit.ts
+++ b/app/src/interfaces/many-to-many/use-edit.ts
@@ -1,67 +1,58 @@
 import { Ref, ref } from '@vue/composition-api';
 import { RelationInfo } from './use-relation';
-import { isEqual } from 'lodash';
+import { isEqual, get } from 'lodash';
 
 export default function useEdit(
 	value: Ref<(string | number | Record<string, any>)[] | null>,
-	items: Ref<Record<string, any>[]>,
 	relation: Ref<RelationInfo>,
-	emit: (newVal: any[] | null) => void,
-	getJunctionFromRelatedId: (id: string | number, items: Record<string, any>[]) => Record<string, any> | null
+	emit: (newVal: any[] | null) => void
 ) {
 	// Primary key of the item we're currently editing. If null, the edit modal should be
 	// closed
 	const currentlyEditing = ref<string | number | null>(null);
+	const relatedPrimaryKey = ref<string | number | null>(null);
 
 	// This keeps track of the starting values so we can match with it
 	const editsAtStart = ref<Record<string, any>>({});
 
 	function editItem(item: any) {
-		const { relationPkField } = relation.value;
-		const hasPrimaryKey = relationPkField in item;
+		const { relationPkField, junctionRelation, junctionPkField } = relation.value;
 
 		editsAtStart.value = item;
-		currentlyEditing.value = hasPrimaryKey ? item[relationPkField] : -1;
+		relatedPrimaryKey.value = get(item, [junctionRelation, relationPkField], null);
+		currentlyEditing.value = get(item, [junctionPkField], null);
 	}
 
 	function stageEdits(edits: any) {
 		const { relationPkField, junctionRelation, junctionPkField } = relation.value;
-		const editsWrapped = { [junctionRelation]: edits };
-		const hasPrimaryKey = relationPkField in editsAtStart.value;
-		const junctionItem = hasPrimaryKey
-			? getJunctionFromRelatedId(editsAtStart.value[relationPkField], items.value)
-			: null;
 
 		const newValue = (value.value || []).map((item) => {
-			if (junctionItem !== null && junctionPkField in junctionItem) {
-				const id = junctionItem[junctionPkField];
+			if (currentlyEditing.value !== null) {
+				const id = currentlyEditing.value;
 
 				if (typeof item === 'object' && junctionPkField in item) {
-					if (item[junctionPkField] === id) return { [junctionRelation]: edits, [junctionPkField]: id };
-				} else if (typeof item === 'number' || typeof item === 'string') {
-					if (item === id) return { [junctionRelation]: edits, [junctionPkField]: id };
+					if (item[junctionPkField] === id) return edits;
+				} else if (['number', 'string'].includes(typeof item)) {
+					if (item === id) return edits;
 				}
 			}
 
-			if (typeof item === 'object' && relationPkField in edits && junctionRelation in item) {
-				const id = edits[relationPkField];
-				const relatedItem = item[junctionRelation] as string | number | Record<string, any>;
-				if (typeof relatedItem === 'object' && relationPkField in relatedItem) {
-					if (relatedItem[relationPkField] === id) return editsWrapped;
-				} else if (typeof relatedItem === 'string' || typeof relatedItem === 'number') {
-					if (relatedItem === id) return editsWrapped;
-				}
+			if (relatedPrimaryKey.value != null) {
+				const id = relatedPrimaryKey.value;
+
+				if (get(item, [junctionRelation], null) === id) return edits;
+				if (get(item, [junctionRelation, relationPkField], null) === id) return edits;
 			}
 
-			if (isEqual({ [junctionRelation]: editsAtStart.value }, item)) {
-				return editsWrapped;
+			if (isEqual(editsAtStart.value, item)) {
+				return edits;
 			}
 
 			return item;
 		});
 
-		if (hasPrimaryKey === false && newValue.includes(editsWrapped) === false) {
-			newValue.push(editsWrapped);
+		if (relatedPrimaryKey.value === null && currentlyEditing.value === null && newValue.includes(edits) === false) {
+			newValue.push(edits);
 		}
 
 		if (newValue.length === 0) emit(null);
@@ -71,7 +62,8 @@ export default function useEdit(
 	function cancelEdit() {
 		editsAtStart.value = {};
 		currentlyEditing.value = null;
+		relatedPrimaryKey.value = null;
 	}
 
-	return { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit };
+	return { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit, relatedPrimaryKey };
 }
diff --git a/app/src/interfaces/many-to-many/use-preview.ts b/app/src/interfaces/many-to-many/use-preview.ts
index 8ef9099d60..9f88d23768 100644
--- a/app/src/interfaces/many-to-many/use-preview.ts
+++ b/app/src/interfaces/many-to-many/use-preview.ts
@@ -24,6 +24,21 @@ export default function usePreview(
 	const items = ref<Record<string, any>[]>([]);
 	const error = ref(null);
 
+	function getRelatedFields(fields: string[]) {
+		const { junctionRelation } = relation.value;
+
+		return fields
+			.map((field) => {
+				const sections = field.split('.');
+				if (junctionRelation === sections[0] && sections.length === 2) return sections[1];
+			})
+			.filter((i) => i);
+	}
+
+	function getJunctionFields() {
+		return (fields.value || []).filter((field) => field.includes('.') === false);
+	}
+
 	watch(
 		() => value.value,
 		async (newVal) => {
@@ -40,7 +55,7 @@ export default function usePreview(
 			const junctionItems = await loadRelatedIds();
 			const relatedPrimaryKeys = junctionItems.map((junction) => junction[junctionRelation]);
 
-			const filteredFields = [...(fields.value.length > 0 ? fields.value : getDefaultFields())];
+			const filteredFields = [...(fields.value.length > 0 ? getRelatedFields(fields.value) : getDefaultFields())];
 
 			if (filteredFields.includes(relationPkField) === false) filteredFields.push(relationPkField);
 
@@ -103,12 +118,18 @@ export default function usePreview(
 			const primaryKeys = getPrimaryKeys();
 
 			if (primaryKeys.length > 0) {
+				const filteredFields = getJunctionFields();
+
+				if (filteredFields.includes(junctionPkField) === false) filteredFields.push(junctionPkField);
+				if (filteredFields.includes(junctionRelation) === false) filteredFields.push(junctionRelation);
+
 				const endpoint = relation.value.junctionCollection.startsWith('directus_')
 					? `/${relation.value.junctionCollection.substring(9)}`
 					: `/items/${relation.value.junctionCollection}`;
 
 				const response = await api.get(endpoint, {
 					params: {
+						fields: filteredFields,
 						[`filter[${junctionPkField}][_in]`]: getPrimaryKeys().join(','),
 					},
 				});
@@ -127,19 +148,19 @@ export default function usePreview(
 		return [];
 	}
 
-	const displayItems = computed(() => {
-		const { junctionRelation } = relation.value;
-		return items.value.map((item) => item[junctionRelation]);
-	});
-
 	// Seeing we don't care about saving those tableHeaders, we can reset it whenever the
 	// fields prop changes (most likely when we're navigating to a different o2m context)
 	watch(
 		() => fields.value,
 		() => {
-			tableHeaders.value = (fields.value.length > 0 ? fields.value : getDefaultFields())
+			const { junctionRelation, junctionCollection } = relation.value;
+
+			tableHeaders.value = (fields.value.length > 0
+				? fields.value
+				: getDefaultFields().map((field) => `${junctionRelation}.${field}`)
+			)
 				.map((fieldKey) => {
-					const field = fieldsStore.getField(relation.value.relationCollection, fieldKey);
+					let field = fieldsStore.getField(junctionCollection, fieldKey);
 
 					if (!field) return null;
 
@@ -171,5 +192,5 @@ export default function usePreview(
 		return fields.slice(0, 3).map((field: Field) => field.field);
 	}
 
-	return { tableHeaders, displayItems, items, loading, error };
+	return { tableHeaders, items, loading, error };
 }
diff --git a/app/src/interfaces/many-to-many/use-selection.ts b/app/src/interfaces/many-to-many/use-selection.ts
index 3d180154ac..1eff19c858 100644
--- a/app/src/interfaces/many-to-many/use-selection.ts
+++ b/app/src/interfaces/many-to-many/use-selection.ts
@@ -1,23 +1,24 @@
 import { Ref, ref, computed } from '@vue/composition-api';
 import { RelationInfo } from './use-relation';
+import { get } from 'lodash';
 import { Filter } from '@/types';
 
 export default function useSelection(
 	value: Ref<(string | number | Record<string, any>)[] | null>,
-	displayItems: Ref<Record<string, any>[]>,
+	items: Ref<Record<string, any>[]>,
 	relation: Ref<RelationInfo>,
 	emit: (newVal: any[] | null) => void
 ) {
 	const selectModalActive = ref(false);
 
 	const selectedPrimaryKeys = computed(() => {
-		if (displayItems.value === null) return [];
+		if (items.value === null) return [];
 
-		const { relationPkField } = relation.value;
+		const { relationPkField, junctionRelation } = relation.value;
 
-		const selectedKeys: (number | string)[] = displayItems.value
-			.filter((currentItem) => relationPkField in currentItem)
-			.map((currentItem) => currentItem[relationPkField]);
+		const selectedKeys: (number | string)[] = items.value
+			.map((currentItem) => get(currentItem, [junctionRelation, relationPkField]))
+			.filter((i) => i);
 
 		return selectedKeys;
 	});
@@ -39,11 +40,7 @@ export default function useSelection(
 	});
 
 	function stageSelection(newSelection: (number | string)[]) {
-		const { junctionRelation } = relation.value;
-
-		const selection = newSelection
-			.filter((item) => selectedPrimaryKeys.value.includes(item) === false)
-			.map((item) => ({ [junctionRelation]: item }));
+		const selection = newSelection.filter((item) => selectedPrimaryKeys.value.includes(item) === false);
 
 		const newVal = [...selection, ...(value.value || [])];
 		if (newVal.length === 0) emit(null);

From 21df8bf239df930790cef7d3c24d7a0c5840f99d Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 15 Oct 2020 12:32:40 +0200
Subject: [PATCH 2/5] finish junction support on m2m

---
 .../interfaces/many-to-many/many-to-many.vue  |  44 ++---
 .../interfaces/many-to-many/use-actions.ts    | 165 +++++++-----------
 app/src/interfaces/many-to-many/use-edit.ts   |  19 +-
 .../interfaces/many-to-many/use-preview.ts    | 107 +++++++-----
 .../interfaces/many-to-many/use-relation.ts   |   8 +-
 .../interfaces/many-to-many/use-selection.ts  |  17 +-
 6 files changed, 173 insertions(+), 187 deletions(-)

diff --git a/app/src/interfaces/many-to-many/many-to-many.vue b/app/src/interfaces/many-to-many/many-to-many.vue
index 6d5b3743af..98111cefdd 100644
--- a/app/src/interfaces/many-to-many/many-to-many.vue
+++ b/app/src/interfaces/many-to-many/many-to-many.vue
@@ -21,35 +21,32 @@
 					:interface="header.field.interface"
 					:interface-options="header.field.interfaceOptions"
 					:type="header.field.type"
-					:collection="relationFields.junctionCollection"
+					:collection="relationInfo.junctionCollection"
 					:field="header.field.field"
 				/>
 			</template>
 
 			<template #item-append="{ item }" v-if="!disabled">
-				<v-icon
-					name="close"
-					v-tooltip="$t('deselect')"
-					class="deselect"
-					@click.stop="deleteItem(item, items)"
-				/>
+				<v-icon name="close" v-tooltip="$t('deselect')" class="deselect" @click.stop="deleteItem(item)" />
 			</template>
 		</v-table>
 
 		<div class="actions" v-if="!disabled">
-			<v-button class="new" @click="currentlyEditing = '+'">{{ $t('create_new') }}</v-button>
+			<v-button class="new" @click="editModalActive = true">{{ $t('create_new') }}</v-button>
 			<v-button class="existing" @click="selectModalActive = true">
 				{{ $t('add_existing') }}
 			</v-button>
 		</div>
 
+		<pre>{{ JSON.stringify(value, null, 4) }}</pre>
+
 		<modal-item
 			v-if="!disabled"
-			:active="currentlyEditing !== null"
-			:collection="relationFields.junctionCollection"
+			:active="editModalActive"
+			:collection="relationInfo.junctionCollection"
 			:primary-key="currentlyEditing || '+'"
 			:related-primary-key="relatedPrimaryKey || '+'"
-			:junction-field="relationFields.junctionRelation"
+			:junction-field="relationInfo.junctionField"
 			:edits="editsAtStart"
 			@input="stageEdits"
 			@update:active="cancelEdit"
@@ -114,7 +111,7 @@ export default defineComponent({
 			emit('input', newVal);
 		}
 
-		const { junction, junctionCollection, relation, relationCollection, relationFields } = useRelation(
+		const { junction, junctionCollection, relation, relationCollection, relationInfo } = useRelation(
 			collection,
 			field
 		);
@@ -127,28 +124,32 @@ export default defineComponent({
 			getNewSelectedItems,
 			getJunctionItem,
 			getJunctionFromRelatedId,
-		} = useActions(value, relationFields, emitter);
+		} = useActions(value, relationInfo, emitter);
 
 		const { tableHeaders, items, loading, error } = usePreview(
 			value,
 			fields,
-			relationFields,
+			relationInfo,
 			getNewSelectedItems,
 			getUpdatedItems,
 			getNewItems,
 			getPrimaryKeys
 		);
 
-		const { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit, relatedPrimaryKey } = useEdit(
-			value,
-			relationFields,
-			emitter
-		);
+		const {
+			currentlyEditing,
+			editItem,
+			editsAtStart,
+			stageEdits,
+			cancelEdit,
+			relatedPrimaryKey,
+			editModalActive,
+		} = useEdit(value, relationInfo, emitter);
 
 		const { stageSelection, selectModalActive, selectionFilters } = useSelection(
 			value,
 			items,
-			relationFields,
+			relationInfo,
 			emitter
 		);
 
@@ -169,9 +170,10 @@ export default defineComponent({
 			deleteItem,
 			selectionFilters,
 			items,
-			relationFields,
+			relationInfo,
 			relatedPrimaryKey,
 			get,
+			editModalActive,
 		};
 	},
 });
diff --git a/app/src/interfaces/many-to-many/use-actions.ts b/app/src/interfaces/many-to-many/use-actions.ts
index 87de49ca27..c64d2644a9 100644
--- a/app/src/interfaces/many-to-many/use-actions.ts
+++ b/app/src/interfaces/many-to-many/use-actions.ts
@@ -1,6 +1,6 @@
 import { Ref } from '@vue/composition-api';
 import { RelationInfo } from './use-relation';
-import { get, has } from 'lodash';
+import { get, has, isEqual } from 'lodash';
 
 export default function useActions(
 	value: Ref<(string | number | Record<string, any>)[] | null>,
@@ -19,31 +19,32 @@ export default function useActions(
 	}
 
 	function getNewSelectedItems() {
-		const { junctionRelation } = relation.value;
+		const { junctionField } = relation.value;
 
-		if (value.value === null || junctionRelation === null) return [];
+		if (value.value === null || junctionField === null) return [];
 
 		return value.value.filter(
-			(item) => typeof item === 'object' && junctionRelation in item && typeof item[junctionRelation] !== 'object'
+			(item) => typeof item === 'object' && junctionField in item && typeof item[junctionField] !== 'object'
 		) as Record<string, any>[];
 	}
 
 	function getNewItems() {
-		const { junctionRelation, relationPkField } = relation.value;
+		const { junctionField, relationPkField } = relation.value;
 
-		if (value.value === null || junctionRelation === null) return [];
+		if (value.value === null || junctionField === null) return [];
 
 		return value.value.filter(
-			(item) => has(item, junctionRelation) && has(item, [junctionRelation, relationPkField]) === false
+			(item) =>
+				typeof get(item, junctionField) === 'object' && has(item, [junctionField, relationPkField]) === false
 		) as Record<string, any>[];
 	}
 
 	function getUpdatedItems() {
-		const { junctionRelation, relationPkField } = relation.value;
+		const { junctionField, relationPkField } = relation.value;
 
-		if (value.value === null || junctionRelation === null) return [];
+		if (value.value === null || junctionField === null) return [];
 
-		return value.value.filter((item) => has(item, [junctionRelation, relationPkField])) as Record<string, any>[];
+		return value.value.filter((item) => has(item, [junctionField, relationPkField])) as Record<string, any>[];
 	}
 
 	function getExistingItems() {
@@ -57,112 +58,69 @@ export default function useActions(
 
 		if (value.value === null) return [];
 
-		return value.value
-			.map((item) => {
-				if (typeof item === 'object') {
-					if (junctionPkField in item) return item[junctionPkField];
-				} else {
-					return item;
-				}
-			})
-			.filter((i) => i);
+		return value.value.reduce((acc: any[], item) => {
+			const deepId = get(item, [junctionPkField]) as number | string | undefined;
+
+			if (['string', 'number'].includes(typeof item)) acc.push(item);
+			else if (deepId !== undefined) acc.push(deepId);
+			return acc;
+		}, []) as (string | number)[];
 	}
 
-	function getRelatedPrimaryKeys(): (string | number)[] {
+	function getRelatedPrimaryKeys() {
 		if (value.value === null) return [];
-		const { junctionRelation, relationPkField } = relation.value;
-		return value.value
-			.map((junctionItem) => {
-				if (
-					typeof junctionItem !== 'object' ||
-					junctionRelation === null ||
-					junctionRelation in junctionItem === false
-				)
-					return undefined;
-				const item = junctionItem[junctionRelation];
 
+		const { junctionField, relationPkField } = relation.value;
+
+		return value.value.reduce((acc: any[], item) => {
+			const relatedId = get(item, junctionField) as number | string | undefined;
+			const deepRelatedId = get(item, [junctionField, relationPkField]) as number | string | undefined;
+
+			if (relatedId !== undefined) acc.push(relatedId);
+			else if (deepRelatedId !== undefined) acc.push(deepRelatedId);
+			return acc;
+		}, []) as (string | number)[];
+	}
+
+	function deleteItem(deletingItem: Record<string, any>) {
+		if (value.value === null) return;
+		const { junctionField, relationPkField, junctionPkField } = relation.value;
+
+		const junctionId = get(deletingItem, junctionPkField) as number | string | undefined;
+		const relatedId = get(deletingItem, [junctionField, relationPkField]) as number | string | undefined;
+
+		console.log(junctionId, relatedId);
+
+		const newValue = value.value.filter((item) => {
+			if (junctionId !== undefined) {
 				if (typeof item === 'object') {
-					if (junctionRelation in item) return item[relationPkField];
+					return get(item, [junctionPkField]) !== junctionId;
 				} else {
-					return item;
+					return item !== junctionId;
 				}
-			})
-			.filter((i) => i);
-	}
-
-	function deleteItem(item: Record<string, any>, items: Record<string, any>[]) {
-		if (value.value === null) return;
-		const { junctionRelation, relationPkField } = relation.value;
-
-		const id = item[relationPkField] as number | string | undefined;
-
-		if (id !== undefined) return deleteItemWithId(id, items);
-		if (junctionRelation === null) return;
-
-		const newVal = value.value.filter((junctionItem) => {
-			if (typeof junctionItem !== 'object' || junctionRelation in junctionItem === false) return true;
-			return junctionItem[junctionRelation] !== item;
-		});
-
-		if (newVal.length === 0) emit(null);
-		else emit(newVal);
-	}
-
-	function deleteItemWithId(id: string | number, items: Record<string, any>[]) {
-		if (value.value === null) return;
-		const { junctionRelation, relationPkField, junctionPkField } = relation.value;
-
-		const junctionItem = items.find(
-			(item) =>
-				junctionRelation in item &&
-				relationPkField in item[junctionRelation] &&
-				item[junctionRelation][relationPkField] === id
-		);
-
-		if (junctionItem === undefined) return;
-
-		// If it is a newly selected Item
-		if (junctionPkField in junctionItem === false) {
-			const newVal = value.value.filter((item) => {
-				if (typeof item === 'object' && junctionRelation in item) {
-					const jItem = item[junctionRelation];
-					return typeof jItem === 'object' ? jItem[relationPkField] !== id : jItem !== id;
-				}
-				return true;
-			});
-
-			if (newVal.length === 0) emit(null);
-			else emit(newVal);
-			return;
-		}
-
-		// If it is an already existing item
-		const newVal = value.value.filter((item) => {
-			if (typeof item === 'object' && junctionPkField in item) {
-				return junctionItem[junctionPkField] !== item[junctionPkField];
-			} else {
-				return junctionItem[junctionPkField] !== item;
 			}
-		});
 
-		if (newVal.length === 0) emit(null);
-		else emit(newVal);
+			if (relatedId !== undefined) {
+				const itemRelatedId = get(item, [junctionField, relationPkField]);
+				if (['string', 'number'].includes(typeof itemRelatedId)) {
+					return itemRelatedId !== relatedId;
+				}
+
+				const junctionFieldId = get(item, [junctionField]);
+				if (['string', 'number'].includes(typeof junctionFieldId)) {
+					return junctionFieldId !== relatedId;
+				}
+			}
+
+			return isEqual(item, deletingItem) === false;
+		});
+		emit(newValue);
 	}
 
 	function getJunctionFromRelatedId(id: string | number, items: Record<string, any>[]) {
-		const { relationPkField, junctionRelation } = relation.value;
+		const { relationPkField, junctionField } = relation.value;
 
-		return (
-			items.find((item) => {
-				return (
-					typeof item === 'object' &&
-					junctionRelation in item &&
-					typeof item[junctionRelation] === 'object' &&
-					relationPkField in item[junctionRelation] &&
-					item[junctionRelation][relationPkField] === id
-				);
-			}) || null
-		);
+		return items.find((item) => get(item, [junctionField, relationPkField]) === id) || null;
 	}
 
 	return {
@@ -175,6 +133,5 @@ export default function useActions(
 		getRelatedPrimaryKeys,
 		getJunctionFromRelatedId,
 		deleteItem,
-		deleteItemWithId,
 	};
 }
diff --git a/app/src/interfaces/many-to-many/use-edit.ts b/app/src/interfaces/many-to-many/use-edit.ts
index 1f0bbeed50..bdf79148c0 100644
--- a/app/src/interfaces/many-to-many/use-edit.ts
+++ b/app/src/interfaces/many-to-many/use-edit.ts
@@ -7,8 +7,7 @@ export default function useEdit(
 	relation: Ref<RelationInfo>,
 	emit: (newVal: any[] | null) => void
 ) {
-	// Primary key of the item we're currently editing. If null, the edit modal should be
-	// closed
+	const editModalActive = ref(false);
 	const currentlyEditing = ref<string | number | null>(null);
 	const relatedPrimaryKey = ref<string | number | null>(null);
 
@@ -16,15 +15,16 @@ export default function useEdit(
 	const editsAtStart = ref<Record<string, any>>({});
 
 	function editItem(item: any) {
-		const { relationPkField, junctionRelation, junctionPkField } = relation.value;
+		const { relationPkField, junctionField, junctionPkField } = relation.value;
 
+		editModalActive.value = true;
 		editsAtStart.value = item;
-		relatedPrimaryKey.value = get(item, [junctionRelation, relationPkField], null);
 		currentlyEditing.value = get(item, [junctionPkField], null);
+		relatedPrimaryKey.value = get(item, [junctionField, relationPkField], null);
 	}
 
 	function stageEdits(edits: any) {
-		const { relationPkField, junctionRelation, junctionPkField } = relation.value;
+		const { relationPkField, junctionField, junctionPkField } = relation.value;
 
 		const newValue = (value.value || []).map((item) => {
 			if (currentlyEditing.value !== null) {
@@ -40,8 +40,8 @@ export default function useEdit(
 			if (relatedPrimaryKey.value != null) {
 				const id = relatedPrimaryKey.value;
 
-				if (get(item, [junctionRelation], null) === id) return edits;
-				if (get(item, [junctionRelation, relationPkField], null) === id) return edits;
+				if (get(item, [junctionField], null) === id) return edits;
+				if (get(item, [junctionField, relationPkField], null) === id) return edits;
 			}
 
 			if (isEqual(editsAtStart.value, item)) {
@@ -57,13 +57,16 @@ export default function useEdit(
 
 		if (newValue.length === 0) emit(null);
 		else emit(newValue);
+
+		cancelEdit();
 	}
 
 	function cancelEdit() {
+		editModalActive.value = false;
 		editsAtStart.value = {};
 		currentlyEditing.value = null;
 		relatedPrimaryKey.value = null;
 	}
 
-	return { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit, relatedPrimaryKey };
+	return { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit, relatedPrimaryKey, editModalActive };
 }
diff --git a/app/src/interfaces/many-to-many/use-preview.ts b/app/src/interfaces/many-to-many/use-preview.ts
index 9f88d23768..140a26046d 100644
--- a/app/src/interfaces/many-to-many/use-preview.ts
+++ b/app/src/interfaces/many-to-many/use-preview.ts
@@ -4,7 +4,7 @@ import { RelationInfo } from './use-relation';
 import { useFieldsStore } from '@/stores/';
 import { Field, Collection } from '@/types';
 import api from '@/api';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, get } from 'lodash';
 
 export default function usePreview(
 	value: Ref<(string | number | Record<string, any>)[] | null>,
@@ -25,14 +25,13 @@ export default function usePreview(
 	const error = ref(null);
 
 	function getRelatedFields(fields: string[]) {
-		const { junctionRelation } = relation.value;
+		const { junctionField } = relation.value;
 
-		return fields
-			.map((field) => {
-				const sections = field.split('.');
-				if (junctionRelation === sections[0] && sections.length === 2) return sections[1];
-			})
-			.filter((i) => i);
+		return fields.reduce((acc: string[], field) => {
+			const sections = field.split('.');
+			if (junctionField === sections[0] && sections.length === 2) acc.push(sections[1]);
+			return acc;
+		}, []);
 	}
 
 	function getJunctionFields() {
@@ -48,12 +47,17 @@ export default function usePreview(
 			}
 
 			loading.value = true;
-			const { junctionRelation, relationPkField, junctionPkField } = relation.value;
-			if (junctionRelation === null) return;
+			const { junctionField, relationPkField, junctionPkField, relationCollection } = relation.value;
+			if (junctionField === null) return;
 
 			// Load the junction items so we have access to the id's in the related collection
 			const junctionItems = await loadRelatedIds();
-			const relatedPrimaryKeys = junctionItems.map((junction) => junction[junctionRelation]);
+
+			const relatedPrimaryKeys = junctionItems.reduce((acc, junction) => {
+				const id = get(junction, junctionField);
+				if (id !== null) acc.push(id);
+				return acc;
+			}, []) as (string | number)[];
 
 			const filteredFields = [...(fields.value.length > 0 ? getRelatedFields(fields.value) : getDefaultFields())];
 
@@ -63,35 +67,36 @@ export default function usePreview(
 				let responseData: Record<string, any>[] = [];
 
 				if (relatedPrimaryKeys.length > 0) {
-					const endpoint = relation.value.relationCollection.startsWith('directus_')
-						? `/${relation.value.relationCollection.substring(9)}`
-						: `/items/${relation.value.relationCollection}`;
-
-					const response = await api.get(endpoint, {
-						params: {
-							fields: filteredFields,
-							[`filter[${relationPkField}][_in]`]: relatedPrimaryKeys.join(','),
-						},
-					});
-					responseData = response?.data.data as Record<string, any>[];
+					responseData = await request(
+						relationCollection,
+						filteredFields,
+						relationPkField,
+						relatedPrimaryKeys
+					);
 				}
 
+				console.log('responseData1', responseData);
 				// Insert the related items into the junction items
-				const existingItems = responseData.map((data) => {
-					const id = data[relationPkField];
-					const junction = junctionItems.find((junction) => junction[junctionRelation] === id);
-					if (junction === undefined) return;
+				responseData = responseData.map((data) => {
+					const id = get(data, relationPkField);
+					const junction = junctionItems.find((junction) => junction[junctionField] === id);
+
+					if (junction === undefined || id === undefined) return;
 
 					const newJunction = cloneDeep(junction);
-					newJunction[junctionRelation] = data;
+					newJunction[junctionField] = data;
 					return newJunction;
 				}) as Record<string, any>[];
 
 				const updatedItems = getUpdatedItems();
 				const newItems = getNewItems();
 
+				console.log('updatedItems', updatedItems);
+				console.log('newItems', newItems);
+				console.log('responseData2', responseData);
+
 				// Replace existing items with it's updated counterparts
-				const newVal = existingItems
+				responseData = responseData
 					.map((item) => {
 						const updatedItem = updatedItems.find(
 							(updated) => updated[junctionPkField] === item[junctionPkField]
@@ -100,7 +105,9 @@ export default function usePreview(
 						return item;
 					})
 					.concat(...newItems);
-				items.value = newVal;
+
+				console.log('responseData3', responseData);
+				items.value = responseData;
 			} catch (err) {
 				error.value = err;
 			} finally {
@@ -111,33 +118,24 @@ export default function usePreview(
 	);
 
 	async function loadRelatedIds() {
-		const { junctionPkField, junctionRelation, relationPkField } = relation.value;
+		const { junctionPkField, junctionField, relationPkField, junctionCollection } = relation.value;
 
 		try {
 			let data: Record<string, any>[] = [];
 			const primaryKeys = getPrimaryKeys();
+			console.log('PKS', primaryKeys);
 
 			if (primaryKeys.length > 0) {
 				const filteredFields = getJunctionFields();
 
 				if (filteredFields.includes(junctionPkField) === false) filteredFields.push(junctionPkField);
-				if (filteredFields.includes(junctionRelation) === false) filteredFields.push(junctionRelation);
+				if (filteredFields.includes(junctionField) === false) filteredFields.push(junctionField);
 
-				const endpoint = relation.value.junctionCollection.startsWith('directus_')
-					? `/${relation.value.junctionCollection.substring(9)}`
-					: `/items/${relation.value.junctionCollection}`;
-
-				const response = await api.get(endpoint, {
-					params: {
-						fields: filteredFields,
-						[`filter[${junctionPkField}][_in]`]: getPrimaryKeys().join(','),
-					},
-				});
-				data = response?.data.data as Record<string, any>[];
+				data = await request(junctionCollection, filteredFields, junctionPkField, primaryKeys);
 			}
 
 			const updatedItems = getUpdatedItems().map((item) => ({
-				[junctionRelation]: item[junctionRelation][relationPkField],
+				[junctionField]: item[junctionField][relationPkField],
 			}));
 
 			// Add all items that already had the id of it's related item
@@ -148,16 +146,35 @@ export default function usePreview(
 		return [];
 	}
 
+	async function request(
+		collection: string,
+		fields: string[] | null,
+		filteredField: string,
+		primaryKeys: (string | number)[] | null
+	) {
+		if (fields === null || fields.length === 0 || primaryKeys === null || primaryKeys.length === 0) return [];
+
+		const endpoint = collection.startsWith('directus_') ? `/${collection.substring(9)}` : `/items/${collection}`;
+
+		const response = await api.get(endpoint, {
+			params: {
+				fields: fields,
+				[`filter[${filteredField}][_in]`]: primaryKeys.join(','),
+			},
+		});
+		return response?.data.data as Record<string, any>[];
+	}
+
 	// Seeing we don't care about saving those tableHeaders, we can reset it whenever the
 	// fields prop changes (most likely when we're navigating to a different o2m context)
 	watch(
 		() => fields.value,
 		() => {
-			const { junctionRelation, junctionCollection } = relation.value;
+			const { junctionField, junctionCollection } = relation.value;
 
 			tableHeaders.value = (fields.value.length > 0
 				? fields.value
-				: getDefaultFields().map((field) => `${junctionRelation}.${field}`)
+				: getDefaultFields().map((field) => `${junctionField}.${field}`)
 			)
 				.map((fieldKey) => {
 					let field = fieldsStore.getField(junctionCollection, fieldKey);
diff --git a/app/src/interfaces/many-to-many/use-relation.ts b/app/src/interfaces/many-to-many/use-relation.ts
index 9b16c4b02d..c2f679aee2 100644
--- a/app/src/interfaces/many-to-many/use-relation.ts
+++ b/app/src/interfaces/many-to-many/use-relation.ts
@@ -6,7 +6,7 @@ import { Relation } from '@/types';
 export type RelationInfo = {
 	junctionPkField: string;
 	relationPkField: string;
-	junctionRelation: string;
+	junctionField: string;
 	junctionCollection: string;
 	relationCollection: string;
 };
@@ -38,11 +38,11 @@ export default function useRelation(collection: Ref<string>, field: Ref<string>)
 	const { primaryKeyField: junctionPrimaryKeyField } = useCollection(junctionCollection.value.collection);
 	const { primaryKeyField: relationPrimaryKeyField } = useCollection(relationCollection.value.collection);
 
-	const relationFields = computed(() => {
+	const relationInfo = computed(() => {
 		return {
 			junctionPkField: junctionPrimaryKeyField.value.field,
 			relationPkField: relationPrimaryKeyField.value.field,
-			junctionRelation: junction.value.junction_field as string,
+			junctionField: junction.value.junction_field as string,
 			junctionCollection: junctionCollection.value.collection,
 			relationCollection: relationCollection.value.collection,
 		} as RelationInfo;
@@ -53,7 +53,7 @@ export default function useRelation(collection: Ref<string>, field: Ref<string>)
 		junctionCollection,
 		relation,
 		relationCollection,
-		relationFields,
+		relationInfo,
 		junctionPrimaryKeyField,
 		relationPrimaryKeyField,
 	};
diff --git a/app/src/interfaces/many-to-many/use-selection.ts b/app/src/interfaces/many-to-many/use-selection.ts
index 1eff19c858..19f2330dd3 100644
--- a/app/src/interfaces/many-to-many/use-selection.ts
+++ b/app/src/interfaces/many-to-many/use-selection.ts
@@ -14,11 +14,13 @@ export default function useSelection(
 	const selectedPrimaryKeys = computed(() => {
 		if (items.value === null) return [];
 
-		const { relationPkField, junctionRelation } = relation.value;
+		const { relationPkField, junctionField } = relation.value;
 
-		const selectedKeys: (number | string)[] = items.value
-			.map((currentItem) => get(currentItem, [junctionRelation, relationPkField]))
-			.filter((i) => i);
+		const selectedKeys = items.value.reduce((acc, current) => {
+			const key = get(current, [junctionField, relationPkField]);
+			if (key !== undefined) acc.push(key);
+			return acc;
+		}, []) as (number | string)[];
 
 		return selectedKeys;
 	});
@@ -40,7 +42,12 @@ export default function useSelection(
 	});
 
 	function stageSelection(newSelection: (number | string)[]) {
-		const selection = newSelection.filter((item) => selectedPrimaryKeys.value.includes(item) === false);
+		const { junctionField } = relation.value;
+
+		const selection = newSelection.reduce((acc, item) => {
+			if (selectedPrimaryKeys.value.includes(item) === false) acc.push({ [junctionField]: item });
+			return acc;
+		}, new Array());
 
 		const newVal = [...selection, ...(value.value || [])];
 		if (newVal.length === 0) emit(null);

From 3f73664a647ca5cb28a59743627d37efd8a37d90 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 15 Oct 2020 12:44:38 +0200
Subject: [PATCH 3/5] update files and remove console logs

---
 app/src/interfaces/files/files.vue            | 69 ++++++++++---------
 .../interfaces/many-to-many/use-actions.ts    |  2 -
 .../interfaces/many-to-many/use-preview.ts    |  7 --
 3 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index afaf64dab9..816816208f 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -5,30 +5,25 @@
 	<div v-else class="files">
 		<v-table
 			inline
-			:items="displayItems"
+			:items="items"
 			:loading="loading"
 			:headers.sync="tableHeaders"
-			:item-key="relationFields.junctionPkField"
+			:item-key="relationInfo.junctionPkField"
 			:disabled="disabled"
 			@click:row="editItem"
 		>
 			<template #item.$thumbnail="{ item }">
 				<render-display
-					:value="item"
+					:value="get(item, relationInfo.junctionField)"
 					display="file"
-					:collection="relationFields.junctionCollection"
-					:field="relationFields.relationPkField"
+					:collection="relationInfo.junctionCollection"
+					:field="relationInfo.relationPkField"
 					type="file"
 				/>
 			</template>
 
 			<template #item-append="{ item }" v-if="!disabled">
-				<v-icon
-					name="close"
-					v-tooltip="$t('deselect')"
-					class="deselect"
-					@click.stop="deleteItem(item, items)"
-				/>
+				<v-icon name="close" v-tooltip="$t('deselect')" class="deselect" @click.stop="deleteItem(item)" />
 			</template>
 		</v-table>
 
@@ -41,12 +36,12 @@
 
 		<modal-item
 			v-if="!disabled"
-			:active="currentlyEditing !== null"
-			:collection="relationFields.junctionCollection"
+			:active="editModalActive"
+			:collection="relationInfo.junctionCollection"
 			:primary-key="currentlyEditing || '+'"
 			:edits="editsAtStart"
-			:related-primary-key="relationFields.relationPkField || '+'"
-			:junction-field="relationFields.junctionRelation"
+			:related-primary-key="relatedPrimaryKey || '+'"
+			:junction-field="relationInfo.junctionField"
 			@input="stageEdits"
 			@update:active="cancelEdit"
 		/>
@@ -54,7 +49,7 @@
 		<modal-collection
 			v-if="!disabled"
 			:active.sync="selectModalActive"
-			:collection="relation.one_collection"
+			:collection="relationInfo.relationCollection"
 			:selection="[]"
 			:filters="selectionFilters"
 			@input="stageSelection"
@@ -114,7 +109,7 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { collection, field, value, primaryKey } = toRefs(props);
 
-		const { junction, junctionCollection, relation, relationCollection, relationFields } = useRelation(
+		const { junction, junctionCollection, relation, relationCollection, relationInfo } = useRelation(
 			collection,
 			field
 		);
@@ -131,9 +126,12 @@ export default defineComponent({
 			getNewSelectedItems,
 			getJunctionItem,
 			getJunctionFromRelatedId,
-		} = useActions(value, relationFields, emitter);
+		} = useActions(value, relationInfo, emitter);
 
-		const fields = ref(['id', 'type', 'title']);
+		const fields = computed(() => {
+			const { junctionField } = relationInfo.value;
+			return ['id', 'type', 'title'].map((key) => `${junctionField}.${key}`);
+		});
 
 		const tableHeaders = ref<TableHeader[]>([
 			{
@@ -146,33 +144,37 @@ export default defineComponent({
 			{
 				text: i18n.t('title'),
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				value: 'title',
+				value: relationInfo.value.junctionField + '.' + 'title',
 				align: 'left',
 				sortable: true,
 				width: 250,
 			},
 		]);
 
-		const { loading, displayItems, error, items } = usePreview(
+		const { loading, error, items } = usePreview(
 			value,
 			fields,
-			relationFields,
+			relationInfo,
 			getNewSelectedItems,
 			getUpdatedItems,
 			getNewItems,
 			getPrimaryKeys
 		);
 
-		const { cancelEdit, stageEdits, editsAtStart, editItem, currentlyEditing } = useEdit(
-			value,
-			relationFields,
-			emitter
-		);
+		const {
+			cancelEdit,
+			stageEdits,
+			editsAtStart,
+			editItem,
+			currentlyEditing,
+			editModalActive,
+			relatedPrimaryKey,
+		} = useEdit(value, relationInfo, emitter);
 
 		const { stageSelection, selectModalActive, selectionFilters } = useSelection(
 			value,
-			displayItems,
-			relationFields,
+			items,
+			relationInfo,
 			emitter
 		);
 
@@ -184,7 +186,6 @@ export default defineComponent({
 			tableHeaders,
 			junctionCollection,
 			loading,
-			displayItems,
 			error,
 			currentlyEditing,
 			cancelEdit,
@@ -198,8 +199,10 @@ export default defineComponent({
 			items,
 			get,
 			onUpload,
-			relationFields,
+			relationInfo,
 			editItem,
+			editModalActive,
+			relatedPrimaryKey,
 		};
 
 		function useUpload() {
@@ -212,11 +215,11 @@ export default defineComponent({
 
 				if (files.length === 0) return;
 
-				const { junctionRelation } = relationFields.value;
+				const { junctionField } = relationInfo.value;
 				const file = files[0];
 
 				const fileAsJunctionRow = {
-					[junctionRelation]: {
+					[junctionField]: {
 						id: file.id,
 						title: file.title,
 						type: file.type,
diff --git a/app/src/interfaces/many-to-many/use-actions.ts b/app/src/interfaces/many-to-many/use-actions.ts
index c64d2644a9..69dc2285ab 100644
--- a/app/src/interfaces/many-to-many/use-actions.ts
+++ b/app/src/interfaces/many-to-many/use-actions.ts
@@ -89,8 +89,6 @@ export default function useActions(
 		const junctionId = get(deletingItem, junctionPkField) as number | string | undefined;
 		const relatedId = get(deletingItem, [junctionField, relationPkField]) as number | string | undefined;
 
-		console.log(junctionId, relatedId);
-
 		const newValue = value.value.filter((item) => {
 			if (junctionId !== undefined) {
 				if (typeof item === 'object') {
diff --git a/app/src/interfaces/many-to-many/use-preview.ts b/app/src/interfaces/many-to-many/use-preview.ts
index 140a26046d..7691672fd4 100644
--- a/app/src/interfaces/many-to-many/use-preview.ts
+++ b/app/src/interfaces/many-to-many/use-preview.ts
@@ -75,7 +75,6 @@ export default function usePreview(
 					);
 				}
 
-				console.log('responseData1', responseData);
 				// Insert the related items into the junction items
 				responseData = responseData.map((data) => {
 					const id = get(data, relationPkField);
@@ -91,10 +90,6 @@ export default function usePreview(
 				const updatedItems = getUpdatedItems();
 				const newItems = getNewItems();
 
-				console.log('updatedItems', updatedItems);
-				console.log('newItems', newItems);
-				console.log('responseData2', responseData);
-
 				// Replace existing items with it's updated counterparts
 				responseData = responseData
 					.map((item) => {
@@ -106,7 +101,6 @@ export default function usePreview(
 					})
 					.concat(...newItems);
 
-				console.log('responseData3', responseData);
 				items.value = responseData;
 			} catch (err) {
 				error.value = err;
@@ -123,7 +117,6 @@ export default function usePreview(
 		try {
 			let data: Record<string, any>[] = [];
 			const primaryKeys = getPrimaryKeys();
-			console.log('PKS', primaryKeys);
 
 			if (primaryKeys.length > 0) {
 				const filteredFields = getJunctionFields();

From 5da50c877246841d98f735c40f34b65d2ca48fd4 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Thu, 15 Oct 2020 13:44:21 +0200
Subject: [PATCH 4/5] add comments

---
 app/src/interfaces/many-to-many/use-actions.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/src/interfaces/many-to-many/use-actions.ts b/app/src/interfaces/many-to-many/use-actions.ts
index 69dc2285ab..9e31cd7b1a 100644
--- a/app/src/interfaces/many-to-many/use-actions.ts
+++ b/app/src/interfaces/many-to-many/use-actions.ts
@@ -7,6 +7,7 @@ export default function useActions(
 	relation: Ref<RelationInfo>,
 	emit: (newValue: any[] | null) => void
 ) {
+	// Returns the junction item with the given Id.
 	function getJunctionItem(id: string | number) {
 		const { junctionPkField } = relation.value;
 		if (value.value === null) return null;
@@ -18,6 +19,7 @@ export default function useActions(
 		);
 	}
 
+	// Returns all items that have no junction item yet, but an related item does exist.
 	function getNewSelectedItems() {
 		const { junctionField } = relation.value;
 
@@ -28,6 +30,7 @@ export default function useActions(
 		) as Record<string, any>[];
 	}
 
+	// Returns all items that do not have an existing junction and related item.
 	function getNewItems() {
 		const { junctionField, relationPkField } = relation.value;
 
@@ -39,6 +42,7 @@ export default function useActions(
 		) as Record<string, any>[];
 	}
 
+	// Returns a list of items which related or junction item does exist but had changes.
 	function getUpdatedItems() {
 		const { junctionField, relationPkField } = relation.value;
 
@@ -47,12 +51,14 @@ export default function useActions(
 		return value.value.filter((item) => has(item, [junctionField, relationPkField])) as Record<string, any>[];
 	}
 
+	// Returns only items that do not have any changes what so ever.
 	function getExistingItems() {
 		if (value.value === null) return [];
 
 		return value.value.filter((item) => ['string', 'number'].includes(typeof item));
 	}
 
+	// Get a list of junction item ids.
 	function getPrimaryKeys(): (string | number)[] {
 		const { junctionPkField } = relation.value;
 
@@ -67,6 +73,7 @@ export default function useActions(
 		}, []) as (string | number)[];
 	}
 
+	// Get a list of ids of the related items.
 	function getRelatedPrimaryKeys() {
 		if (value.value === null) return [];
 

From d29fd977b192dbdb56c2683a3b291b1c1c4d8466 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 15 Oct 2020 18:50:47 -0400
Subject: [PATCH 5/5] Remove stray debugging thingy

---
 app/src/interfaces/many-to-many/many-to-many.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/src/interfaces/many-to-many/many-to-many.vue b/app/src/interfaces/many-to-many/many-to-many.vue
index 98111cefdd..76f944c5a4 100644
--- a/app/src/interfaces/many-to-many/many-to-many.vue
+++ b/app/src/interfaces/many-to-many/many-to-many.vue
@@ -38,8 +38,6 @@
 			</v-button>
 		</div>
 
-		<pre>{{ JSON.stringify(value, null, 4) }}</pre>
-
 		<modal-item
 			v-if="!disabled"
 			:active="editModalActive"