Add spinner when loading all products in an exchange

app/assets/javascripts/admin/order_cycles/controllers/incoming_controller.js.coffee

@@ -26,6 +26,6 @@ angular.module('admin.orderCycles').controller 'AdminOrderCycleIncomingCtrl', ($
   # This is only needed in Incoming exchanges as here we use supplied_products,
   #   in Outgoing Exchanges the variants are loaded as part of the Exchange payload
   $scope.selectAllVariants = (exchange, selected) ->
-    Promise.all($scope.loadAllExchangeProducts(exchange)).then ->
+    $scope.loadAllExchangeProducts(exchange).then ->
       $scope.setExchangeVariants(exchange, $scope.suppliedVariants(exchange.enterprise_id), selected)
       $scope.$apply()

app/assets/javascripts/admin/order_cycles/controllers/order_cycle_exchanges_controller.js.coffee

@@ -5,6 +5,9 @@ angular.module('admin.orderCycles')
     $scope.supplier_enterprises = Enterprise.producer_enterprises
     $scope.distributor_enterprises = Enterprise.hub_enterprises
 
+    $scope.productsLoading = ->
+      RequestMonitor.loading
+
     $scope.setSelectAllVariantsCheckboxValue = (exchange, totalNumberOfVariants) ->
       exchange.select_all_variants = $scope.exchangeSelectedVariants(exchange) >= totalNumberOfVariants
 
@@ -58,15 +61,16 @@ angular.module('admin.orderCycles')
 
     $scope.loadAllExchangeProducts = (exchange) ->
       enterprise = $scope.enterprises[exchange.enterprise_id]
-      return [] if enterprise.last_page_loaded >= enterprise.num_of_pages
-      all_promises = []
-      for page_to_load in [(enterprise.last_page_loaded + 1)..enterprise.num_of_pages]
-        all_promises.push $scope.loadExchangeProducts(exchange, page_to_load).$promise
-      all_promises
+
+      if enterprise.last_page_loaded < enterprise.num_of_pages
+        for page_to_load in [(enterprise.last_page_loaded + 1)..enterprise.num_of_pages]
+          RequestMonitor.load $scope.loadExchangeProducts(exchange, page_to_load).$promise
+
+      RequestMonitor.loadQueue
 
     # initialize exchange products panel if not yet done
     $scope.exchangeProdutsPanelInitialized = []
     $scope.initializeExchangeProductsPanel = (exchange) ->
       return if $scope.exchangeProdutsPanelInitialized[exchange.enterprise_id]
-      $scope.loadExchangeProducts(exchange)
+      RequestMonitor.load $scope.loadExchangeProducts(exchange).$promise
       $scope.exchangeProdutsPanelInitialized[exchange.enterprise_id] = true

app/assets/javascripts/admin/order_cycles/services/exchange_product.js.coffee

@@ -5,11 +5,9 @@ angular.module('admin.orderCycles').factory('ExchangeProduct', ($resource) ->
   })
   {
     ExchangeProductResource: ExchangeProductResource
-    loaded: false
 
     index: (params={}, callback=null) ->
       ExchangeProductResource.index params, (data) =>
-        @loaded = true
         (callback || angular.noop)(data.products, data.pagination.pages, data.pagination.results)
 
     countVariants: (params={}, callback=null) ->

app/assets/javascripts/templates/admin/panels/exchange_distributed_products.html.haml

@@ -15,7 +15,7 @@
           'id' => 'order_cycle_outgoing_exchange_{{ $parent.$index }}_select_all_variants' }
         {{ 'js.admin.panels.exchange_products.select_all_products' | t:{ total_number_of_products: enterprises[exchange.enterprise_id].num_of_products } }}
 
-    .exchange-products
+    .exchange-products{ 'ng-hide' => 'productsLoading()' }
       -# Scope product list based on permissions the current user has to view variants in this exchange
       .exchange-product{'ng-repeat' => 'product in enterprises[exchange.enterprise_id].supplied_products | filter:visibleProducts:exchange:order_cycle.visible_variants_for_outgoing_exchanges' }
         .exchange-product-details
@@ -32,8 +32,15 @@
               'id' => 'order_cycle_outgoing_exchange_{{ $parent.$parent.$index }}_variants_{{ variant.id }}',
               'ng-disabled' => '!order_cycle.editable_variants_for_outgoing_exchanges.hasOwnProperty(exchange.enterprise_id) || order_cycle.editable_variants_for_outgoing_exchanges[exchange.enterprise_id].indexOf(variant.id) < 0' }
             {{ variant.label }}
-    .pagination{ 'ng-show' => 'enterprises[exchange.enterprise_id].last_page_loaded < enterprises[exchange.enterprise_id].num_of_pages'}
+
+    .pagination{ 'ng-show' => 'enterprises[exchange.enterprise_id].last_page_loaded < enterprises[exchange.enterprise_id].num_of_pages && !productsLoading()'}
       .button{ 'ng-click' => 'loadMoreExchangeProducts(exchange)' }
         {{ 'js.admin.panels.exchange_products.load_more_products' | t }}
       .button{ 'ng-click' => 'loadAllExchangeProducts(exchange)' }
         {{ 'js.admin.panels.exchange_products.load_all_products' | t }}
+
+    .sixteen.columns.alpha#loading{ 'ng-show' => 'productsLoading()' }
+      %br
+      %img.spinner{ src: "/assets/spinning-circles.svg" }
+      %h1
+        {{ 'js.admin.panels.exchange_products.loading_products' | t }}

