Default when single interface/display

Closes #194

app/src/displays/icon/index.ts

@@ -1,6 +1,5 @@
 import { defineDisplay } from '@/displays/define';
 import DisplayIcon from './icon.vue';
-import { types } from '@/types';
 
 export default defineDisplay(({ i18n }) => ({
 	id: 'icon',
@@ -21,5 +20,5 @@ export default defineDisplay(({ i18n }) => ({
 			},
 		},
 	],
-	types: types,
+	types: ['string'],
 }));

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

@@ -33,7 +33,7 @@ import { getDisplays } from '@/displays';
 import { getInterfaces } from '@/interfaces';
 import { FancySelectItem } from '@/components/v-fancy-select/types';
 
-import { state } from '../store';
+import { state, availableDisplays } from '../store';
 
 export default defineComponent({
 	props: {
@@ -50,14 +50,6 @@ export default defineComponent({
 			return interfaces.value.find((inter) => inter.id === state.fieldData.meta.interface);
 		});
 
-		const availableDisplays = computed(() =>
-			displays.value.filter((display) => {
-				const matchesType = display.types.includes(state.fieldData?.type || 'alias');
-				const matchesRelation = true;
-				return matchesType && matchesRelation;
-			})
-		);
-
 		const selectItems = computed(() => {
 			const recommended = selectedInterface.value?.recommendedDisplays || [];
 

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

@@ -33,11 +33,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed, watch } from '@vue/composition-api';
 import { getInterfaces } from '@/interfaces';
 import { FancySelectItem } from '@/components/v-fancy-select/types';
 
-import { state } from '../store';
+import { state, availableInterfaces } from '../store';
 
 export default defineComponent({
 	props: {
@@ -49,30 +49,6 @@ export default defineComponent({
 	setup(props) {
 		const interfaces = getInterfaces();
 
-		const availableInterfaces = computed(() => {
-			return interfaces.value
-				.filter((inter) => {
-					// Filter out all system interfaces
-					if (inter.system !== undefined && inter.system === true) return false;
-
-					const matchesType = inter.types.includes(state.fieldData?.type || 'alias');
-					let matchesRelation = false;
-
-					if (props.type === 'standard' || props.type === 'presentation') {
-						matchesRelation = inter.relationship === null || inter.relationship === undefined;
-					} else if (props.type === 'file') {
-						matchesRelation = inter.relationship === 'm2o';
-					} else if (props.type === 'files') {
-						matchesRelation = inter.relationship === 'm2m';
-					} else {
-						matchesRelation = inter.relationship === props.type;
-					}
-
-					return matchesType && matchesRelation;
-				})
-				.sort((a, b) => (a.name > b.name ? 1 : -1));
-		});
-
 		const selectItems = computed(() => {
 			const type: string = state.fieldData?.type || 'alias';
 

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

@@ -127,7 +127,7 @@ export default defineComponent({
 				},
 				{
 					text: i18n.t('datetime'),
-					value: 'datetime',
+					value: 'dateTime',
 				},
 				{
 					text: i18n.t('date'),

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

@@ -6,21 +6,30 @@
  */
 
 import { useFieldsStore, useRelationsStore } from '@/stores/';
-import { reactive, watch } from '@vue/composition-api';
+import { reactive, watch, computed, ComputedRef } from '@vue/composition-api';
 import { clone } from 'lodash';
+import { getInterfaces } from '@/interfaces';
+import { getDisplays } from '@/displays';
+import { InterfaceConfig } from '@/interfaces/types';
+import { DisplayConfig } from '@/displays/types';
 
 const fieldsStore = useFieldsStore();
 const relationsStore = useRelationsStore();
 
 let state: any;
+let availableInterfaces: ComputedRef<InterfaceConfig[]>;
+let availableDisplays: ComputedRef<DisplayConfig[]>;
 
-export { state, initLocalStore, clearLocalStore };
+export { state, availableInterfaces, availableDisplays, initLocalStore, clearLocalStore };
 
 function initLocalStore(
 	collection: string,
 	field: string,
 	type: 'standard' | 'file' | 'files' | 'm2o' | 'o2m' | 'm2m' | 'presentation'
 ) {
+	const interfaces = getInterfaces();
+	const displays = getDisplays();
+
 	state = reactive<any>({
 		fieldData: {
 			field: '',
@@ -45,6 +54,38 @@ function initLocalStore(
 		newFields: [],
 	});
 
+	availableInterfaces = computed<InterfaceConfig[]>(() => {
+		return interfaces.value
+			.filter((inter) => {
+				// Filter out all system interfaces
+				if (inter.system !== undefined && inter.system === true) return false;
+
+				const matchesType = inter.types.includes(state.fieldData?.type || 'alias');
+				let matchesRelation = false;
+
+				if (type === 'standard' || type === 'presentation') {
+					matchesRelation = inter.relationship === null || inter.relationship === undefined;
+				} else if (type === 'file') {
+					matchesRelation = inter.relationship === 'm2o';
+				} else if (type === 'files') {
+					matchesRelation = inter.relationship === 'm2m';
+				} else {
+					matchesRelation = inter.relationship === type;
+				}
+
+				return matchesType && matchesRelation;
+			})
+			.sort((a, b) => (a.name > b.name ? 1 : -1));
+	});
+
+	availableDisplays = computed(() =>
+		displays.value.filter((display) => {
+			const matchesType = display.types.includes(state.fieldData?.type || 'alias');
+			const matchesRelation = true;
+			return matchesType && matchesRelation;
+		})
+	);
+
 	const isExisting = field !== '+';
 
 	if (isExisting) {
@@ -56,6 +97,24 @@ function initLocalStore(
 		state.fieldData.meta = existingField.meta;
 
 		state.relations = relationsStore.getRelationsForField(collection, field);
+	} else {
+		watch(
+			() => availableInterfaces.value,
+			() => {
+				if (availableInterfaces.value.length === 1) {
+					state.fieldData.meta.interface = availableInterfaces.value[0].id;
+				}
+			}
+		);
+
+		watch(
+			() => availableInterfaces.value,
+			() => {
+				if (availableInterfaces.value.length === 1) {
+					state.fieldData.meta.interface = availableInterfaces.value[0].id;
+				}
+			}
+		);
 	}
 
 	if (type === 'file') {