Modal refactor

Gemfile

@@ -19,6 +19,7 @@ group :assets do
   gem 'jquery-ui-rails'
   gem 'ember-source' #, github: 'emberjs/ember.js', require: 'ember/source'
   gem 'ember-rails'
+  gem 'ember_script-rails', github: 'ghempton/ember-script-rails'
   gem 'sass-rails', '5.0.0.beta1'
   gem 'coffee-rails' #, '~> 3.2.1'
   #gem 'twitter-bootstrap-rails'

Gemfile.lock

@@ -35,6 +35,14 @@ GIT
       couch_potato (>= 0.2.15)
       rest-client (>= 1.4.2)
 
+GIT
+  remote: git://github.com/ghempton/ember-script-rails.git
+  revision: 9a1f09b0c53bf51c37c35490cc76cd7dfe461234
+  specs:
+    ember_script-rails (0.0.3)
+      ember_script (>= 0.0.4)
+      rails
+
 GIT
   remote: git://github.com/plataformatec/devise.git
   revision: 1d8890b77372b9c4fd3ec8e9b4963d76774ed33c
@@ -177,6 +185,11 @@ GEM
       railties (>= 3.1)
     ember-source (1.8.1)
       handlebars-source (~> 1.0)
+    ember_script (0.0.5)
+      ember_script-source (>= 0.0.2)
+      execjs
+      tilt
+    ember_script-source (0.0.14)
     emblem-rails (0.2.1)
       barber-emblem (~> 0.1.1)
       ember-rails (>= 0.14.0)
@@ -442,6 +455,7 @@ DEPENDENCIES
   devise_simply_stored!
   ember-rails
   ember-source
+  ember_script-rails!
   emblem-rails
   factory_girl_rails
   faye

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

@@ -2,3 +2,5 @@
   LOG_TRANSITIONS: true
   rootElement: '#ember-app-container'
   store: -> @__container__.lookup('controller:application').store
+@App.modals = Ember.Namespace.create()
+@Modals = @App.modals

app/assets/javascripts/supplier/app/application.js.coffee

@@ -4,6 +4,7 @@
 #= require_directory ./modifications
 #= require shared-ember-helpers/all
 #= require ./app
+#= require ./controllers/modals/base_controller
 #= require_tree .
 @$assets_path = '/assets/';
 @EmberENV = {FEATURES: {'query-params-new': true}}

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

@@ -30,15 +30,6 @@ App.IndexController = Ember.ObjectController.extend
   order_number_info: (-> " (#{@get('active_orders.length')})").property('active_orders.@each')
 
   actions:
-    ###
-    markListAsHelped: (id)->
-      if list = App.List.findCached(id)
-        list.is_helped()
-
-    closeList: (list)->
-      @send 'openModal', 'modal_close_list', list
-      # list.close()
-    ###
     toggleDashboardLists: -> @set 'show_lists', !@get('show_lists')
     toggleDashboardOrders: ->@set 'show_orders', !@get('show_orders')
 

app/assets/javascripts/supplier/app/controllers/menu_controller.js.em

@@ -0,0 +1,3 @@
+App.MenuController = Ember.ObjectController.extend
+  needs: ['application']
+  product_categories: ~> @store.all('product_category')

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

@@ -1,7 +0,0 @@
-App.ModalCloseListController = Ember.ObjectController.extend
-  actions:
-    close: ->
-      @send 'closeModal'
-    confirm: ->
-      @get('model').then (l)->l.close()
-      @send 'closeModal'

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

@@ -1,11 +0,0 @@
-App.ModalController = Ember.ObjectController.extend
-  modal_options: {}
-  actions:
-    close: ->
-      if close = @get('modal_options.close')
-        close.apply(@)
-      @send 'closeModal' unless @preventClose
-    ok: ->
-      if ok = @get('modal_options.ok')
-        ok.apply(@)
-      @send 'closeModal' unless @preventClose

app/assets/javascripts/supplier/app/controllers/modals/add_section_controller.js.coffee

@@ -1,13 +1,10 @@
-App.ModalAddSectionController = Ember.ObjectController.extend
+App.modals.AddSectionController = @App.modals.BaseController.extend
   alert_message: null
   section_title: ''
   section_width: 15
   section_height: 8
+  title_path: 'section.add_section.modal.title'
   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')

app/assets/javascripts/supplier/app/controllers/modals/base_controller.js.em

@@ -0,0 +1,26 @@
+@App.modals.BaseController = Ember.ObjectController.extend
+  title: ~>
+    return @get('modal_options.title') if @get('modal_options.title')
+    return t(@title_path) if @title_path
+    return t(@get('modal_options.title_path')) if @get('modal_options.title_path')
+    underscored = `this.constructor.toString().substr(11).replace(/Controller$/, '').underscore()`
+    params = {}
+    if model = @get('model')
+      params = model.serialize() if model.serialize
+    @get('modal_options.title') or ttry("modal.#{underscored}.title", params) or underscored.capitalize().replace(/_/, ' ')
+  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')

