Supplier dashboard collapsible and empty state

app/assets/javascripts/supplier/app/controllers/index_controller.js.coffee

@@ -1,5 +1,7 @@
 App.IndexController = Ember.ObjectController.extend
   needs: ['application']
+  show_lists: true
+  show_orders: true
   lists: (-> @store.all('list')).property()
   orders: (-> @store.all('order')).property()
   sections: (-> @store.all('section')).property()
@@ -20,6 +22,13 @@ App.IndexController = Ember.ObjectController.extend
     orders.sortBy('created_at') # Not reversed, oldest on top, start with oldest order first :-) Customer happyness
   ).property('orders.@each.state', 'active_section.id')
 
+  show_lists_table: Ember.computed 'show_lists', 'active_lists.@each', ->
+    @get('show_lists') and @get('active_lists.length')
+  show_orders_table: Ember.computed 'show_orders', 'active_orders.@each', ->
+    @get('show_orders') and @get('active_orders.length')
+  list_number_info: (-> " (#{@get('active_lists.length')})").property('active_lists.@each')
+  order_number_info: (-> " (#{@get('active_orders.length')})").property('active_orders.@each')
+
   actions:
     ###
     markListAsHelped: (id)->
@@ -30,6 +39,8 @@ App.IndexController = Ember.ObjectController.extend
       @send 'openModal', 'modal_close_list', list
       # list.close()
     ###
+    toggleDashboardLists: -> @set 'show_lists', !@get('show_lists')
+    toggleDashboardOrders: ->@set 'show_orders', !@get('show_orders')
 
     markOrderDelivered: (id)->
       $.post('/supplier/order_is_delivered', order_id: id)

app/assets/javascripts/supplier/app/templates/index.emblem

@@ -2,8 +2,17 @@
   div.dashboard-section-selection
     App.HomeSectionSelectorView selectionBinding="controller.controllers.application.active_section" content=controller.sections prompt=controllers.application.supplier.name
     App.HomeSectionJumperView
-  h3=t 'active_lists.title'
-.well
+  if active_lists.length
+    h3.dashboard-lists-header{action "toggleDashboardLists"}
+      if show_lists
+        span.icon
+      else
+        span.icon.collapsed
+      =t 'active_lists.title'
+      span= list_number_info
+  else
+    h3=t 'dashboard.active_lists.no_lists'
+if show_lists_table
   table.active-lists-table.table
     thead
       tr
@@ -14,10 +23,19 @@
         th.currency=t 'active_lists.price'
         th.actions
     tbody
-      each list in controller.active_lists: App.ActiveListView contentBinding="list"
+      each list in active_lists: App.ActiveListView contentBinding="list"
 .page-header
-  h3=t 'active_orders.title'
-.well
+  if active_orders.length
+    h3.dashboard-orders-header{action "toggleDashboardOrders"}
+      if show_orders
+        span.icon
+      else
+        span.icon.collapsed
+      =t 'active_orders.title'
+      span= order_number_info
+  else
+    h3= t 'dashboard.active_orders.no_orders'
+if show_orders_table
   table.active-orders-table.table
     thead
       tr
@@ -30,4 +48,4 @@
         th.time
         th.actions
     tbody
-      each order in controller.active_orders: App.ActiveOrderView contentBinding="order"
+      each order in active_orders: App.ActiveOrderView contentBinding="order"

app/assets/javascripts/supplier/foundation1/application.js.erb

@@ -16,6 +16,7 @@
 //= require_directory .
 //= require_self
 
+
 var Qstorage = localStorage;
 $.extend($translations.en, <%= I18n.t('supplier', locale: :en).to_json %>);
 $.extend($translations.nl, <%= I18n.t('supplier', locale: :nl).to_json %>);