improve related values display

app/src/modules/settings/routes/data-model/field-detail/components/display.vue

@@ -22,13 +22,22 @@
 				v-model="fieldData.meta.display_options"
 			/>
 
-			<component v-model="fieldData" :is="`display-options-${selectedDisplay.id}`" v-else />
+			<component
+				v-model="fieldData.meta.display_options"
+				:collection="collection"
+				:field-data="fieldData"
+				:relations="relations"
+				:new-fields="newFields"
+				:new-collections="newCollections"
+				:is="`display-options-${selectedDisplay.id}`"
+				v-else
+			/>
 		</template>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed, toRefs } from '@vue/composition-api';
 import { getDisplays } from '@/displays';
 import { getInterfaces } from '@/interfaces';
 import { FancySelectItem } from '@/components/v-fancy-select/types';
@@ -42,6 +51,10 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+		collection: {
+			type: String,
+			required: true,
+		},
 	},
 	setup(props, { emit }) {
 		const displays = getDisplays();
@@ -95,7 +108,9 @@ export default defineComponent({
 			return displays.value.find((display) => display.id === state.fieldData.meta.display);
 		});
 
-		return { fieldData: state.fieldData, selectItems, selectedDisplay };
+		const { fieldData, relations, newCollections, newFields } = toRefs(state);
+
+		return { fieldData, selectItems, selectedDisplay, relations, newCollections, newFields };
 	},
 });
 </script>

app/src/modules/settings/routes/data-model/field-detail/store.ts

@@ -12,7 +12,7 @@ import { getInterfaces } from '@/interfaces';
 import { getDisplays } from '@/displays';
 import { InterfaceConfig } from '@/interfaces/types';
 import { DisplayConfig } from '@/displays/types';
-import { Field } from '@/types';
+import { Field, localTypes } from '@/types';
 import Vue from 'vue';
 
 const fieldsStore = useFieldsStore();
@@ -25,11 +25,7 @@ let availableDisplays: ComputedRef<DisplayConfig[]>;
 
 export { state, availableInterfaces, availableDisplays, initLocalStore, clearLocalStore };
 
-function initLocalStore(
-	collection: string,
-	field: string,
-	type: 'standard' | 'file' | 'files' | 'm2o' | 'o2m' | 'm2m' | 'presentation' | 'translations'
-) {
+function initLocalStore(collection: string, field: string, type: typeof localTypes[number]) {
 	const interfaces = getInterfaces();
 	const displays = getDisplays();
 
@@ -91,8 +87,8 @@ function initLocalStore(
 	availableDisplays = computed(() =>
 		displays.value.filter((display) => {
 			const matchesType = display.types.includes(state.fieldData?.type || 'alias');
-			const matchesRelation = true;
-			return matchesType && matchesRelation;
+			let matchesLocalType = display.localTypes?.includes(type);
+			return matchesType && (matchesLocalType === undefined || matchesLocalType);
 		})
 	);