[airavata-django-portal] 03/05: AIRAVATA-3285 text input for string values

[ma...@apache.org]

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

machristie pushed a commit to branch AIRAVATA-3285--Interactive-output-view-providers
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git

commit 54a8358bfcab26f2b6e7bf2c1bc9021c88fad004
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Wed May 13 09:46:34 2020 -0400

    AIRAVATA-3285 text input for string values
---
 .../InteractiveParameterTextInputWidget.vue        | 48 ++++++++++++++++++++++
 .../InteractiveParameterWidgetContainer.vue        |  5 ++-
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/output-displays/interactive-parameters/InteractiveParameterTextInputWidget.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/output-displays/interactive-parameters/InteractiveParameterTextInputWidget.vue
new file mode 100644
index 0000000..3af5ceb
--- /dev/null
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/output-displays/interactive-parameters/InteractiveParameterTextInputWidget.vue
@@ -0,0 +1,48 @@
+<template>
+  <b-input-group>
+    <b-form-input
+      ref="textInput"
+      :value="value"
+      @input="currentValue = $event"
+      @keydown.native.enter="enterKeyPressed"
+    />
+    <b-input-group-append>
+      <b-button variant="primary" :disabled="disabled" @click="submit"
+        >Submit</b-button
+      >
+    </b-input-group-append>
+  </b-input-group>
+</template>
+
+<script>
+export default {
+  name: "interactive-parameter-text-input-widget",
+  props: {
+    value: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      currentValue: this.value
+    };
+  },
+  computed: {
+    disabled() {
+      return this.currentValue === this.value;
+    }
+  },
+  methods: {
+    submit() {
+      this.$emit("input", this.currentValue);
+    },
+    enterKeyPressed() {
+      if (!this.disabled) {
+        this.$refs.textInput.blur();
+        this.submit();
+      }
+    }
+  }
+};
+</script>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/output-displays/interactive-parameters/InteractiveParameterWidgetContainer.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/output-displays/interactive-parameters/InteractiveParameterWidgetContainer.vue
index 56f9367..8886a5a 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/output-displays/interactive-parameters/InteractiveParameterWidgetContainer.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/output-displays/interactive-parameters/InteractiveParameterWidgetContainer.vue
@@ -9,6 +9,7 @@
 <script>
 import InteractiveParameterCheckboxWidget from "./InteractiveParameterCheckboxWidget";
 import InteractiveParameterSelectWidget from "./InteractiveParameterSelectWidget";
+import InteractiveParameterTextInputWidget from "./InteractiveParameterTextInputWidget";
 
 export default {
   name: "interactive-parameter-widget-container",
@@ -26,8 +27,10 @@ export default {
     widgetComponent() {
       if (this.parameter.options) {
         return InteractiveParameterSelectWidget;
-      } else if (typeof this.parameter.value === "boolean") {
+      } else if (typeof this.parameter.value === "boolean" || (this.parameter.widget && this.parameter.widget === 'checkbox')) {
         return InteractiveParameterCheckboxWidget;
+      } else if (typeof this.parameter.value === "string" || (this.parameter.widget && this.parameter.widget === 'textinput')) {
+        return InteractiveParameterTextInputWidget;
       } else {
         return null;
       }