FIX #83 Disable Finish button + add spinner while uploading

bulkUpload/css/GridFieldBulkUpload.css

@@ -143,4 +143,11 @@
           margin: 0 6px 0 6px;
           line-height: 28px;
           height: 28px;
-          color: #ffffff; }
+          color: #ffffff;
+          background-image: url(../../images/spinner.gif);
+          background-position: 0 -50px;
+          background-repeat: no-repeat;
+          overflow: hidden; }
+        .bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons.loading .colymba-bulkupload-info {
+          padding-left: 20px;
+          background-position: 0 5px; }

bulkUpload/css/GridFieldBulkUpload.scss

@@ -283,6 +283,21 @@
 					line-height: 28px;					
 					height: 28px;
 					color: #ffffff;
+
+					background-image: url(../../images/spinner.gif);
+					background-position: 0 -50px;
+					background-repeat: no-repeat;
+
+					overflow: hidden; 
+				}
+
+				&.loading
+				{
+					.colymba-bulkupload-info
+					{
+						padding-left: 20px;
+						background-position: 0 5px;
+					}					
 				}
 			}
 

bulkUpload/javascript/GridFieldBulkUpload.js

@@ -96,8 +96,22 @@
             ));
 
             $cancelBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled');
-            $finishBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled');
 
+            //if there are still uploads going
+            if ( (done + error) < total )
+            {
+              if ( !this.hasClass('loading') )
+              {
+                this.addClass('loading');
+                $finishBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'disabled');
+              }              
+            }
+            else{
+              this.removeClass('loading');
+              $finishBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled');
+            }            
+
+            //if all done and OK, enable edit
             if ( total === done )
             {
               $editBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled');
@@ -106,6 +120,7 @@
               $editBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
             }
 
+            //toggle clear error button
             if ( error > 0 )
             {
               $clearErrorBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled');
@@ -115,7 +130,8 @@
             }
           }
           else{
-            this.css({display: 'none'});
+            //if not uploading, reset + hide
+            this.css({display: 'none'}).removeClass('loading');
             $editBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
             $cancelBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
             $finishBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
@@ -128,7 +144,7 @@
       /**
        * Clears all updloads with warning or error
        */
-      $('.bulkUploadClearErrorButton').entwine({
+      $('.bulkUploadClearErrorButton:not(.ui-state-disabled)').entwine({
         onmatch: function(){
           this.removeClass('action');
         },
@@ -150,7 +166,7 @@
        * Cancel all uploads
        * Clear the ones with warnings/error and delete dataObjects from the successful ones
        */
-      $('.bulkUploadCancelButton').entwine({
+      $('.bulkUploadCancelButton:not(.ui-state-disabled)').entwine({
         onmatch: function(){
           this.removeClass('action');
         },
@@ -213,7 +229,7 @@
       /**
        * Clear all the warning/error/finished uploads
        */
-      $('.bulkUploadFinishButton').entwine({
+      $('.bulkUploadFinishButton:not(.ui-state-disabled)').entwine({
         onmatch: function(){
           this.removeClass('action');
         },
@@ -236,7 +252,7 @@
         }
       });
 
-      $('.bulkUploadEditButton').entwine({
+      $('.bulkUploadEditButton:not(.ui-state-disabled)').entwine({
         onmatch: function(){
           this.removeClass('action');
         },