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