From 9a4373f38acc37ceb4abbac033c8c6d1a3e24bbe Mon Sep 17 00:00:00 2001 From: Benjamin ter Kuile Date: Sat, 20 Sep 2014 20:43:43 +0200 Subject: [PATCH] Supplier dashboard collapsible and empty state --- .../controllers/index_controller.js.coffee | 11 +++++++ .../supplier/app/templates/index.emblem | 30 +++++++++++++++---- .../supplier/foundation1/application.js.erb | 1 + .../components/_dashboard.css.sass | 9 ++++++ config/locales/supplier.en.yml | 5 ++++ config/locales/supplier.nl.yml | 5 ++++ wip.md | 2 -- 7 files changed, 55 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/supplier/app/controllers/index_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/index_controller.js.coffee index c91a8336..2e7923ec 100644 --- a/app/assets/javascripts/supplier/app/controllers/index_controller.js.coffee +++ b/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) diff --git a/app/assets/javascripts/supplier/app/templates/index.emblem b/app/assets/javascripts/supplier/app/templates/index.emblem index b764571e..63e27e9b 100644 --- a/app/assets/javascripts/supplier/app/templates/index.emblem +++ b/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" diff --git a/app/assets/javascripts/supplier/foundation1/application.js.erb b/app/assets/javascripts/supplier/foundation1/application.js.erb index 41a6838b..35697e24 100644 --- a/app/assets/javascripts/supplier/foundation1/application.js.erb +++ b/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 %>); diff --git a/app/assets/stylesheets/supplier/foundation1/components/_dashboard.css.sass b/app/assets/stylesheets/supplier/foundation1/components/_dashboard.css.sass index f56efd46..205f1002 100644 --- a/app/assets/stylesheets/supplier/foundation1/components/_dashboard.css.sass +++ b/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 diff --git a/config/locales/supplier.en.yml b/config/locales/supplier.en.yml index 8e1676a7..dfc73f9b 100644 --- a/config/locales/supplier.en.yml +++ b/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?' diff --git a/config/locales/supplier.nl.yml b/config/locales/supplier.nl.yml index 14574dcc..220102d1 100644 --- a/config/locales/supplier.nl.yml +++ b/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?' diff --git a/wip.md b/wip.md index 6613e2c4..c5d52320 100644 --- a/wip.md +++ b/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