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/19 18:01:17 UTC

[airavata-django-portal] branch master updated: AIRAVATA-2538 Disable buttons when loading

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 d00b744  AIRAVATA-2538 Disable buttons when loading
d00b744 is described below

commit d00b7449d7a102b15748e80a6955d18102cad483
Author: Marcus Christie <ma...@iu.edu>
AuthorDate: Sun Nov 19 13:01:10 2017 -0500

    AIRAVATA-2538 Disable buttons when loading
---
 .../js/views/ProjectButtonNew.vue                  | 30 ++++++++++++++++------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectButtonNew.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectButtonNew.vue
index 3654f80..3db2710 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectButtonNew.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/ProjectButtonNew.vue
@@ -6,19 +6,21 @@
                 New Project <i class="fa fa-plus" aria-hidden="true"></i>
             </slot>
         </b-btn>
-        <b-modal id="modal-new-project" ref="modalNewProject" title="Create New Project" v-on:ok="onCreateProject">
+        <b-modal id="modal-new-project" ref="modalNewProject" title="Create New Project"
+                v-on:ok="onCreateProject" v-bind:cancel-disabled="cancelDisabled"
+                v-bind:ok-disabled="okDisabled">
             <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
-                    placeholder="Project name"
-                    v-bind:state="newProjectNameState"></b-form-input>
+                        type="text" v-model="newProject.name" required
+                        placeholder="Project name"
+                        v-bind:state="newProjectNameState"></b-form-input>
                 </b-form-group>
                 <b-form-group label="Project Description" label-for="new-project-description">
                     <b-form-textarea id="new-project-description"
-                    type="text" v-model="newProject.description"
-                    placeholder="(Optional) Project description"
-                    :rows="3"></b-form-textarea>
+                        type="text" v-model="newProject.description"
+                        placeholder="(Optional) Project description"
+                        :rows="3"></b-form-textarea>
                 </b-form-group>
             </b-form>
         </b-modal>
@@ -36,6 +38,7 @@ export default {
             newProject: new models.Project(),
             newProjectServerValidationData: null,
             userBeginsInput: false,
+            loading: false,
         }
     },
     components: {
@@ -44,6 +47,7 @@ export default {
         onCreateProject: function(event) {
             // Prevent hiding modal, hide it programmatically when project gets created
             event.preventDefault();
+            this.loading = true;
             services.ProjectService.create(this.newProject)
                 .then(result => {
                     this.$refs.modalNewProject.hide();
@@ -54,7 +58,8 @@ export default {
                 })
                 .catch(error => {
                     this.newProjectServerValidationData = error.data;
-                });
+                })
+                .then(() => this.loading = false, () => this.loading = false);
         },
         onUserInput: function(event) {
             this.userBeginsInput = true;
@@ -84,6 +89,15 @@ export default {
                 return null;
             }
         },
+        formIsValid: function() {
+            return this.newProjectNameState == null;
+        },
+        cancelDisabled: function() {
+            return this.loading;
+        },
+        okDisabled: function() {
+            return this.loading || !this.userBeginsInput || !this.formIsValid;
+        }
     },
 }
 </script>

-- 
To stop receiving notification emails like this one, please contact
['"commits@airavata.apache.org" <co...@airavata.apache.org>'].