From 310bead9fc3ddf9c7e79c61b16e7f8d13183fedc Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 3 Sep 2020 16:19:02 -0400
Subject: [PATCH] Add recommended display support to interfaces

---
 app/src/displays/types.ts                     |  1 +
 .../field-detail/components/display.vue       | 43 ++++++++++++++++---
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/app/src/displays/types.ts b/app/src/displays/types.ts
index b699933c27..91dfdd8181 100644
--- a/app/src/displays/types.ts
+++ b/app/src/displays/types.ts
@@ -25,6 +25,7 @@ export type DisplayConfig = {
 	id: string;
 	icon: string;
 	name: string | VueI18n.TranslateResult;
+	description?: string | VueI18n.TranslateResult;
 
 	handler: DisplayHandlerFunction | Component;
 	options: null | DeepPartial<Field>[] | Component;
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/display.vue b/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
index a9fdb15c55..ba169bdbf8 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
@@ -30,6 +30,8 @@
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api';
 import { getDisplays } from '@/displays';
+import { getInterfaces } from '@/interfaces';
+import { FancySelectItem } from '@/components/v-fancy-select/types';
 
 import { state } from '../store';
 
@@ -42,6 +44,12 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const displays = getDisplays();
+		const interfaces = getInterfaces();
+
+		const selectedInterface = computed(() => {
+			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');
@@ -50,13 +58,34 @@ export default defineComponent({
 			})
 		);
 
-		const selectItems = computed(() =>
-			availableDisplays.value.map((display) => ({
-				text: display.name,
-				value: display.id,
-				icon: display.icon,
-			}))
-		);
+		const selectItems = computed(() => {
+			const recommended = selectedInterface.value?.recommendedDisplays || [];
+
+			const displayItems: FancySelectItem[] = availableDisplays.value.map((display) => {
+				const item: FancySelectItem = {
+					text: display.name,
+					description: display.description,
+					value: display.id,
+					icon: display.icon,
+				};
+
+				if (recommended.includes(item.value as string)) {
+					item.iconRight = 'star';
+				}
+
+				return item;
+			});
+
+			if (displayItems.length >= 5) {
+				return [
+					...recommended.map((key) => displayItems.find((item) => item.value === key)),
+					{ divider: true },
+					...displayItems.filter((item) => recommended.includes(item.value as string) === false),
+				];
+			} else {
+				return displayItems;
+			}
+		});
 
 		const selectedDisplay = computed(() => {
 			return displays.value.find((display) => display.id === state.fieldData.meta.display);