From 99e59595b49d082ab3ad34c66731ed5200cbbe18 Mon Sep 17 00:00:00 2001 From: luisramos0 Date: Mon, 25 Nov 2019 23:22:16 +0000 Subject: [PATCH] Add spinner when loading all products in an exchange --- .../controllers/incoming_controller.js.coffee | 2 +- .../order_cycle_exchanges_controller.js.coffee | 16 ++++++++++------ .../services/exchange_product.js.coffee | 2 -- .../exchange_distributed_products.html.haml | 11 +++++++++-- .../panels/exchange_supplied_products.html.haml | 13 ++++++++++--- .../stylesheets/admin/openfoodnetwork.css.scss | 1 + .../admin/order_cycles/_exchange_form.html.haml | 4 ++-- config/locales/en.yml | 1 + 8 files changed, 34 insertions(+), 16 deletions(-) diff --git a/app/assets/javascripts/admin/order_cycles/controllers/incoming_controller.js.coffee b/app/assets/javascripts/admin/order_cycles/controllers/incoming_controller.js.coffee index ea5a4216fa..c18cc0e4a3 100644 --- a/app/assets/javascripts/admin/order_cycles/controllers/incoming_controller.js.coffee +++ b/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() diff --git a/app/assets/javascripts/admin/order_cycles/controllers/order_cycle_exchanges_controller.js.coffee b/app/assets/javascripts/admin/order_cycles/controllers/order_cycle_exchanges_controller.js.coffee index 1a81aca9cc..fde1436745 100644 --- a/app/assets/javascripts/admin/order_cycles/controllers/order_cycle_exchanges_controller.js.coffee +++ b/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 diff --git a/app/assets/javascripts/admin/order_cycles/services/exchange_product.js.coffee b/app/assets/javascripts/admin/order_cycles/services/exchange_product.js.coffee index 1a80c637d5..9750b0f753 100644 --- a/app/assets/javascripts/admin/order_cycles/services/exchange_product.js.coffee +++ b/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) -> diff --git a/app/assets/javascripts/templates/admin/panels/exchange_distributed_products.html.haml b/app/assets/javascripts/templates/admin/panels/exchange_distributed_products.html.haml index 2554a3bcfb..6048fcb4f5 100644 --- a/app/assets/javascripts/templates/admin/panels/exchange_distributed_products.html.haml +++ b/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 }} diff --git a/app/assets/javascripts/templates/admin/panels/exchange_supplied_products.html.haml b/app/assets/javascripts/templates/admin/panels/exchange_supplied_products.html.haml index c79252d9c6..246a0d5f50 100644 --- a/app/assets/javascripts/templates/admin/panels/exchange_supplied_products.html.haml +++ b/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 }} diff --git a/app/assets/stylesheets/admin/openfoodnetwork.css.scss b/app/assets/stylesheets/admin/openfoodnetwork.css.scss index f26fbc992f..99f4a849bb 100644 --- a/app/assets/stylesheets/admin/openfoodnetwork.css.scss +++ b/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; } diff --git a/app/views/admin/order_cycles/_exchange_form.html.haml b/app/views/admin/order_cycles/_exchange_form.html.haml index 267d6f242f..aecadde20d 100644 --- a/app/views/admin/order_cycles/_exchange_form.html.haml +++ b/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 } diff --git a/config/locales/en.yml b/config/locales/en.yml index 8bb7d33cd1..d617a41c58 100644 --- a/config/locales/en.yml +++ b/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:"