Improvements to new menu product category editing and adding new

2014-11-25 13:31:40 +01:00
parent 1707f4d19f
commit a64d3de319
24 changed files with 162 additions and 86 deletions
@@ -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()
@@ -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
@@ -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'
@@ -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
@@ -0,0 +1,2 @@
+App.modals.ProductCategoryNewController = App.modals.BaseController.extend
+  title_path: 'product_category.modal.new.title'
@@ -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
@@ -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'
@@ -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'
@@ -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'
@@ -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'
@@ -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'
@@ -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'
@@ -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
@@ -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'
@@ -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'
@@ -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'
@@ -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
@@ -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')