Improvements to new menu product category editing and adding new

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

@@ -5,9 +5,14 @@ App.MenuController = Ember.ObjectController.extend
   actions:
     editProductCategory: (product_category)->
       @modal 'product_category_edit',
-        model: product_category,
+        model: product_category
         close: -> product_category.rollback()
+        destroy_text_path: 'product_category.modal.destroy_confirm_text'
 
     moveProductCategory: (product_category)->
       @modal 'product_category_move',
         model: product_category
+    newProductCategory: ->
+      @modal 'product_category_new',
+        model: @store.createRecord('product_category', position: @get('product_categories.length'))
+        close: -> @get('model').deleteRecord()

app/assets/javascripts/supplier/app/controllers/modals/base_controller.js.em

@@ -4,16 +4,19 @@
     # return title if directly set by options
     return @get('modal_options.title') if @get('modal_options.title')
     # return translated title_path if directly set by controller
-    return t(@title_path) if @title_path
+    translation_params = {}
+    if model = @get('model')
+      translation_params = model.serialize() if model.serialize
+    return new Ember.Handlebars.SafeString(tspan(@title_path, translation_params)) if @title_path
     # return translated title_path if directly set by options
-    return t(@get('modal_options.title_path')) if @get('modal_options.title_path')
+    return new Ember.Handlebars.SafeString(tspan(@get('modal_options.title_path'), translation_params)) if @get('modal_options.title_path')
     # infer title path based on controller name App.modals.AddSectionController => add_section
     underscored = `this.constructor.toString().substr(11).replace(/Controller$/, '').underscore()`
-    params = {}
-    if model = @get('model')
-      params = model.serialize() if model.serialize
     # find translated title or humanize the controller name
-    ttry("modal.#{underscored}.title", params) or underscored.capitalize().replace(/_/, ' ')
+    if convention_translation = ttry("modal.#{underscored}.title", translation_params)
+      new Ember.Handlebars.SafeString(tspan(@get("modal.#{underscored}.title"), translation_params))
+    else
+      underscored.capitalize().replace(/_/, ' ')
   actions:
     close: ->
       if close = @get('modal_options.close')
@@ -33,3 +36,10 @@
     save: ->
       @get('model').save()
       @send 'closeModal' unless @preventClose
+    destroy: ->
+      @modal 'confirm',
+        title_path: @get('modal_options.destroy_text_path') || 'general.destroy.text'
+        model: @get('model')
+        ok: ->
+          @get('model').destroyRecord()
+          @send 'closeModal' unless @preventClose

app/assets/javascripts/supplier/app/controllers/modals/product_category_edit_controller.js.coffee

@@ -1,2 +1,2 @@
 App.modals.ProductCategoryEditController = App.modals.BaseController.extend
-  title_path: 'product_category.edit.modal.title'
+  title_path: 'product_category.modal.edit.title'

app/assets/javascripts/supplier/app/controllers/modals/product_category_move_controller.js.coffee

@@ -1,5 +1,5 @@
 App.modals.ProductCategoryMoveController = App.modals.BaseController.extend
-  title_path: 'product_category.move.modal.title'
+  title_path: 'product_category.modal.move.title'
   actions:
     moveBelow: (below_product_category)->
       position = 0

app/assets/javascripts/supplier/app/controllers/modals/product_category_new_controller.js.coffee

@@ -0,0 +1,2 @@
+App.modals.ProductCategoryNewController = App.modals.BaseController.extend
+  title_path: 'product_category.modal.new.title'

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

@@ -20,7 +20,7 @@ App.ProductCategory = DS.Model.extend
     active_days = days.filter (day)=>@get("active_on_#{day}")
     result = ""
     if active_days.length < 7
-      result += "<span class=\"day-names\">#{active_days.map((day) -> t("date.day_name.#{day}")).join(", ")}</span> "
+      result += "<span class=\"day-names\">#{active_days.map((day) -> tspan("date.day_name.#{day}")).join(", ")}</span> "
     unless @get('full_day')
       result += "<span class=\"time-range\">#{day_minutes_to_time @get('start_from')} - #{day_minutes_to_time @get('end_on')}</span>"
     new Ember.Handlebars.SafeString result

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

@@ -1,6 +1,6 @@
 h2 Menu
 each product_category in sorted_product_categories
-  .row: .small-12.columns
+  .row.product_category-container: .small-12.columns
     .product_category-header
       a.move{action "moveProductCategory" product_category} href="#"
       span.title= product_category.name
@@ -10,3 +10,6 @@ each product_category in sorted_product_categories
       .row
         .small-4.columns= product.name
         .small-8.columns= currency product.price
+.row
+  .small-12.columns
+    a.button{action "newProductCategory"} href="#" = t 'product_category.new_button'

app/assets/javascripts/supplier/app/templates/modals/add_section.emblem

@@ -14,5 +14,5 @@
   .form-field
     App.NumberField valueBinding="section_height"
 hr
-button.confirm-cancel{action "close"}=t 'section.add_section.modal.close_button'
-button.confirm-ok.right{action "addSection"}=t 'section.add_section.modal.add_button'
+button.modal-close{action "close"}=t 'section.add_section.modal.close_button'
+button.modal-confirm.right{action "addSection"}=t 'section.add_section.modal.add_button'

app/assets/javascripts/supplier/app/templates/modals/close_list.emblem

@@ -1,4 +1,4 @@
 p=t 'list.close.modal.message'
 hr
-button.confirm-cancel{action "close"}=t 'list.close.modal.cancel'
-button.confirm-ok.right{action "confirm"}=t 'list.close.modal.close_list'
+button.modal-close{action "close"}=t 'list.close.modal.cancel'
+button.modal-confirm.right{action "confirm"}=t 'list.close.modal.close_list'

app/assets/javascripts/supplier/app/templates/modals/confirm.emblem

@@ -1,4 +1,4 @@
 p=body
 hr
-button.confirm-cancel{action "close"}= t 'confirm.cancel'
-button.confirm-ok.right{action "confirm"}= t 'confirm.confirm'
+button.modal-close{action "close"}= t 'confirm.cancel'
+button.modal-confirm.right{action "confirm"}= t 'confirm.confirm'

app/assets/javascripts/supplier/app/templates/modals/edit_table.emblem

@@ -7,5 +7,5 @@ p=t 'table.edit.modal.body_header'
   .form-field
     Ember.Select content=all_sections valueBinding="model.section" optionLabelPath="content.title"
 hr
-button.confirm-cancel{action "close"}=t 'section.add_tables.modal.close_button'
-button.confirm-ok.right{action "ok"}=t 'section.add_tables.modal.add_button'
+button.modal-close{action "close"}=t 'section.add_tables.modal.close_button'
+button.modal-confirm.right{action "ok"}=t 'section.add_tables.modal.add_button'

app/assets/javascripts/supplier/app/templates/modals/product_category_edit.emblem

@@ -1,45 +1,6 @@
-p=t 'product_category.edit.modal.body_header'
-.form-row
-  .form-label.half=t 'attributes.product_category.name'
-  .form-field.half= input valueBinding="model.name"
-.row
-  .small-6.columns
-    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-row
-      .form-label.half= t 'date.day_name.monday'
-      .form-field.half: App.BooleanSwitchView 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-row
-      .form-label.half= t 'date.day_name.wednesday'
-      .form-field.half: App.BooleanSwitchView 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-row
-      .form-label.half= t 'date.day_name.friday'
-      .form-field.half: App.BooleanSwitchView 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
-    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
-  .small-6.columns
-    .row
-      .small-12.columns.text-center: App.BooleanButtonView value=model.full_day reverse=true text_path="product_category.edit.modal.active_between.top"
-    unless model.full_day
-      .row
-        .small-12.columns= view "select-minute-of-day" value=model.start_from
-      .row
-        .small-12.columns.text-center= t 'product_category.edit.modal.active_between.middle'
-      .row
-        .small-12.columns= view "select-minute-of-day" value=model.end_on
+p=t 'product_category.modal.edit.body_header'
+= partial "modals/product_category_form"
 hr
-button.confirm-cancel{action "close"}=t 'section.add_tables.modal.close_button'
-button.confirm-ok.right{action "save"}=t 'section.add_tables.modal.add_button'
+button.modal-close{action "close"}=t 'product_category.modal.edit.close_button'
+button.modal-save.right{action "save"}=t 'product_category.modal.edit.save_button'
+button.modal-destroy.right{action "destroy"}=t 'product_category.modal.edit.destroy_button'

app/assets/javascripts/supplier/app/templates/modals/product_category_form.emblem

@@ -0,0 +1,41 @@
+.form-row
+  .form-label.half=t 'attributes.product_category.name'
+  .form-field.half= input valueBinding="model.name"
+.row
+  .small-6.columns
+    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-row
+      .form-label.half= t 'date.day_name.monday'
+      .form-field.half: App.BooleanSwitchView 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-row
+      .form-label.half= t 'date.day_name.wednesday'
+      .form-field.half: App.BooleanSwitchView 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-row
+      .form-label.half= t 'date.day_name.friday'
+      .form-field.half: App.BooleanSwitchView 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
+    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
+  .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"
+    unless model.full_day
+      .row
+        .small-12.columns= view "select-minute-of-day" value=model.start_from
+      .row
+        .small-12.columns.text-center= t 'product_category.modal.active_between.middle'
+      .row
+        .small-12.columns= view "select-minute-of-day" value=model.end_on

app/assets/javascripts/supplier/app/templates/modals/product_category_move.emblem

@@ -1,8 +1,8 @@
-p=t 'product_category.move.modal.body_header'
+p=t 'product_category.modal.move.body_header'
 .row
   .small-11.small-offset-1.columns
-    a{action "moveBelow"} href="#" = t 'product_category.move.modal.move_to_top'
-h4=t 'product_category.move.modal.move_below_label'
+    a{action "moveBelow"} href="#" = t 'product_category.modal.move.move_to_top'
+h4=t 'product_category.modal.move.move_below_label'
 each product_category in product_categories
   .row.product_category-move-row
     .small-11.small-offset-1.columns
@@ -10,4 +10,4 @@ each product_category in product_categories
         span.title= product_category.name
         span.availability= product_category.availability_text
 hr
-button.confirm-cancel{action "close"}=t 'section.add_tables.modal.close_button'
+button.modal-close{action "close"}=t 'section.add_tables.modal.close_button'

app/assets/javascripts/supplier/app/templates/modals/product_category_new.emblem

@@ -0,0 +1,5 @@
+p=t 'product_category.modal.new.body_header'
+= partial "modals/product_category_form"
+hr
+button.modal-close{action "close"}=t 'product_category.modal.new.close_button'
+button.modal-save.right{action "save"}=t 'product_category.modal.new.save_button'

app/assets/javascripts/supplier/app/templates/modals/section_add_tables.emblem

@@ -14,5 +14,5 @@ form.form-horizontal
     .form-field
       App.NumberField valueBinding="number_end"
 hr
-button.confirm-cancel{action "close"}=t 'section.add_tables.modal.close_button'
-button.confirm-ok.right{action "addTables"}=t 'section.add_tables.modal.add_button'
+button.modal-close{action "close"}=t 'section.add_tables.modal.close_button'
+button.modal-confirm.right{action "addTables"}=t 'section.add_tables.modal.add_button'

app/assets/javascripts/supplier/app/templates/modals/section_arrange_tables.emblem

@@ -25,8 +25,8 @@ p=t 'section.arrange_tables.modal.body_header'
     App.NumberField valueBinding="column_count"
     ==t 'section.arrange_tables.modal.by_column.after_field'
 hr
-button.confirm-cancel{action "close"}=t 'section.arrange_tables.modal.close_button'
-button.confirm-ok.right{action "arrangeTables"}=t 'section.arrange_tables.modal.arrange_button'
+button.modal-close{action "close"}=t 'section.arrange_tables.modal.close_button'
+button.modal-confirm.right{action "arrangeTables"}=t 'section.arrange_tables.modal.arrange_button'
 
 
   /form.form-horizontal

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

@@ -7,11 +7,10 @@ App.BooleanButtonView = Ember.View.extend
   classNameBindings: ['rounded:round', 'active:active:disabled']
 
   text: Ember.computed 'text_path', ->
-    t @text_path
+    new Ember.Handlebars.SafeString(tspan(@text_path))
 
   active: Ember.computed 'value', ->
     if @reverse then !@get('value') else !!@get('value')
 
   click: ->
     @set 'value', !@get('value')
-  # setUniqueId: (->@set 'switchId', "switch-#{Math.round(Math.random()*1000)}").on('init')

app/assets/javascripts/translations.js.coffee.erb

@@ -17,10 +17,16 @@
 @day_minutes_to_time = (minutes)->
   return "" unless minutes
   [("0" + Math.floor(minutes/60)).substr(-2,2), ("0" + Math.floor(minutes%60)).substr(-2,2)].join(":")
-  
+
 @ttry = (path, vars={})->
   @t(path, $.extend(vars, emptyWhenNotFound: true))
 
+# return translation in the form
+#   <span data-t="models.table">Tafel</span>
+@tspan = (path, vars={})->
+  "<span data-t='#{path}'>#{t(path)}</span>"
+
+
 @t = (path, vars={}) ->
   #result = undefined
   #m = undefined

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

@@ -3,6 +3,15 @@
   width: 600px
   background-color: #fff
   padding: 1em
+  max-height: calc(100% - 20px)
+  overflow-y: scroll
+  .modal-close
+    +button($bg: #ddd)
+  .modal-confirm
+  .modal-save
+  .modal-destroy
+    +button($bg: $alert-color)
+    margin-right: 8px
 .modal-alert
   color: $alert-color
 

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

@@ -1,3 +1,5 @@
+.row.product_category-container
+  margin-bottom: 15px
 .product_category-header
   border-top: 1px solid #ccc
   border-bottom: 1px solid #ccc

app/controllers/suppliers/product_categories_controller.rb

@@ -76,7 +76,7 @@ module Suppliers
       respond_to do |format|
         if @product_category.save
           format.html { redirect_to [:suppliers, :product_categories], notice: t('action.create.successfull', model: ProductCategory.model_name.human) }
-          format.json { render json: @product_category, status: :created, location: @product_category }
+          format.json { render json: @product_category, status: :created }
         else
           format.html { render action: "new" }
           format.json { render json: @product_category.errors, status: :unprocessable_entity }

config/locales/supplier.en.yml

@@ -1,5 +1,11 @@
 en:
   supplier:
+    confirm:
+      cancel: No
+      confirm: Yes
+    general:
+      destroy:
+        text: 'Weet je dit zeker?'
     sign_up:
       header: |
         Nice that you want to start using Mozo.
@@ -130,15 +136,24 @@ en:
           thursday: T
           friday: F
           saturday: S
-      edit:
-        modal:
+      new_button: Add ${models.product_category}
+      modal:
+        active_between:
+          top: Active between
+          middle: and
+        destroy_confirm_text: 'Are you sure you want to delete ${models.product_category} %{name}?'
+        new:
+          title: New ${models.product_category}
+          body_header: ''
+          close_button: Cancel
+          save_button: Save
+        edit:
           title: Edit ${models.product_category}
           body_header: ''
-          active_between:
-            top: Active between
-            middle: and
-      move:
-        modal:
+          close_button: Cancel
+          destroy_button: Delete
+          save_button: Save
+        move:
           title: Move ${models.product_category|downcase}
           body_header: ''
           move_to_top: Move to top

config/locales/supplier.nl.yml

@@ -1,5 +1,11 @@
 nl:
   supplier:
+    confirm:
+      cancel: Nee
+      confirm: Ja
+    general:
+      destroy:
+        text: 'Are you sure?'
     sign_up:
       header: |
         Leuk dat je je wilt aanmelden voor Mozo.
@@ -128,15 +134,27 @@ nl:
           thursday: D
           friday: V
           saturday: Z
-      edit:
-        modal:
+      new_button: ${models.product_category} toevoegen
+      modal:
+        active_between:
+          top: Actief tussen
+          middle: en
+        destroy_confirm_text: 'Weet je zeker dat je ${models.product_category} %{name} wil verwijderen?'
+        new:
+          title: ${models.product_category} toevoegen
+          body_header: ''
+          close_button: Sluiten
+          save_button: Opslaan
+        edit:
           title: Bewerk ${models.product_category}
           body_header: ''
           active_between:
             top: Actief tussen
             middle: en
-      move:
-        modal:
+          close_button: Sluiten
+          destroy_button: Verwijder
+          save_button: Opslaan
+        move:
           title: Verplaats ${models.product_category|downcase}
           body_header: ''
           move_to_top: Plaats bovenaan