Start on m2a-builder interface

api/src/services/fields.ts

@@ -104,7 +104,7 @@ export class FieldsService {
 			aliasFields.push(...systemFieldRows);
 		}
 
-		const aliasTypes = ['alias', 'o2m', 'm2m', 'files', 'files', 'translations'];
+		const aliasTypes = ['alias', 'o2m', 'm2m', 'm2a', 'files', 'files', 'translations'];
 
 		aliasFields = aliasFields.filter((field) => {
 			const specials = toArray(field.special);

app/src/interfaces/m2a-builder/index.ts

@@ -0,0 +1,13 @@
+import { defineInterface } from '../define';
+import InterfaceManyToAny from './m2a-builder.vue';
+
+export default defineInterface(({ i18n }) => ({
+	id: 'm2a-builder',
+	name: i18n.t('m2a_builder'),
+	icon: 'note_add',
+	component: InterfaceManyToAny,
+	relationship: 'm2a',
+	types: ['alias'],
+	localTypes: ['m2a'],
+	options: [],
+}));

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

@@ -0,0 +1,84 @@
+<template>
+	<div class="m2a-builder">
+		<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 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>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, PropType } from '@vue/composition-api';
+import { useRelationsStore, useCollectionsStore } from '../../stores';
+import { Relation, Collection } from '../../types/';
+
+export default defineComponent({
+	props: {
+		collection: {
+			type: String,
+			required: true,
+		},
+		field: {
+			type: String,
+			required: true,
+		},
+		value: {
+			type: Array as PropType<any[]>,
+			default: null,
+		},
+	},
+	setup(props) {
+		const relationsStore = useRelationsStore();
+		const collectionsStore = useCollectionsStore();
+
+		const { o2mRelation, anyRelation } = useRelations();
+		const { collections } = useCollections();
+
+		return { collections };
+
+		function useRelations() {
+			const relationsForField = computed<Relation[]>(() => {
+				return relationsStore.getRelationsForField(props.collection, props.field);
+			});
+
+			const o2mRelation = computed(
+				() => relationsForField.value.find((relation) => relation.one_collection !== null)!
+			);
+			const anyRelation = computed(
+				() => relationsForField.value.find((relation) => relation.one_collection === null)!
+			);
+
+			return { relationsForField, o2mRelation, anyRelation };
+		}
+
+		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[]
+			);
+
+			return { collections };
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.m2a-builder {
+	background-color: red;
+}
+</style>

app/src/interfaces/types.ts

@@ -11,7 +11,7 @@ export type InterfaceConfig = {
 	options: DeepPartial<Field>[] | Component;
 	types: typeof types[number][];
 	localTypes?: readonly typeof localTypes[number][];
-	relationship?: null | 'm2o' | 'o2m' | 'm2m' | 'translations';
+	relationship?: null | 'm2o' | 'o2m' | 'm2m' | 'm2a' | 'translations';
 	hideLabel?: boolean;
 	hideLoader?: boolean;
 	system?: boolean;

app/src/lang/en-US/index.json

@@ -517,6 +517,8 @@
 	"display_not_found": "Display \"{display}\" not found.",
 	"reset_display": "Reset Display",
 
+	"m2a_builder": "Builder (M2A)",
+
 	"item_count": "No Items | One Item | {count} Items",
 	"no_items_copy": "There are no items in this collection yet.",
 
@@ -973,6 +975,7 @@
   "activity_feed": "Activity Feed",
   "add_field_filter": "Add a field filter",
   "add_new": "Add New",
+  "from_collection": "From “{collection}” Collection",
   "create_new": "Create New",
   "additional_info": "Additional Info",
   "admin_email": "Admin Email",

app/src/stores/relations.ts

@@ -22,7 +22,7 @@ export const useRelationsStore = createStore({
 				return relation.many_collection === collection || relation.one_collection === collection;
 			});
 		},
-		getRelationsForField(collection: string, field: string) {
+		getRelationsForField(collection: string, field: string): Relation[] {
 			const fieldsStore = useFieldsStore();
 			const fieldInfo = fieldsStore.getField(collection, field);
 

app/src/types/fields.ts

@@ -27,7 +27,17 @@ export const types = [
 	'unknown',
 ] as const;
 
-export const localTypes = ['standard', 'file', 'files', 'm2o', 'o2m', 'm2m', 'presentation', 'translations'] as const;
+export const localTypes = [
+	'standard',
+	'file',
+	'files',
+	'm2o',
+	'o2m',
+	'm2m',
+	'm2a',
+	'presentation',
+	'translations',
+] as const;
 
 export type FieldSchema = {
 	/** @todo import this from @directus/schema when that's launched */