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/16 16:52:54 UTC
[airavata-django-portal] 02/02: AIRAVATA-2538 Displaying validation
messages
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 a76fe222a2db204111b768df4b4be5771abbdad2
Author: Marcus Christie <ma...@iu.edu>
AuthorDate: Thu Nov 16 11:52:43 2017 -0500
AIRAVATA-2538 Displaying validation messages
---
.../django_airavata_api/js/utils/FetchUtils.js | 12 ++++++--
.../js/views/ProjectListContainer.vue | 32 ++++++++++++++++++----
2 files changed, 36 insertions(+), 8 deletions(-)
diff --git a/django_airavata/apps/api/static/django_airavata_api/js/utils/FetchUtils.js b/django_airavata/apps/api/static/django_airavata_api/js/utils/FetchUtils.js
index 59857d5..6f16094 100644
--- a/django_airavata/apps/api/static/django_airavata_api/js/utils/FetchUtils.js
+++ b/django_airavata/apps/api/static/django_airavata_api/js/utils/FetchUtils.js
@@ -31,7 +31,11 @@ export default {
if (response.ok) {
return Promise.resolve(response.json())
} else {
- return Promise.reject(new Error(response.statusText))
+ let error = new Error(response.statusText);
+ return response.json().then(json => {
+ error.data = json;
+ })
+ .finally(() => Promise.reject(error)):
}
})
},
@@ -49,7 +53,11 @@ export default {
if (response.ok) {
return Promise.resolve(response.json())
} else {
- return Promise.reject(new Error(response.statusText))
+ let error = new Error(response.statusText);
+ return response.json().then(json => {
+ error.data = json;
+ })
+ .finally(() => Promise.reject(error)):
}
})
},
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 6f71b37..1684f98 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,13 +6,15 @@
</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>
- <!-- Modal Component -->
- <b-modal id="modal-new-project" title="Create New Project" v-on:ok="onCreateProject">
- <b-form @submit="onCreateProject">
- <b-form-group label="Project Name" label-for="new-project-name">
+ <!-- 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-group label="Project Name" label-for="new-project-name" v-bind:feedback="newProjectFields.name.feedback" v-bind:state="newProjectFields.name.state">
<b-form-input id="new-project-name"
type="text" v-model="newProject.name" required
- placeholder="Project name"></b-form-input>
+ placeholder="Project name"
+ v-bind:state="newProjectFields.name.state"></b-form-input>
</b-form-group>
<b-form-group label="Project Description" label-for="new-project-description">
<b-form-textarea id="new-project-description"
@@ -51,6 +53,7 @@ export default {
return {
projectsPaginator: null,
newProject: new models.Project(),
+ newProjectFields: this.initialNewProjectFieldsState(),
}
},
components: {
@@ -65,15 +68,32 @@ export default {
this.projectsPaginator.previous();
},
onCreateProject: function(event) {
- // TODO: handle error, what if project isn't successfully created?
+ // Prevent hiding modal, hide it programmatically when project gets created
+ event.preventDefault();
services.ProjectService.create(this.newProject)
.then(result => {
+ this.$refs.modalNewProject.hide();
this.newProject = new models.Project();
+ this.newProjectFields = this.initialNewProjectFieldsState();
// 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('; ');
+ }
});
},
+ initialNewProjectFieldsState: function() {
+ return {
+ name: {
+ valid: null,
+ feedback: null,
+ },
+ }
+ },
},
computed: {
projects: function() {
--
To stop receiving notification emails like this one, please contact
"commits@airavata.apache.org" <co...@airavata.apache.org>.