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:23 UTC
[airavata-django-portal] 12/24: AIRAVATA-3477 Wrapped
FileInputEditor 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 19f0ba2fefa1363be2c6a2f017c3438cf3a2e2f9
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Wed Sep 8 11:29:33 2021 -0400
AIRAVATA-3477 Wrapped FileInputEditor as web component
---
.../experiment/input-editors/FileInputEditor.vue | 7 ++++
.../storage/UserStorageFileSelectionContainer.vue | 1 +
.../storage/storage-edit/UserStorageLink.vue | 30 +++++++++--------
.../js/web-components/QueueSettingsEditor.vue | 39 +++-------------------
...ioButtonInputEditor.vue => FileInputEditor.vue} | 20 ++++++-----
.../input-editors/RadioButtonInputEditor.vue | 3 ++
.../input-editors/StringInputEditor.vue | 6 ++++
.../js/web-components/styles.css | 1 +
8 files changed, 52 insertions(+), 55 deletions(-)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/FileInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/FileInputEditor.vue
index 775b3fa..0781e90 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/FileInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/FileInputEditor.vue
@@ -141,6 +141,13 @@ export default {
this.$emit("uploadend");
},
},
+ watch: {
+ value(value, oldValue) {
+ if (this.isDataProductURI && value !== oldValue) {
+ this.loadDataProduct(value);
+ }
+ }
+ }
};
</script>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/storage/UserStorageFileSelectionContainer.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/storage/UserStorageFileSelectionContainer.vue
index 19bb3e7..1193a41 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/storage/UserStorageFileSelectionContainer.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/storage/UserStorageFileSelectionContainer.vue
@@ -3,6 +3,7 @@
<user-storage-path-viewer
v-if="userStoragePath"
:user-storage-path="userStoragePath"
+ :storage-path="storagePath"
@directory-selected="directorySelected"
@file-selected="fileSelected"
:include-delete-action="false"
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/storage/storage-edit/UserStorageLink.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/storage/storage-edit/UserStorageLink.vue
index e0c7c0a..de4674e 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/storage/storage-edit/UserStorageLink.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/storage/storage-edit/UserStorageLink.vue
@@ -1,7 +1,9 @@
<template>
- <b-link :href="storageFileViewRouteUrl()" @click="showFilePreview($event)">
- {{ fileName }}
- <b-modal :title="fileName" ref="modal" scrollable size="lg">
+ <div>
+ <b-link :href="storageFileViewRouteUrl()" @click="showFilePreview($event)">
+ {{ fileName }}
+ </b-link>
+ <b-modal :title="fileName" ref="modal" scrollable size="lg" static lazy>
<user-storage-file-edit-viewer
:file-name="fileName"
:data-product-uri="dataProductUri"
@@ -11,10 +13,12 @@
"
/>
<template slot="modal-footer">
- <a :href="storageFileViewRouteUrl()" target="_blank">Open in a new window</a>
+ <a :href="storageFileViewRouteUrl()" target="_blank"
+ >Open in a new window</a
+ >
</template>
</b-modal>
- </b-link>
+ </div>
</template>
<script>
@@ -22,21 +26,21 @@ import UserStorageFileEditViewer from "./UserStorageEditViewer";
export default {
name: "user-storage-link",
- components: {UserStorageFileEditViewer},
+ components: { UserStorageFileEditViewer },
props: {
fileName: {
- required: true
+ required: true,
},
dataProductUri: {
- required: true
+ required: true,
},
mimeType: {
- required: true
+ required: true,
},
allowPreview: {
default: true,
- required: false
- }
+ required: false,
+ },
},
methods: {
showFilePreview(event) {
@@ -48,7 +52,7 @@ export default {
storageFileViewRouteUrl() {
// This endpoint can handle XHR upload or a TUS uploadURL
return `/workspace/storage/~?dataProductUri=${this.dataProductUri}`;
- }
- }
+ },
+ },
};
</script>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue
index 09f8bd6..61f2be1 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue
@@ -56,7 +56,7 @@
>
</b-form-input>
<div slot="description">
- <font-awesome-icon :icon="infoIcon" />
+ <i class="fa fa-info-circle" aria-hidden="true"></i>
Max Allowed Nodes = {{ maxAllowedNodes }}
</div>
</b-form-group>
@@ -72,7 +72,7 @@
>
</b-form-input>
<div slot="description">
- <font-awesome-icon :icon="infoIcon" />
+ <i class="fa fa-info-circle" aria-hidden="true"></i>
Max Allowed Cores = {{ maxAllowedCores }}
</div>
</b-form-group>
@@ -90,7 +90,7 @@
</b-form-input>
</b-input-group>
<div slot="description">
- <font-awesome-icon :icon="infoIcon" />
+ <i class="fa fa-info-circle" aria-hidden="true"></i>
Max Allowed Wall Time = {{ maxAllowedWalltime }} minutes
</div>
</b-form-group>
@@ -111,13 +111,13 @@
</b-form-input>
</b-input-group>
<div slot="description">
- <font-awesome-icon :icon="infoIcon" />
+ <i class="fa fa-info-circle" aria-hidden="true"></i>
Max Physical Memory = {{ maxMemory }} MB
</div>
</b-form-group>
<div>
<b-link class="text-secondary" @click="showConfiguration = false">
- <font-awesome-icon :icon="closeIcon" />
+ <i class="fa fa-times" aria-hidden="true"></i>
Hide Settings</b-link
>
</div>
@@ -133,31 +133,8 @@ import { mapGetters } from "vuex";
import { BootstrapVue } from "bootstrap-vue";
Vue.use(BootstrapVue);
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { config, dom } from "@fortawesome/fontawesome-svg-core";
-import { faInfoCircle, faTimes } from "@fortawesome/free-solid-svg-icons";
-
-// Make sure you tell Font Awesome to skip auto-inserting CSS into the <head>
-config.autoAddCss = false;
-
export default {
- components: {
- FontAwesomeIcon,
- },
store: store,
- mounted() {
- // Add font awesome styles
- // https://github.com/FortAwesome/vue-fontawesome#web-components-with-vue-web-component-wrapper
- const { shadowRoot } = this.$parent.$options;
- const id = "fa-styles";
-
- if (!shadowRoot.getElementById(`${id}`)) {
- const faStyles = document.createElement("style");
- faStyles.setAttribute("id", id);
- faStyles.textContent = dom.css();
- shadowRoot.appendChild(faStyles);
- }
- },
data() {
return {
showConfiguration: false,
@@ -193,12 +170,6 @@ export default {
queueDescription() {
return this.queue ? this.queue.queueDescription : null;
},
- closeIcon() {
- return faTimes;
- },
- infoIcon() {
- return faInfoCircle;
- },
},
methods: {
queueChanged(queueName) {
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/FileInputEditor.vue
similarity index 58%
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/FileInputEditor.vue
index b97e820..868415c 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/FileInputEditor.vue
@@ -1,19 +1,19 @@
<template>
+ <!-- NOTE: experimentInput is late bound, don't create component until it is available -->
<div>
- <radio-button-input-editor
+ <file-input-editor
v-if="experimentInput"
:id="id"
:value="data"
:experiment-input="experimentInput"
:read-only="readOnly"
- :options="options"
@input="valueChanged"
/>
</div>
</template>
<script>
-import RadioButtonInputEditor from "../../components/experiment/input-editors/RadioButtonInputEditor.vue";
+import FileInputEditor from "../../components/experiment/input-editors/FileInputEditor";
import WebComponentInputEditorMixin from "./WebComponentInputEditorMixin.js";
export default {
@@ -23,17 +23,21 @@ export default {
// https://github.com/vuejs/vue-web-component-wrapper/issues/30#issuecomment-427350734
// for more details
...WebComponentInputEditorMixin.props,
- options: {
- type: Array,
- default: null,
- },
},
components: {
- RadioButtonInputEditor,
+ FileInputEditor,
},
};
</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>
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 b97e820..cbfaa9e 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
@@ -36,4 +36,7 @@ export default {
<style>
@import "../styles.css";
+:host {
+ display: block;
+}
</style>
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 be3fc77..43cf0b4 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
@@ -19,6 +19,9 @@ 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: {
@@ -29,4 +32,7 @@ export default {
<style>
@import "../styles.css";
+:host {
+ display: block;
+}
</style>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/styles.css b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/styles.css
index 91acb53..bf593cb 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/styles.css
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/styles.css
@@ -1,3 +1,4 @@
/* common styles for all web components */
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";
+@import "~@fortawesome/fontawesome-free/css/all.css";