diff --git a/src/components/parameter-schema/ParameterSchemaFormComponent.vue b/src/components/parameter-schema/ParameterSchemaFormComponent.vue index 7ecdc098b999c845322f8b6e86c390c28b87eed1..50b1fb871825ba1e1af342edcf42be4dff19562f 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 67ca9895d8d4a09da7f9c48b1c14e51939aea21d..182a3773ad3ef9507a168a27933e9553eac1eef7 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 06c25a71ee78705268d7ec380965a14e98bfb1f2..c36f61227585a05f4ad28b48e5b1c60de7b655b4 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 e0a1b3aa451f661bf92d7bc5bdbc29eb7e6ffc3c..97c6b776925c8589774ea605fd5d91200ddcbfff 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 0000000000000000000000000000000000000000..67a2e2398a6342333afb0416c55428b11d166e2d --- /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 120b034209e243589d232a2341f3b0f658ab32f5..0888b4a6339e2660ff0dee09cb237d05d77129e4 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"); } }