app/assets/javascripts/supplier/app/controllers/modals/close_list_controller.js.coffee

@@ -0,0 +1,6 @@
+App.modals.CloseListController = App.modals.BaseController.extend
+  title_path: 'list.close.modal.title'
+  actions:
+    confirm: ->
+      @get('model').then (l)->l.close()
+      @send 'closeModal'

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

@@ -2,17 +2,11 @@ App.SectionController = Ember.ObjectController.extend
   needs: ['application', 'sections', 'section'] #wtf? section, otherwise an Ember error
   editmode: false
   actions:
-    ###
-    markListAsHelped: (list) -> list.is_helped() if list
-    closeList: (list)->
-      @send 'openModal', 'modal_close_list', list
-    ###
     makeEditable: -> @set('editmode', true)
     finishEditable: ->
       @set('editmode', false)
       @get('model').save()
-    addSection: ->
+    addSection: -> @modal 'add_section', model: @get('model')
-      @send 'openModal', 'modal_add_section', @get('model')
     addTables: ->
       #$('#add-tables-modal').modal()
       @send 'openModal', 'modal_section_add_tables', @get('model')
@@ -21,13 +15,14 @@ App.SectionController = Ember.ObjectController.extend
     editTable: (table)->
       @modal 'edit_table',
         model: table
+        title_path: 'table.edit.modal.title'
         ok: ->
           table.save()
         close: ->
           table.rollback()
     destroySection: ->
-      @send 'openModal', 'modal_confirm',
+      @modal 'confirm',
-        title: t('helpers.links.are_you_sure')
+        title_path: 'helpers.links.are_you_sure'
         ok: =>
           @get('model').destroyRecord()
           @transitionToRoute 'sections'

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

@@ -12,7 +12,7 @@ App.SectionsIndexController = Ember.ArrayController.extend
     showDashboardOrders: (section)->
       @set 'controllers.application.active_section', section
       @transitionToRoute('index')
-    addSection: -> @send 'openModal', 'modal_add_section', @get('model')
+    addSection: -> @modal 'add_section', model: @get('model')
     goToSection: (section)->
       @set 'controllers.application.active_section', section
       @transitionToRoute 'section', section.id

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

@@ -4,6 +4,7 @@ App.TablesIndexController = Ember.ArrayController.extend
     editTable: (table)->
       @modal 'edit_table',
         model: table
+        title_path: 'table.edit.modal.title'
         ok: ->
           table.save()
         close: ->
@@ -11,4 +12,4 @@ App.TablesIndexController = Ember.ArrayController.extend
     destroyTable: (table)->
       @send 'confirm',
         title: t('table.destroy.modal.title', number: table.get('number'))
-        ok: -> table.destroy()
+        ok: -> table.destroyRecord()

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

@@ -1,11 +1,15 @@
 ControllerExtensions = Ember.Mixin.create
   # conveniance wrapper for open modal. Use like:
   #   @modal "edit_table", model: table
+  # modal: (name, options={})->
+  #   @send "openModal", "modals/#{name}", options.model || Ember.Object.create(),
+  #     controller: 'modal'
+  #     ok: options.ok
+  #     close: options.close
   modal: (name, options={})->
-    @send "openModal", "modals/#{name}", options.model || Ember.Object.create(),
+    options.model ||= Ember.Object.create()
-      controller: 'modal'
+    @send "openModal", name, options
-      ok: options.ok
+
-      close: options.close
   all_sections: (-> @store.all('section')).property()
 
 Ember.Controller.reopen ControllerExtensions

app/assets/javascripts/supplier/app/router.js.coffee

@@ -13,6 +13,7 @@ App.Router.map ->
   @resource 'lists', ->
     @resource 'list', path: ':list_id'
   @route 'orders_display' # chromecast etc
+  @route 'menu'
   @route 'settings'
   @route 'empty'
   #@resource 'lists', queryParams: ['state']

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

@@ -16,21 +16,39 @@ App.ApplicationRoute = Ember.Route.extend
     controller.set 'product_categories', @product_categories
 
   actions:
-    openModal: (modalName, model, options={})->
+    # openModal: (modalName, model, options={})->
+    #   controller_name = options.controller || modalName
+    #   controller =  @controllerFor(controller_name)
+    #   controller.set 'model', model
+    #   controller.set 'modal_options', options
+    #   @render modalName,
+    #     into: 'application'
+    #     outlet: 'modal'
+    #     controller: controller_name
+    openModal: (modalName, options={})->
       controller_name = options.controller || modalName
