[airavata-django-portal] 07/20: AIRAVATA-3453 Update experiment input when autocomplete option selected

[ma...@apache.org]

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

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

commit 51d768cd00636a4f54bb3f5849e00432cfa5be24
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Wed May 5 10:27:15 2021 -0400

    AIRAVATA-3453 Update experiment input when autocomplete option selected
---
 .../js/web-components/ExperimentEditor.vue                       | 7 ++++---
 .../workspace/templates/django_airavata_workspace/supcrtbl2.html | 9 ++++++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
index 0de4bff..611fbdc 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
@@ -13,7 +13,7 @@
       <div
         :ref="input.name"
         :key="input.name"
-        @input="updateInputValue($event, input)"
+        @input="updateInputValue(input.name, $event.target.value)"
       >
       <!-- programmatically define slots as native slots (not Vue slots), see #mounted() -->
       </div>
@@ -82,8 +82,9 @@ export default {
     updateExperimentName(event) {
       this.experiment.experimentName = event.target.value;
     },
-    updateInputValue(event, experimentInput) {
-      experimentInput.value = event.target.value;
+    updateInputValue(inputName, value) {
+      const experimentInput = this.experiment.experimentInputs.find(i => i.name === inputName);
+      experimentInput.value = value;
     },
     onSubmit(event) {
       // console.log(event);
diff --git a/django_airavata/apps/workspace/templates/django_airavata_workspace/supcrtbl2.html b/django_airavata/apps/workspace/templates/django_airavata_workspace/supcrtbl2.html
index fc266a3..5edd42c 100644
--- a/django_airavata/apps/workspace/templates/django_airavata_workspace/supcrtbl2.html
+++ b/django_airavata/apps/workspace/templates/django_airavata_workspace/supcrtbl2.html
@@ -220,7 +220,14 @@ $('document').ready(function() {
     },replace: function (word) {
       return word + ' ';
     }
-  }]);
+  }]).on('textComplete:select', e => {
+    // Keep the value of 'Reaction' up-to-date when an autocomplete option is selected.
+    // experiment-editor listens for 'input' events, which are triggered when user
+    // types in 'Reaction' textarea, but selecting an autocomplete option doesn't
+    // trigger an 'input' event, so we need to manually update the value of the
+    // experiment input when an autocomplete option is selected.
+    document.getElementById('experiment-editor').vueComponent.updateInputValue('Reaction', e.target.value);
+  });
 });
 
 function resetViews() {