Disable the 'Submit' buttons until validation is completed. Add an indicator while validation is in progress.

Author: labkey-bpatel

ehr/resources/web/ehr/data/StoreCollection.js

@@ -12,6 +12,7 @@ Ext4.define('EHR.data.StoreCollection', {
     serverStores: null,
     hasLoaded: false, //will be set true after initial load
     clientDataChangeBuffer: 150,
+    validationRequestsInFlight: 0,
     ignoredClientEvents: {},
 
     constructor: function(){
@@ -20,7 +21,7 @@ Ext4.define('EHR.data.StoreCollection', {
         this.serverStores = Ext4.create('Ext.util.MixedCollection', false, this.getKey);
 
         this.callParent(arguments);
-        this.addEvents('commitcomplete', 'commitexception', 'validation', 'initialload', 'load', 'clientdatachanged', 'serverdatachanged');
+        this.addEvents('commitcomplete', 'commitexception', 'beforevalidation', 'validationstart', 'validation', 'validationcomplete', 'initialload', 'load', 'clientdatachanged', 'serverdatachanged');
 
         this.on('clientdatachanged', this.onClientDataChanged, this, {buffer: this.clientDataChangeBuffer});
     },
@@ -218,7 +219,7 @@ Ext4.define('EHR.data.StoreCollection', {
         }
         else
         {
-            //this really isnt the right event to fire, but it will force a recalulation of buttons on the panel
+            //this really isn't the right event to fire, but it will force a recalculation of buttons on the panel
             this.fireEvent('validation', this);
         }
     },
@@ -230,12 +231,34 @@ Ext4.define('EHR.data.StoreCollection', {
     },
 
     validateRecords: function(recordMap){
+        if(this.fireEvent('beforevalidation', this)===false)
+            return;
         for (var serverStoreId in recordMap){
             var serverStore = this.serverStores.get(serverStoreId);
             serverStore.validateRecords(Ext4.Object.getValues(recordMap[serverStoreId]), true);
         }
     },
 
+    onValidationRequestStart: function(){
+        this.validationRequestsInFlight++;
+
+        if (this.validationRequestsInFlight === 1){
+            this.fireEvent('validationstart', this);
+        }
+    },
+
+    onValidationRequestComplete: function(){
+        if (!this.validationRequestsInFlight){
+            return;
+        }
+
+        this.validationRequestsInFlight--;
+
+        if (this.validationRequestsInFlight === 0){
+            this.fireEvent('validationcomplete', this);
+        }
+    },
+
     serverToClientDataMap: null,
 
     getServerToClientDataMap: function(){
@@ -472,11 +495,31 @@ Ext4.define('EHR.data.StoreCollection', {
         if (EHR.debug)
             console.log(commands);
 
+        var success = this.getOnCommitSuccess(recordsArr, validateOnly, retainErrors);
+        var failure = this.getOnCommitFailure(recordsArr, validateOnly);
         var cfg = {
             url : LABKEY.ActionURL.buildURL('query', 'saveRows', this.containerPath),
             method : 'POST',
-            success: this.getOnCommitSuccess(recordsArr, validateOnly, retainErrors),
-            failure: this.getOnCommitFailure(recordsArr, validateOnly),
+            success: function(response, options){
+                try {
+                    success.call(this, response, options);
+                }
+                finally {
+                    if (validateOnly){
+                        this.onValidationRequestComplete();
+                    }
+                }
+            },
+            failure: function(response, options){
+                try {
+                    failure.call(this, response, options);
+                }
+                finally {
+                    if (validateOnly){
+                        this.onValidationRequestComplete();
+                    }
+                }
+            },
             scope: this,
             timeout: 5000000,  //a little extreme?
             transacted: true,
@@ -498,9 +541,20 @@ Ext4.define('EHR.data.StoreCollection', {
         if (validateOnly){
             cfg.jsonData.validateOnly = true;
             cfg.jsonData.extraContext.isValidateOnly = true;
+            this.onValidationRequestStart();
+        }
+
+        var request;
+        try {
+            request = LABKEY.Ajax.request(cfg);
         }
+        catch (e){
+            if (validateOnly){
+                this.onValidationRequestComplete();
+            }
 
-        var request = LABKEY.Ajax.request(cfg);
+            throw e;
+        }
 
         Ext4.Array.forEach(recordsArr, function(command){
             Ext4.Array.forEach(command, function(rec){
@@ -893,4 +947,4 @@ Ext4.define('EHR.data.StoreCollection', {
             s.checkForServerErrorChanges();
         }, this);
     }
-});
+});

ehr/resources/web/ehr/panel/DataEntryPanel.js

@@ -12,6 +12,7 @@ Ext4.define('EHR.panel.DataEntryPanel', {
     storeCollection: null,
     hideErrorPanel: false,
     useSectionBorder: true,
+    validationInProgress: false,
 
     layout: 'anchor',
     border: false,
@@ -33,7 +34,10 @@ Ext4.define('EHR.panel.DataEntryPanel', {
         this.storeCollection.on('initialload', this.onStoreCollectionInitialLoad, this);
         this.storeCollection.on('commitcomplete', this.onStoreCollectionCommitComplete, this);
         this.storeCollection.on('validation', this.onStoreCollectionValidation, this);
+        this.storeCollection.on('validationstart', this.onValidationStart, this);
+        this.storeCollection.on('validationcomplete', this.onValidationComplete, this);
         this.storeCollection.on('beforecommit', this.onStoreCollectionBeforeCommit, this);
+        this.storeCollection.on('beforevalidation', this.onBeforeValidation, this);
         this.storeCollection.on('commitexception', this.onStoreCollectionCommitException, this);
         //this.storeCollection.on('serverdatachanged', this.onStoreCollectionServerDataChanged, this);
 
@@ -83,6 +87,45 @@ Ext4.define('EHR.panel.DataEntryPanel', {
         }
     },
 
+    onBeforeValidation: function(sc){
+        function processItem(item) {
+            if(item.disableOn) {
+                item.setDisabled(true);
+                if (item.setTooltip)
+                    item.setTooltip('Disabled waiting on validation. Select "More Actions" -> "Re-Validate" if this is not clearing.');
+            }
+
+            if (item.menu) {
+                item.menu.items.each(function (menuItem) {
+                    processItem(menuItem);
+                }, this);
+            }
+        }
+
+        var btns = this.getToolbarItems();
+        if (btns){
+            Ext4.Array.forEach(btns, function(toolbar){
+                toolbar.items.each(function(item){
+                    processItem(item);
+                }, this);
+            }, this);
+        }
+    },
+
+    onValidationStart: function(){
+        if (!this.hasStoreCollectionLoaded){
+            return;
+        }
+
+        this.validationInProgress = true;
+        this.setValidationIndicatorVisible(true);
+    },
+
+    onValidationComplete: function(){
+        this.validationInProgress = false;
+        this.setValidationIndicatorVisible(false);
+    },
+
     onStoreCollectionValidation: function(sc){
         if (!this.hasStoreCollectionLoaded){
             return;
@@ -509,6 +552,21 @@ Ext4.define('EHR.panel.DataEntryPanel', {
         return this.dirtyStateArea;
     },
 
+    getValidationIndicator: function(){
+        if (!this.validationIndicator || this.validationIndicator.isDestroyed){
+            this.validationIndicator = this.down('#validationIndicator');
+        }
+
+        return this.validationIndicator;
+    },
+
+    setValidationIndicatorVisible: function(visible){
+        var indicator = this.getValidationIndicator();
+        if (indicator){
+            indicator.setVisible(visible);
+        }
+    },
+
     getButtons: function(){
         var buttons = [{
             xtype: 'container',
@@ -562,6 +620,14 @@ Ext4.define('EHR.panel.DataEntryPanel', {
             }
         }
 
+        buttons.push({
+            xtype: 'container',
+            itemId: 'validationIndicator',
+            hidden: !this.validationInProgress,
+            html: '<span><i class="fa fa-spinner fa-pulse"></i> Validating...</span>',
+            style: 'padding-left: 8px; line-height: 24px;'
+        });
+
         return buttons;
     },