From 8124dfee024b47ded1ecbc326410e2a1b71b2592 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20G=C3=B6bel?= <dgoebel@techfak.uni-bielefeld.de>
Date: Fri, 22 Mar 2024 10:46:07 +0100
Subject: [PATCH] Add parameter mapping inpit to parameter form
#105
---
.../ParameterSchemaFormComponent.vue | 13 +++--
.../form-mode/ParameterEnumInput.vue | 5 --
.../form-mode/ParameterGroupForm.vue | 2 +
.../form-mode/ParameterInput.vue | 14 ++++-
.../form-mode/ParameterMappingInput.vue | 56 +++++++++++++++++++
.../form-mode/ParameterResourceInput.vue | 1 -
6 files changed, 80 insertions(+), 11 deletions(-)
create mode 100644 src/components/parameter-schema/form-mode/ParameterMappingInput.vue
diff --git a/src/components/parameter-schema/ParameterSchemaFormComponent.vue b/src/components/parameter-schema/ParameterSchemaFormComponent.vue
index 7ecdc09..50b1fb8 100644
--- a/src/components/parameter-schema/ParameterSchemaFormComponent.vue
+++ b/src/components/parameter-schema/ParameterSchemaFormComponent.vue
@@ -189,8 +189,8 @@ function updateSchema(schema: Record<string, any>) {
formState.formInput = groupedParameters.reduce((acc, val) => {
return { ...acc, ...val };
});
+ loadParameters({ params: props.parameterExtension?.defaults }, false);
loadParameters(executionRepository.popTemporaryParameters());
- loadParameters({ params: props.parameterExtension?.defaults });
}
function startWorkflow() {
@@ -212,7 +212,10 @@ function startWorkflow() {
}
}
-function loadParameters(tempParams?: TemporaryParams) {
+function loadParameters(
+ tempParams?: TemporaryParams,
+ showSuccessToast: boolean = true,
+) {
if (tempParams?.params) {
for (const param in tempParams.params) {
if (param in formState.formInput) {
@@ -224,8 +227,9 @@ function loadParameters(tempParams?: TemporaryParams) {
formState.metaParameters = tempParams.metaParams;
}
if (
- Object.keys(tempParams?.params ?? {}).length > 0 ||
- Object.keys(tempParams?.metaParams ?? {}).length > 0
+ showSuccessToast &&
+ (Object.keys(tempParams?.params ?? {}).length > 0 ||
+ Object.keys(tempParams?.metaParams ?? {}).length > 0)
) {
parameterLoadToast?.show();
}
@@ -300,6 +304,7 @@ onMounted(() => {
:showHidden="showHidden"
:show-optional="showOptional"
:resource-parameters="props.clowmInfo?.resourceParameters"
+ :mapping="parameterExtension?.mapping"
/>
</template>
<div class="card mb-3">
diff --git a/src/components/parameter-schema/form-mode/ParameterEnumInput.vue b/src/components/parameter-schema/form-mode/ParameterEnumInput.vue
index 67ca989..182a377 100644
--- a/src/components/parameter-schema/form-mode/ParameterEnumInput.vue
+++ b/src/components/parameter-schema/form-mode/ParameterEnumInput.vue
@@ -13,9 +13,6 @@ const props = defineProps({
},
},
required: Boolean,
- helpId: {
- type: String,
- },
sizeModifier: {
type: String as PropType<SizeModifierType>,
},
@@ -38,12 +35,10 @@ const dynamicCssClasses = computed<string[]>(() => {
<template>
<select
- ref="enumSelection"
v-model="model"
class="form-select"
:class="dynamicCssClasses"
:required="required"
- :aria-describedby="props.helpId"
>
<option v-for="val in possibleValues" :key="val">
{{ val }}
diff --git a/src/components/parameter-schema/form-mode/ParameterGroupForm.vue b/src/components/parameter-schema/form-mode/ParameterGroupForm.vue
index 06c25a7..c36f612 100644
--- a/src/components/parameter-schema/form-mode/ParameterGroupForm.vue
+++ b/src/components/parameter-schema/form-mode/ParameterGroupForm.vue
@@ -31,6 +31,7 @@ const props = defineProps({
type: Array as PropType<string[]>,
required: false,
},
+ mapping: Object as PropType<Record<string, Record<string, string | number>>>,
});
const title = computed<string>(() => props.parameterGroup["title"]);
const icon = computed<string>(() => props.parameterGroup["fa_icon"]);
@@ -109,6 +110,7 @@ function parameterId(parameterName: string): string {
border="secondary"
:resource-parameter="resourceParameters?.includes(parameterName)"
:allow-raw="showOptional"
+ :mapping="mapping?.[parameterName]"
/>
<span
class="input-group-text cursor-pointer px-2 border border-secondary"
diff --git a/src/components/parameter-schema/form-mode/ParameterInput.vue b/src/components/parameter-schema/form-mode/ParameterInput.vue
index e0a1b3a..97c6b77 100644
--- a/src/components/parameter-schema/form-mode/ParameterInput.vue
+++ b/src/components/parameter-schema/form-mode/ParameterInput.vue
@@ -7,6 +7,7 @@ import ParameterEnumInput from "@/components/parameter-schema/form-mode/Paramete
import ParameterFileInput from "@/components/parameter-schema/form-mode/ParameterFileInput.vue";
import ParameterStringInput from "@/components/parameter-schema/form-mode/ParameterStringInput.vue";
import type { SizeModifierType, ExtendedColors } from "@/types/PropTypes";
+import ParameterMappingInput from "@/components/parameter-schema/form-mode/ParameterMappingInput.vue";
const model = defineModel<number | string | boolean | undefined>({
required: true,
@@ -23,6 +24,7 @@ const props = defineProps<{
border?: ExtendedColors;
allowRaw?: boolean;
forceRawFile?: boolean;
+ mapping?: Record<string, string | number>;
}>();
const parameterType = computed<string>(
@@ -31,8 +33,18 @@ const parameterType = computed<string>(
</script>
<template>
+ <parameter-mapping-input
+ v-if="mapping && Object.keys(mapping ?? {}).length > 0 && !rawInput"
+ v-model="model as string | number | undefined"
+ :required="required"
+ :size-modifier="sizeModifier"
+ :border="border"
+ :mapping="mapping"
+ :allow-raw="allowRaw"
+ @switch-to-raw="rawInput = true"
+ />
<parameter-number-input
- v-if="parameterType === 'number' || parameterType === 'integer'"
+ v-else-if="parameterType === 'number' || parameterType === 'integer'"
:parameter="parameter"
v-model="model as number"
:required="required"
diff --git a/src/components/parameter-schema/form-mode/ParameterMappingInput.vue b/src/components/parameter-schema/form-mode/ParameterMappingInput.vue
new file mode 100644
index 0000000..67a2e23
--- /dev/null
+++ b/src/components/parameter-schema/form-mode/ParameterMappingInput.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { ExtendedColors, SizeModifierType } from "@/types/PropTypes";
+
+const model = defineModel<string | number | undefined>({ required: true });
+
+const props = defineProps<{
+ required?: boolean;
+ sizeModifier?: SizeModifierType;
+ border?: ExtendedColors;
+ mapping: Record<string, string | number>;
+ allowRaw?: boolean;
+}>();
+
+const emit = defineEmits<{
+ (e: "switch-to-raw"): void;
+}>();
+
+const dynamicCssClasses = computed<string[]>(() => {
+ const cssClasses = [];
+ if (props.sizeModifier) {
+ cssClasses.push(`form-select-${props.sizeModifier}`);
+ }
+ if (props.border) {
+ cssClasses.push("border", `border-${props.border}`);
+ }
+ return cssClasses;
+});
+</script>
+
+<template>
+ <select
+ v-model="model"
+ class="form-select"
+ :class="dynamicCssClasses"
+ :required="required"
+ >
+ <option
+ v-for="(val, paramOption) in mapping"
+ :key="paramOption"
+ :value="val"
+ >
+ {{ paramOption }}
+ </option>
+ </select>
+ <button
+ v-if="allowRaw"
+ type="button"
+ class="btn btn-outline-secondary"
+ @click="emit('switch-to-raw')"
+ >
+ Advanced
+ </button>
+</template>
+
+<style scoped></style>
diff --git a/src/components/parameter-schema/form-mode/ParameterResourceInput.vue b/src/components/parameter-schema/form-mode/ParameterResourceInput.vue
index 120b034..0888b4a 100644
--- a/src/components/parameter-schema/form-mode/ParameterResourceInput.vue
+++ b/src/components/parameter-schema/form-mode/ParameterResourceInput.vue
@@ -113,7 +113,6 @@ function parseModel(val?: string) {
Object.assign(resource, tempResource);
} else {
// Not resource path
- console.log("Not resource path");
emit("switch-to-raw");
}
}
--
GitLab