Merge pull request #2975 from SEED-platform/2524-refactor/export-csv-…

…spinner Refactor: Show spinner utility during inventory export
SEED-platform · Nov 1, 2021 · 436c5f7 · 436c5f7
2 parents bbb2eeb + e55331c
commit 436c5f7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/seed/static/seed/js/controllers/export_inventory_modal_controller.js b/seed/static/seed/js/controllers/export_inventory_modal_controller.js
@@ -11,17 +11,32 @@ angular.module('BE.seed.controller.export_inventory_modal', []).controller('expo
   'columns',
   'inventory_type',
   'profile_id',
+  'spinner_utility',
   'filter_header_string',
-  function ($http, $scope, $uibModalInstance, user_service, ids, columns, inventory_type, profile_id, filter_header_string) {
+  function (
+    $http, 
+    $scope, 
+    $uibModalInstance, 
+    user_service, 
+    ids, 
+    columns, 
+    inventory_type, 
+    profile_id, 
+    spinner_utility,
+    filter_header_string,
+  ) {
     $scope.export_name = '';
     $scope.include_notes = true;
     $scope.include_label_header = false;
     $scope.inventory_type = inventory_type;
+    $scope.exporting = false
 
     $scope.export_selected = function (export_type) {
       var filename = $scope.export_name;
       var ext = '.' + export_type;
       if (!_.endsWith(filename, ext)) filename += ext;
+      spinner_utility.show()
+      $scope.exporting = true
       return $http.post('/api/v3/tax_lot_properties/export/', {
         ids: ids,
         filename: filename,
@@ -35,6 +50,7 @@ angular.module('BE.seed.controller.export_inventory_modal', []).controller('expo
         },
         responseType: export_type === 'xlsx' ? 'arraybuffer' : undefined
       }).then(function (response) {
+        spinner_utility.hide()
         var blob_type = response.headers()['content-type'];
         var data;
         if (export_type === 'xlsx') {

diff --git a/seed/static/seed/partials/export_inventory_modal.html b/seed/static/seed/partials/export_inventory_modal.html
@@ -46,10 +46,10 @@ <h4 class="modal-title" id="exportModalLabel" translate>Export your Properties a
     </div>
 </div>
 <div class="modal-footer">
-    <button type="button" class="btn btn-primary" ng-click="export_selected('csv')" ng-disabled="!export_name.length" translate>Export CSV</button>
-    <button type="button" class="btn btn-primary" ng-click="export_selected('xlsx')" ng-disabled="!export_name.length" ng-if="inventory_type === 'properties'" translate>Export BuildingSync in Excel format</button>
-    <button type="button" class="btn btn-primary" ng-click="export_selected('geojson')" ng-disabled="!export_name.length" translate>Export GeoJSON</button>
+    <button type="button" class="btn btn-primary" ng-click="export_selected('csv')" ng-disabled="!export_name.length || exporting" translate>Export CSV</button>
+    <button type="button" class="btn btn-primary" ng-click="export_selected('xlsx')" ng-disabled="!export_name.length || exporting" ng-if="inventory_type === 'properties'" translate>Export BuildingSync in Excel format</button>
+    <button type="button" class="btn btn-primary" ng-click="export_selected('geojson')" ng-disabled="!export_name.length || exporting" translate>Export GeoJSON</button>
 </div>
 <div class="modal-footer">
-    <button type="button" class="btn btn-default" ng-click="cancel()" translate>Cancel</button>
+    <button type="button" class="btn btn-default" ng-click="cancel()" ng-disabled="exporting"translate>Cancel</button>
 </div>