From c0810313858f7a5712dffa059bd5fd89ee34a704 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 13 Aug 2020 16:15:33 -0400
Subject: [PATCH] Clean up code interface

---
 app/src/components/v-select/v-select.vue |  2 +-
 app/src/interfaces/code/code.vue         | 44 +++++++++++-------------
 app/src/interfaces/code/index.ts         | 38 ++++++++++----------
 app/src/lang/en-US/index.json            |  2 ++
 4 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/app/src/components/v-select/v-select.vue b/app/src/components/v-select/v-select.vue
index dc70a102ec..8a4305d435 100644
--- a/app/src/components/v-select/v-select.vue
+++ b/app/src/components/v-select/v-select.vue
@@ -44,7 +44,7 @@
 
 			<v-list-item
 				v-for="item in _items"
-				:key="item.value"
+				:key="item.text + item.value"
 				:active="multiple ? (value || []).includes(item.value) : value === item.value"
 				:disabled="item.disabled"
 				@click="multiple ? null : $emit('input', item.value)"
diff --git a/app/src/interfaces/code/code.vue b/app/src/interfaces/code/code.vue
index 22a75597b4..821b4b98fa 100644
--- a/app/src/interfaces/code/code.vue
+++ b/app/src/interfaces/code/code.vue
@@ -2,18 +2,9 @@
 	<div class="interface-code codemirror-custom-styles">
 		<textarea ref="codemirrorEl" :value="stringValue" />
 
-		<v-button v-if="template" v-tooltip="$t('interfaces.code.fill_template')" @click="fillTemplate">
+		<v-button small icon secondary v-if="template" v-tooltip.left="$t('fill_template')" @click="fillTemplate">
 			<v-icon name="playlist_add" />
 		</v-button>
-
-		<small v-if="language" class="line-count type-note">
-			{{
-				$tc('loc', lineCount, {
-					count: lineCount,
-					lang: formatTitle(language),
-				})
-			}}
-		</small>
 	</div>
 </template>
 
@@ -50,7 +41,7 @@ export default defineComponent({
 			default: null,
 		},
 		template: {
-			type: [Object, Array],
+			type: String,
 			default: null,
 		},
 		lineNumber: {
@@ -61,6 +52,10 @@ export default defineComponent({
 			type: String,
 			default: 'text/plain',
 		},
+		type: {
+			type: String,
+			default: null,
+		},
 	},
 	setup(props, { emit }) {
 		const codemirrorEl = ref<HTMLTextAreaElement | null>(null);
@@ -72,13 +67,14 @@ export default defineComponent({
 
 				await getImports(cmOptions.value);
 				codemirror.value = CodeMirror.fromTextArea(codemirrorElVal, cmOptions.value);
-				codemirror.value.setValue(stringValue.value || props.template || '');
+				codemirror.value.setValue(stringValue.value || '');
 				await setLanguage();
 				codemirror.value.on('change', (cm) => {
 					const content = cm.getValue();
-					try {
+
+					if (props.type === 'json') {
 						emit('input', JSON.parse(content));
-					} catch {
+					} else {
 						emit('input', content);
 					}
 				});
@@ -92,7 +88,7 @@ export default defineComponent({
 		const stringValue = computed<string>(() => {
 			if (props.value == null) return '';
 
-			if (typeof props.value === 'object') {
+			if (props.type === 'json') {
 				return JSON.stringify(props.value, null, 4);
 			}
 
@@ -106,6 +102,12 @@ export default defineComponent({
 			}
 		);
 
+		watch(stringValue, () => {
+			if (codemirror.value?.getValue() !== stringValue.value) {
+				codemirror.value?.setValue(stringValue.value || '');
+			}
+		});
+
 		async function setLanguage() {
 			if (codemirror.value) {
 				const lang = props.language.toLowerCase();
@@ -153,6 +155,8 @@ export default defineComponent({
 					await import(`codemirror/mode/${lang}/${lang}.js`);
 					await import(`codemirror/addon/lint/${linter}-lint.js`);
 					codemirror.value.setOption('lint', (CodeMirror as any).lint[linter]);
+				} else if (lang === 'text/plain') {
+					codemirror.value.setOption('mode', { name: null });
 				} else {
 					await import(`codemirror/mode/${lang}/${lang}.js`);
 					codemirror.value.setOption('mode', { name: lang });
@@ -258,15 +262,7 @@ export default defineComponent({
 		};
 
 		function fillTemplate() {
-			if (props.template instanceof Object || props.template instanceof Array) {
-				return emit('input', JSON.stringify(props.template, null, 4));
-			}
-
-			try {
-				emit('input', JSON.parse(props.template));
-			} catch (e) {
-				emit('input', props.template);
-			}
+			emit('input', props.template);
 		}
 	},
 });
diff --git a/app/src/interfaces/code/index.ts b/app/src/interfaces/code/index.ts
index 4ed4141e7a..2636d675ac 100644
--- a/app/src/interfaces/code/index.ts
+++ b/app/src/interfaces/code/index.ts
@@ -18,19 +18,14 @@ export default defineInterface(({ i18n }) => ({
 	types: ['string', 'json', 'text'],
 	options: [
 		{
-			field: 'template',
-			name: i18n.t('template'),
-			type: 'text',
+			field: 'language',
+			name: i18n.t('language'),
+			type: 'string',
 			meta: {
-				width: 'full',
-				interface: 'code',
-				options: {
-					language: 'text/plain'
-				}
+				width: 'half',
+				interface: 'dropdown',
+				options: { choices },
 			},
-			schema: {
-				default_value: null,
-			}
 		},
 		{
 			field: 'lineNumber',
@@ -42,17 +37,22 @@ export default defineInterface(({ i18n }) => ({
 			},
 			schema: {
 				default_value: false,
-			}
+			},
 		},
 		{
-			field: 'language',
-			name: i18n.t('language'),
-			type: 'string',
+			field: 'template',
+			name: i18n.t('template'),
+			type: 'text',
 			meta: {
-				width: 'half',
-				interface: 'dropdown',
-				options: { choices },
+				width: 'full',
+				interface: 'code',
+				options: {
+					language: 'text/plain',
+				},
 			},
-		}
+			schema: {
+				default_value: null,
+			},
+		},
 	],
 }));
diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 853017b90e..e1d14da049 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -209,6 +209,8 @@
 	"last_page": "Last Page",
 	"last_login": "Last Login",
 
+	"fill_template": "Fill with Template Value",
+
 	"choose_a_collection": "Choose a collection...",
 	"choose_a_field": "Choose a Field...",