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:24 UTC
[airavata-django-portal] 13/24: AIRAVATA-3477 Wrapped
CheckboxInputEditor as 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 06c38f12ee992154c21a4c366cd9fa9637d7aeff
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Thu Sep 9 09:42:58 2021 -0400
AIRAVATA-3477 Wrapped CheckboxInputEditor as web component
---
.../input-editors/CheckboxInputEditor.vue | 27 ++++++++++++++--------
...ttonInputEditor.vue => CheckboxInputEditor.vue} | 9 +++++---
.../input-editors/RadioButtonInputEditor.vue | 3 +++
.../input-editors/StringInputEditor.vue | 3 +++
4 files changed, 29 insertions(+), 13 deletions(-)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/CheckboxInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/CheckboxInputEditor.vue
index 5777e87..1c363de 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/CheckboxInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/CheckboxInputEditor.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-checkbox-group
:id="id"
:checked="selectedOptions"
- :options="options"
+ :options="checkboxOptions"
stacked
:state="componentValidState"
:disabled="readOnly"
@input="selectionsChanged"
+ @input.native.stop
/>
</template>
@@ -23,17 +26,21 @@ export default {
value: {
type: String,
},
+ options: {
+ type: Array,
+ default: null,
+ },
},
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],
- };
- })
- : [];
+ checkboxOptions: 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],
+ };
+ });
},
selectedOptions() {
return this.data ? this.data.split(",") : [];
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/CheckboxInputEditor.vue
similarity index 67%
copy from django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue
copy to django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/CheckboxInputEditor.vue
index cbfaa9e..e44132a 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/CheckboxInputEditor.vue
@@ -1,6 +1,9 @@
<template>
+ <!-- Important that input editor is wrapped in div. Input editor stops
+ propagation on native input events, but we need for this component's input
+ events to propagate. So the input editor should not be the root component. -->
<div>
- <radio-button-input-editor
+ <checkbox-input-editor
v-if="experimentInput"
:id="id"
:value="data"
@@ -13,7 +16,7 @@
</template>
<script>
-import RadioButtonInputEditor from "../../components/experiment/input-editors/RadioButtonInputEditor.vue";
+import CheckboxInputEditor from "../../components/experiment/input-editors/CheckboxInputEditor.vue";
import WebComponentInputEditorMixin from "./WebComponentInputEditorMixin.js";
export default {
@@ -29,7 +32,7 @@ export default {
},
},
components: {
- RadioButtonInputEditor,
+ CheckboxInputEditor,
},
};
</script>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue
index cbfaa9e..9acf8d2 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/RadioButtonInputEditor.vue
@@ -1,4 +1,7 @@
<template>
+ <!-- Important that input editor is wrapped in div. Input editor stops
+ propagation on native input events, but we need for this component's input
+ events to propagate. So the input editor should not be the root component. -->
<div>
<radio-button-input-editor
v-if="experimentInput"
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 43cf0b4..ee825cf 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
@@ -1,5 +1,8 @@
<template>
<!-- NOTE: experimentInput is late bound, don't create component until it is available -->
+ <!-- Important that input editor is wrapped in div. Input editor stops
+ propagation on native input events, but we need for this component's input
+ events to propagate. So the input editor should not be the root component. -->
<div>
<string-input-editor
v-if="experimentInput"