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

app/controllers/suppliers/sections_controller.rb

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

app/serializers/supplier_section_serializer.rb

@@ -0,0 +1,4 @@
+class SupplierSectionSerializer < Qwaiter::Serializer
+  root 'section'
+  attributes :title, :path, :width, :height
+end

app/views/suppliers/tables/qr_codes.html.slim

@@ -1,3 +1,3 @@
 ul#qr-list
   - for table in @tables
-    li= image_tag(url_for(table_qr_image_path(table_id: table.id, format: :png)))
+    li= image_tag(url_for(table_qr_image_path(table_id: table.id, format: :svg)))

config/locales/supplier.en.yml

@@ -58,6 +58,11 @@ en:
           number_end: Till number
           close_button: Close
           add_button: Add
+      add_section:
+        modal:
+          title: 'New ${models.section}'
+          close_button: Close
+          add_button: Create
       arrange_tables:
         button_label: Arrange tables
         by_row_no_row_count: 'Please fill in a positive number representing the number of ${models.plural.table|downcase} per row'

config/locales/supplier.nl.yml

@@ -58,6 +58,11 @@ nl:
           number_end: Tot nummer
           close_button: Sluiten
           add_button: Voeg toe
+      add_section:
+        modal:
+          title: '${models.section} toevoegen'
+          close_button: Sluiten
+          add_button: Aanmaken
       arrange_tables:
         button_label: Positioneer tafels
         by_row_no_row_count: 'Geef een positief getal voor het aantal ${models.plural.table|downcase} per rij'