-      controller =  @controllerFor(controller_name)
+      try
-      controller.set 'model', model
+        controller =  @controllerFor("modals/#{modalName}")
-      controller.set 'modal_options', options
+      catch error
-      @render modalName,
+        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'
-        controller: controller_name
+        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
         title: options.title
         body: options.body
         cancel: options.cancel

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

@@ -0,0 +1,8 @@
+h2 Menu
+each product_category in product_categories
+  .row: .small-12.columns
+    h3= product_category.name
+    each product in product_category.products
+      .row
+        .small-4.columns= product.name
+        .small-8.columns= currency product.price

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

@@ -1,24 +0,0 @@
-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
-        App.NumberField valueBinding="section_width"
-    .form-row
-      .form-label
-        label=t 'attributes.section.height'
-      .form-field
-        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/modal_close_list.emblem

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

app/assets/javascripts/supplier/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/supplier/app/templates/modals/add_section.emblem

@@ -0,0 +1,18 @@
+.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
+    App.NumberField valueBinding="section_width"
+.form-row
+  .form-label
+    label=t 'attributes.section.height'
+  .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'

app/assets/javascripts/supplier/app/templates/modals/close_list.emblem

@@ -0,0 +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'

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

@@ -0,0 +1,4 @@
+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/modals/edit_table.emblem

@@ -1,8 +1,3 @@
-modal-dialog action="close"
-  .modal-header
-    h3.flush--top=t 'table.edit.modal.title'
-    hr
-  .modal-body
 p=t 'table.edit.modal.body_header'
 .form-row
   .form-label=t 'attributes.table.number'
@@ -11,7 +6,6 @@ modal-dialog action="close"
   .form-label=t 'models.section'
   .form-field
     Ember.Select content=all_sections valueBinding="model.section" optionLabelPath="content.title"
-  .modal-footer
 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'

app/assets/javascripts/supplier/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/supplier/app/views/application_view.js.coffee

@@ -7,6 +7,7 @@ App.ApplicationView = Ember.View.extend
       '.top-menu-sections': 'sections'
       '.top-menu-tables': 'tables'
       '.top-menu-lists': 'lists'
+      '.top-menu-menu': 'menu'
       '.supplier-settings-link': 'settings'
 
     for selector, route of selector_mappings

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

@@ -4,4 +4,4 @@ App.CloseListButtonView = Ember.View.extend
   classNameBindings: ['content.active:show:hide']
   tagName: 'button'
   click: (e)->
-    @get('controller').send 'openModal', 'modal_close_list', @get('content')
+    @get('controller').send 'modal', 'close_list', model: @get('content')

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

@@ -0,0 +1,3 @@
+App.ModalView = Ember.View.extend
+  layoutName: 'modals/layout'
+

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

@@ -11,6 +11,9 @@
     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 %>
+@ttry = (path, vars={})->
+  @t(path, $.extend(vars, emptyWhenNotFound: true))
+
 @t = (path, vars={}) ->
   #result = undefined
   #m = undefined
@@ -24,6 +27,7 @@
     result = result[part] for part in parts
   catch err
     result = parts[parts.length - 1].capitalize()
+    result = if vars.emptyWhenNotFound then "" else parts[parts.length - 1].capitalize()
   return ""  if result is ""
   return parts[parts.length - 1].capitalize()  unless result
 

app/controllers/supplier_controller.rb

@@ -3,7 +3,9 @@ class SupplierController < ApplicationController
   layout 'tablet'
 
   def home
-    render layout: 'tablet'
+  end
+
+  def menu
   end
 
   # GET /supplier/settings

app/models/supplier.rb

@@ -135,7 +135,7 @@ class Supplier
     @reconfirmation_required = false
 
     @bypass_postpone = true and generate_confirmation_token! if self.confirmation_token.blank?
-    self.devise_mailer.confirmation_instructions(self, confirmation_token).deliver
+    self.devise_mailer.confirmation_instructions(self, confirmation_token).deliver_now
   end
 
   def find_order(id)
@@ -145,7 +145,7 @@ class Supplier
   end
 
   def send_creation_notifications
-    SupplierMailer.creation(self).deliver
+    SupplierMailer.creation(self).deliver_now
   end
 
   def week_starts_on_monday?

app/views/layouts/tablet.html.slim

@@ -39,8 +39,7 @@ html lang="en"
                   span data-t="supplier.open_for_orders"
               a.close{data-dismiss="alert"} ×
           .row
-            .span12
+            .span12= content_for?(:content) ? yield(:content) : yield
-              = content_for?(:content) ? yield(:content) : yield
           - if content_for?(:row)
             .row= yield :row
           .row

app/views/supplier/menu.html.slim

@@ -0,0 +1,2 @@
+- content_for :head do
+  = javascript_include_tag 'supplier/app/application'

app/views/suppliers/application/_top_menu.html.slim

