You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2021/10/05 19:47:20 UTC
[airavata-django-portal] 09/24: AIRAVATA-3477 radio button input
editor web component
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 154bce88cef385d365fdda6a4b44d9a628a05f4d
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Thu Sep 2 13:07:20 2021 -0400
AIRAVATA-3477 radio button input editor web component
---
.../input-editors/RadioButtonInputEditor.vue | 26 +++++++++------
.../experiment/input-editors/StringInputEditor.vue | 3 ++
...gInputEditor.vue => RadioButtonInputEditor.vue} | 39 +++++++++++++---------
.../input-editors/StringInputEditor.vue | 20 +++--------
4 files changed, 47 insertions(+), 41 deletions(-)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/RadioButtonInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/RadioButtonInputEditor.vue
index 6d38414..3a19b17 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/RadioButtonInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/RadioButtonInputEditor.vue
@@ -1,12 +1,15 @@
<template>
+ <!-- stop propagation of native input events so that they don't conflict with
+ native input events generated by web component wrappers -->
<b-form-radio-group
:id="id"
v-model="data"
- :options="options"
+ :options="radioOptions"
stacked
:state="componentValidState"
:disabled="readOnly"
@input="valueChanged"
+ @input.native.stop
/>
</template>
@@ -23,17 +26,20 @@ 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],
- };
- })
- : [];
+ radioOptions: function () {
+ // passed in options take precedence over options in input metadata
+ 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/components/experiment/input-editors/StringInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/StringInputEditor.vue
index 988fe22..a272f2c 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/StringInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/StringInputEditor.vue
@@ -1,4 +1,6 @@
<template>
+ <!-- stop propagation of native input events so that they don't conflict with
+ native input events generated by web component wrappers -->
<b-form-input
:id="id"
type="text"
@@ -6,6 +8,7 @@
:state="componentValidState"
:disabled="readOnly"
@input="valueChanged"
+ @input.native.stop
/>
</template>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue
similarity index 63%
copy from django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue
copy to django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue
index bed4a8c..5e03681 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue
@@ -1,20 +1,20 @@
<template>
- <!-- NOTE: experimentInput is late bound, don't create component until it is available -->
<div>
- <string-input-editor
- ref="inputEditor"
+ <radio-button-input-editor
v-if="experimentInput"
:id="id"
:value="data"
:experiment-input="experimentInput"
:read-only="readOnly"
+ :options="options"
@input="onInput"
/>
</div>
</template>
<script>
-import StringInputEditor from "../../components/experiment/input-editors/StringInputEditor.vue";
+import RadioButtonInputEditor from "../../components/experiment/input-editors/RadioButtonInputEditor.vue";
+
import Vue from "vue";
import { BootstrapVue } from "bootstrap-vue";
import AsyncComputed from "vue-async-computed";
@@ -26,23 +26,28 @@ Vue.use(AsyncComputed);
export default {
props: {
value: String,
- // experimentInput: Object,
name: String,
+ options: {
+ type: Array,
+ default: null,
+ },
},
+ store: store,
components: {
- StringInputEditor,
+ RadioButtonInputEditor,
},
- store: store,
mounted() {
this.$nextTick(() => {
- // Stop wrapped input editor 'input' event from bubbling up so it doesn't
- // conflict with this component's 'input' event. (see #onInput)
- this.$refs.inputEditor.$el.addEventListener('input', this.stopPropagation);
+ for (const key of Object.keys(this.$props)) {
+ // workaround for issues around setting props before WC connected,
+ // see https://github.com/vuejs/vue-web-component-wrapper/pull/81
+
+ // copy properties set on host element to wrapper component
+ // (mostly this is done so that the options array can be set by client code)
+ this.$parent.props[key] = this.$el.getRootNode().host[key];
+ }
})
},
- destroyed() {
- this.$refs.inputEditor.$el.removeEventListener('input', this.stopPropagation);
- },
data() {
return {
data: this.value,
@@ -71,9 +76,11 @@ export default {
this.$el.dispatchEvent(inputEvent);
}
},
- stopPropagation(event) {
- event.stopPropagation();
- }
+ },
+ watch: {
+ value(value) {
+ this.data = value;
+ },
},
};
</script>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue
index bed4a8c..c68385b 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue
@@ -2,7 +2,6 @@
<!-- NOTE: experimentInput is late bound, don't create component until it is available -->
<div>
<string-input-editor
- ref="inputEditor"
v-if="experimentInput"
:id="id"
:value="data"
@@ -26,23 +25,12 @@ Vue.use(AsyncComputed);
export default {
props: {
value: String,
- // experimentInput: Object,
name: String,
},
components: {
StringInputEditor,
},
store: store,
- mounted() {
- this.$nextTick(() => {
- // Stop wrapped input editor 'input' event from bubbling up so it doesn't
- // conflict with this component's 'input' event. (see #onInput)
- this.$refs.inputEditor.$el.addEventListener('input', this.stopPropagation);
- })
- },
- destroyed() {
- this.$refs.inputEditor.$el.removeEventListener('input', this.stopPropagation);
- },
data() {
return {
data: this.value,
@@ -71,10 +59,12 @@ export default {
this.$el.dispatchEvent(inputEvent);
}
},
- stopPropagation(event) {
- event.stopPropagation();
- }
},
+ watch: {
+ value(value) {
+ this.data = value;
+ }
+ }
};
</script>