refactor out old modal structure in favor of the new namespaced one

app/assets/javascripts/user/app/app.js.coffee

@@ -1,7 +1,12 @@
 @App = Ember.Application.create
   LOG_TRANSITIONS: true
   rootElement: '#ember-app-container'
+
 App.deferReadiness()
+
+@App.modals = Ember.Namespace.create()
+@Modals = @App.modals
+
 Ember.$.ajaxPrefilter (options) ->
   if options.type.toUpperCase() == 'GET'
     if auth_token = Qstorage.getItem('auth_token')

app/assets/javascripts/user/app/controllers/application_controller.js.coffee

@@ -9,6 +9,10 @@ App.ApplicationController = Ember.Controller.extend
       $('#confirm-modal').hide()
     clearNotice: ->
       @set 'notice', null
+    showSupplierStatusInfo: ->
+      @modal 'supplier_status_info',
+        model: @get('list.supplier')
+
     openDebugger: ->
       debugger
 

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

@@ -1,8 +0,0 @@
-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/user/app/controllers/modal_controller.js.coffee

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

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

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

app/assets/javascripts/user/app/controllers/modal_product_info_controller.js.coffee

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

app/assets/javascripts/user/app/controllers/modals/base_controller.js.coffee

@@ -0,0 +1,46 @@
+@App.modals.BaseController = Ember.ObjectController.extend
+  alert_message: ""
+  title: (->
+    # 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
+    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 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()`
+    # find translated title or humanize the controller name
+    if convention_translation = ttry("modal.#{underscored}.title", translation_params)
+      new Ember.Handlebars.SafeString(tspan(@get("modal.#{underscored}.title"), translation_params))
+    else
+      underscored.capitalize().replace(/_/, ' ')
+  ).property('model.id')
+  actions:
+    close: ->
+      if close = @get('modal_options.close')
+        close.apply(@)
+      @send 'closeModal' unless @preventClose
+    closeOnOverlay: ->
+      @send('close') if @get('modal_options.closeOnOverlay')
+      false
+    modalClick: ->
+      @send('close') if @get('modal_options.closeOnModalClick')
+      false
+    ok: ->
+      if ok = @get('modal_options.ok')
+        ok.apply(@)
+      @send 'closeModal' unless @preventClose
+    confirm: -> @send('ok')
+    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/user/app/controllers/table_controller.js.coffee

@@ -28,4 +28,4 @@ App.TableController = Ember.ObjectController.extend
     toggleProductCategory: (product_category)->
       product_category.set 'collapsed', not product_category.get('collapsed')
     showProductDescription: (product)->
-      @send 'openModal', 'modal_product_info', product
+      @modal 'product_info', model: product, title: product.get('name')

app/assets/javascripts/user/app/modifications/controller_modifications.js.coffee

@@ -12,6 +12,9 @@ ControllerExtensions = Ember.Mixin.create
     unless Qstorage.getItem('auth_token')
       return @transitionToRoute 'sign_in'
     callback.call(@) if callback
+  modal: (name, options={})->
+    options.model ||= Ember.Object.create()
+    @send "openModal", name, options
 Ember.ArrayController.reopen ControllerExtensions
 Ember.Controller.reopen ControllerExtensions
 Ember.ObjectController.reopen ControllerExtensions

app/assets/javascripts/user/app/routes/application_route.js.coffee.erb

@@ -35,19 +35,41 @@ App.ApplicationRoute = Ember.Route.extend
           @handleAuthInfo(user_id, auth_token)
           auth_win.close()
       true
-    openModal: (modalName, model)->
+    #openModal: (modalName, model)->
-      @controllerFor(modalName).set('model', model)
+    #  @controllerFor(modalName).set('model', model)
-      @render modalName,
+    #  @render modalName,
+    #    into: 'application'
+    #    outlet: 'modal'
+    #closeModal: ->
+    #  @disconnectOutlet
+    #    outlet: 'modal'
+    #    parentView: 'application'
+    openModal: (modalName, options={})->
+      controller_name = options.controller || modalName
+      try
+        controller =  @controllerFor("modals/#{modalName}")
+      catch error
+        controller = @controllerFor("modals/base")
+      controller.set 'model', options.model
+      defaultModalOptions =
+        closeOnOverlay: true
+        closeOnModalClick: false
+      controller.set 'modal_options', $.extend(defaultModalOptions, options)
+      @render "modals/#{modalName}",
         into: 'application'
         outlet: 'modal'
+        view: 'modal'
+        controller: controller
+
     closeModal: ->
       @disconnectOutlet
         outlet: 'modal'
         parentView: 'application'
+
     confirm: (options = {})->
-      @send 'openModal', 'modal_confirm', Ember.Object.create
+      @send 'openModal', 'confirm',
+        model: Ember.Object.create(body: options.body)
         title: options.title
-        body: options.body
         cancel: options.cancel
         ok: options.ok
     sendFeedback: (feedback, callback)->

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

@@ -15,7 +15,7 @@
           = view "menu-item-scan-qr"
         = view "menu-item-product-orders"
   if list
-    .extra-info
+    .extra-info{action "showSupplierStatusInfo"}
       .supplier-info-row
         / .supplier-name= list.supplier.name
         .table-number

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

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

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

@@ -1,6 +0,0 @@
-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/user/app/templates/modal_info.emblem

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

app/assets/javascripts/user/app/templates/modal_product_info.emblem

@@ -1,7 +0,0 @@
-modal-dialog action="close"
-  h3.flush--top= name
-  if image
-    .right: img src=image.small alt=""
-  p==description
-  hr
-  button{action "close"}= t 'modal.info.close'

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

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

app/assets/javascripts/user/app/templates/modals/layout.emblem

@@ -0,0 +1,8 @@
+.overlay{action "closeOnOverlay"}
+  .modal{action "modalClick" bubbles=false preventDefault=false}
+    .modal-header
+      h3.flush--top= title
+      hr
+    .modal-body
+      .modal-alert== alert_message
+      = yield

app/assets/javascripts/user/app/templates/modals/product_info.emblem

@@ -0,0 +1,5 @@
+if image
+  .right: img src=image.small alt=""
+p==description
+hr
+button{action "close"}= t 'modal.info.close'

app/assets/javascripts/user/app/views/modal_view.js.coffee

@@ -1,10 +1,13 @@
-#App.ModalView = Ember.View.extend
+App.ModalView = Ember.View.extend
-  #templateName: "modal"
+  layoutName: 'modals/layout'
-  #title: ""
+  didInsertElement: ->
-  #classNames: ["reveal-modal"],
+    sortable = $('.sortable')
-  #didInsertElement: ->
+    controller = @get('controller')
-    ##this.$().foundation('reveal', 'open')
+    if sortable.length
-  #actions:
+      sortable.sortable
-    #close: ->
+        update: (e, ui)->
-      #console.log('close action fired')
+          ids = sortable.find('.sortable-item-container').map((i, el) -> $(el).data('sortableId')).toArray()
-      #this.destroy()
+          if callback = controller.sortableUpdate
+            callback.call(controller, ids)
+
+

spec/acceptance/users/supplier_info.feature

@@ -0,0 +1,9 @@
+Feature: A signed in uses sees supplier info in the top right corner
+
+  @javascript
+  Scenario: Clicking on the table number opens the supplier info popup
+    Given there is a confirmed and open supplier
+    And there is a facebook user
+    And the user has an active order
+    When the user clicks on the table number info in the top right corner
+    Then the user sees the supplier information popup