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:25 UTC

[airavata-django-portal] 14/24: AIRAVATA-3477 Wrapped MultiFileInputEditor 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 60989a9c50491a1b24d4a2365f5adc660513e543
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Thu Sep 9 11:45:17 2021 -0400

    AIRAVATA-3477 Wrapped MultiFileInputEditor as web component
---
 .../input-editors/MultiFileInputEditor.vue         | 43 ++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/MultiFileInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/MultiFileInputEditor.vue
new file mode 100644
index 0000000..420774c
--- /dev/null
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/MultiFileInputEditor.vue
@@ -0,0 +1,43 @@
+<template>
+  <!-- NOTE: experimentInput is late bound, don't create component until it is available -->
+  <div>
+    <multi-file-input-editor
+      v-if="experimentInput"
+      :id="id"
+      :value="data"
+      :experiment-input="experimentInput"
+      :read-only="readOnly"
+      @input="valueChanged"
+    />
+  </div>
+</template>
+
+<script>
+import MultiFileInputEditor from "../../components/experiment/input-editors/MultiFileInputEditor.vue";
+import WebComponentInputEditorMixin from "./WebComponentInputEditorMixin.js";
+
+export default {
+  mixins: [WebComponentInputEditorMixin],
+  props: {
+    // 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,
+  },
+  components: {
+    MultiFileInputEditor,
+  },
+};
+</script>
+
+<style>
+@import "../styles.css";
+@import "~@uppy/core/dist/style.min.css";
+@import "~@uppy/status-bar/dist/style.min.css";
+@import "~@uppy/drag-drop/dist/style.min.css";
+@import "~codemirror/lib/codemirror.css";
+@import "~codemirror/theme/abcdef.css";
+:host {
+  display: block;
+}
+</style>