add component to m2m interface

app/src/interfaces/many-to-many/index.ts

@@ -1,5 +1,6 @@
 import { defineInterface } from '../define';
 import InterfaceManyToMany from './many-to-many.vue';
+import Options from './options.vue';
 
 export default defineInterface(({ i18n }) => ({
 	id: 'many-to-many',
@@ -9,19 +10,6 @@ export default defineInterface(({ i18n }) => ({
 	component: InterfaceManyToMany,
 	relationship: 'm2m',
 	types: ['alias'],
-	options: [
-		{
-			field: 'fields',
-			type: 'json',
-			name: i18n.tc('field', 0),
-			meta: {
-				interface: 'tags',
-				width: 'full',
-				options: {
-					placeholder: i18n.t('readable_fields_copy'),
-				},
-			},
-		},
-	],
+	options: Options,
 	recommendedDisplays: ['related-values'],
 }));

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

@@ -0,0 +1,66 @@
+<template>
+	<v-notice type="warning" v-if="collection == null">
+		{{ $t('interfaces.one-to-many.no_collection') }}
+	</v-notice>
+	<div v-else>
+		<p class="type-label">{{ $t('select_fields') }}</p>
+		<v-field-select :collection="collection" v-model="fields"></v-field-select>
+	</div>
+</template>
+
+<script lang="ts">
+import { Field } from '@/types';
+import { defineComponent, PropType, computed } from '@vue/composition-api';
+import { useRelationsStore } from '@/stores/';
+
+export default defineComponent({
+	props: {
+		fieldData: {
+			type: Object as PropType<Field>,
+			default: null,
+		},
+		value: {
+			type: Object as PropType<any>,
+			default: null,
+		},
+	},
+	setup(props, { emit }) {
+		const relationsStore = useRelationsStore();
+
+		const fields = computed({
+			get() {
+				return props.value?.fields;
+			},
+			set(newTemplate: string) {
+				emit('input', {
+					...(props.value || {}),
+					fields: newTemplate,
+				});
+			},
+		});
+
+		const collection = computed(() => {
+			if (props.fieldData.field == null || props.fieldData.meta?.collection == null) return null;
+			const junction = relationsStore.getRelationsForField(
+				props.fieldData.meta.collection,
+				props.fieldData.field
+			)?.[0];
+
+			const relationData = relationsStore.getRelationsForField(
+				junction.many_collection,
+				junction.junction_field
+			)?.[0];
+
+			return relationData.one_collection;
+		});
+
+		return { fields, collection };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.type-label {
+	margin-bottom: 4px;
+}
+</style>

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

@@ -131,7 +131,8 @@
 		"one-to-many": {
 			"one-to-many": "One to Many",
 			"description": "Select multiple related items",
-			"readable_fields_copy": "Select the fields that the user can view"
+			"readable_fields_copy": "Select the fields that the user can view",
+			"no_collection": "The collection could not be found"
 		},
 		"radio-buttons": {
 			"radio-buttons": "Radio Buttons",