From 2c368224fb6faa661f25adfd9400984b25d83ed7 Mon Sep 17 00:00:00 2001
From: Matthias Mohr <webmaster@mamo-net.de>
Date: Tue, 27 Aug 2024 23:10:01 +0200
Subject: [PATCH] Allow to edit object-typed parameters via a code editor and
 minor bug fixes

---
 src/components/DiscoveryToolbar.vue          |   4 +-
 src/components/ParameterDataType.vue         |   8 +-
 src/components/ParameterDataTypes.vue        |   2 +-
 src/components/datatypes/ObjectEditor.vue    | 302 +++++++------------
 src/components/datatypes/ObjectEditorDnD.vue | 246 +++++++++++++++
 src/store/editor.js                          |   2 +-
 6 files changed, 366 insertions(+), 198 deletions(-)
 create mode 100644 src/components/datatypes/ObjectEditorDnD.vue

diff --git a/src/components/DiscoveryToolbar.vue b/src/components/DiscoveryToolbar.vue
index c4a2afc8..79c64b44 100644
--- a/src/components/DiscoveryToolbar.vue
+++ b/src/components/DiscoveryToolbar.vue
@@ -158,10 +158,10 @@ export default {
 		}
 	},
 	methods: {
-		...Utils.mapMutations('editor', ['setDiscoverySearchTerm', 'setModelDnd']),
+		...Utils.mapMutations('editor', ['setDiscoverySearchTerm', 'setModelDnD']),
 		...Utils.mapActions(['loadProcess']),
 		onDrag(event, type, data) {
-			let fn = (loading) => this.setModelDnd({type, data, loading});
+			let fn = (loading) => this.setModelDnD({type, data, loading});
 			if (type === 'process') {
 				fn(true);
 				this.loadProcess(data).then(() => fn(false));
diff --git a/src/components/ParameterDataType.vue b/src/components/ParameterDataType.vue
index 4e4fc735..8f41b7a4 100644
--- a/src/components/ParameterDataType.vue
+++ b/src/components/ParameterDataType.vue
@@ -3,7 +3,7 @@
 		<!-- Result Node -->
 		<template v-if="isResult">
 			<div class="fieldValue externalData fromNode">
-				<span>Output of <tt>#{{ state.from_node }}</tt></span>
+				<span>Output of <code>#{{ state.from_node }}</code></span>
 			</div>
 			<button type="button" v-if="nativeParameterType === 'array'" @click="convertToArray()"><i class="fas fa-list"></i> Convert to array</button>
 		</template>
@@ -14,7 +14,7 @@
 		<!-- Process Parameter -->
 		<template v-else-if="isPgParameter">
 			<div class="fieldValue externalData fromArgument">
-				<span>Value of process parameter <tt>{{ state.from_parameter }}</tt></span>
+				<span>Value of process parameter <code>{{ state.from_parameter }}</code></span>
 			</div>
 			<button type="button" v-if="nativeParameterType === 'array'" @click="convertToArray()"><i class="fas fa-list"></i> Convert to array</button>
 		</template>
@@ -26,7 +26,7 @@
 		<!-- Null -->
 		<div class="description" v-else-if="type === 'null'">
 			<i class="fas fa-info-circle"></i>
-			<p>This is set to <strong><tt>null</tt></strong>, which is usually used as placeholder for no-data values or a default value.</p>
+			<p>This is set to <strong><code>null</code></strong>, which is usually used as placeholder for no-data values or a default value.</p>
 		</div>
 		<!-- Select Boxes (collection id, job id, epsg code, in/output format, service type, billing plan, enums) -->
 		<SelectBox v-else-if="isSelection" v-model="state" :key="type" :type="type" :editable="editable" :schema="schema" :context="dependency" @onDetails="onSelectDetails"></SelectBox>
@@ -61,7 +61,7 @@
 		<!-- URL -->
 		<input class="fieldValue" v-else-if="type === 'url' || type === 'uri'" v-model="state" type="url" :name="name" :disabled="!editable" />
 		<!-- Objects / Arrays -->
-		<ObjectEditor  v-else-if="nativeType === 'object' || nativeType === 'array'" :editable="editable" :parameter="parameter" :schema="schema" :isObject="nativeType === 'object'" v-model="state" :parent="parent" :context="context" />
+		<ObjectEditor  v-else-if="nativeType === 'object' || nativeType === 'array'" :key="type" :editable="editable" :parameter="parameter" :schema="schema" :isObject="nativeType === 'object'" v-model="state" :parent="parent" :context="context" />
 		<!-- String and all other -->
 		<input class="fieldValue" v-else v-model="state" type="text" :name="name" :disabled="!editable" />
 	</div>
diff --git a/src/components/ParameterDataTypes.vue b/src/components/ParameterDataTypes.vue
index 2728ab1f..70c896c6 100644
--- a/src/components/ParameterDataTypes.vue
+++ b/src/components/ParameterDataTypes.vue
@@ -60,7 +60,7 @@ const SUPPORTED_TYPES = [
 		{type: 'object', default: {}, group: 'Basics', properties: {
 			from_node: { not: {} },
 			from_parameter: { not: {} }
-		}},
+		}, default: {}},
 
 		{type: 'string', subtype: 'date-time', format: 'date-time', title: 'Date and Time', group: 'Temporal', default: () => now()},
 		{type: 'string', subtype: 'date', format: 'date', title: 'Date only', group: 'Temporal', default: () => now().substring(0, 10)},
diff --git a/src/components/datatypes/ObjectEditor.vue b/src/components/datatypes/ObjectEditor.vue
index db2454b3..94ee1af7 100644
--- a/src/components/datatypes/ObjectEditor.vue
+++ b/src/components/datatypes/ObjectEditor.vue
@@ -1,51 +1,47 @@
 <template>
-	<div :class="{editor: true, array: !isObject, object: isObject}">
-		<div class="buttons">
-			<button type="button" class="addBtn" v-if="editable && canAdd" :disabled="count >= maxCount" @click="add()"><i class="fas fa-plus"></i> Add</button>
-			<FullscreenButton :element="() => this.$el" />
-		</div>
-		<div v-if="!elements.length" class="empty description">
-			<i class="fas fa-info-circle"></i>
-			<template v-if="isObject">&nbsp;Object is empty</template>
-			<template v-else>&nbsp;Array is empty</template>
-		</div>
-		<draggable v-else v-model="elements" handle=".mover">
-			<div class="fieldValue element" v-for="(e, k) in elements" :key="e.id">
-				<div class="row">
-					<label class="fieldLabel">
-						<template v-if="isObject && (e.prop.title || e.prop.required)">{{ e.prop.title || e.key }}</template>
-						<input v-else-if="isObject" v-model="e.key" type="text" :disabled="!editable"/>
-						<template v-else>{{ k+1 }}</template>
-					</label>
-					<ParameterDataTypes :editable="editable" :parameter="elementSchema(k, e.key)" :isItem="true" :parent="parent" :context="context" v-model="e.value" />
-					<button v-if="editable && !e.prop.required" :disabled="count <= minCount" class="deleteBtn" type="button" @click="remove(k)"><i class="fas fa-trash"></i></button>
-					<button v-show="editable && !isObject" class="mover" type="button"><i class="fas fa-arrows-alt"></i></button>
-				</div>
-				<div class="row" v-if="e.prop.description">
-					<div class="description">
-						<i class="fas fa-info-circle"></i>
-						<Description :description="e.prop.description" :compact="true" />
-					</div>
-				</div>
-			</div>
-		</draggable>
+	<div class="object-editor" @drop="onDrop" @dragover="allowDrop">
+		<template v-if="isTopLevel">
+			<Tabs ref="tabs" id="object-tabs" position="bottom">
+				<Tab id="visual" name="Visual" icon="fa-project-diagram" :selected="true" @show="showVisual">
+					<ObjectEditorDnD v-if="visual" :parameter="parameter" :editable="editable" :schema="schema" :parent="parent" :value="data" :isObject="isObject" ref="visual" @input="updateFromVisual" />
+				</Tab>
+				<Tab id="source" name="Code" icon="fa-code" @show="showCode">
+					<TextEditor ref="sourceEditor" :editable="editable" :value="data" id="object-texteditor" language="json" @input="updateFromCode"></TextEditor>
+				</Tab>
+			</Tabs>
+			<small v-if="editable" class="info">
+				To easily import an object, you can drag &amp; drop a JSON file into this area.
+			</small>
+		</template>
+		<template v-else>
+			<ObjectEditorDnD :parameter="parameter" :editable="editable" :schema="schema" :parent="parent" :value="data" :isObject="isObject" ref="visual" @input="updateFromVisual" />
+		</template>
 	</div>
 </template>
 
 <script>
-import draggable from 'vuedraggable';
-import Description from '@openeo/vue-components/components/Description.vue';
-import FullscreenButton from '../FullscreenButton.vue';
-import { ProcessUtils, ProcessSchema } from '@openeo/js-commons';
+import Tabs from '@openeo/vue-components/components/Tabs.vue';
+import Tab from '@openeo/vue-components/components/Tab.vue';
+
+import ObjectEditorDnD from './ObjectEditorDnD.vue';
+import TextEditor from '../TextEditor.vue';
+
 import Utils from '../../utils';
 
 export default {
 	name: 'ObjectEditor',
 	components: {
-		draggable,
-		Description,
-		FullscreenButton,
-		ParameterDataTypes: () => import('../ParameterDataTypes.vue')
+		ObjectEditorDnD,
+		Tab,
+		Tabs,
+		TextEditor
+	},
+	data() {
+		return {
+			data: this.value,
+			visual: true,
+			isTopLevel: true
+		};
 	},
 	props: {
 		parameter: Object,
@@ -62,179 +58,105 @@ export default {
 		parent: Object,
 		context: {}
 	},
-	data() {
-		return {
-			elements: []
-		};
-	},
-	computed: {
-		count() {
-			return Utils.size(this.elements);
-		},
-		maxCount() {
-			return (this.isObject ? this.schema.schema.maxProperties : this.schema.schema.maxItems) || Number.MAX_VALUE;
+	watch: {
+		value(value) {
+			this.data = value;
 		},
-		minCount() {
-			return (this.isObject ? this.schema.schema.minProperties : this.schema.schema.minItems) || 0;
+		data(data) {
+			this.$emit('input', data);
+		}
+	},
+	mounted() {
+		// Check if there is another ObjectEditor in the parents.
+		// If there's one we don't want to show the tabs, we only want code editing at the top level.
+		let parent = this.$parent;
+		while (parent) {
+			if (parent.$options.name === 'ObjectEditor') {
+				this.isTopLevel = false;
+				break;
+			}
+			parent = parent.$parent
+		}
+	},
+	methods: {
+		showVisual() {
+			this.visual = true;
 		},
-		canAdd() {
-			return !this.isObject || this.schema.schema.additionalProperties !== false;
+		showCode() {
+			this.visual = false;
+			this.$refs.sourceEditor.updateState();
 		},
-		prefill() {
-			let schema = this.schema.schema;
-			if (this.isObject && Utils.isObject(schema.properties)) {
-				let arr = [];
-				for (let name in schema.properties) {
-					let required = false;
-					if (Array.isArray(schema.required) && schema.required.includes(name)) {
-						required = true;
-					}
-					arr.push(Object.assign({name, required}, schema.properties[name]));
-				}
-				return arr;
-			}
-			else if (!this.isObject && this.minCount > 0) {
-				return [...Array(this.minCount).keys()].map(key => ({
-					name: key
-				}));
+		updateFromCode(value) {
+			if (!this.visual) {
+				this.data = value;
 			}
-			return [];
 		},
-		newValue() {
-			if (this.isObject) {
-				let obj = {};
-				for(let e of this.elements) {
-					obj[e.key] = e.value;
-				}
-				return obj;
+		updateFromVisual(value) {
+			if (this.visual) {
+				this.data = value;
 			}
-			else {
-				return this.elements.map(v => v.value);
-			}
-		}
-	},
-	watch: {
-		newValue: {
-			deep: true,
-			handler(newValue) {
-				this.$emit('input', newValue);
+		},
+		allowDrop(event) {
+			if (this.editable && this.isTopLevel) {
+				event.preventDefault();
 			}
 		},
-		value: {
-			immediate: true,
-			handler(value) {
-				if (this.newValue !== value) {
-					this.elements = [];
-					
-					// Prefill if empty
-					if (Utils.size(value) === 0 && this.prefill.length > 0) {
-						for(let prop of this.prefill) {
-							this.add(prop.name, undefined, prop);
+		onDrop(event) {
+			// Read a files that have been dropped
+			let files = event.dataTransfer.files;
+			if (files.length === 1) {
+				let file = event.dataTransfer.files[0];
+				let jsonTypes = ['text/json', 'application/json', 'application/geo+json', 'text/plain'];
+				let name = file.name.toLowerCase();
+				let isJson = jsonTypes.includes(file.type) || name.endsWith('.geojson') || name.endsWith('.json');
+				if (isJson) {
+					var reader = new FileReader();
+					reader.onload = async e => {
+						let json;
+						try {
+							json = JSON.parse(e.target.result);
+						} catch(error) {
+							console.error(error);
+							return Utils.error(this, "The provided file is not a valid JSON file");
 						}
-					}
-					// Convert to internal state object
-					else if (value && typeof value === 'object') {
-						for(let key in value) {
-							this.add(key, value[key]);
+						if ((isObject && Utils.isObject(json)) || (!isObject && Array.isArray(json))) {
+							this.data = json;
 						}
-					}
+						else {
+							Utils.error(this, "The provided file doesn't seem to be a JSON file that contains an object");
+						}
+					};
+					reader.onerror = error => Utils.exception(this, error, "Reading the file failed");
+					reader.readAsText(file, "UTF-8");
 				}
 			}
-		}
-	},
-	methods: {
-		elementSchema(index, key = null) {
-			let element = ProcessUtils.getElementJsonSchema(this.schema.schema, key || index);
-			let schema = new ProcessSchema(element);
-			if (this.schema.parent instanceof ProcessSchema) {
-				schema.refs = this.schema.parent.refs || [];
-			}
-			return schema;
-		},
-		add(key = null, value = undefined, prop = {}) {
-			let obj = {
-				id: String(this.elements.length),
-				value: value
-			};
-			if (this.isObject) {
-				obj.key = key ? key : "unnamed" + this.elements.length;
-			}
-			obj.prop = prop;
-			if (typeof obj.value === 'undefined') {
-				if (typeof prop.default !== 'undefined') {
-					obj.value = prop.default;
-				}
-				else {
-					obj.value = this.elementSchema(this.elements.length, obj.key).default;
-				}
+			else {
+				Utils.error(this, "Please provide a single JSON file");
 			}
-			this.elements.push(obj);
+			return event.preventDefault();
 		},
-		remove(k) {
-			this.elements.splice(k, 1);
-		}
 	}
-};
+
+}
 </script>
 
-<style scoped>
-.editor, .editor > div {
+<style lang="scss" scoped>
+.object-editor {
 	width: 100%;
-}
-.element {
-	border: 1px solid #ccc;
-	border-radius: 3px;
-	padding: 0.4em 0.25em;
-	margin: 0.4em 0.25em;
-}
-.array .element.sortable-chosen {
-	background: #eee;
-}
-.array .element.sortable-chosen .deleteBtn {
-	visibility: hidden;
-}
-.parameters .fieldRow .array .element .fieldLabel {
+	min-height: 300px;
+	max-height: calc(70vh + 1.5em);
 	display: flex;
-	align-items: center;
-	min-width: 1.5em;
-	width: auto;
-	padding: 0 0.5em;
+	flex-direction: column;
 }
-.parameters .fieldRow .object .element .fieldLabel {
-	min-width: 20%;
+#object-tabs {
+	max-height: 70vh;
 }
-.parameters .fieldRow .element .fieldValue {
+.info {
 	display: block;
-}
-.element > .row {
-	width: 100%;
-	display: flex;
-	align-items: stretch;
-}
-.element > .row > .description {
-	padding: 0 0.5em;
+	text-align: center;
+	font-style: italic;
+	color: #555;
 	margin-top: 0.5em;
-	margin-bottom: 0;
-}
-.array .deleteBtn {
-	margin: 0 0.5em 0 1em;
-}
-.object .deleteBtn {
-	margin-left: 10px;
-}
-.addBtn {
-	margin: 0 0.25em;
-}
-.empty.description {
-	padding: 0.5em 0.25em;
-}
-.fullscreen {
-	padding: 1em;
-	box-sizing: border-box;
-}
-.mover {
-	cursor: pointer;
-	border: 0;
-	background-color: transparent;
+	line-height: 1em;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/datatypes/ObjectEditorDnD.vue b/src/components/datatypes/ObjectEditorDnD.vue
new file mode 100644
index 00000000..f5280cfc
--- /dev/null
+++ b/src/components/datatypes/ObjectEditorDnD.vue
@@ -0,0 +1,246 @@
+<template>
+	<div :class="{editor: true, array: !isObject, object: isObject}">
+		<div class="buttons">
+			<button type="button" class="addBtn" v-if="editable && canAdd" :disabled="count >= maxCount" @click="add()"><i class="fas fa-plus"></i> Add</button>
+			<FullscreenButton :element="() => this.$el" />
+		</div>
+		<div v-if="!elements.length" class="empty description">
+			<i class="fas fa-info-circle"></i>
+			<template v-if="isObject">&nbsp;Object is empty</template>
+			<template v-else>&nbsp;Array is empty</template>
+		</div>
+		<draggable v-else v-model="elements" handle=".mover">
+			<div class="fieldValue element" v-for="(e, k) in elements" :key="e.id">
+				<div class="row">
+					<label class="fieldLabel">
+						<template v-if="isObject && (e.prop.title || e.prop.required)">{{ e.prop.title || e.key }}</template>
+						<input v-else-if="isObject" v-model="e.key" type="text" :disabled="!editable"/>
+						<template v-else>{{ k+1 }}</template>
+					</label>
+					<ParameterDataTypes :editable="editable" :parameter="elementSchema(k, e.key)" :isItem="true" :parent="parent" :context="context" v-model="e.value" />
+					<button v-if="editable && !e.prop.required" :disabled="count <= minCount" class="deleteBtn" type="button" @click="remove(k)"><i class="fas fa-trash"></i></button>
+					<button v-show="editable && !isObject" class="mover" type="button"><i class="fas fa-arrows-alt"></i></button>
+				</div>
+				<div class="row" v-if="e.prop.description">
+					<div class="description">
+						<i class="fas fa-info-circle"></i>
+						<Description :description="e.prop.description" :compact="true" />
+					</div>
+				</div>
+			</div>
+		</draggable>
+	</div>
+</template>
+
+<script>
+import draggable from 'vuedraggable';
+import Description from '@openeo/vue-components/components/Description.vue';
+import FullscreenButton from '../FullscreenButton.vue';
+import { ProcessUtils, ProcessSchema } from '@openeo/js-commons';
+import Utils from '../../utils';
+
+export default {
+	name: 'ObjectEditorDnD',
+	components: {
+		draggable,
+		Description,
+		FullscreenButton,
+		ParameterDataTypes: () => import('../ParameterDataTypes.vue')
+	},
+	props: {
+		parameter: Object,
+		editable: {
+			type: Boolean,
+			default: true
+		},
+		schema: Object,
+		value: {},
+		isObject: {
+			type: Boolean,
+			default: false
+		},
+		parent: Object,
+		context: {}
+	},
+	data() {
+		return {
+			elements: []
+		};
+	},
+	computed: {
+		count() {
+			return Utils.size(this.elements);
+		},
+		maxCount() {
+			return (this.isObject ? this.schema.schema.maxProperties : this.schema.schema.maxItems) || Number.MAX_VALUE;
+		},
+		minCount() {
+			return (this.isObject ? this.schema.schema.minProperties : this.schema.schema.minItems) || 0;
+		},
+		canAdd() {
+			return !this.isObject || this.schema.schema.additionalProperties !== false;
+		},
+		prefill() {
+			let schema = this.schema.schema;
+			if (this.isObject && Utils.isObject(schema.properties)) {
+				let arr = [];
+				for (let name in schema.properties) {
+					const propSchema = schema.properties[name];
+					if (propSchema.not) {
+						continue;
+					}
+					let required = false;
+					if (Array.isArray(schema.required) && schema.required.includes(name)) {
+						required = true;
+					}
+					arr.push(Object.assign({name, required}, propSchema));
+				}
+				return arr;
+			}
+			else if (!this.isObject && this.minCount > 0) {
+				return [...Array(this.minCount).keys()].map(key => ({
+					name: key
+				}));
+			}
+			return [];
+		},
+		newValue() {
+			if (this.isObject) {
+				let obj = {};
+				for(let e of this.elements) {
+					obj[e.key] = e.value;
+				}
+				return obj;
+			}
+			else {
+				return this.elements.map(v => v.value);
+			}
+		}
+	},
+	watch: {
+		newValue: {
+			deep: true,
+			handler(newValue) {
+				this.$emit('input', newValue);
+			}
+		},
+		value: {
+			immediate: true,
+			handler(value) {
+				if (this.newValue !== value) {
+					this.elements = [];
+					
+					// Prefill if empty
+					if (Utils.size(value) === 0 && this.prefill.length > 0) {
+						for(let prop of this.prefill) {
+							this.add(prop.name, undefined, prop);
+						}
+					}
+					// Convert to internal state object
+					else if (value && typeof value === 'object') {
+						for(let key in value) {
+							this.add(key, value[key]);
+						}
+					}
+				}
+			}
+		}
+	},
+	methods: {
+		elementSchema(index, key = null) {
+			let element = ProcessUtils.getElementJsonSchema(this.schema.schema, key || index);
+			let schema = new ProcessSchema(element);
+			if (this.schema.parent instanceof ProcessSchema) {
+				schema.refs = this.schema.parent.refs || [];
+			}
+			return schema;
+		},
+		add(key = null, value = undefined, prop = {}) {
+			let obj = {
+				id: String(this.elements.length),
+				value: value
+			};
+			if (this.isObject) {
+				obj.key = key ? key : "unnamed" + this.elements.length;
+			}
+			obj.prop = prop;
+			if (typeof obj.value === 'undefined') {
+				if (typeof prop.default !== 'undefined') {
+					obj.value = prop.default;
+				}
+				else {
+					obj.value = this.elementSchema(this.elements.length, obj.key).default;
+				}
+			}
+			this.elements.push(obj);
+		},
+		remove(k) {
+			this.elements.splice(k, 1);
+		}
+	}
+};
+</script>
+
+<style scoped>
+.editor, .editor > div {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0.25em;
+}
+.element {
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	padding: 0.4em 0.25em;
+	margin: 0.4em 0.25em;
+}
+.array .element.sortable-chosen {
+	background: #eee;
+}
+.array .element.sortable-chosen .deleteBtn {
+	visibility: hidden;
+}
+.parameters .fieldRow .array .element .fieldLabel {
+	display: flex;
+	align-items: center;
+	min-width: 1.5em;
+	width: auto;
+	padding: 0 0.5em;
+}
+.parameters .fieldRow .object .element .fieldLabel {
+	min-width: 20%;
+}
+.parameters .fieldRow .element .fieldValue {
+	display: block;
+}
+.element > .row {
+	width: 100%;
+	display: flex;
+	align-items: stretch;
+}
+.element > .row > .description {
+	padding: 0 0.5em;
+	margin-top: 0.5em;
+	margin-bottom: 0;
+}
+.array .deleteBtn {
+	margin: 0 0.5em 0 1em;
+}
+.object .deleteBtn {
+	margin-left: 10px;
+}
+.addBtn {
+	margin: 0 0.25em;
+}
+.empty.description {
+	padding: 0.5em 0.25em;
+}
+.fullscreen {
+	padding: 1em;
+	box-sizing: border-box;
+}
+.mover {
+	cursor: pointer;
+	border: 0;
+	background-color: transparent;
+}
+</style>
diff --git a/src/store/editor.js b/src/store/editor.js
index fe017226..bb6eedc0 100644
--- a/src/store/editor.js
+++ b/src/store/editor.js
@@ -136,7 +136,7 @@ export default {
 		}
 	},
 	mutations: {
-		setModelDnd(state, obj = null) {
+		setModelDnD(state, obj = null) {
 			state.modelDnD = obj;
 		},
 		setDiscoverySearchTerm(state, searchTerm) {