diff --git a/src/components/parameter-schema/form-mode/ParameterInput.vue b/src/components/parameter-schema/form-mode/ParameterInput.vue index 0f6d1105369575909d9e7ca407b9663627b181de..54b53c375e65832a2d4074dd872bff578a536e6b 100644 --- a/src/components/parameter-schema/form-mode/ParameterInput.vue +++ b/src/components/parameter-schema/form-mode/ParameterInput.vue @@ -26,6 +26,7 @@ const props = defineProps<{ sizeModifier?: SizeModifierType; border?: boolean; allowRaw?: boolean; + forceRawFile?: boolean; }>(); const parameterType = computed<string>( @@ -69,7 +70,7 @@ const parameterType = computed<string>( :allow-raw="allowRaw" /> <parameter-file-input - v-else-if="parameter['format'] && !rawInput" + v-else-if="parameter['format'] && !rawInput && !forceRawFile" :required="required" :parameter="parameter" v-model="model as string" diff --git a/src/views/workflows/CreateClowmInfoView.vue b/src/views/workflows/CreateClowmInfoView.vue index 4c4261f4edd08479d4407c5c4ca52c3035185e38..a709e7d571208aa30a0fdf4a905f4eb4bec9dff2 100644 --- a/src/views/workflows/CreateClowmInfoView.vue +++ b/src/views/workflows/CreateClowmInfoView.vue @@ -7,6 +7,7 @@ import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue"; import { useWorkflowStore } from "@/stores/workflows"; import { DocumentationEnum } from "@/client/workflow"; import DraggableLists from "@/components/DraggableLists.vue"; +import ParameterInput from "@/components/parameter-schema/form-mode/ParameterInput.vue"; const props = defineProps<{ workflow_id?: string; @@ -362,21 +363,25 @@ onMounted(() => { on the user or execution environment. </p> <div - class="d-flex flex-wrap overflow-y-auto p-1 border rounded border-dashed mb-2" + class="d-flex flex-wrap overflow-y-auto p-1 border border-bottom-0 rounded-top border-dashed" style="max-height: 30vh" - v-if="parameterPools.examples.length > 0" > <b class="ms-1 w-100">Workflow parameters:</b> - <div - class="w-fit border px-2 rounded cursor-pointer m-1 parameter-container" - v-for="(param, index) in parameterPools.examples" - :key="param" - @click="addExampleParameter(param, index)" - > - {{ param }} + <template v-if="parameterPools.examples.length > 0"> + <div + class="w-fit border px-2 rounded cursor-pointer m-1 parameter-container" + v-for="(param, index) in parameterPools.examples" + :key="param" + @click="addExampleParameter(param, index)" + > + {{ param }} + </div> + </template> + <div v-else class="px-2 text-secondary m-1"> + <i>Empty</i> </div> </div> - <table class="table table-bordered"> + <table class="table table-bordered align-middle"> <thead> <tr> <th scope="col"><b>Parameter</b></th> @@ -390,73 +395,14 @@ onMounted(() => { > <td style="width: 10%">{{ param }}</td> <td class="d-flex justify-content-between align-items-center"> - <input - v-if=" - getParameterType(param) === 'number' || - getParameterType(param) === 'integer' - " - type="number" - class="form-control form-control-sm flex-grow" - v-model="infoState.exampleParameters[param]" - :step="getParameterType(param) === 'integer' ? 1 : 0.0001" - :min="parameterSchema[param]['minimum']" - :max="parameterSchema[param]['maximum']" - /> - <div - v-else-if="getParameterType(param) === 'boolean'" - class="flex-grow" - > - <div class="form-check form-check-inline"> - <label - class="form-check-label" - :for="'trueOption' + param.replace(/\./g, '')" - >True</label - > - <input - class="form-check-input" - type="radio" - :name="'inlineRadioOptions' + param.replace(/\./g, '')" - :id="'trueOption' + param.replace(/\./g, '')" - :value="true" - v-model="infoState.exampleParameters[param]" - /> - </div> - <div class="form-check form-check-inline"> - <input - class="form-check-input" - type="radio" - :name="'inlineRadioOptions' + param.replace(/\./g, '')" - :id="'falseOption' + param.replace(/\./g, '')" - :value="false" - v-model="infoState.exampleParameters[param]" - /> - <label - class="form-check-label" - :for="'falseOption' + param.replace(/\./g, '')" - >False</label - > - </div> + <div class="flex-fill input-group"> + <parameter-input + :parameter="parameterSchema[param]" + v-model="infoState.exampleParameters[param]" + size-modifier="sm" + force-raw-file + /> </div> - <select - v-else-if="parameterSchema[param]?.['enum']" - class="form-select form-select-sm flex-grow" - v-model="infoState.exampleParameters[param]" - > - <option - v-for="option in parameterSchema[param]?.['enum']" - :key="option" - :value="option" - > - {{ option }} - </option> - </select> - <input - v-else - type="text" - class="form-control form-control-sm flex-grow" - v-model="infoState.exampleParameters[param]" - :pattern="parameterSchema[param]?.['pattern']" - /> <button type="button" class="btn btn-outline-danger btn-sm ms-2" diff --git a/src/views/workflows/CreateParameterTranslationView.vue b/src/views/workflows/CreateParameterTranslationView.vue index 33f14ba17310f0019efe95fc4b78589a8c1d1512..dc88cd37ff58b6179f74de86384f34e6af17d0f4 100644 --- a/src/views/workflows/CreateParameterTranslationView.vue +++ b/src/views/workflows/CreateParameterTranslationView.vue @@ -288,8 +288,8 @@ onMounted(() => { :resource-parameter=" parameterState.resourceParameters.has(param) " - :advanced="!parameterState.resourceParameters.has(param)" raw-model + force-raw-file /> </div> <button