Add default displays based on field type (#5525)

app/src/composables/use-form-fields/use-form-fields.ts

@@ -4,7 +4,7 @@ import { FormField } from '@/components/v-form/types';
 import { getInterfaces } from '@/interfaces';
 import { InterfaceConfig } from '@/interfaces/types';
 import { Field } from '@/types';
-import getDefaultInterfaceForType from '@/utils/get-default-interface-for-type';
+import { getDefaultInterfaceForType } from '@/utils/get-default-interface-for-type';
 import { computed, ComputedRef, Ref } from '@vue/composition-api';
 import { clone } from 'lodash';
 

app/src/layouts/tabular/tabular.vue

@@ -157,6 +157,7 @@ import i18n from '@/lang';
 import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
 import hideDragImage from '@/utils/hide-drag-image';
 import useShortcut from '@/composables/use-shortcut';
+import { getDefaultDisplayForType } from '@/utils/get-default-display-for-type';
 
 type layoutOptions = {
 	widths?: {
@@ -461,7 +462,7 @@ export default defineComponent({
 						value: field.field,
 						width: localWidths.value[field.field] || _layoutOptions.value?.widths?.[field.field] || null,
 						field: {
-							display: field.meta?.display,
+							display: field.meta?.display || getDefaultDisplayForType(field.type),
 							displayOptions: field.meta?.display_options,
 							interface: field.meta?.interface,
 							interfaceOptions: field.meta?.options,

app/src/utils/get-default-display-for-type.ts

@@ -0,0 +1,26 @@
+import { types } from '@/types';
+
+const defaultDisplayMap: Record<typeof types[number], string> = {
+	alias: 'raw',
+	bigInteger: 'formatted-value',
+	binary: 'raw',
+	boolean: 'boolean',
+	date: 'datetime',
+	dateTime: 'datetime',
+	decimal: 'formatted-value',
+	float: 'formatted-value',
+	integer: 'formatted-value',
+	json: 'raw',
+	string: 'formatted-value',
+	text: 'formatted-value',
+	time: 'datetime',
+	timestamp: 'datetime',
+	uuid: 'formatted-value',
+	unknown: 'raw',
+	csv: 'labels',
+	hash: 'formatted-value',
+};
+
+export function getDefaultDisplayForType(type: typeof types[number]): string {
+	return defaultDisplayMap[type] || 'raw';
+}

app/src/utils/get-default-interface-for-type.ts

@@ -21,6 +21,6 @@ const defaultInterfaceMap: Record<typeof types[number], string> = {
 	hash: 'input-hash',
 };
 
-export default function getDefaultInterfaceForType(type: typeof types[number]): string {
+export function getDefaultInterfaceForType(type: typeof types[number]): string {
 	return defaultInterfaceMap[type] || 'input';
 }

app/src/utils/get-default-interface-for-type/index.ts

@@ -1,4 +0,0 @@
-import getDefaultInterfaceForType from './get-default-interface-for-type';
-
-export { getDefaultInterfaceForType };
-export default getDefaultInterfaceForType;

app/src/views/private/components/render-template/render-template.vue

@@ -28,6 +28,7 @@ import { Field } from '@/types';
 import { getDisplays } from '@/displays';
 import ValueNull from '@/views/private/components/value-null';
 import { DisplayConfig, DisplayHandlerFunction } from '@/displays/types';
+import { getDefaultDisplayForType } from '@/utils/get-default-display-for-type';
 
 export default defineComponent({
 	components: { ValueNull },
@@ -87,8 +88,12 @@ export default defineComponent({
 					const value = get(props.item, fieldKey);
 					if (value === undefined) return null;
 
-					// If no display is configured, we can render the raw value
-					if (!field || !field.meta?.display) return value;
+					if (!field) return value;
+
+					const display = field?.meta?.display || getDefaultDisplayForType(field.type);
+
+					// No need to render the empty display overhead in this case
+					if (display === 'raw') return value;
 
 					const displayInfo = displays.value.find((display: DisplayConfig) => display.id === field.meta?.display);