From fedd99e9b433a656933aebd49f2b8ea85f5d65ea Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Mon, 7 Sep 2020 11:22:22 +0200
Subject: [PATCH] update slug, markdown, hash, collections, code

---
 app/src/interfaces/code/code.vue              |  8 +++--
 app/src/interfaces/code/index.ts              |  1 +
 app/src/interfaces/collections/index.ts       |  3 +-
 app/src/interfaces/hash/index.ts              |  6 ++--
 app/src/interfaces/markdown/index.ts          |  2 +-
 app/src/interfaces/slug/index.ts              | 32 ++++++++++++++++++-
 app/src/interfaces/slug/slug.vue              | 25 ++++++++++++++-
 .../field-detail/components/interface.vue     | 19 ++++++-----
 8 files changed, 79 insertions(+), 17 deletions(-)

diff --git a/app/src/interfaces/code/code.vue b/app/src/interfaces/code/code.vue
index 621a93d341..e712d10b8e 100644
--- a/app/src/interfaces/code/code.vue
+++ b/app/src/interfaces/code/code.vue
@@ -268,8 +268,12 @@ export default defineComponent({
 		};
 
 		function fillTemplate() {
-			const parse = JSON.parse(props.template);
-			emit('input', parse || props.template);
+			try {
+				const parse = JSON.parse(props.template);
+				emit('input', parse || props.template);
+			} catch {
+				// We won't stage invalid JSON
+			}
 		}
 	},
 });
diff --git a/app/src/interfaces/code/index.ts b/app/src/interfaces/code/index.ts
index 2636d675ac..ae64b77109 100644
--- a/app/src/interfaces/code/index.ts
+++ b/app/src/interfaces/code/index.ts
@@ -55,4 +55,5 @@ export default defineInterface(({ i18n }) => ({
 			},
 		},
 	],
+	recommendedDisplays: ['raw'],
 }));
diff --git a/app/src/interfaces/collections/index.ts b/app/src/interfaces/collections/index.ts
index 7e8803eea2..5f13ab4333 100644
--- a/app/src/interfaces/collections/index.ts
+++ b/app/src/interfaces/collections/index.ts
@@ -21,7 +21,8 @@ export default defineInterface(({ i18n }) => ({
 			},
 			schema: {
 				default_value: false,
-			}
+			},
 		},
 	],
+	recommendedDisplays: ['collection'],
 }));
diff --git a/app/src/interfaces/hash/index.ts b/app/src/interfaces/hash/index.ts
index 451145183c..50bd3e152a 100644
--- a/app/src/interfaces/hash/index.ts
+++ b/app/src/interfaces/hash/index.ts
@@ -4,7 +4,7 @@ import { defineInterface } from '@/interfaces/define';
 export default defineInterface(({ i18n }) => ({
 	id: 'hash',
 	name: i18n.t('hash'),
-	icon: 'text_fields',
+	icon: 'fingerprint',
 	component: InterfaceHash,
 	types: ['string'],
 	options: [
@@ -15,7 +15,7 @@ export default defineInterface(({ i18n }) => ({
 			meta: {
 				width: 'half',
 				interface: 'text-input',
-			}
+			},
 		},
 		{
 			field: 'masked',
@@ -24,7 +24,7 @@ export default defineInterface(({ i18n }) => ({
 			meta: {
 				width: 'half',
 				interface: 'toggle',
-			}
+			},
 		},
 	],
 }));
diff --git a/app/src/interfaces/markdown/index.ts b/app/src/interfaces/markdown/index.ts
index 8746bf648f..35efc1df99 100644
--- a/app/src/interfaces/markdown/index.ts
+++ b/app/src/interfaces/markdown/index.ts
@@ -4,7 +4,7 @@ import { defineInterface } from '@/interfaces/define';
 export default defineInterface(({ i18n }) => ({
 	id: 'markdown',
 	name: i18n.t('markdown'),
-	icon: 'text_fields',
+	icon: 'functions',
 	component: InterfaceMarkdown,
 	types: ['text'],
 	options: [
diff --git a/app/src/interfaces/slug/index.ts b/app/src/interfaces/slug/index.ts
index 91080acc3b..518a0e61d6 100644
--- a/app/src/interfaces/slug/index.ts
+++ b/app/src/interfaces/slug/index.ts
@@ -7,5 +7,35 @@ export default defineInterface(({ i18n }) => ({
 	icon: 'link',
 	component: InterfaceSlug,
 	types: ['string'],
-	options: [],
+	options: [
+		{
+			field: 'placeholder',
+			name: i18n.t('placeholder'),
+			meta: {
+				width: 'half',
+				interface: 'text-input',
+				options: {
+					placeholder: i18n.t('text_shown_when_no_value'),
+				},
+			},
+		},
+		{
+			field: 'iconLeft',
+			name: i18n.t('icon_left'),
+			type: 'string',
+			meta: {
+				width: 'half',
+				interface: 'icon',
+			},
+		},
+		{
+			field: 'iconRight',
+			name: i18n.t('icon_right'),
+			type: 'string',
+			meta: {
+				width: 'half',
+				interface: 'icon',
+			},
+		},
+	],
 }));
diff --git a/app/src/interfaces/slug/slug.vue b/app/src/interfaces/slug/slug.vue
index 6d10c77b90..e5c0621ee7 100644
--- a/app/src/interfaces/slug/slug.vue
+++ b/app/src/interfaces/slug/slug.vue
@@ -1,5 +1,16 @@
 <template>
-	<v-input :value="value" :disabled="disabled" @input="$emit('input', $event)" slug />
+	<v-input
+		:value="value"
+		:disabled="disabled"
+		:placeholder="placeholder"
+		:iconLeft="iconLeft"
+		:iconRight="iconRight"
+		@input="$emit('input', $event)"
+		slug
+	>
+		<template v-if="iconLeft" #prepend><v-icon :name="iconLeft" /></template>
+		<template v-if="iconRight" #append><v-icon :name="iconRight" /></template>
+	</v-input>
 </template>
 
 <script lang="ts">
@@ -15,6 +26,18 @@ export default defineComponent({
 			type: Boolean,
 			default: null,
 		},
+		iconLeft: {
+			type: String,
+			default: null,
+		},
+		iconRight: {
+			type: String,
+			default: null,
+		},
+		placeholder: {
+			type: String,
+			default: null,
+		},
 	},
 });
 </script>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
index cdd7d90cab..817bed18f3 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
@@ -64,7 +64,7 @@ export default defineComponent({
 				datetime: ['datetime'],
 				date: ['datetime'],
 				time: ['datetime'],
-				json: ['code'],
+				json: ['checkboxes', 'tags'],
 				uuid: ['text-input'],
 			};
 
@@ -85,15 +85,18 @@ export default defineComponent({
 				return item;
 			});
 
+			const recommendedItems: (FancySelectItem | { divider: boolean } | undefined)[] = [
+				...recommended.map((key) => interfaceItems.find((item) => item.value === key)),
+			];
+
 			if (interfaceItems.length >= 5 && recommended.length > 0) {
-				return [
-					...recommended.map((key) => interfaceItems.find((item) => item.value === key)),
-					{ divider: true },
-					...interfaceItems.filter((item) => recommended.includes(item.value as string) === false),
-				];
-			} else {
-				return interfaceItems;
+				recommendedItems.push({ divider: true });
 			}
+
+			recommendedItems.push(
+				...interfaceItems.filter((item) => recommended.includes(item.value as string) === false)
+			);
+			return recommendedItems;
 		});
 
 		const selectedInterface = computed(() => {