app/assets/javascripts/templates/admin/panels/exchange_supplied_products.html.haml

@@ -3,7 +3,7 @@
     .exchange-load-all-variants
       %div
         {{ 'js.admin.panels.exchange_products.products_loaded' | t:{ num_of_products_loaded: enterprises[exchange.enterprise_id].supplied_products.length, total_number_of_products: enterprises[exchange.enterprise_id].num_of_products } }}
-        %a{ 'ng-click' => 'loadAllExchangeProducts(exchange)', 'ng-show' => 'enterprises[exchange.enterprise_id].last_page_loaded < enterprises[exchange.enterprise_id].num_of_pages'  }
+        %a{ 'ng-click' => 'loadAllExchangeProducts(exchange)', 'ng-show' => 'enterprises[exchange.enterprise_id].last_page_loaded < enterprises[exchange.enterprise_id].num_of_pages' }
           {{ 'js.admin.panels.exchange_products.load_all_products' | t }}
 
     .exchange-select-all-variants
@@ -15,7 +15,7 @@
           'id' => 'order_cycle_incoming_exchange_{{ $index }}_select_all_variants' }
         {{ 'js.admin.panels.exchange_products.select_all_products' | t:{ total_number_of_products: enterprises[exchange.enterprise_id].num_of_products } }}
 
-    .exchange-products
+    .exchange-products{ 'ng-hide' => 'productsLoading()' }
       -# No need to scope product list based on permissions, because if an incoming exchange is visible,
       -# then all of the variants within it should be visible. May change in the future?
       .exchange-product{'ng-repeat' => 'product in enterprises[exchange.enterprise_id].supplied_products'}
@@ -33,8 +33,15 @@
               'id' => 'order_cycle_incoming_exchange_{{ $parent.$parent.$index }}_variants_{{ variant.id }}',
               'ng-disabled' => '!order_cycle.editable_variants_for_incoming_exchanges.hasOwnProperty(exchange.enterprise_id) || order_cycle.editable_variants_for_incoming_exchanges[exchange.enterprise_id].indexOf(variant.id) < 0' }
             {{ variant.label }}
-    .pagination{ 'ng-show' => 'enterprises[exchange.enterprise_id].last_page_loaded < enterprises[exchange.enterprise_id].num_of_pages'}
+
+    .pagination{ 'ng-show' => 'enterprises[exchange.enterprise_id].last_page_loaded < enterprises[exchange.enterprise_id].num_of_pages && !productsLoading()'}
       .button{ 'ng-click' => 'loadMoreExchangeProducts(exchange)' }
         {{ 'js.admin.panels.exchange_products.load_more_products' | t }}
       .button{ 'ng-click' => 'loadAllExchangeProducts(exchange)' }
         {{ 'js.admin.panels.exchange_products.load_all_products' | t }}
+
+    .sixteen.columns.alpha#loading{ 'ng-show' => 'productsLoading()' }
+      %br
+      %img.spinner{ src: "/assets/spinning-circles.svg" }
+      %h1
+        {{ 'js.admin.panels.exchange_products.loading_products' | t }}

app/assets/stylesheets/admin/openfoodnetwork.css.scss

@@ -213,6 +213,7 @@ table#listing_enterprise_groups {
 #loading {
   text-align: center;
   img.spinner {
+    border: 0px;
     width: 100px;
     height: 100px;
   }

app/views/admin/order_cycles/_exchange_form.html.haml

@@ -31,10 +31,10 @@
 - if type == 'supplier'
   %tr.panel-row{ object: "exchange",
     panels: "{products: 'exchange_supplied_products'}",
-    locals: "$index,order_cycle,exchange,enterprises,setExchangeVariants,selectAllVariants,suppliedVariants,removeDistributionOfVariant,initializeExchangeProductsPanel,loadMoreExchangeProducts,loadAllExchangeProducts",
+    locals: "$index,order_cycle,exchange,enterprises,setExchangeVariants,selectAllVariants,suppliedVariants,removeDistributionOfVariant,initializeExchangeProductsPanel,loadMoreExchangeProducts,loadAllExchangeProducts,productsLoading",
     colspan: 4 }
 - if type == 'distributor'
   %tr.panel-row{ object: "exchange",
     panels: "{products: 'exchange_distributed_products', tags: 'exchange_tags'}",
-    locals: "$index,order_cycle,exchange,enterprises,setExchangeVariants,incomingExchangeVariantsFor,variantSuppliedToOrderCycle,initializeExchangeProductsPanel,loadMoreExchangeProducts,loadAllExchangeProducts",
+    locals: "$index,order_cycle,exchange,enterprises,setExchangeVariants,incomingExchangeVariantsFor,variantSuppliedToOrderCycle,initializeExchangeProductsPanel,loadMoreExchangeProducts,loadAllExchangeProducts,productsLoading",
     colspan: 5 }

config/locales/en.yml

@@ -2565,6 +2565,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
           load_all_products: "Load All Products"
           select_all_products: "Select All %{total_number_of_products} Products"
           products_loaded: "%{num_of_products_loaded} of %{total_number_of_products} Products Loaded"
+          loading_products: "Loading Products"
       tag_rules:
         shipping_method_tagged_top: "Shipping methods tagged"
         shipping_method_tagged_bottom: "are:"