Meteor CRUD form with AutoForm: tab and editor style

meteor_crud_basic.coffee

# jade
template(name='productNumbersCrud')
  h4 Product Numbers
  .row
    .col-md-6
      table.tabel.table-hover.table-striped.table-bordered
        tbody
          each productNumbers
            tr 
              td 
                button.btn-link#select-pn #{name}       
    .col-md-6
      ul.nav.nav-tabs
        li.active
          a(href="#edit-pn", data-toggle='tab') Edit
        li
          a(href="#new-pn", data-toggle="tab") New
      .tab-content
        .tab-pane.active#edit-pn
          +quickForm collection="ProductNumbers" doc=selectedProductNumber id="updateProductNumberForm" type='update' buttonContent='Update'
          hr
          +afDeleteButton collection='ProductNumbers' doc=selectedProductNumber
        .tab-pane#new-pn
          +quickForm collection="ProductNumbers" id="insertProductNumberForm" type='insert' buttonContent='Create'

# coffee
Template.productNumbersCrud.helpers
  selectedProductNumber: ->
    return ProductNumbers.findOne Session.get('selectedProductNumber')

Template.productNumbersCrud.events
  'click #select-pn': (e)->
    e.preventDefault()
    Session.set 'selectedProductNumber', this._id

meteor_crud_basic_editor.coffee

# jade
template(name='productNumbersCRUD')
  .row
    .col-md-6
      h4 
        span Product Numbers
        button.btn.btn-primary.btn-xs.pull-right(type='button')#show-productNumbersCRUD-insert 
          span.glyphicon.glyphicon-plus
  .row
    .col-md-6
      table.table.table-hover.table-striped.table-bordered
        tbody
          each productNumbers
            tr 
              td 
                button.btn-link#select-pn #{name}       
    .col-md-6
      #productNumbersCRUD
        #productNumbersCRUD-insert.panel.panel-default.popup-editor
          .panel-heading
            .panel-title 
              span Create
              a.pull-right(href='#').close-popup 
                span.glyphicon.glyphicon-remove
          .panel-body
            +quickForm collection="ProductNumbers" id="insertProductNumberForm" type='insert' buttonContent='Create'
        #productNumbersCRUD-edit.panel.panel-default.popup-editor
          .panel-heading
            .panel-title 
              span Edit
              a.pull-right(href='#').close-popup 
                span.glyphicon.glyphicon-remove
          .panel-body
            +quickForm collection="ProductNumbers" doc=selectedProductNumber id="updateProductNumberForm" type='update' buttonContent='Update'
            hr
            +afDeleteButton collection='ProductNumbers' doc=selectedProductNumber

# sass
.popup-editor {
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

# coffee
Template.productNumbersCRUD.rendered = ->
  $('#productNumbersCRUD .popup-editor').hide()

Template.productNumbersCRUD.helpers
  selectedProductNumber: ->
    return ProductNumbers.findOne Session.get('selectedProductNumber')

Template.productNumbersCRUD.events
  'click #select-pn': (e)->
    e.preventDefault()
    Session.set 'selectedProductNumber', this._id

    $('#productNumbersCRUD-insert').hide()
    $('#productNumbersCRUD-edit').slideDown('fast')

  'click #show-productNumbersCRUD-insert': (e)->
    e.preventDefault()

    $('#productNumbersCRUD-edit').hide()
    $('#productNumbersCRUD-insert').slideDown('fast')

  'click .close-popup': (e)->
    e.preventDefault()

    $(e.target).parents('.popup-editor').hide()