@@ -6,6 +6,7 @@ header.top-menu
       //li= link_to t('supplier.menu.active_orders', orders: Order.model_name.human_plural), supplier_active_orders_path
       //li= link_to t('supplier.menu.active_lists', lists: List.model_name.human_plural), supplier_active_lists_path
       = link_to image_tag('icons/logo-small.png'), supplier_root_path, class: 'top-menu-root'
+      = link_to 'Menu', suppliers_menu_path, class: 'top-menu-menu'
       = link_to ProductCategory.model_name.human_plural, suppliers_product_categories_path, data: {t: 'models.plural.product_category'}, class: 'top-menu-product_categories'
       = link_to Product.model_name.human_plural, suppliers_products_path, data: {t: 'models.plural.product'}, class: 'top-menu-products'
       = link_to Section.model_name.human_plural, "/supplier#/sections", data: {t: 'models.plural.section'}, class: 'top-menu-sections'

config/routes.rb

@@ -24,12 +24,6 @@ Qwaiter::Application.routes.draw do
   post '/user_app' => 'dashboard#user_app_log' #TODO: separate high speed app at log.mozo.bar
   post '/user_feedback' => 'user#feedback'
 
-  # SUPPLIER
-  get '/supplier' => 'supplier#home', as: :supplier_root
-  get '/supplier/active_orders' => 'supplier#active_orders', as: :supplier_active_orders
-  get '/supplier/active_lists' => 'supplier#active_lists', as: :supplier_active_lists
-  #get '/supplier/lists/:list_id' => 'supplier#show_list', as: :supplier_show_list
-
   #WAITER
   get '/waiter' => 'waiter#index' #, controller: 'waiter', action: 'index'
   get '/waiter/sections' => 'waiter#sections'
@@ -38,19 +32,6 @@ Qwaiter::Application.routes.draw do
   post '/waiter/order_products' => 'waiter#order_products', as: :order_products_waiter
 
 
-  post '/supplier/close_list' => 'supplier#close_list', as: :supplier_close_list
-  post '/supplier/mark_list_as_helped' => 'supplier#mark_list_as_helped', as: :supplier_mark_list_as_helped
-  post '/supplier/remove_list_needs_payment' => 'supplier#remove_list_needs_payment', as: :supplier_remove_list_needs_payment
-
-  post '/supplier/mark_order_in_process' => 'supplier#mark_order_in_process', as: :supplier_mark_order_in_process
-  post '/supplier/order_is_delivered' => 'supplier#order_is_delivered', as: :supplier_order_is_delivered
-
-  post '/supplier/mark_as_open' => 'supplier#mark_as_open', as: :supplier_mark_as_open
-  post '/supplier/mark_as_closed' => 'supplier#mark_as_closed', as: :supplier_mark_as_closed
-
-  get '/supplier/settings' => 'supplier#edit', as: :supplier_settings
-  match '/supplier/settings' => 'supplier#update', as: :supplier_update_settings, via: [:put, :post, :patch]
-
   # USER
   #default_url_options format: 'html'
   get '/user/index' => 'user#index', as: :user_root
@@ -107,6 +88,26 @@ Qwaiter::Application.routes.draw do
   get '/qr' => 'dashboard#qr'
   get '/demo_both' => 'dashboard#demo_both'
 
+  # SUPPLIER
+  get '/supplier' => 'supplier#home', as: :supplier_root
+  get '/supplier/active_orders' => 'supplier#active_orders', as: :supplier_active_orders
+  get '/supplier/active_lists' => 'supplier#active_lists', as: :supplier_active_lists
+  get '/supplier/menu' => 'supplier#menu', as: :suppliers_menu
+  #get '/supplier/lists/:list_id' => 'supplier#show_list', as: :supplier_show_list
+
+  post '/supplier/close_list' => 'supplier#close_list', as: :supplier_close_list
+  post '/supplier/mark_list_as_helped' => 'supplier#mark_list_as_helped', as: :supplier_mark_list_as_helped
+  post '/supplier/remove_list_needs_payment' => 'supplier#remove_list_needs_payment', as: :supplier_remove_list_needs_payment
+
+  post '/supplier/mark_order_in_process' => 'supplier#mark_order_in_process', as: :supplier_mark_order_in_process
+  post '/supplier/order_is_delivered' => 'supplier#order_is_delivered', as: :supplier_order_is_delivered
+
+  post '/supplier/mark_as_open' => 'supplier#mark_as_open', as: :supplier_mark_as_open
+  post '/supplier/mark_as_closed' => 'supplier#mark_as_closed', as: :supplier_mark_as_closed
+
+  get '/supplier/settings' => 'supplier#edit', as: :supplier_settings
+  match '/supplier/settings' => 'supplier#update', as: :supplier_update_settings, via: [:put, :post, :patch]
+
   namespace :suppliers, path: '/supplier' do
     resources :sections do
       member do