Extract and typescript-ify datatype selection in wfeditor.

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import type { DatatypesMapperModel } from "@/components/Datatypes/model";
+
+import FormElement from "@/components/Form/FormElement.vue";
+
+const props = withDefaults(
+    defineProps<{
+        id: string;
+        value?: string;
+        title: string;
+        help: string;
+        datatypes: DatatypesMapperModel["datatypes"];
+    }>(),
+    {
+        value: null,
+    }
+);
+
+const emit = defineEmits(["onChange"]);
+
+const datatypeExtensions = computed(() => {
+    const extensions = [];
+    for (const key in props.datatypes) {
+        extensions.push({ 0: props.datatypes[key] || "", 1: props.datatypes[key] || "" });
+    }
+    extensions.sort((a, b) => (a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : 0));
+    extensions.unshift({
+        0: "Sequences",
+        1: "Sequences",
+    });
+    extensions.unshift({
+        0: "Roadmaps",
+        1: "Roadmaps",
+    });
+    extensions.unshift({
+        0: "Leave unchanged",
+        1: "",
+    });
+    return extensions;
+});
+
+function onChange(newDatatype: unknown) {
+    emit("onChange", newDatatype);
+}
+</script>
+
+<template>
+    <FormElement
+        :id="id"
+        :value="value"
+        :attributes="{ options: datatypeExtensions }"
+        :title="title"
+        type="select"
+        :help="help"
+        @input="onChange" />
+</template>

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

@@ -9,14 +9,13 @@
                 title="Rename dataset"
                 type="text"
                 @input="onInput" />
-            <FormElement
+            <FormDatatype
                 :id="actionNames.ChangeDatatypeAction__newtype"
                 :value="formData[actionNames.ChangeDatatypeAction__newtype]"
-                :attributes="{ options: datatypeExtensions }"
+                :datatypes="datatypes"
                 title="Change datatype"
-                type="select"
                 help="This action will change the datatype of the output to the indicated datatype."
-                @input="onDatatype" />
+                @onChange="onDatatype" />
             <FormElement
                 :id="actionNames.TagDatasetAction__tags"
                 :value="formData[actionNames.TagDatasetAction__tags]"
@@ -79,6 +78,7 @@
 <script>
 import FormCard from "@/components/Form/FormCard";
 import FormElement from "@/components/Form/FormElement";
+import FormDatatype from "@/components/Workflow/Editor/Forms/FormDatatype";
 import FormOutputLabel from "@/components/Workflow/Editor/Forms/FormOutputLabel";
 
 const actions = [
@@ -101,6 +101,7 @@ export default {
         FormCard,
         FormElement,
         FormOutputLabel,
+        FormDatatype,
     },
     props: {
         outputName: {
@@ -148,26 +149,6 @@ export default {
             });
             return index;
         },
-        datatypeExtensions() {
-            const extensions = [];
-            for (const key in this.datatypes) {
-                extensions.push({ 0: this.datatypes[key], 1: this.datatypes[key] });
-            }
-            extensions.sort((a, b) => (a.label > b.label ? 1 : a.label < b.label ? -1 : 0));
-            extensions.unshift({
-                0: "Sequences",
-                1: "Sequences",
-            });
-            extensions.unshift({
-                0: "Roadmaps",
-                1: "Roadmaps",
-            });
-            extensions.unshift({
-                0: "Leave unchanged",
-                1: "",
-            });
-            return extensions;
-        },
         renameHelp() {
             /* TODO: FormElement should provide a slot for custom help templating instead. */
             const helpLink = `<a href="${this.renameHelpUrl}">here</a>`;