Use local $new flag instead of primary key existence

Fixes #406

app/src/interfaces/many-to-many/is-new.ts

@@ -1,25 +0,0 @@
-import { Ref } from '@vue/composition-api';
-import { Relation } from '@/types/';
-import { Field } from '@/types';
-
-type IsNewContext = {
-	relationCurrentToJunction: Ref<Relation | undefined>;
-	junctionCollectionPrimaryKeyField: Ref<Field>;
-	relatedCollectionPrimaryKeyField: Ref<Field>;
-};
-
-export default function isNew(
-	item: any,
-	{ relationCurrentToJunction, junctionCollectionPrimaryKeyField, relatedCollectionPrimaryKeyField }: IsNewContext
-) {
-	if (!relationCurrentToJunction.value) return;
-	if (!relationCurrentToJunction.value.junction_field) return;
-
-	const junctionPrimaryKey = junctionCollectionPrimaryKeyField.value.field;
-	const junctionField = relationCurrentToJunction.value.junction_field;
-	const relatedPrimaryKey = relatedCollectionPrimaryKeyField.value.field;
-	const hasPrimaryKey = !!item[junctionPrimaryKey];
-	const hasRelatedPrimaryKey = !!item[junctionField]?.[relatedPrimaryKey];
-
-	return hasPrimaryKey === false && hasRelatedPrimaryKey === false;
-}

app/src/interfaces/many-to-many/many-to-many.vue

@@ -16,7 +16,7 @@
 			<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"

app/src/interfaces/many-to-many/use-edit.ts

@@ -1,6 +1,5 @@
 import { ref, Ref } from '@vue/composition-api';
 import { Field, Relation } from '@/types';
-import isNew from './is-new';
 import { set } from 'lodash';
 
 type EditParam = {
@@ -28,6 +27,7 @@ export default function useEdit({
 	const junctionRowPrimaryKey = ref<number | string>('+');
 	const relatedRowPrimaryKey = ref<number | string>('+');
 	const initialValues = ref<any>(null);
+	const isNew = ref(false);
 
 	return {
 		showDetailModal,
@@ -47,6 +47,7 @@ export default function useEdit({
 		junctionRowPrimaryKey.value = '+';
 		relatedRowPrimaryKey.value = '+';
 		initialValues.value = null;
+		isNew.value = true;
 	}
 
 	// The row here is the item in previewItems that's passed to the table
@@ -54,13 +55,9 @@ export default function useEdit({
 		if (!relationCurrentToJunction.value) return;
 		if (!relationCurrentToJunction.value.junction_field) return;
 
-		if (
-			isNew(item, {
-				relationCurrentToJunction,
-				junctionCollectionPrimaryKeyField,
-				relatedCollectionPrimaryKeyField,
-			})
-		) {
+		if (item.$new === true) isNew.value = true;
+
+		if (isNew.value === true) {
 			editsAtStart.value = item;
 			junctionRowPrimaryKey.value = '+';
 			showDetailModal.value = true;
@@ -81,7 +78,7 @@ export default function useEdit({
 
 		junctionRowPrimaryKey.value = item[junctionPrimaryKey] || '+';
 		relatedRowPrimaryKey.value = item[junctionField]?.[relatedPrimaryKey] || '+';
-		editsAtStart.value = item['$stagedEdits'] || null;
+		editsAtStart.value = item.$stagedEdits || null;
 		showDetailModal.value = true;
 	}
 
@@ -99,6 +96,10 @@ export default function useEdit({
 		const junctionField = relationCurrentToJunction.value.junction_field;
 		const relatedPrimaryKey = relatedCollectionPrimaryKeyField.value.field;
 
+		if (isNew.value) {
+			edits.$new = true;
+		}
+
 		const currentValue = [...(value.value || [])];
 
 		// If there weren't any previously made edits, it's safe to assume this change value
@@ -134,6 +135,7 @@ export default function useEdit({
 			showDetailModal.value = true;
 			junctionRowPrimaryKey.value = '+';
 			relatedRowPrimaryKey.value = '+';
+			isNew.value = false;
 		}
 	}
 }

app/src/interfaces/many-to-many/use-preview.ts

@@ -3,7 +3,6 @@ import api from '@/api';
 import { Field, Relation } from '@/types';
 import { merge } from 'lodash';
 import adjustFieldsForDisplay from '@/utils/adjust-fields-for-displays';
-import isNew from './is-new';
 
 /**
  * Controls what preview is shown in the table. Has some black magic logic to ensure we're able
@@ -58,6 +57,7 @@ export default function usePreview({
 			);
 		} catch (err) {
 			error.value = err;
+			throw err;
 		} finally {
 			loading.value = false;
 		}
@@ -159,15 +159,9 @@ export default function usePreview({
 		 * for me for now to worry about..
 		 */
 
-		return (value.value || [])
-			.filter((stagedEdit: any) => !stagedEdit['$delete'])
-			.filter((item) =>
-				isNew(item, {
-					relationCurrentToJunction,
-					junctionCollectionPrimaryKeyField,
-					relatedCollectionPrimaryKeyField,
-				})
-			);
+		const junctionPrimaryKey = junctionCollectionPrimaryKeyField.value.field;
+
+		return (value.value || []).filter((stagedEdit: any) => !stagedEdit.$delete && !stagedEdit[junctionPrimaryKey]);
 	}
 
 	/**
@@ -187,14 +181,9 @@ export default function usePreview({
 		const junctionField = relationCurrentToJunction.value.junction_field;
 		const relatedPrimaryKey = relatedCollectionPrimaryKeyField.value.field;
 
-		const newlySelectedStagedItems = (value.value || [])
-			.filter((stagedEdit: any) => !stagedEdit['$delete'])
-			.filter((stagedEdit: any) => {
-				return (
-					stagedEdit[junctionPrimaryKey] === undefined &&
-					stagedEdit[junctionField]?.[relatedPrimaryKey] !== undefined
-				);
-			});
+		const newlySelectedStagedItems = (value.value || []).filter(
+			(stagedEdit: any) => !stagedEdit.$delete && !stagedEdit[junctionPrimaryKey] && !stagedEdit.$new
+		);
 
 		const newlySelectedRelatedKeys = newlySelectedStagedItems.map(
 			(stagedEdit: any) => stagedEdit[junctionField][relatedPrimaryKey]