[airavata-django-portal] 16/24: AIRAVATA-3477 Wrapped SelectInputEditor as web component

[ma...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

machristie pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git

commit 49dfb23291c7199d6ee5920f3f06370434ab1c1d
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Fri Sep 10 15:33:57 2021 -0400

    AIRAVATA-3477 Wrapped SelectInputEditor as web component
---
 .../experiment/input-editors/SelectInputEditor.vue | 22 ++++++------
 .../input-editors/SelectInputEditor.vue            | 40 ++++++++++++++++++++++
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/SelectInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/SelectInputEditor.vue
index d13069e..dbfe101 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/SelectInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/SelectInputEditor.vue
@@ -2,7 +2,7 @@
   <b-form-select
     :id="id"
     v-model="data"
-    :options="options"
+    :options="selectOptions"
     stacked
     :disabled="readOnly"
     :state="componentValidState"
@@ -23,17 +23,19 @@ export default {
     value: {
       type: String,
     },
+    options: {
+      type: Array,
+    },
   },
   computed: {
-    options: function () {
-      return "options" in this.editorConfig
-        ? this.editorConfig["options"].map((option) => {
-            return {
-              text: option[CONFIG_OPTION_TEXT_KEY],
-              value: option[CONFIG_OPTION_VALUE_KEY],
-            };
-          })
-        : [];
+    selectOptions: function () {
+      const options = this.options || this.editorConfig.options || [];
+      return options.map((option) => {
+        return {
+          text: option[CONFIG_OPTION_TEXT_KEY],
+          value: option[CONFIG_OPTION_VALUE_KEY],
+        };
+      });
     },
   },
 };
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/SelectInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/SelectInputEditor.vue
new file mode 100644
index 0000000..59b0681
--- /dev/null
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/SelectInputEditor.vue
@@ -0,0 +1,40 @@
+<template>
+  <select-input-editor
+    v-if="experimentInput"
+    :id="id"
+    :value="data"
+    :experiment-input="experimentInput"
+    :read-only="readOnly"
+    :options="options"
+    @input="valueChanged"
+  />
+</template>
+
+<script>
+import SelectInputEditor from "../../components/experiment/input-editors/SelectInputEditor.vue";
+import WebComponentInputEditorMixin from "./WebComponentInputEditorMixin.js";
+
+export default {
+  mixins: [WebComponentInputEditorMixin],
+  props: {
+    // Explicit copy props from mixin, workaround for bug, see
+    // https://github.com/vuejs/vue-web-component-wrapper/issues/30#issuecomment-427350734
+    // for more details
+    ...WebComponentInputEditorMixin.props,
+    options: {
+      type: Array,
+      default: null,
+    },
+  },
+  components: {
+    SelectInputEditor,
+  },
+};
+</script>
+
+<style lang="scss">
+@import "../styles";
+:host {
+  display: block;
+}
+</style>