supplier product category filtering

app/assets/javascripts/supplier/app/application.js.coffee

@@ -8,3 +8,4 @@
 #= require_tree .
 @$assets_path = '/assets/';
 @EmberENV = {FEATURES: {'query-params-new': true}}
+@$days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']

app/assets/javascripts/supplier/app/components/menu-time-preview.js.coffee

@@ -0,0 +1,55 @@
+App.MenuTimePreviewComponent = Ember.Component.extend
+  active: false
+  collapsed: true
+  preview_day: null
+  filter: null
+  preview_full_day: true
+  preview_minute_of_day: 1340
+  classNames: 'menu-time-preview-container'
+  classNameBindings: ['active:active']
+  actions:
+    openTimePreview: -> 
+      @set 'collapsed', false
+    closeTimePreview: ->
+      #@set 'active', false
+      @set 'collapsed', true
+    activateTimePreview: ->
+      @set 'collapsed', true
+      @set 'active', true
+    deactivateTimePreview: ->
+      @set 'preview_day', null
+      @set 'preview_full_day', true
+      @set 'active', false
+      @set 'collapsed', true
+  daysContent: (-> 
+    $days.map( (d) -> Ember.Object.create( name: d, text: t("date.day_names.#{d}")) )
+  ).property()
+  preview_day_text: (->
+    return "" unless day = @get('preview_day.text')
+    #day_text = tspan("date.day_names.#{day.get('name')}")
+    tag = "<h4>#{day}</h4>"
+    new Ember.Handlebars.SafeString(tag)
+  ).property('preview_day')
+
+  preview_time_text: (->
+    return "" if @get('preview_full_day')
+    day_minute = @get('preview_minute_of_day')
+    hour = Math.floor(day_minute/60)
+    minute = Math.floor(day_minute%60)
+    hour = "0#{hour}".substr(-2,2)
+    minute = "0#{minute}".substr(-2,2)
+    new Ember.Handlebars.SafeString("<span class='time-preview-active-time time'>#{hour}:#{minute}</span>")
+  ).property('preview_full_day', 'preview_minute_of_day')
+  hasSelection: (->
+    return true if @get('preview_day')
+    return true unless @get('preview_full_day')
+    false
+  ).property('preview_day', 'preview_full_day')
+
+  remoteFilter: (->
+    return @set('targetObject.filter', null) unless @get('active')
+    filter = Ember.Object.create()
+    filter.set 'day', @get('preview_day.name')
+    filter.set 'minute_of_day', @get('preview_minute_of_day') unless @get('preview_full_day')
+    @set('targetObject.filter', filter)
+  ).observes('active', 'preview_day', 'preview_full_day', 'preview_minute_of_day')

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

@@ -2,7 +2,16 @@ App.MenuController = Ember.ObjectController.extend
   needs: ['application']
   product_code_filter: ''
   product_categories: (-> @store.all('product_category')).property()
-  sorted_product_categories: (-> @get('product_categories').sortBy('position')).property('product_categories.@each', 'product_categories.@each.position')
+  filter: null
+  sorted_product_categories: (-> 
+    list = @get('product_categories')
+    if filter_day = @get('filter.day')
+      list = list.filterBy "active_on_#{filter_day}"
+    if filter_minute = @get('filter.minute_of_day')
+      list = list.filter (r) -> r.get('full_day') or (filter_minute > r.get('start_from') and filter_minute < r.get('end_on'))
+
+    list.sortBy('position')
+  ).property('product_categories.@each', 'product_categories.@each.position', 'filter.day', 'filter.minute_of_day')
   product_code_filter_placeholder: t('product.code_filter.placeholder')
   actions:
     editProductCategory: (product_category)->

app/assets/javascripts/supplier/app/models/product_category.js.coffee

@@ -3,13 +3,13 @@ App.ProductCategory = DS.Model.extend
   name: attr('string')
   products: DS.hasMany('product')
   supplier: DS.belongsTo 'supplier'
-  active_on_sunday: attr('boolean')
+  active_on_sunday: attr('boolean', defaultValue: true)
-  active_on_monday: attr('boolean')
+  active_on_monday: attr('boolean', defaultValue: true)
-  active_on_tuesday: attr('boolean')
+  active_on_tuesday: attr('boolean', defaultValue: true)
-  active_on_wednesday: attr('boolean')
+  active_on_wednesday: attr('boolean', defaultValue: true)
-  active_on_thursday: attr('boolean')
+  active_on_thursday: attr('boolean', defaultValue: true)
-  active_on_friday: attr('boolean')
+  active_on_friday: attr('boolean', defaultValue: true)
-  active_on_saturday: attr('boolean')
+  active_on_saturday: attr('boolean', defaultValue: true)
   full_day: attr 'boolean', defaultValue: true
   start_from: attr('number')
   end_on: attr('number')
@@ -18,8 +18,7 @@ App.ProductCategory = DS.Model.extend
   sorted_products: (-> @get('products').sortBy('position') ).property('products.@each.position')
 
   availability_text: Ember.computed 'active_on_sunday', 'active_on_monday', 'active_on_tuesday', 'active_on_wednesday', 'active_on_thursday', 'active_on_friday', 'active_on_saturday', 'full_day', 'start_from', 'end_on', ->
-    days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']
+    active_days = $days.filter (day)=>@get("active_on_#{day}")
-    active_days = days.filter (day)=>@get("active_on_#{day}")
     result = ""
     if active_days.length < 7
       result += "<span class=\"day-names\">#{active_days.map((day) -> tspan("date.day_name.#{day}")).join(", ")}</span> "

