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 2020/08/31 14:41:41 UTC
[airavata-django-portal] 01/01: WIP
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch web-component-input-editors
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit d9d1c2bd09f061f02c4d675705785b31c4b326a1
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Mon Aug 31 10:41:09 2020 -0400
WIP
---
.../js/models/InputDataObjectType.js | 26 +++++++++++++++++
.../input-editors/InputEditorContainer.vue | 34 +++++++++++++++++++++-
django_airavata/static/common/js/entry.js | 5 ++++
3 files changed, 64 insertions(+), 1 deletion(-)
diff --git a/django_airavata/apps/api/static/django_airavata_api/js/models/InputDataObjectType.js b/django_airavata/apps/api/static/django_airavata_api/js/models/InputDataObjectType.js
index dcc7537..0d4c523 100644
--- a/django_airavata/apps/api/static/django_airavata_api/js/models/InputDataObjectType.js
+++ b/django_airavata/apps/api/static/django_airavata_api/js/models/InputDataObjectType.js
@@ -84,6 +84,32 @@ export default class InputDataObjectType extends BaseModel {
}
}
+ get editorWebComponentURL() {
+ const metadata = this._getMetadata();
+ if (
+ metadata &&
+ "editor" in metadata &&
+ "web-component" in metadata["editor"]
+ ) {
+ return metadata["editor"]["web-component"]["url"];
+ } else {
+ return null;
+ }
+ }
+
+ get editorWebComponentTagName() {
+ const metadata = this._getMetadata();
+ if (
+ metadata &&
+ "editor" in metadata &&
+ "web-component" in metadata["editor"]
+ ) {
+ return metadata["editor"]["web-component"]["tag-name"];
+ } else {
+ return null;
+ }
+ }
+
/**
* Get the configuration for the editor component, which will be available
* to the editor component for customizing its look and functionality.
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/InputEditorContainer.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/InputEditorContainer.vue
index ecb03b8..c6a0514 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/InputEditorContainer.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/InputEditorContainer.vue
@@ -1,7 +1,7 @@
<template>
<input-editor-form-group :label="experimentInput.name" :label-for="inputEditorComponentId"
:state="validationState" :feedback-messages="validationFeedback" :description="experimentInput.userFriendlyDescription">
- <component :is="inputEditorComponentName"
+ <component v-if="!isWebComponent" :is="inputEditorComponentName"
:id="inputEditorComponentId"
:experiment-input="experimentInput"
:experiment="experiment"
@@ -12,6 +12,17 @@
@input="valueChanged"
@uploadstart="uploadStart"
@uploadend="uploadEnd"/>
+ <component v-else :is="experimentInput.editorWebComponentTagName"
+ :id="inputEditorComponentId"
+ :experiment-input="experimentInput"
+ :experiment="experiment"
+ :read-only="experimentInput.isReadOnly"
+ :value="data"
+ @invalid="recordInvalidInputEditorValue"
+ @valid="recordValidInputEditorValue"
+ @input="webComponentValueChanged"
+ @uploadstart="uploadStart"
+ @uploadend="uploadEnd"/>
</input-editor-form-group>
</template>
@@ -31,6 +42,8 @@ import TextareaInputEditor from './TextareaInputEditor.vue'
import {models} from 'django-airavata-api'
import { mixins, utils } from 'django-airavata-common-ui';
+import Vue from "vue";
+
export default {
name: 'input-editor-container',
mixins: [mixins.VModelMixin],
@@ -60,6 +73,14 @@ export default {
if (!this.show) {
this.handleHidingInput();
}
+ if (this.isWebComponent) {
+ // The web component is packaged assuming that Vue will be accessible in
+ // the global (window) scope
+ if (!window.Vue) {
+ window.Vue = Vue;
+ }
+ import(/* webpackIgnore: true */ this.experimentInput.editorWebComponentURL);
+ }
},
data: function() {
return {
@@ -74,6 +95,9 @@ export default {
computed: {
inputEditorComponentName: function() {
+ if (this.isWebComponent) {
+ return this.experimentInput.editorWebComponentTagName;
+ }
// If input specifices an editor UI component, use that
if (this.experimentInput.editorUIComponentId) {
return this.experimentInput.editorUIComponentId;
@@ -89,6 +113,9 @@ export default {
// Default
return 'string-input-editor';
},
+ isWebComponent() {
+ return this.experimentInput.editorWebComponentURL !== null;
+ },
inputEditorComponentId: function() {
return utils.sanitizeHTMLId(this.experimentInput.name);
},
@@ -115,6 +142,11 @@ export default {
valueChanged: function() {
this.inputHasBegun = true;
},
+ webComponentValueChanged: function(e) {
+ if (e.detail && e.detail.length && e.detail.length > 0) {
+ this.data = e.detail[0];
+ }
+ },
handleHidingInput: function() {
this.oldValue = this.data;
this.data = null;
diff --git a/django_airavata/static/common/js/entry.js b/django_airavata/static/common/js/entry.js
index 6dac815..29d3523 100644
--- a/django_airavata/static/common/js/entry.js
+++ b/django_airavata/static/common/js/entry.js
@@ -18,6 +18,11 @@ import "bootstrap-vue/dist/bootstrap-vue.css";
export default function entry(entryPointFunction) {
// Common Vue configuration
Vue.use(BootstrapVue);
+ Vue.config.ignoredElements = [
+ // Custom input editors that have a tag name starting with "adpf-plugin-"
+ // Vue will ignore and not warn about
+ /^adpf-plugin-/,
+ ]
entryPointFunction(Vue);
}