Fix band selection

openEOPlatform · Sep 10, 2024 · 00fc917 · 00fc917
1 parent 736706e
commit 00fc917
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/src/components/ParameterDataType.vue b/src/components/ParameterDataType.vue
@@ -29,7 +29,7 @@
 			<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>
+		<SelectBox v-else-if="isSelection" v-model="state" :key="type" :type="type" :editable="editable" :schema="schema" :context="dependency" :openDirection="type === 'band-name' ? 'below' : 'auto'" @onDetails="onSelectDetails"></SelectBox>
 		<!-- Temporal (date, time, date-time, temporal-interval) -->
 		<TemporalPicker v-else-if="isTemporal" v-model="state" :key="type" :type="type" :editable="editable"></TemporalPicker>
 		<!-- Bounding Box -->

diff --git a/src/components/datatypes/ObjectEditor.vue b/src/components/datatypes/ObjectEditor.vue
@@ -3,18 +3,18 @@
 		<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" />
+					<ObjectEditorDnD v-if="visual" :parameter="parameter" :editable="editable" :schema="schema" :parent="parent" :context="context" :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">
+			<small v-if="editable && isObject" 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" />
+			<ObjectEditorDnD :parameter="parameter" :editable="editable" :schema="schema" :parent="parent" :context="context" :value="data" :isObject="isObject" ref="visual" @input="updateFromVisual" />
 		</template>
 	</div>
 </template>
@@ -140,13 +140,22 @@ export default {
 }
 </script>
 
+<style lang="scss">
+.object-editor .multiselect__content-wrapper {
+	max-height: 200px !important;
+}
+</style>
 <style lang="scss" scoped>
 .object-editor {
 	width: 100%;
-	min-height: 300px;
+	min-height: 400px;
 	max-height: calc(70vh + 1.5em);
 	display: flex;
 	flex-direction: column;
+
+	.multiselect__content-wrapper {
+		max-height: 200px;
+	}
 }
 #object-tabs {
 	max-height: 70vh;

diff --git a/src/components/datatypes/SelectBox.vue b/src/components/datatypes/SelectBox.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="select-container">
 		<template v-if="loaded">
-			<MultiSelect v-model="selected" :key="type" ref="htmlElement" label="label" track-by="id" :multiple="multiple" :options="selectOptions" :allowEmpty="false" :preselectFirst="preselect" :disabled="!editable" :deselectLabel="deselectLabel" :taggable="taggable" :tagPlaceholder="tagPlaceholder" @tag="addValue"></MultiSelect>
+			<MultiSelect v-model="selected" :key="type" ref="htmlElement" label="label" track-by="id" :multiple="multiple" :options="selectOptions" :allowEmpty="false" :preselectFirst="preselect" :disabled="!editable" :deselectLabel="deselectLabel" :taggable="taggable" :tagPlaceholder="tagPlaceholder" :openDirection="openDirection" @tag="addValue"></MultiSelect>
 			<button v-if="showDetails" type="button" title="Details" @click="$emit('onDetails')"><i class="fas fa-info"></i></button>
 		</template>
 		<div class="loading" v-else><i class="fas fa-spinner fa-spin"></i> Loading options...</div>
@@ -37,6 +37,10 @@ export default {
 		optionFilter: {
 			type: Function,
 			default: null
+		},
+		openDirection: {
+			type: String,
+			default: 'auto'
 		}
 	},
 	computed: {