From 58070a8b3ee659a56dfe62a060993628f16855e8 Mon Sep 17 00:00:00 2001 From: Rob Harrington Date: Wed, 18 Jan 2017 16:08:43 +1100 Subject: [PATCH] Adding loading flash and no-results messaging to standing orders index --- .../controllers/standing_orders_controller.js.coffee | 7 ++++++- .../standing_orders/services/standing_orders.js.coffee | 7 ++++--- app/assets/stylesheets/admin/offsets.css.scss | 4 ++++ app/assets/stylesheets/admin/openfoodnetwork.css.scss | 4 ++++ app/views/admin/standing_orders/_loading_flash.html.haml | 3 +++ app/views/admin/standing_orders/_no_results.html.haml | 7 +++++++ app/views/admin/standing_orders/_table.html.haml | 4 ++-- app/views/admin/standing_orders/index.html.haml | 2 ++ config/locales/en.yml | 4 ++++ 9 files changed, 36 insertions(+), 6 deletions(-) create mode 100644 app/views/admin/standing_orders/_loading_flash.html.haml create mode 100644 app/views/admin/standing_orders/_no_results.html.haml diff --git a/app/assets/javascripts/admin/standing_orders/controllers/standing_orders_controller.js.coffee b/app/assets/javascripts/admin/standing_orders/controllers/standing_orders_controller.js.coffee index f1a6eb830c..3e80aa07f1 100644 --- a/app/assets/javascripts/admin/standing_orders/controllers/standing_orders_controller.js.coffee +++ b/app/assets/javascripts/admin/standing_orders/controllers/standing_orders_controller.js.coffee @@ -1,9 +1,11 @@ -angular.module("admin.standingOrders").controller "StandingOrdersController", ($scope, StandingOrders, Columns, shops, ShippingMethods, PaymentMethods) -> +angular.module("admin.standingOrders").controller "StandingOrdersController", ($scope, StandingOrders, Columns, RequestMonitor, shops, ShippingMethods, PaymentMethods) -> $scope.columns = Columns.columns $scope.shops = shops $scope.shop_id = if shops.length == 1 then shops[0].id else null $scope.shippingMethodsByID = ShippingMethods.byID $scope.paymentMethodsByID = PaymentMethods.byID + $scope.RequestMonitor = RequestMonitor + $scope.query = '' $scope.$watch "shop_id", -> if $scope.shop_id? @@ -13,3 +15,6 @@ angular.module("admin.standingOrders").controller "StandingOrdersController", ($ standingOrder.standing_line_items.reduce (sum, sli) -> return sum + sli.quantity , 0 + + $scope.filtersApplied = -> + $scope.query != '' diff --git a/app/assets/javascripts/admin/standing_orders/services/standing_orders.js.coffee b/app/assets/javascripts/admin/standing_orders/services/standing_orders.js.coffee index 0fe055c7bb..0f29526e20 100644 --- a/app/assets/javascripts/admin/standing_orders/services/standing_orders.js.coffee +++ b/app/assets/javascripts/admin/standing_orders/services/standing_orders.js.coffee @@ -1,11 +1,12 @@ -angular.module("admin.standingOrders").factory 'StandingOrders', ($q, StandingOrderResource, StandingOrder) -> +angular.module("admin.standingOrders").factory 'StandingOrders', ($q, StandingOrderResource, StandingOrder, RequestMonitor) -> new class StandingOrders byID: {} pristineByID: {} index: (params={}, callback=null) -> - StandingOrderResource.index params, (data) => - @load(data) + request = StandingOrderResource.index params, (data) => @load(data) + RequestMonitor.load(request.$promise) + request load: (standingOrders) -> for standingOrder in standingOrders diff --git a/app/assets/stylesheets/admin/offsets.css.scss b/app/assets/stylesheets/admin/offsets.css.scss index 190ed49243..dd100ac367 100644 --- a/app/assets/stylesheets/admin/offsets.css.scss +++ b/app/assets/stylesheets/admin/offsets.css.scss @@ -9,3 +9,7 @@ .margin-bottom-50 { margin-bottom: 50px; } + +.margin-top-30 { + margin-top: 30px; +} diff --git a/app/assets/stylesheets/admin/openfoodnetwork.css.scss b/app/assets/stylesheets/admin/openfoodnetwork.css.scss index 5e135e1ead..9a970c87d4 100644 --- a/app/assets/stylesheets/admin/openfoodnetwork.css.scss +++ b/app/assets/stylesheets/admin/openfoodnetwork.css.scss @@ -198,6 +198,10 @@ table#listing_enterprise_groups { .no-results { font-weight:bold; color: #DA5354; + + h1, h2, h3, h4, h5, h6 { + color: #DA5354; + } } #loading { diff --git a/app/views/admin/standing_orders/_loading_flash.html.haml b/app/views/admin/standing_orders/_loading_flash.html.haml new file mode 100644 index 0000000000..9e01fa6929 --- /dev/null +++ b/app/views/admin/standing_orders/_loading_flash.html.haml @@ -0,0 +1,3 @@ +%div.sixteen.columns.alpha.omega#loading{ ng: { cloak: true, if: 'shop_id && RequestMonitor.loading' } } + %img.spinner{ src: "/assets/spinning-circles.svg" } + %h1 LOADING STANDING ORDERS diff --git a/app/views/admin/standing_orders/_no_results.html.haml b/app/views/admin/standing_orders/_no_results.html.haml new file mode 100644 index 0000000000..70e2e2b88c --- /dev/null +++ b/app/views/admin/standing_orders/_no_results.html.haml @@ -0,0 +1,7 @@ +%div.margin-top-30.text-center{ ng: { show: 'shop_id && !RequestMonitor.loading && filteredStandingOrders.length == 0' } } + .no-results{ ng: { show: '!filtersApplied()' } } + %h1.margin-bottom-20=t('.no_standing_orders') + %span.text-big=t('.why_dont_you_add_one') + + .no-results{ ng: { show: 'filtersApplied()' } } + %h1=t('.no_matching_standing_orders') diff --git a/app/views/admin/standing_orders/_table.html.haml b/app/views/admin/standing_orders/_table.html.haml index 8ada4bddeb..d96ae9df9f 100644 --- a/app/views/admin/standing_orders/_table.html.haml +++ b/app/views/admin/standing_orders/_table.html.haml @@ -1,7 +1,7 @@ = render 'products_panel' = render 'orders_panel' -%table.index#standing_orders +%table.index#standing_orders{ ng: { cloak: true, show: 'shop_id && !RequestMonitor.loading && filteredStandingOrders.length > 0' } } %col.customer{ width: "20%", 'ng-show' => 'columns.customer.visible' } %col.schedule{ width: "20%", 'ng-show' => 'columns.schedule.visible' } %col.items{ width: "10%", 'ng-show' => 'columns.items.visible' } @@ -36,7 +36,7 @@ = t('admin.shipping_method') %th.actions   - %tbody.panel-ctrl{ object: 'standingOrder', ng: { repeat: "standingOrder in standingOrders | filter:query track by standingOrder.id" } } + %tbody.panel-ctrl{ object: 'standingOrder', ng: { repeat: "standingOrder in standingOrders | filter:query as filteredStandingOrders track by standingOrder.id" } } %tr.standing_order{ :id => "so_{{standingOrder.id}}", ng: { class: { even: "'even'", odd: "'odd'" } } } %td.customer.text-center{ ng: { show: 'columns.customer.visible', bind: '::standingOrder.customer_email' } } %td.schedule.text-center{ ng: { show: 'columns.schedule.visible', bind: '::standingOrder.schedule_name' } } diff --git a/app/views/admin/standing_orders/index.html.haml b/app/views/admin/standing_orders/index.html.haml index 80eb5b5c4c..c889788056 100644 --- a/app/views/admin/standing_orders/index.html.haml +++ b/app/views/admin/standing_orders/index.html.haml @@ -17,3 +17,5 @@ = render 'filters' = render 'controls' = render 'table' + = render 'loading_flash' + = render 'no_results' diff --git a/config/locales/en.yml b/config/locales/en.yml index 93b03f5afd..cea1f65a72 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -843,6 +843,10 @@ en: confirm_unpause_msg: Are you sure you want to unpause this standing order? unpause_failure_msg: 'Sorry, unpausing failed!' order_update_issues_msg: Some orders could not be automatically updated, this is most likely because they have been manually edited. Please review the issues listed below and make any adjustments to individual orders if required. + no_results: + no_standing_orders: No standing orders yet... + why_dont_you_add_one: Why don't you add one? :) + no_matching_standing_orders: No matching standing orders found stripe_connect_settings: edit: