menu and section header progress

This commit is contained in:
2014-11-26 20:18:17 +01:00
parent a64d3de319
commit 60f014811c
38 changed files with 450 additions and 96 deletions
@@ -1,4 +1,4 @@
Ember.Handlebars.registerHelper 't', (path, params..., options)->
text = t(path)
tag = if options.hash.bare then text else "<span data-t=\"#{path}\">#{text}</span>"
tag = if options.hash.bare then text else "<span data-t='#{path}' data-t-attributes='{}'>#{text}</span>"
new Handlebars.SafeString tag
@@ -1,5 +1,6 @@
@App = Ember.Application.create
LOG_TRANSITIONS: true
LOG_VIEW_LOOKUPS: true
rootElement: '#ember-app-container'
store: -> @__container__.lookup('controller:application').store
@App.modals = Ember.Namespace.create()
@@ -0,0 +1,49 @@
App.EditCurrencyComponent = Ember.Component.extend
classNames: ['edit-currency-container', 'row', 'collapse']
classNameBindings: ['has_error:error']
currencySymbol: ''
has_error: false
placeholder: '0.00'
validatePresence: false
inputValue: Ember.computed (key, value, previousValue)->
key = "value"
if arguments.length > 1
if value
# if typeof value is 'number'
# return_value = value.toPrecision()
# @set key, value
if typeof value is 'string' and value.match(/^[+-]?\d+(\.?\d?\d)?$/)
@set 'has_error', false
@set key, parseFloat(value)
else
@set 'has_error', true
else
@set key, 0.0 # empty
@set 'has_error', false
return_value = value
return_value ||= @get key
@set 'has_error', true if @validatePresence and !return_value
return_value = return_value.toFixed(2) if typeof return_value is 'number'
return_value
#didInsertElement: ->
#@addObserver "model.#{@attribute}", (attribute)=>
#if value = @get("model.#{@attribute}")
#@set 'value', value.toFixed(2) if parseFloat(@get('value')) isnt value
#else
#@set 'value', 0
## @set('value', @get("model.#{@attribute}").toFixed)
## # dynamically observe the model's attribute
## # if this changes outside the component's context, it is not
## # observed by the computed property. model.@attribute is not (yet) working :)
## current_value = @get 'value'
## if value = @get("model.#{@attribute}")
## string_value = value.toPrecision()
## @set('value', string_value) if parseFloat(current_value) isnt @get("model.#{@attribute}")
#@addObserver "model.errors.#{@attribute}.length", (attribute)=>
#@set 'has_error', !!@get("model.errors.#{@attribute}.length")
#@model.validate().then =>
#@set 'has_error', !!@get("model.errors.#{@attribute}.length")
@@ -0,0 +1,19 @@
App.MenuProductComponent = Ember.Component.extend
editMode: false
actions:
makeEditable: -> @set('editMode', true)
save: ->
@get('product').save() if @get('product.isDirty')
@set 'editMode', false
destroyProduct: (product)->
if product.get('isNew')
product.deleteRecord()
else
@get('targetObject').modal 'confirm',
model: product
title_path: 'product.destroy_confirmation'
ok: -> product.destroyRecord()
didInsertElement: ->
@set 'editMode', true if @get('product.isNew')
#templateName: 'menu/product'
@@ -0,0 +1,8 @@
App.SectionsHeaderComponent = Ember.Component.extend
sections: (-> @get('targetObject.store').all('section') ).property()
actions:
setSection: (section)->
@$('dd').removeClass('active')
@$("[data-section=#{if section then section.id else 'all'}]").addClass('active')
@set('section', section)
didInsertElement: -> @send("setSection", @get('section'))
@@ -16,3 +16,5 @@ App.MenuController = Ember.ObjectController.extend
@modal 'product_category_new',
model: @store.createRecord('product_category', position: @get('product_categories.length'))
close: -> @get('model').deleteRecord()
addProduct: (product_category)->
product_category.get('products').addObject @store.createRecord 'product', position: product_category.get('products.length')
@@ -13,17 +13,18 @@ App.modals.ProductCategoryMoveController = App.modals.BaseController.extend
if below_product_category and product_category.id is below_product_category.id
@set 'model.position', position += 1
@get('model').save()
position += 1
@send 'close'
# moveBelow: (->
# debugger
# ).observes('move_below_selection')
# change: ->
# debugger
product_categories: (->
@store.all('product_category').filter( (pc) => pc.id isnt @get('model.id')).sortBy('position')
).property('model.id')
# setProductCategories: (-> @set 'product_categories', @store.all('product_category')).on('init')
sortableUpdate: (ids)->
products = @get('model.products')
ids.forEach (id, i)->
if product = products.findProperty('id', id)
#TODO: raise in frontend if product.get('isDirty'). Cannot modify position of product containing non persisted change
product.set('position', i)
product.save() if product.get('isDirty')
@@ -6,15 +6,3 @@ App.OrdersDisplayController = Ember.ObjectController.extend
orders = @get('model').filterBy('needs_supplier_attention')
orders = orders.filterBy('section.id', id) if id = @get('active_section.id')
orders.sortBy('created_at') # Not reversed, oldest on top, start with oldest order first :-) Customer happyness
activeSectionDidChange: Ember.observer 'active_section.id', ->
container = Ember.$('.orders-display-nav')
container.find('dd').removeClass('active')
if id = @get('active_section.id')
container.find("[data-section='#{id}']").addClass 'active'
else
container.find('[data-section="all"]').addClass 'active'
actions:
clearActiveSection: ->
@set 'active_section', null
setActiveSection: (section)->
@set 'active_section', section
@@ -2,5 +2,12 @@ attr = DS.attr
App.Product = DS.Model.extend
name: attr 'string'
price: attr 'number'
code: attr 'string'
visible: attr('boolean', defaultValue: true)
position: attr('number', defaultValue: 0)
product_category: DS.belongsTo('product_category')
product_orders: DS.hasMany('product_order')
code_or_empty: (->
@get('code') or new Ember.Handlebars.SafeString('&nbsp;')
).property('code')
@@ -15,6 +15,8 @@ App.ProductCategory = DS.Model.extend
end_on: attr('number')
position: attr('number')
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}")
@@ -0,0 +1,3 @@
.large-2.columns: label.prefix= currencySymbol
.large-4.columns.end= input valueBinding="inputValue" placeholder=placeholder
@@ -0,0 +1,13 @@
.row.menu-product-container
if editMode
.small-3.columns= input value=product.name
.small-3.columns= edit-currency value=product.price validatePresence=true
.small-3.columns= input value=product.code
.small-3.columns
a.destroy-product-action{action "destroyProduct" product}: span
a.save-product-action{action "save"}: span
else
.small-3.columns: span= product.name
.small-3.columns= currency product.price
.small-3.columns: span= product.code_or_empty
.small-3.columns: span.fa.fa-edit{action "makeEditable"}
@@ -0,0 +1,7 @@
dl.sections-header-container.sub-nav
dd data-section="all": a.section-header-title{action "setSection"} href="" = t 'sections_header.all_sections'
each s in sections
dd data-section=s.id
a.section-header-title{action "setSection" s} href="#" = s.title
= link-to "section" s.id class="section-jumper"
span.fa.fa-chevron-circle-right
@@ -1,2 +1,2 @@
Ember.Checkbox id=view.switchId checkedBinding="view.value"
= input type="checkbox" id=view.switchId checkedBinding="view.value"
label for=view.switchId
@@ -1,7 +1,9 @@
= sections-header sectionBinding="controller.controllers.application.active_section"
.page-header
div.dashboard-section-selection
App.HomeSectionSelectorView selectionBinding="controller.controllers.application.active_section" content=controller.sections prompt=controllers.application.supplier.name
App.HomeSectionJumperView
/App.HomeSectionSelectorView selectionBinding="controller.controllers.application.active_section" content=controller.sections prompt=controllers.application.supplier.name
/= home-section-selector sectionBinding="controller.controllers.application.active_section"
/= view "home-section-jumper"
if active_lists.length
h3.dashboard-lists-header{action "toggleDashboardLists"}
if show_lists
@@ -6,10 +6,9 @@ each product_category in sorted_product_categories
span.title= product_category.name
span.availability= product_category.availability_text
a.edit-product-category-button{action "editProductCategory" product_category} href="#"
each product in product_category.products
.row
.small-4.columns= product.name
.small-8.columns= currency product.price
a.add-product-product-category-button{action "addProduct" product_category} href="#": span
each product in product_category.sorted_products
= menu-product product=product
.row
.small-12.columns
a.button{action "newProductCategory"} href="#" = t 'product_category.new_button'
@@ -6,32 +6,32 @@
unless model.supplier.week_starts_on_monday
.form-row
.form-label.half= t 'date.day_name.sunday'
.form-field.half: App.BooleanSwitchView value=model.active_on_sunday
.form-field.half= view "boolean-switch" value=model.active_on_sunday
.form-row
.form-label.half= t 'date.day_name.monday'
.form-field.half: App.BooleanSwitchView value=model.active_on_monday
.form-field.half= view "boolean-switch" value=model.active_on_monday
.form-row
.form-label.half= t 'date.day_name.tuesday'
.form-field.half: App.BooleanSwitchView value=model.active_on_tuesday
.form-field.half= view "boolean-switch" value=model.active_on_tuesday
.form-row
.form-label.half= t 'date.day_name.wednesday'
.form-field.half: App.BooleanSwitchView value=model.active_on_wednesday
.form-field.half= view "boolean-switch" value=model.active_on_wednesday
.form-row
.form-label.half= t 'date.day_name.thursday'
.form-field.half: App.BooleanSwitchView value=model.active_on_thursday
.form-field.half= view "boolean-switch" value=model.active_on_thursday
.form-row
.form-label.half= t 'date.day_name.friday'
.form-field.half: App.BooleanSwitchView value=model.active_on_friday
.form-field.half= view "boolean-switch" value=model.active_on_friday
.form-row
.form-label.half= t 'date.day_name.saturday'
.form-field.half: App.BooleanSwitchView value=model.active_on_saturday
.form-field.half= view "boolean-switch" value=model.active_on_saturday
if model.supplier.week_starts_on_monday
.form-row
.form-label.half= t 'date.day_name.sunday'
.form-field.half: App.BooleanSwitchView valueBinding=model.active_on_sunday
.form-field.half= view "boolean-switch" valueBinding=model.active_on_sunday
.small-6.columns
.row
.small-12.columns.text-center: App.BooleanButtonView value=model.full_day reverse=true text_path="product_category.modal.active_between.top"
.small-12.columns.text-center= view 'boolean-button' value=model.full_day reverse=true text_path="product_category.modal.active_between.top"
unless model.full_day
.row
.small-12.columns= view "select-minute-of-day" value=model.start_from
@@ -10,4 +10,12 @@ each product_category in product_categories
span.title= product_category.name
span.availability= product_category.availability_text
hr
h4=t 'product_category.modal.move.products.title'
hr
ul.sortable
each product in model.sorted_products
li.sortable-item-container data-sortable-id=product.id
span.handle
span= product.name
hr
button.modal-close{action "close"}=t 'section.add_tables.modal.close_button'
@@ -1,7 +1,5 @@
dl.orders-display-nav.sub-nav
dd.active data-section="all": a.active{action "clearActiveSection"} href="" All
each section in sections
dd data-section=section.id: a{action "setActiveSection" section} href="#" = section.title
= sections-header sectionBinding="section"
h2= section.title
table.table
thead
tr
@@ -1,9 +0,0 @@
App.HomeSectionJumperView = Ember.View.extend
tagName: 'a'
classNames: ['main-board-section-jumper']
href: '#'
isVisible: (-> !!@get('controller.active_section.id') ).property('controller.active_section.id')
template: Ember.Handlebars.compile('<span class="fa fa-lg fa-chevron-circle-right"></span>')
click: (e)->
e.preventDefault()
@get('controller').transitionToRoute 'section', @get('controller.active_section.id')
@@ -1,9 +0,0 @@
HomeSectionOption = Ember.SelectOption.extend
select_label: (-> "- #{@get('content.title')}").property('content.title')
valueBinding: 'content.id'
App.HomeSectionSelectorView = Ember.Select.extend
classNames: 'section_selector'
optionView: HomeSectionOption
#valueBinding: 'controller.active_section_id'
optionValuePath: 'content.id'
optionLabelPath: 'select_label'
@@ -1,3 +1,13 @@
App.ModalView = Ember.View.extend
layoutName: 'modals/layout'
didInsertElement: ->
sortable = $('.sortable')
controller = @get('controller')
if sortable.length
sortable.sortable
update: (e, ui)->
ids = sortable.find('.sortable-item-container').map((i, el) -> $(el).data('sortableId')).toArray()
if callback = controller.sortableUpdate
callback.call(controller, ids)
@@ -2,6 +2,7 @@
//= require jquery
//= require jquery_ujs
//= require jquery-ui/sortable
//= require jquery.ui.touch-punch
// require foundation FOUNDATION 5 JAVASCRIPT IMPLEMENTATIONS AND EMBER ARE NOT COMPATIBLE, FOUNDATION IS TOO SIMPLISTIC AT THE MOMENT AND DESTROYS DOM EVENTS
//= require js-routes
//= require moment
@@ -23,8 +23,7 @@
# return translation in the form
# <span data-t="models.table">Tafel</span>
@tspan = (path, vars={})->
"<span data-t='#{path}'>#{t(path)}</span>"
@tspan = (path, vars={}) -> "<span data-t='#{path}' data-t-attributes='#{JSON.stringify(vars)}'>#{t(path, vars)}</span>"
@t = (path, vars={}) ->