Render existing items inline

app/src/components/v-field-template/v-field-template.vue

@@ -1,7 +1,7 @@
 <template>
 	<v-menu attached v-model="menuActive">
 		<template #activator="{ toggle }">
-			<v-input>
+			<v-input :disabled="disabled">
 				<template #input>
 					<span
 						ref="contentEl"
@@ -16,12 +16,12 @@
 				</template>
 
 				<template #append>
-					<v-icon name="add_box" outline @click="toggle" />
+					<v-icon name="add_box" outline @click="toggle" :disabled="disabled" />
 				</template>
 			</v-input>
 		</template>
 
-		<v-list>
+		<v-list v-if="!disabled">
 			<field-list-item @add="addField" v-for="field in tree" :key="field.field" :field="field" :depth="depth" />
 		</v-list>
 	</v-menu>

app/src/displays/color/color.vue

@@ -50,7 +50,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .color-dot {
-	display: flex;
+	display: inline-flex;
 	align-items: center;
 
 	.dot {

app/src/interfaces/m2a-builder/m2a-builder.vue

@@ -1,25 +1,38 @@
 <template>
 	<div class="m2a-builder">
-		{{ value }}
+		<div class="m2a-row" v-for="(item, index) of previewValues" :key="index">
+			<span class="collection">{{ collections[item[anyRelation.one_collection_field]].name }}:</span>
+			<render-template
+				:collection="item[anyRelation.one_collection_field]"
+				:template="templates[item[anyRelation.one_collection_field]]"
+				:item="item[anyRelation.many_field]"
+			/>
+			<div class="spacer" />
+			<v-icon class="launch-icon" name="launch" />
+		</div>
 
-		<v-menu attached>
-			<template #activator="{ toggle }">
-				<v-button dashed outlined full-width @click="toggle">
-					{{ $t('add_existing') }}
-				</v-button>
-			</template>
+		<div class="buttons">
+			<v-menu attached>
+				<template #activator="{ toggle }">
+					<v-button dashed outlined full-width @click="toggle">
+						{{ $t('add_existing') }}
+					</v-button>
+				</template>
 
-			<v-list>
-				<v-list-item
-					@click="selectingFrom = collection.collection"
-					v-for="collection of collections"
-					:key="collection.collection"
-				>
-					<v-list-item-icon><v-icon :name="collection.icon" /></v-list-item-icon>
-					<v-list-item-text>{{ $t('from_collection', { collection: collection.name }) }}</v-list-item-text>
-				</v-list-item>
-			</v-list>
-		</v-menu>
+				<v-list>
+					<v-list-item
+						@click="selectingFrom = collection.collection"
+						v-for="collection of collections"
+						:key="collection.collection"
+					>
+						<v-list-item-icon><v-icon :name="collection.icon" /></v-list-item-icon>
+						<v-list-item-text>
+							{{ $t('from_collection', { collection: collection.name }) }}
+						</v-list-item-text>
+					</v-list-item>
+				</v-list>
+			</v-menu>
+		</div>
 
 		<drawer-collection
 			multiple
@@ -36,11 +49,12 @@
 
 <script lang="ts">
 import { defineComponent, computed, PropType, ref, watch } from '@vue/composition-api';
-import { useRelationsStore, useCollectionsStore } from '../../stores';
+import { useRelationsStore, useCollectionsStore, useFieldsStore } from '../../stores';
 import { Relation, Collection } from '../../types/';
 import DrawerCollection from '../../views/private/components/drawer-collection/';
 import api from '../../api';
 import { unexpectedError } from '../../utils/unexpected-error';
+import { getFieldsFromTemplate } from '../../utils/get-fields-from-template';
 
 export default defineComponent({
 	components: { DrawerCollection },
@@ -68,16 +82,17 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const relationsStore = useRelationsStore();
+		const fieldsStore = useFieldsStore();
 		const collectionsStore = useCollectionsStore();
 
 		const { o2mRelation, anyRelation } = useRelations();
-		const { collections } = useCollections();
-		const { values, fetchValues } = useValues();
+		const { collections, templates } = useCollections();
+		const { previewValues, fetchValues } = useValues();
 		const { selectingFrom, stageSelection } = useSelection();
 
 		watch(props, fetchValues, { immediate: true });
 
-		return { collections, selectingFrom, stageSelection };
+		return { collections, selectingFrom, stageSelection, previewValues, templates, o2mRelation, anyRelation };
 
 		function useRelations() {
 			const relationsForField = computed<Relation[]>(() => {
@@ -97,35 +112,67 @@ export default defineComponent({
 		function useCollections() {
 			const allowedCollections = computed(() => anyRelation.value.one_allowed_collections!);
 
-			const collections = computed<Collection[]>(
-				() =>
-					allowedCollections.value
-						.map((collection: string) => collectionsStore.getCollection(collection))
-						.filter((c) => c) as Collection[]
-			);
+			const collections = computed<Record<string, Collection>>(() => {
+				const collections: Record<string, Collection> = {};
 
-			return { collections };
+				const collectionInfo = allowedCollections.value
+					.map((collection: string) => collectionsStore.getCollection(collection))
+					.filter((c) => c) as Collection[];
+
+				for (const collection of collectionInfo) {
+					collections[collection.collection] = collection;
+				}
+
+				return collections;
+			});
+
+			const templates = computed(() => {
+				const templates: Record<string, string> = {};
+
+				for (const collection of Object.values(collections.value)) {
+					const primaryKeyField = fieldsStore.getPrimaryKeyFieldForCollection(collection.collection);
+					templates[collection.collection] =
+						collection.meta?.display_template || `{{${primaryKeyField.field}}}`;
+				}
+
+				return templates;
+			});
+
+			return { collections, templates };
 		}
 
 		function useValues() {
 			const loading = ref(false);
-			const values = ref<any[]>([]);
+			const previewValues = ref<any[]>([]);
 
-			return { values, fetchValues };
+			return { previewValues, fetchValues };
 
 			async function fetchValues() {
 				loading.value = true;
 
+				const fields: string[] = [o2mRelation.value.many_primary, anyRelation.value.one_collection_field!];
+
+				for (const collection of Object.values(collections.value)) {
+					const primaryKeyField = fieldsStore.getPrimaryKeyFieldForCollection(collection.collection);
+					const fieldsInCollection = getFieldsFromTemplate(templates.value[collection.collection]);
+					fields.push(
+						...fieldsInCollection.map(
+							(field: string) => `${anyRelation.value.many_field}:${collection.collection}.${field}`
+						)
+					);
+				}
+
 				try {
 					const response = await api.get(`/items/${o2mRelation.value.many_collection}`, {
 						params: {
 							filter: {
 								[o2mRelation.value.many_field]: props.primaryKey,
 							},
+							fields,
 						},
 					});
 
-					console.log(response.data.data);
+					previewValues.value = response.data.data;
 				} catch (err) {
 					unexpectedError(err);
 				} finally {
@@ -146,7 +193,7 @@ export default defineComponent({
 
 				const selectionAsJunctionRows = selection.map((key) => {
 					return {
-						[one_collection_field]: selectingFrom.value,
+						[one_collection_field!]: selectingFrom.value,
 						[many_field]: key,
 					};
 				});
@@ -162,4 +209,34 @@ export default defineComponent({
 .m2a-builder {
 	background-color: white;
 }
+
+.m2a-row {
+	display: flex;
+	align-items: center;
+	padding: 12px;
+	background-color: var(--background-subdued);
+	border: 2px solid var(--border-subdued);
+	border-radius: var(--border-radius);
+
+	& + .m2a-row {
+		margin-top: 8px;
+	}
+
+	.collection {
+		margin-right: 1ch;
+		color: var(--primary);
+	}
+}
+
+.buttons {
+	margin-top: 8px;
+}
+
+.spacer {
+	flex-grow: 1;
+}
+
+.launch-icon {
+	color: var(--foreground-subdued);
+}
 </style>