Supplier section management improvements

app/assets/javascripts/supplier/app/components/dropdown_link.js.coffee

@@ -3,10 +3,4 @@ Qsupplier.App.DropdownLink = Ember.Component.extend
   active: false
   classNames: ['dropdown-container']
   classNameBindings: ['active']
-  didInsertElement: ->
+  click: -> @set 'active', !@get('active')
-    @$('.dropdown-trigger').click (e)=>
-      e.preventDefault()
-      @set 'active', !@get('active')
-
-
-

app/assets/javascripts/supplier/app/components/modal_dialog_component.js.coffee

@@ -0,0 +1,4 @@
+Qsupplier.App.ModalDialogComponent = Ember.Component.extend
+  actions:
+    close: ->
+      @sendAction()

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

@@ -0,0 +1,8 @@
+Qsupplier.App.ModalConfirmController = Ember.ObjectController.extend
+  actions:
+    close: ->
+      @get('model.cancel').call(@) if @get('model.cancel')
+      @send 'closeModal'
+    confirm: ->
+      @get('model.ok').call(@)
+      @send 'closeModal'

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

@@ -0,0 +1,4 @@
+Qsupplier.App.ModalController = Ember.ObjectController.extend
+  actions:
+    close: ->
+      @send 'closeModal'

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

@@ -0,0 +1,5 @@
+Qsupplier.App.ModalInfoController = Ember.ObjectController.extend
+  actions:
+    close: ->
+      @get('model.cancel').call(@) if @get('model.cancel')
+      @send 'closeModal'

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

@@ -0,0 +1,25 @@
+Qsupplier.App.ModalSectionAddTablesController = Ember.ObjectController.extend
+  number_start: 100
+  number_end: 110
+  actions:
+    close: ->
+      @get('model.cancel').call(@) if @get('model.cancel')
+      @send 'closeModal'
+    confirm: ->
+      @get('model.ok').call(@)
+      @send 'closeModal'
+    addTables: ->
+      s = parseInt(@get('number_start'))
+      e = parseInt(@get('number_end'))
+      if e < s
+        @set 'number_start', e
+        @set 'number_end', s
+        s = @get('number_start')
+        e = @get('number_end')
+
+      Ember.$.post Routes.add_tables_suppliers_section_path(@get('model.id')),
+        number_start: s
+        number_end: e
+      , (result,state,xhr)=>
+        @store.pushPayload 'table', result
+        @send 'close'

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

@@ -9,8 +9,8 @@ Qsupplier.App.SectionController = Ember.ObjectController.extend
       @set('editmode', false)
       @get('model').save()
     addTables: ->
-      debugger
+      #$('#add-tables-modal').modal()
-      $('#add-tables-modal').modal()
+      @send 'openModal', 'modal_section_add_tables', @get('model')
     arrangeTables: ->
       $('#arrange-tables-modal').modal()
   textures: ['wood1', 'wood2']

app/assets/javascripts/supplier/app/routes/application_route.js.coffee

@@ -6,3 +6,19 @@ Qsupplier.App.ApplicationRoute = Ember.Route.extend
   setupController: (controller)->
     @store.find 'list', state: 'active'
     controller.set 'product_categories', @store.all('product_category')
+  actions:
+    openModal: (modalName, model)->
+      @controllerFor(modalName).set('model', model)
+      @render modalName,
+        into: 'application'
+        outlet: 'modal'
+    closeModal: ->
+      @disconnectOutlet
+        outlet: 'modal'
+        parentView: 'application'
+    confirm: (options = {})->
+      @send 'openModal', 'modal_confirm', Ember.Object.create
+        title: options.title
+        body: options.body
+        cancel: options.cancel
+        ok: options.ok

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

@@ -0,0 +1,2 @@
+= outlet
+= outlet modal

app/assets/javascripts/supplier/app/templates/application.hbs

@@ -1 +0,0 @@
-{{outlet}}

app/assets/javascripts/supplier/app/templates/components/modal-dialog.emblem

@@ -0,0 +1,2 @@
+.overlay{action "close"}
+  .modal{action bubbles=false preventDefault=false}= yield

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

@@ -0,0 +1,4 @@
+modal-dialog action="close"
+  h3.flush--top Alert
+  p= body
+  button{action "close"} Done

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

@@ -0,0 +1,6 @@
+modal-dialog action="close"
+  h3.flush--top= title
+  p=body
+  hr
+  button.confirm-cancel{action "close"}= t 'confirm.cancel'
+  button.confirm-ok.right{action 'confirm'}= t 'confirm.confirm'

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

@@ -0,0 +1,5 @@
+modal-dialog action="close"
+  h3.flush--top= title
+  p==body
+  hr
+  button{action 'close'}= t 'modal.info.close'

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

@@ -0,0 +1,24 @@
+modal-dialog action="close"
+  .modal-header
+    h3.flush--top=t 'section.add_tables.modal.title'
+    hr
+  .modal-body
+    p=t 'section.add_tables.modal.body_header'
+    form.form-horizontal
+      .control-group
+      .form-row
+        .form-label
+          label for='add-tables-number-start'
+            =t 'section.add_tables.modal.number_start'
+        .form-field
+          Qsupplier.App.NumberField valueBinding="number_start"
+      .form-row
+        .form-label
+          label for='add-tables-number-end'
+            =t 'section.add_tables.modal.number_end'
+        .form-field
+          Qsupplier.App.NumberField valueBinding="number_end"
+  .modal-footer
+    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'

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

