Adding loading flash and no-results messaging to standing orders index

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 != ''

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

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

@@ -9,3 +9,7 @@
 .margin-bottom-50 {
   margin-bottom: 50px;
 }
+
+.margin-top-30 {
+  margin-top: 30px;
+}

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 {

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

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')

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' } }

app/views/admin/standing_orders/index.html.haml

@@ -17,3 +17,5 @@
   = render 'filters'
   = render 'controls'
   = render 'table'
+  = render 'loading_flash'
+  = render 'no_results'

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: