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 8615c84ddc84affd5479c8e30191a3b15ab9b2d3 Author: Marcus Christie <[email protected]> AuthorDate: Thu Jan 11 10:41:24 2018 -0500 AIRAVATA-2598 Display validation of required inputs --- .../django_airavata_api/js/models/BaseModel.js | 4 ++++ .../js/models/InputDataObjectType.js | 8 ++++++++ .../django_airavata_api/js/models/Project.js | 2 +- .../js/components/experiment/ExperimentEditor.vue | 22 ++++++++++++++++++++-- 4 files changed, 33 insertions(+), 3 deletions(-) diff --git a/django_airavata/apps/api/static/django_airavata_api/js/models/BaseModel.js b/django_airavata/apps/api/static/django_airavata_api/js/models/BaseModel.js index 9745c90..49f773b 100644 --- a/django_airavata/apps/api/static/django_airavata_api/js/models/BaseModel.js +++ b/django_airavata/apps/api/static/django_airavata_api/js/models/BaseModel.js @@ -75,6 +75,10 @@ export default class BaseModel { return null; } + isEmpty(value) { + return value === null || (typeof value === 'string' && value.trim() === ''); + } + /** * Return a fully deep cloned instance of this instance. */ 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 cf3e349..496de53 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 @@ -37,4 +37,12 @@ export default class InputDataObjectType extends BaseModel { this.storageResourceId = ''; } } + + validate() { + let results = {}; + if (this.isRequired && this.isEmpty(this.value)) { + results['value'] = 'This field is required.'; + } + return results; + } } diff --git a/django_airavata/apps/api/static/django_airavata_api/js/models/Project.js b/django_airavata/apps/api/static/django_airavata_api/js/models/Project.js index d6e9c99..59bc6be 100644 --- a/django_airavata/apps/api/static/django_airavata_api/js/models/Project.js +++ b/django_airavata/apps/api/static/django_airavata_api/js/models/Project.js @@ -18,7 +18,7 @@ export default class Project extends BaseModel { } validate() { - if (this.name === null || this.name.trim() === "") { + if (this.isEmpty(this.name)) { return { name: ["Please provide a name."] } 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 76040ca..77cbc00 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 @@ -47,9 +47,12 @@ </h2> <b-form novalidate> <b-form-group v-for="experimentInput in localExperiment.experimentInputs" - :label="experimentInput.name" :label-for="experimentInput.name" :key="experimentInput.name"> + :label="experimentInput.name" :label-for="experimentInput.name" :key="experimentInput.name" + :feedback="getApplicationInputFeedback(experimentInput)" + :state="getApplicationInputState(experimentInput)"> <b-form-input :id="experimentInput.name" type="text" v-model="experimentInput.value" required - :placeholder="experimentInput.userFriendlyDescription"></b-form-input> + :placeholder="experimentInput.userFriendlyDescription" + :state="getApplicationInputState(experimentInput)"></b-form-input> </b-form-group> </b-form> <h2 class="h5 mb-3"> @@ -151,6 +154,21 @@ export default { console.log("Launch failed!", result); }); }, + getApplicationInputState: function(applicationInput) { + const validation = this.getApplicationInputValidation(applicationInput); + return validation !== null ? 'invalid' : null; + }, + getApplicationInputFeedback: function(applicationInput) { + const validation = this.getApplicationInputValidation(applicationInput); + return validation !== null ? validation : null; + }, + getApplicationInputValidation: function(applicationInput) { + const validationResults = applicationInput.validate(); + if (validationResults !== null && 'value' in validationResults) { + return validationResults; + } + return null; + } }, watch: { experiment: function(newValue) { -- To stop receiving notification emails like this one, please contact "[email protected]" <[email protected]>.
