Build dataset collection input definition on the client.

client/src/components/Form/Elements/FormSelection.vue

@@ -100,7 +100,7 @@ watch(
 );
 
 const showSelectPreference = computed(
-    () => props.multiple && props.display !== "checkboxes" && props.display !== "radio"
+    () => props.multiple && props.display !== "checkboxes" && props.display !== "radio" && props.display !== "simple"
 );
 
 const displayMany = computed(() => showSelectPreference.value && useMany.value);

client/src/components/Workflow/Editor/Forms/FormDatatype.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 
 import type { DatatypesMapperModel } from "@/components/Datatypes/model";
 
@@ -8,16 +8,27 @@ import FormElement from "@/components/Form/FormElement.vue";
 const props = withDefaults(
     defineProps<{
         id: string;
-        value?: string;
+        value?: string | string[];
         title: string;
         help: string;
+        multiple: boolean;
         datatypes: DatatypesMapperModel["datatypes"];
     }>(),
     {
         value: null,
+        multiple: false,
     }
 );
 
+const currentValue = ref<string | string[] | undefined>(undefined);
+
+watch(
+    () => props.value,
+    (newValue) => {
+        currentValue.value = newValue;
+    },
+    { immediate: true }
+);
 const emit = defineEmits(["onChange"]);
 
 const datatypeExtensions = computed(() => {
@@ -34,25 +45,28 @@ const datatypeExtensions = computed(() => {
         0: "Roadmaps",
         1: "Roadmaps",
     });
-    extensions.unshift({
-        0: "Leave unchanged",
-        1: "",
-    });
+    if (!props.multiple) {
+        extensions.unshift({
+            0: "Leave unchanged",
+            1: "",
+        });
+    }
     return extensions;
 });
 
-function onChange(newDatatype: unknown) {
-    emit("onChange", newDatatype);
+function onInput(newDatatype: string) {
+    currentValue.value = newDatatype;
+    emit("onChange", currentValue.value);
 }
 </script>
 
 <template>
     <FormElement
         :id="id"
-        :value="value"
-        :attributes="{ options: datatypeExtensions }"
+        :value="currentValue"
+        :attributes="{ options: datatypeExtensions, multiple: multiple, display: 'simple', optional: true }"
         :title="title"
         type="select"
         :help="help"
-        @input="onChange" />
+        @input="onInput" />
 </template>

client/src/components/Workflow/Editor/Forms/FormDefault.vue

@@ -43,8 +43,10 @@
                 v-if="isSubworkflow"
                 :step="step"
                 @onUpdateStep="(id, step) => emit('onUpdateStep', id, step)" />
+            <FormInputCollection v-if="(type = 'data_collection')" :step="step" :datatypes="datatypes">
+            </FormInputCollection>
             <FormDisplay
-                v-if="configForm?.inputs"
+                v-else-if="configForm?.inputs"
                 :id="formDisplayId"
                 :key="formKey"
                 :inputs="configForm.inputs"
@@ -78,6 +80,7 @@ import FormConditional from "./FormConditional.vue";
 import FormCard from "@/components/Form/FormCard.vue";
 import FormDisplay from "@/components/Form/FormDisplay.vue";
 import FormElement from "@/components/Form/FormElement.vue";
+import FormInputCollection from "@/components/Workflow/Editor/Forms/FormInputCollection.vue";
 import FormOutputLabel from "@/components/Workflow/Editor/Forms/FormOutputLabel.vue";
 
 const props = defineProps<{

client/src/components/Workflow/Editor/Forms/FormInputCollection.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import type { DatatypesMapperModel } from "@/components/Datatypes/model";
+import type { Step } from "@/stores/workflowStepStore";
+
+import FormElement from "@/components/Form/FormElement.vue";
+import FormDatatype from "@/components/Workflow/Editor/Forms/FormDatatype.vue";
+
+defineProps<{
+    step: Step;
+    datatypes: DatatypesMapperModel["datatypes"];
+}>();
+
+const formats = ref<string[]>();
+const tags = ref<string>("");
+const optional = ref<boolean>(false);
+
+function onDatatype(newDatatype: string[]) {
+    formats.value = newDatatype;
+    console.log(formats.value);
+}
+
+function onTags(newTags: string) {
+    tags.value = newTags;
+}
+
+function onOptional(newOptional: boolean) {
+    optional.value = newOptional;
+}
+</script>
+
+<template>
+    <div>
+        <div id="form-element-collection_type" class="ui-form-element section-row">
+            <div class="ui-form-title">
+                <span class="ui-form-title-text"><label for="collection_type">Collection type</label></span>
+                <span class="ui-form-title-message">- optional</span>
+            </div>
+            <div data-label="Collection type" class="ui-form-field">
+                <div class="row align-items-center">
+                    <div class="col">
+                        <input
+                            id="collection_type"
+                            type="text"
+                            placeholder=""
+                            list="collection_type-datalist"
+                            class="form-control ui-input" />
+                        <datalist id="collection_type-datalist">
+                            <option label="List of Datasets" value="list"></option>
+                            <option label="Dataset Pair" value="paired"></option>
+                            <option label="List of Dataset Pairs" value="list:paired"></option>
+                        </datalist>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <FormElement :id="optional" :value="optional" title="Optional" type="boolean" @input="onOptional" />
+        <FormDatatype
+            :id="todo"
+            :value="formats"
+            :datatypes="datatypes"
+            title="Format(s)"
+            :multiple="true"
+            help="Leave empty to auto-generate filtered list at runtime based on connections."
+            @onChange="onDatatype" />
+        <FormElement
+            :id="tag"
+            :value="tags"
+            title="Tag filter"
+            :optional="true"
+            type="text"
+            help="Tags to automatically filter inputs"
+            @input="onTags" />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../../Form/_form-elements.scss";
+</style>