Better supplier ember section workflow

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

@@ -0,0 +1,39 @@
+Qsupplier.App.ModalAddSectionController = Ember.ObjectController.extend
+  alert_message: null
+  section_name: ''
+  section_width: 15
+  section_height: 8
+  actions:
+    close: ->
+      @set 'alert_message', null
+      @get('model.cancel').call(@) if @get('model.cancel')
+      @send 'closeModal'
+    addSection: ->
+      @set 'alert_message', null
+      title = @get('section_title')
+      width = @get('section_width')
+      height = @get('section_height')
+      unless title
+        @set 'alert_message', error_message
+          attribute: t('attributes.section.title')
+          message: 'blank'
+        return
+      unless parseInt(width) > 0
+        @set 'alert_message', error_message
+          attribute: t('attributes.section.width')
+          message: 'greater_than'
+          count: 0
+        return
+      unless parseInt(height) > 0
+        @set 'alert_message', error_message
+          attribute: t('attributes.section.height')
+          message: 'greater_than'
+          count: 0
+        return
+      section = @store.createRecord 'section',
+        title: title
+        width: width
+        height: height
+      section.save().then (s)=>
+        @send 'closeModal'
+        @transitionToRoute 'section', s.id

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

@@ -8,11 +8,19 @@ Qsupplier.App.SectionController = Ember.ObjectController.extend
     finishEditable: ->
       @set('editmode', false)
       @get('model').save()
+    addSection: ->
+      @send 'openModal', 'modal_add_section', @get('model')
     addTables: ->
       #$('#add-tables-modal').modal()
       @send 'openModal', 'modal_section_add_tables', @get('model')
     arrangeTables: ->
       @send 'openModal', 'modal_section_arrange_tables', @get('model')
+    destroySection: ->
+      @send 'openModal', 'modal_confirm',
+        title: t('helpers.links.are_you_sure')
+        ok: =>
+          @get('model').destroyRecord()
+          @transitionToRoute 'sections'
   textures: ['wood1', 'wood2']
 
   sections: (-> @get('controllers.sections.model')).property('controllers.sections.model')

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

@@ -12,3 +12,4 @@ Qsupplier.App.SectionsIndexController = Ember.ArrayController.extend
     showDashboardOrders: (section)->
       @transitionToRoute('index').then =>
         @get('controllers.index').set 'active_section', section
+    addSection: -> @send 'openModal', 'modal_add_section', @get('model')

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

@@ -0,0 +1,24 @@
+modal-dialog action="close"
+  h3.flush--top=t 'section.add_section.modal.title'
+  p==body
+  .modal-body
+    .modal-alert== alert_message
+    .form-row
+      .form-label
+        label=t 'attributes.section.title'
+      .form-field
+        Ember.TextField valueBinding="section_title"
+    .form-row
+      .form-label
+        label=t 'attributes.section.width'
+      .form-field
+        Qsupplier.App.NumberField valueBinding="section_width"
+    .form-row
+      .form-label
+        label=t 'attributes.section.height'
+      .form-field
+        Qsupplier.App.NumberField valueBinding="section_height"
+  .modal-footer
+    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'

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

@@ -2,6 +2,7 @@
   link-to 'sections' class="goto-sections-index-tab-header": span
   each section in sections
     view Qsupplier.App.SectionTabHeaderView context=section
+  a.add-section{action "addSection"}: span
 .section-manage-tables.pull-right
   if editmode
     /.btn-group
@@ -31,7 +32,8 @@
             span.table-qr-codes
             =t 'tables.qr_codes.link'
         li
-          a.section-destroy href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}"
+          /a.section-destroy href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}"
+          a.section-destroy{action destroySection}
             span.section-remove-icon
             =t 'helpers.links.destroy'
     Ember.TextField valueBinding="title" class="section-edit-title-field"

app/assets/javascripts/supplier/app/templates/sections/index.emblem

@@ -38,4 +38,4 @@ else
   .row
     .panel=t 'section.none_found'
 .form-actions
-  a.form-action-new{path new_suppliers_section}=t 'helpers.links.new'
+  a.form-action-new{action "addSection"}=t 'helpers.links.new'

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

@@ -4,12 +4,13 @@
     attributes: <%= I18n.t('activemodel.attributes', locale: :en).to_json %>
     helpers: <%= I18n.t('helpers', locale: :en).to_json %>
     pagination: <%= I18n.t('views.pagination', locale: :en).to_json %>
+    errors: <%= I18n.t('errors', locale: :en).to_json %>
   nl:
     models: <%= I18n.t('activemodel.models', locale: :nl).to_json %>
     attributes: <%= I18n.t('activemodel.attributes', locale: :nl).to_json %>
     helpers: <%= I18n.t('helpers', locale: :nl).to_json %>
     pagination: <%= I18n.t('views.pagination', locale: :nl).to_json %>
-
+    errors: <%= I18n.t('errors', locale: :nl).to_json %>
 @t = (path, vars={}) ->
   #result = undefined
   #m = undefined
@@ -95,6 +96,17 @@
     datepicker_object.pickadate(window.pickadate_options)
     datepicker_object.change()
 
+# use like
+#   error_message
+#     attribute: t('attributes.section.title')
+#     message: 'blank'
+@error_message = (options = {})->
+  locale = options.locale || Qstorage.getItem('locale') || 'en'
+  #message = $translations[locale].errors.messages[options.message]
+  message = t "errors.messages.#{options.message}", options
+  t 'errors.format',
+    attribute: options.attribute
+    message: message
 
 @setupTranslations = (options = {})->
   locale = options.locale || Qstorage.getItem('locale') || 'en'

app/assets/stylesheets/supplier/foundation1/_qmodal.css.sass

@@ -3,6 +3,8 @@
   width: 500px
   background-color: #fff
   padding: 1em
+.modal-alert
+  color: $alert-color
 
 .overlay
   height: 100%

app/assets/stylesheets/supplier/foundation1/_section_tab_headers.css.sass

@@ -21,11 +21,18 @@
       background-image: image-url('supplier/drop-target.svg')
     &.table-hover
       background-image: image-url('supplier/drop-target-active.svg')
-
   &:after
     content: ''
     display: block
     clear: left
+  .add-section
+    display: inline-block
+    margin-top: 8px
+    span
+      @extend .fa
+      @extend .fa-lg
+      @extend .fa-plus
+
   .goto-sections-index-tab-header
     float: left
     span