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 <[email protected]> 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 [email protected].
