feat(mass-pay): progress indicator on file loading

T323 Added progress indicator to show a user that the file is being processed.
beregovoy68 · Feb 7, 2017 · 05fa686 · 05fa686
1 parent 86eec47
commit 05fa686
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 20 deletions.
diff --git a/src/css/style.css b/src/css/style.css
@@ -1546,6 +1546,15 @@ md-autocomplete.fee-autocomplete button:hover md-icon path {
     justify-content: center;
 }
 
+/* linear progress bar styling */
+md-progress-linear .md-container {
+    background-color: #F0F0F0;
+}
+
+md-progress-linear .md-bar {
+    background-color: #37556E;
+}
+
 
 /* ======================================================================= */
 

diff --git a/src/index.html b/src/index.html
@@ -660,8 +660,12 @@ <h2 class="sectionHeader">MASS PAYMENT</h2>
                                             </tbody>
                                         </table>
                                         <br/>
+                                        <ng-if ng-if="mass.loadingInProgress">
+                                            <md-progress-linear md-mode="indeterminate"></md-progress-linear>
+                                            <br/>
+                                        </ng-if>
                                         <div class="button-row">
-                                            <button class="wButton wButton-neg" ng-click="mass.processInputFile(massPaymentFilesForm)">LOAD</button>
+                                            <button class="wButton wButton-neg" ng-disabled="mass.loadingInProgress" ng-click="mass.processInputFile(massPaymentFilesForm)">LOAD</button>
                                         </div>
                                     </form>
                                     <div class="massPayRecap wScroll" ng-switch-when="processing">

diff --git a/src/js/portfolio/mass.payment.controller.js b/src/js/portfolio/mass.payment.controller.js
@@ -32,6 +32,7 @@
         mass.inputPayments = [];
         mass.autocomplete = autocomplete;
         mass.stage = LOADING_STAGE;
+        mass.loadingInProgress = false;
         mass.broadcast = new transactionBroadcast.instance(apiService.assets.massPay,
             function (transaction, response) {
                 var displayMessage = 'Sent ' + mass.summary.totalAmount.formatAmount(true) + ' of ' +
@@ -150,24 +151,7 @@
             return $window.JSON.parse(content);
         }
 
-        function processInputFile(form) {
-            if (!form.validate(mass.validationOptions)) {
-                return;
-            }
-
-            if (!mass.inputPayments || mass.inputPayments.length === 0) {
-                notificationService.error('Payments were not provided or failed to parse. Nothing to load');
-
-                return;
-            }
-
-            if (mass.inputPayments.length > MAXIMUM_TRANSACTIONS_PER_FILE) {
-                notificationService.error('Too many payments for a single file. Maximum payments count ' +
-                    'in a file should not exceed ' + MAXIMUM_TRANSACTIONS_PER_FILE);
-
-                return;
-            }
-
+        function loadTransactionsFromFile() {
             var sender = {
                 publicKey: applicationContext.account.keyPair.public,
                 privateKey: applicationContext.account.keyPair.private
@@ -230,6 +214,31 @@
                     throw e;
                 }
             }
+
+            mass.loadingInProgress = false;
+        }
+
+        function processInputFile(form) {
+            if (!form.validate(mass.validationOptions)) {
+                return;
+            }
+
+            if (!mass.inputPayments || mass.inputPayments.length === 0) {
+                notificationService.error('Payments were not provided or failed to parse. Nothing to load');
+
+                return;
+            }
+
+            if (mass.inputPayments.length > MAXIMUM_TRANSACTIONS_PER_FILE) {
+                notificationService.error('Too many payments for a single file. Maximum payments count ' +
+                    'in a file should not exceed ' + MAXIMUM_TRANSACTIONS_PER_FILE);
+
+                return;
+            }
+
+            mass.loadingInProgress = true;
+            // loading transactions asynchronously
+            $timeout(loadTransactionsFromFile, 150);
         }
 
         function submitPayment() {

diff --git a/src/js/portfolio/mass.payment.controller.spec.js b/src/js/portfolio/mass.payment.controller.spec.js
@@ -190,6 +190,7 @@ describe('Mass.Payment.Controller', function() {
         spyOn(controller.broadcast, 'setTransaction');
 
         controller.processInputFile(formMock);
+        timeout.flush();
 
         expect(controller.broadcast.setTransaction).not.toHaveBeenCalled();
         expect(controller.invalidPayment).toBe(true);
@@ -214,6 +215,7 @@ describe('Mass.Payment.Controller', function() {
         spyOn(controller.broadcast, 'setTransaction');
 
         controller.processInputFile(formMock);
+        timeout.flush();
 
         expect(controller.broadcast.setTransaction).not.toHaveBeenCalled();
         expect(controller.invalidPayment).toBe(true);
@@ -238,6 +240,7 @@ describe('Mass.Payment.Controller', function() {
         spyOn(controller.broadcast, 'setTransaction');
 
         controller.processInputFile(formMock);
+        timeout.flush();
 
         expect(controller.broadcast.setTransaction).toHaveBeenCalled();
         expect(controller.invalidPayment).toBeFalsy();
@@ -266,6 +269,8 @@ describe('Mass.Payment.Controller', function() {
         ];
 
         controller.processInputFile(formMock);
+        timeout.flush();
+
         expect(controller.submitPayment()).toBe(false);
         expect(controller.sendingWaves).toBeFalsy();
         expect(notificationService.error).toHaveBeenCalled();
@@ -291,6 +296,8 @@ describe('Mass.Payment.Controller', function() {
         ];
 
         controller.processInputFile(formMock);
+        timeout.flush();
+
         expect(controller.submitPayment()).toBe(false);
 
         expect(controller.sendingWaves).toBe(true);
@@ -316,6 +323,8 @@ describe('Mass.Payment.Controller', function() {
         ];
 
         controller.processInputFile(formMock);
+        timeout.flush();
+
         expect(controller.submitPayment()).toBe(false);
 
         expect(controller.sendingWaves).toBe(false);
@@ -342,8 +351,9 @@ describe('Mass.Payment.Controller', function() {
         ];
 
         controller.processInputFile(formMock);
-        expect(controller.submitPayment()).toBe(true);
+        timeout.flush();
 
+        expect(controller.submitPayment()).toBe(true);
         timeout.flush();
 
         expect(controller.confirm.amount.value).toEqual('999');