app/assets/javascripts/supplier/app/templates/components/menu-time-preview.emblem

@@ -0,0 +1,22 @@
+if collapsed
+  if active
+    .menu-time-preview-active-panel{action "openTimePreview"}
+      = preview_day_text
+      = preview_time_text
+  else
+    a.open-time-preview-handle{action "openTimePreview"}: span
+else
+  .menu-time-preview-selection-container
+    a.close-time-preview-handle{action "closeTimePreview"}: span
+    h4= t 'product_category.time_preview.title'
+    = view "select" content=daysContent optionValuePath="content.value" optionLabelPath="content.text" selection=preview_day prompt=" -- "
+    br
+    = view 'boolean-button' value=preview_full_day reverse=true text_path="product_category.time_preview.active_at"
+    unless preview_full_day
+      = view "select-minute-of-day" value=preview_minute_of_day
+    hr
+    if active
+      a.deactivate-time-preview-button{action "deactivateTimePreview"}= t 'product_category.time_preview.deactivate_button'
+    else
+      if hasSelection
+        a.activate-time-preview-button{action "activateTimePreview"}= t 'product_category.time_preview.activate_button'

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

@@ -1,3 +1,4 @@
+= menu-time-preview
 .row: .small-12.columns
   .products-menu-filters-container
     = input value=product_code_filter type="search" placeholder=product_code_filter_placeholder

app/assets/javascripts/supplier/app/views/form_elements/select_minute_of_day_view.js.coffee

@@ -1,13 +1,17 @@
 App.SelectMinuteOfDayView = Ember.View.extend
   templateName: "form_elements/select_minute_of_day"
   classNameBindings: ['rounded:round']
-  hours_list: [0..24]
+  hours_list: [0..24].map (n) -> "0#{n}".substr(-2,2)
-  minutes_list: [0..60]
+  minutes_list: [0..60].map (n) -> "0#{n}".substr(-2,2)
-  hour: Ember.computed 'value', (a,b,c)->
+  hour: Ember.computed 'value', (attribute, setValue)->
     if arguments.length > 1
-      @set 'value', 60*b + (@get('minute') || 0)
+      minute = if @get('minute') then parseInt(@get('minute')) else 0
-    Math.floor (@get('value') || 0)/60
+      @set 'value', 60*parseInt(setValue) + minute
-  minute: Ember.computed 'value', (a,b,c)->
+    number = Math.floor (@get('value') || 0)/60
+    "0#{number}".substr(-2,2)
+  minute: Ember.computed 'value', (attribute, setValue)->
     if arguments.length > 1
-      @set 'value', 60*(@get('hour')||0) + b
+      hour = if @get('hour') then parseInt(@get('hour')) else 0
-    Math.floor @get('value')%60
+      @set 'value', 60*hour + parseInt(setValue)
+    number = Math.floor @get('value')%60
+    "0#{number}".substr(-2,2)

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

@@ -23,7 +23,6 @@ $.extend($translations.en, <%= I18n.t('supplier', locale: :en).to_json %>);
 $.extend($translations.nl, <%= I18n.t('supplier', locale: :nl).to_json %>);
 
 String.prototype.capitalize = function() { return this.charAt(0).toUpperCase() + this.slice(1); }
-
 window.time_zones = <%= ActiveSupport::TimeZone.all.map{|tz| {name: tz.name, formatted: "GMT#{tz.formatted_offset} #{tz.name}"}}.to_json.html_safe %>;
 window.countries = <%= IsoCountryCodes.all.map{|cc| {name: cc.name}}.to_json.html_safe %>;
 

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

@@ -0,0 +1,36 @@
+= time-preview-panel($bg: rgba(200,200,200,0.8))
+  background-color: $bg
+  padding: 7px
+  border: 1px solid #777
+  border-left-size: 0
+  border-bottom-right-radius: 8px
+  border-top-right-radius: 8px
+.menu-time-preview-container
+  position: fixed
+  top: 30%
+  left: 0
+  z-index: 9056
+  .button
+    margin: 0
+  .open-time-preview-handle
+    +time-preview-panel()
+    span
+      @extend .fa, .fa-2x, .fa-calendar
+  .close-time-preview-handle
+    float: right
+    color: $warning-color
+    span
+      @extend .fa, .fa-lg, .fa-times
+  .menu-time-preview-selection-container
+    min-width: 200px
+    +time-preview-panel()
+    .activate-time-preview-button
+      +button()
+      margin: 0
+    .deactivate-time-preview-button
+      +button()
+      margin: 0
+
+  .menu-time-preview-active-panel
+    +time-preview-panel($bg: rgba(199, 255, 176, 0.8))
+

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

@@ -53,6 +53,7 @@
     margin-top: -5px
     background-color: #ccc
     padding: 5px
+    z-index: 722
   .highlight
     text-decoration: underline
     font-weight: bold

config/locales/supplier.en.yml

@@ -139,6 +139,11 @@ en:
           friday: F
           saturday: S
       new_button: Add ${models.product_category}
+      time_preview:
+        title: Preview ${models.plural.product_category|downcase}
+        active_at: Active on
+        activate_button: Activate preview
+        deactivate_button: Stop preview
       modal:
         active_between:
           top: Active between

config/locales/supplier.nl.yml

@@ -137,6 +137,11 @@ nl:
           friday: V
           saturday: Z
       new_button: ${models.product_category} toevoegen
+      time_preview:
+        title: Preview ${models.plural.product_category|downcase}
+        active_at: Actief om
+        activate_button: Activeer preview
+        deactivate_button: Stop preview
       modal:
         active_between:
           top: Actief tussen