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:22 UTC
[airavata-django-portal] 11/24: AIRAVATA-3477 Mixin for input
editor web components
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 c9e6e2612b907d40e46d1d7009dd79b2c0d6f7cc
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Wed Sep 8 09:30:17 2021 -0400
AIRAVATA-3477 Mixin for input editor web components
---
.../input-editors/RadioButtonInputEditor.vue | 65 +++-------------------
.../input-editors/StringInputEditor.vue | 49 ++--------------
...tEditor.vue => WebComponentInputEditorMixin.js} | 30 +---------
3 files changed, 12 insertions(+), 132 deletions(-)
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 5e03681..b97e820 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
@@ -7,81 +7,30 @@
:experiment-input="experimentInput"
:read-only="readOnly"
:options="options"
- @input="onInput"
+ @input="valueChanged"
/>
</div>
</template>
<script>
import RadioButtonInputEditor from "../../components/experiment/input-editors/RadioButtonInputEditor.vue";
-
-import Vue from "vue";
-import { BootstrapVue } from "bootstrap-vue";
-import AsyncComputed from "vue-async-computed";
-import { utils } from "django-airavata-common-ui";
-import store from "../store";
-Vue.use(BootstrapVue);
-Vue.use(AsyncComputed);
+import WebComponentInputEditorMixin from "./WebComponentInputEditorMixin.js";
export default {
+ mixins: [WebComponentInputEditorMixin],
props: {
- value: String,
- name: String,
+ // 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,
},
},
- store: store,
components: {
RadioButtonInputEditor,
},
- mounted() {
- this.$nextTick(() => {
- 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];
- }
- })
- },
- data() {
- return {
- data: this.value,
- };
- },
- computed: {
- readOnly() {
- return this.experimentInput.isReadOnly;
- },
- id() {
- return utils.sanitizeHTMLId(this.experimentInput.name);
- },
- experimentInput() {
- return this.$store.getters.getExperimentInputByName(this.name);
- },
- },
- methods: {
- onInput(value) {
- if (value !== this.data) {
- this.data = value;
- const inputEvent = new CustomEvent("input", {
- detail: [this.data],
- composed: true,
- bubbles: true,
- });
- this.$el.dispatchEvent(inputEvent);
- }
- },
- },
- 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 c68385b..be3fc77 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
@@ -7,64 +7,23 @@
:value="data"
:experiment-input="experimentInput"
:read-only="readOnly"
- @input="onInput"
+ @input="valueChanged"
/>
</div>
</template>
<script>
import StringInputEditor from "../../components/experiment/input-editors/StringInputEditor.vue";
-import Vue from "vue";
-import { BootstrapVue } from "bootstrap-vue";
-import AsyncComputed from "vue-async-computed";
-import { utils } from "django-airavata-common-ui";
-import store from "../store";
-Vue.use(BootstrapVue);
-Vue.use(AsyncComputed);
+import WebComponentInputEditorMixin from "./WebComponentInputEditorMixin.js";
export default {
+ mixins: [WebComponentInputEditorMixin],
props: {
- value: String,
- name: String,
+ ...WebComponentInputEditorMixin.props,
},
components: {
StringInputEditor,
},
- store: store,
- data() {
- return {
- data: this.value,
- };
- },
- computed: {
- readOnly() {
- return this.experimentInput.isReadOnly;
- },
- id() {
- return utils.sanitizeHTMLId(this.experimentInput.name);
- },
- experimentInput() {
- return this.$store.getters.getExperimentInputByName(this.name);
- },
- },
- methods: {
- onInput(value) {
- if (value !== this.data) {
- this.data = value;
- const inputEvent = new CustomEvent("input", {
- detail: [this.data],
- composed: true,
- bubbles: true,
- });
- this.$el.dispatchEvent(inputEvent);
- }
- },
- },
- watch: {
- value(value) {
- this.data = value;
- }
- }
};
</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/WebComponentInputEditorMixin.js
similarity index 72%
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/WebComponentInputEditorMixin.js
index 5e03681..da7bf54 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/WebComponentInputEditorMixin.js
@@ -1,19 +1,3 @@
-<template>
- <div>
- <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 RadioButtonInputEditor from "../../components/experiment/input-editors/RadioButtonInputEditor.vue";
import Vue from "vue";
import { BootstrapVue } from "bootstrap-vue";
@@ -27,15 +11,8 @@ export default {
props: {
value: String,
name: String,
- options: {
- type: Array,
- default: null,
- },
},
store: store,
- components: {
- RadioButtonInputEditor,
- },
mounted() {
this.$nextTick(() => {
for (const key of Object.keys(this.$props)) {
@@ -65,7 +42,7 @@ export default {
},
},
methods: {
- onInput(value) {
+ valueChanged(value) {
if (value !== this.data) {
this.data = value;
const inputEvent = new CustomEvent("input", {
@@ -83,8 +60,3 @@ export default {
},
},
};
-</script>
-
-<style>
-@import "../styles.css";
-</style>