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