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'
+  if active_lists.length
-.well
+    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'
+  if active_orders.length
-.well
+    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 %>);

app/assets/stylesheets/supplier/foundation1/components/_dashboard.css.sass

@@ -1,4 +1,13 @@
 $button-spacing: 8px
+.dashboard-lists-header, .dashboard-orders-header
+  cursor: pointer
+  .icon
+    @extend .fa
+    @extend .fa-arrow-down
+    color: #ccc
+    padding-right: 10px
+    &.collapsed
+      @extend .fa-arrow-right
 .dashboard-section-selection
   float: right
   min-width: 124px

config/locales/supplier.en.yml

@@ -1,5 +1,10 @@
 en:
   supplier:
+    dashboard:
+      active_lists:
+        no_lists: No active lists
+      active_orders:
+        no_orders: No active orders
     messages:
       could_not_arrange_tables: 'The tables could not be arranged'
       could_not_arrange_tables_distributed: 'The tables could not be arranged. Does the ${models.section|downcase} have a width and a height?'

config/locales/supplier.nl.yml

@@ -1,5 +1,10 @@
 nl:
   supplier:
+    dashboard:
+      active_lists:
+        no_lists: Geen actieve ${models.plural.list}
+      active_orders:
+        no_orders: Geen actieve ${models.plural.order}
     messages:
       could_not_arrange_tables: 'De ${models.plural.table} konden niet worden gepositioneerd'
       could_not_arrange_tables_distributed: 'De ${models.plural.table} konden niet worden gepositioneerd. Heeft de ${models.section|downcase} een hoogte en breedte?'

wip.md

@@ -6,8 +6,6 @@ Supplier
 
 - english emails
 - form action button looks (Roos)
-- Dashboard
-	- Empty state
 - Add qr print functionality offering to send the stickers
 
 User