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 2017/11/17 22:31:50 UTC
[airavata-django-portal] branch master updated: AIRAVATA-2538 Show
server side validation message before client side
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
The following commit(s) were added to refs/heads/master by this push:
new f3bc587 AIRAVATA-2538 Show server side validation message before client side
f3bc587 is described below
commit f3bc587f429fd430cae69855b42aa8e8710f9c61
Author: Marcus Christie <ma...@iu.edu>
AuthorDate: Fri Nov 17 17:31:44 2017 -0500
AIRAVATA-2538 Show server side validation message before client side
---
.../django_airavata_api/js/models/Project.js | 1 -
.../js/views/ProjectListContainer.vue | 43 +++++++++++++---------
2 files changed, 25 insertions(+), 19 deletions(-)
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 2180806..447b59e 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
@@ -14,7 +14,6 @@ export default class Project extends BaseModel {
}
validateForCreate() {
- console.log("validateForCreate", this.name);
if (this.name === null || this.name.trim() === "") {
return {
name: ["Please provide a name."]
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectListContainer.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectListContainer.vue
index d1347b2..8948403 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectListContainer.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectListContainer.vue
@@ -6,10 +6,9 @@
</div>
<div id="col-new-project" class="col">
<b-btn v-b-modal.modal-new-project variant="primary">New Project <i class="fa fa-plus" aria-hidden="true"></i></b-btn>
- <!-- TODO: Validate form before creating the project: do form validation or model validation? Do model validation in the model or in the service? -->
<!-- TODO: factor modal out into separate, reusable component -->
<b-modal id="modal-new-project" ref="modalNewProject" title="Create New Project" v-on:ok="onCreateProject">
- <b-form @submit="onCreateProject" novalidate>
+ <b-form @submit="onCreateProject" @input="onUserInput" novalidate>
<b-form-group label="Project Name" label-for="new-project-name" v-bind:feedback="newProjectNameFeedback" v-bind:state="newProjectNameState">
<b-form-input id="new-project-name"
type="text" v-model="newProject.name" required
@@ -53,7 +52,8 @@ export default {
return {
projectsPaginator: null,
newProject: new models.Project(),
- newProjectFields: this.initialNewProjectFieldsState(),
+ newProjectServerValidationData: null,
+ userBeginsInput: false,
}
},
components: {
@@ -73,26 +73,21 @@ export default {
services.ProjectService.create(this.newProject)
.then(result => {
this.$refs.modalNewProject.hide();
+ // Reset state
this.newProject = new models.Project();
- this.newProjectFields = this.initialNewProjectFieldsState();
+ this.userBeginsInput = false;
// Reload the list of projects
return services.ProjectService.list()
.then(result => this.projectsPaginator = result);
})
.catch(error => {
- if ('name' in error.data) {
- this.newProjectFields.name.state = 'invalid';
- this.newProjectFields.name.feedback = error.data.name.join('; ');
- }
+ this.newProjectServerValidationData = error.data;
});
},
- initialNewProjectFieldsState: function() {
- return {
- name: {
- valid: null,
- feedback: null,
- },
- }
+ onUserInput: function(event) {
+ this.userBeginsInput = true;
+ // Clear server side validation data when user starts typing again
+ this.newProjectServerValidationData = null;
},
},
computed: {
@@ -100,13 +95,25 @@ export default {
return this.projectsPaginator ? this.projectsPaginator.results : null;
},
newProjectValidationData: function() {
- return this.newProject.validateForCreate();
+ return this.userBeginsInput ? this.newProject.validateForCreate() : null;
},
newProjectNameState: function() {
- return (this.newProjectValidationData && 'name' in this.newProjectValidationData) ? 'invalid' : null;
+ if (this.newProjectServerValidationData && 'name' in this.newProjectServerValidationData) {
+ return 'invalid';
+ } else if (this.newProjectValidationData && 'name' in this.newProjectValidationData) {
+ return 'invalid';
+ } else {
+ return null;
+ }
},
newProjectNameFeedback: function() {
- return (this.newProjectValidationData && 'name' in this.newProjectValidationData) ? this.newProjectValidationData.name.join('; ') : null;
+ if (this.newProjectServerValidationData && 'name' in this.newProjectServerValidationData) {
+ return this.newProjectServerValidationData.name.join('; ');
+ } else if (this.newProjectValidationData && 'name' in this.newProjectValidationData) {
+ return this.newProjectValidationData.name.join('; ');
+ } else {
+ return null;
+ }
},
},
beforeMount: function () {
--
To stop receiving notification emails like this one, please contact
['"commits@airavata.apache.org" <co...@airavata.apache.org>'].