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 2018/04/23 17:23:22 UTC
[airavata-django-portal] 01/03: AIRAVATA-2611 Factor out exp input
editors into separate components
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit b644c9458a70cedd7c1f8fac01758c5561810d59
Author: Marcus Christie <ma...@iu.edu>
AuthorDate: Mon Apr 23 10:42:10 2018 -0400
AIRAVATA-2611 Factor out exp input editors into separate components
---
.../js/components/experiment/ExperimentEditor.vue | 42 ++++++++++------------
.../experiment/input-editors/FileInputEditor.vue | 37 +++++++++++++++++++
.../experiment/input-editors/StringInputEditor.vue | 38 ++++++++++++++++++++
3 files changed, 94 insertions(+), 23 deletions(-)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentEditor.vue
index 517f2db..29be831 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentEditor.vue
@@ -50,17 +50,12 @@
<h2 class="h6 mb-3">
Application Inputs
</h2>
- <b-form-group v-for="experimentInput in localExperiment.experimentInputs"
- :label="experimentInput.name" :label-for="experimentInput.name" :key="experimentInput.name"
- :feedback="getValidationFeedback(['experimentInputs', experimentInput.name, 'value'])"
- :state="getValidationState(['experimentInputs', experimentInput.name, 'value'])">
- <b-form-input v-if="isSimpleInput(experimentInput)" :id="experimentInput.name" type="text" v-model="experimentInput.value" required
- :placeholder="experimentInput.userFriendlyDescription"
- :state="getValidationState(['experimentInputs', experimentInput.name, 'value'])"></b-form-input>
- <b-form-file v-if="isFileInput(experimentInput)" :id="experimentInput.name" type="text" v-model="experimentInput.value" required
- :placeholder="experimentInput.userFriendlyDescription"
- :state="getValidationState(['experimentInputs', experimentInput.name, 'value'])"></b-form-file>
- </b-form-group>
+ <component :is="getInputEditorComponentName(experimentInput)"
+ v-for="experimentInput in localExperiment.experimentInputs"
+ :experiment="localExperiment"
+ :experiment-input="experimentInput"
+ v-model="experimentInput.value"
+ :key="experimentInput.name"/>
</div>
</div>
</div>
@@ -102,6 +97,8 @@
<script>
import ComputationalResourceSchedulingEditor from './ComputationalResourceSchedulingEditor.vue'
import GroupResourceProfileSelector from './GroupResourceProfileSelector.vue'
+import StringInputEditor from './input-editors/StringInputEditor.vue'
+import FileInputEditor from './input-editors/FileInputEditor.vue'
import {models, services, utils as apiUtils} from 'django-airavata-api'
import {utils} from 'django-airavata-common-ui'
@@ -130,6 +127,8 @@ export default {
components: {
ComputationalResourceSchedulingEditor,
GroupResourceProfileSelector,
+ StringInputEditor,
+ FileInputEditor,
},
mounted: function () {
services.ProjectService.listAll()
@@ -214,18 +213,15 @@ export default {
getValidationState: function(properties) {
return this.getValidationFeedback(properties) ? 'invalid' : null;
},
- isSimpleInput: function(experimentInput) {
- return [
- models.DataType.STRING,
- models.DataType.FLOAT,
- models.DataType.INTEGER,
- ].indexOf(experimentInput.type) >= 0;
- },
- isFileInput: function(experimentInput) {
- return [
- models.DataType.URI,
- ].indexOf(experimentInput.type) >= 0;
- },
+ getInputEditorComponentName: function(experimentInput) {
+ if (experimentInput.type === models.DataType.STRING) {
+ return 'string-input-editor';
+ } else if (experimentInput.type === models.DataType.URI) {
+ return 'file-input-editor';
+ }
+ // Default
+ return 'string-input-editor';
+ }
},
watch: {
experiment: function(newValue) {
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
new file mode 100644
index 0000000..2d5dbeb
--- /dev/null
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/FileInputEditor.vue
@@ -0,0 +1,37 @@
+<template>
+ <b-form-group :label="experimentInput.name" :label-for="experimentInput.name">
+ <b-form-file :id="experimentInput.name" v-model="data" required
+ :placeholder="experimentInput.userFriendlyDescription"
+ @input="emitValueChanged"/>
+ </b-form-group>
+</template>
+
+<script>
+import {models} from 'django-airavata-api'
+export default {
+ name: 'file-input-editor',
+ props: {
+ value: {
+ required: false,
+ },
+ experiment: {
+ type: models.Experiment,
+ required: true,
+ },
+ experimentInput: {
+ type: models.InputDataObjectType,
+ required: true,
+ },
+ },
+ data () {
+ return {
+ data: this.value,
+ }
+ },
+ methods: {
+ emitValueChanged: function() {
+ this.$emit('input', this.data);
+ },
+ },
+}
+</script>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/StringInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/StringInputEditor.vue
new file mode 100644
index 0000000..27628b0
--- /dev/null
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/input-editors/StringInputEditor.vue
@@ -0,0 +1,38 @@
+<template>
+ <b-form-group :label="experimentInput.name" :label-for="experimentInput.name">
+ <b-form-input :id="experimentInput.name" type="text" v-model="data" required
+ :placeholder="experimentInput.userFriendlyDescription"
+ @input="emitValueChanged"/>
+ </b-form-group>
+</template>
+
+<script>
+import {models} from 'django-airavata-api'
+export default {
+ name: 'string-input-editor',
+ props: {
+ value: {
+ type: String,
+ required: false,
+ },
+ experiment: {
+ type: models.Experiment,
+ required: true,
+ },
+ experimentInput: {
+ type: models.InputDataObjectType,
+ required: true,
+ },
+ },
+ data () {
+ return {
+ data: this.value,
+ }
+ },
+ methods: {
+ emitValueChanged: function() {
+ this.$emit('input', this.data);
+ },
+ },
+}
+</script>
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
machristie@apache.org.