From d421cc79ae28b169f6677756e9757892241e49bc Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 22 Apr 2021 17:04:00 -0400
Subject: [PATCH] Fallback to related collection DT in m2m

---
 .../interfaces/many-to-many/many-to-many.vue  | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 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 09c6aa4586..73c06df0bb 100644
--- a/app/src/interfaces/many-to-many/many-to-many.vue
+++ b/app/src/interfaces/many-to-many/many-to-many.vue
@@ -111,9 +111,28 @@ export default defineComponent({
 
 		const { junction, junctionCollection, relation, relationCollection, relationInfo } = useRelation(collection, field);
 
-		const templateWithDefaults = computed(
-			() => props.template || junctionCollection.value.meta?.display_template || `{{${junction.value.many_primary}}}`
-		);
+		const templateWithDefaults = computed(() => {
+			if (props.template) return props.template;
+			if (junctionCollection.value.meta?.display_template) return junctionCollection.value.meta.display_template;
+
+			let relatedDisplayTemplate = relationCollection.value.meta?.display_template;
+			if (relatedDisplayTemplate) {
+				const regex = /({{.*?}})/g;
+				const parts = relatedDisplayTemplate.split(regex).filter((p) => p);
+
+				for (const part of parts) {
+					if (part.startsWith('{{') === false) continue;
+					const key = part.replace(/{{/g, '').replace(/}}/g, '').trim();
+					const newPart = `{{${relation.value.many_field}.${key}}}`;
+
+					relatedDisplayTemplate = relatedDisplayTemplate.replace(part, newPart);
+				}
+
+				return relatedDisplayTemplate;
+			}
+
+			return `{{${relation.value.many_field}.${relationInfo.value.relationPkField}}}`;
+		});
 
 		const fields = computed(() =>
 			adjustFieldsForDisplays(getFieldsFromTemplate(templateWithDefaults.value), junctionCollection.value.collection)
@@ -125,7 +144,7 @@ export default defineComponent({
 			emitter
 		);
 
-		const { tableHeaders, items, loading, error } = usePreview(
+		const { tableHeaders, items, loading } = usePreview(
 			value,
 			fields,
 			relationInfo,
@@ -184,7 +203,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-
 .v-list {
 	--v-list-padding: 0 0 4px;
 }