Add parameter mapping inpit to parameter form

#105

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">

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 }}

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"

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"

src/components/parameter-schema/form-mode/ParameterMappingInput.vue

+<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>

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");
     }
   }