@@ -19,13 +19,21 @@
     Qsupplier.App.DropdownLink title="Action"
       ul
         li
-          a{action addTables} {{t 'section.add_tables.button_label'}}
+          a{action addTables}
+            span.section-add-tables-icon
+            =t 'section.add_tables.button_label'
         li
-          a{action arrangeTables} {{t 'section.arrange_tables.modal.title'}}
+          a{action arrangeTables}
+            span.section-arrange-tables-icon
+            =t 'section.arrange_tables.modal.title'
         li
-          a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" {{t 'tables.qr_codes.link'}}
+          a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}"
+            span.table-qr-codes
+            =t 'tables.qr_codes.link'
         li
-          a href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}" {{t 'helpers.links.destroy'}}
+          a.section-destroy href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}"
+            span.section-remove-icon
+            =t 'helpers.links.destroy'
     Ember.TextField valueBinding="title" class="section-edit-title-field"
     Qsupplier.App.NumberField valueBinding="width" class="dimension section-edit-width-field"
     span.fa.fa-lg.fa-times

app/assets/javascripts/supplier/app/views/section_table_view.js.coffee

@@ -52,7 +52,7 @@ Qsupplier.App.SectionTableView = Ember.View.extend DragNDrop.Draggable,
     #@$('.table-actions .title').remove()
     content.hide()
     @$el.on 'click', =>
-      content.toggle() if @$el.hasClass('occupied')
+      content.toggle() if @$el.hasClass('occupied') and not @get('controller.editmode')
     #@$el.qtip
       #content:
         #text: content

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

@@ -34,13 +34,6 @@
       border-bottom-color: white
       bottom: 100%
       right: 30px
-      
-      
-    ul
-      list-style: none
-  //&:hover
-    //.dropdown-list-container
-      //display: block
   &.active
     .dropdown-list-container
       display: block

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

@@ -0,0 +1,16 @@
+.modal
+  margin: 10px auto
+  width: 300px
+  background-color: #fff
+  padding: 1em
+
+.overlay
+  height: 100%
+  width: 100%
+  position: fixed
+  top: 0
+  left: 0
+  background-color: rgba(0, 0, 0, 0.2)
+
+.flush--top
+  margin-top: 0

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

@@ -1,9 +1,16 @@
 .section-edit-mode-button
+  +button
+  margin: 0
+  padding: 2px
   span
     @extend .fa
     @extend .fa-lg
     @extend .fa-edit
 .section-normal-mode-button
+  +button
+  margin: 0
+  padding: 2px
+  margin-left: 8px
   span
     @extend .fa
     @extend .fa-lg
@@ -14,6 +21,35 @@
 .section-manage-tables
   .dropdown-container
     margin-right: 10px
+    $icon-right-margin: 8px
+    ul
+      list-style: none
+      margin: 0
+      padding: 0
+    li
+      border-bottom: 1px solid #bbb
+      a
+        font-size: 0.8em
+        display: block
+        padding: 4px 7px
+        &:hover
+          background-color: #ddd
+        span.table-qr-codes
+          margin-right: $icon-right-margin
+    .section-destroy
+      color: $alert-color
+    span.section-add-tables-icon
+      @extend .fa
+      @extend .fa-plus-square
+      margin-right: $icon-right-margin
+    span.section-arrange-tables-icon
+      @extend .fa
+      @extend .fa-th
+      margin-right: $icon-right-margin
+    span.section-remove-icon
+      @extend .fa
+      @extend .fa-trash-o
+      margin-right: $icon-right-margin
   input
     height: auto
     padding-top: 4px

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

@@ -18,12 +18,15 @@ table
   span
     @extend .fa
     @extend .fa-pencil
-.table-qr-codes
+a.table-qr-codes
   +button($bg: $secondary-color)
   +button-icon-only
   span
     @extend .fa
     @extend .fa-qrcode
+span.table-qr-codes
+  @extend .fa
+  @extend .fa-qrcode
 .table-destroy
   +button($bg: $secondary-color)
   +button-icon-only

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

@@ -17,4 +17,5 @@
 @import ./qtables
 @import ./section_tab_headers
 @import ./qlists
+@import ./qmodal
 @import ./ember_dropdown

app/controllers/suppliers/sections_controller.rb

@@ -132,10 +132,10 @@ module Suppliers
         table = Table.new(number: table_number)
         table.supplier = current_supplier
         table.section = @section
-        table.save
       end
       @section.arrange_tables_in_grid
-      render json: {ok: true}
+      table_json =  ActiveModel::ArraySerializer.new(@section.tables, each_serializer: SupplierTableSerializer, root: false).as_json
+      render json: {tables: table_json}
     end
 
     # POST /sections/1/arrange_tables {number_start: 1423, number_end: 234234}