CompositeTableView

composite_table_view.coffee

@MyApp.module "Concerns", (Concerns, App, Backbone, Marionette, $, _) ->
  Concerns.CompositeTableView =
    template: "backbone/_concerns/templates/composite_table_view"
    itemViewContainer: "tbody"

    ui:
      "headerRow"     : "thead tr"
      "actions"       : ".actions"
      "description"   : ".description"

    onRender: ->
      @addHeader()
      @addHeaderColumns()
      @addButtons()
      @addDescription()
      @addFooter()
      @setTableClass()

    setTableClass: ->
      className = @collection?.model?.name?.to_class_case() or "item"
      $table = @$el.find("table")
      $table.attr "class", "table table-striped resource-list #{className}-list"
      @$el.find('.panel-new').addClass className

    addButtons: ->
      return unless @buttons
      @buttons = @buttons() if typeof @buttons is "function"
      _.each @buttons, (buttonAttributes) =>
        buttonAttributes = _.defaults(buttonAttributes, { state: "primary", href: "#", class: "", push: true })

        $button = $ "<a>",
          class: "btn btn-#{buttonAttributes.state} #{buttonAttributes.class}".trim(),
          text: buttonAttributes.label
          "data-push-state": buttonAttributes.push
          href: buttonAttributes.href

        if buttonAttributes.trigger
          $button.on "click", (e) =>
            e.preventDefault()
            @trigger(buttonAttributes.trigger)

        @ui.actions.append($button)

    addDescription: ->
      @description = @description() if typeof @description is "function"
      if @description
        @description = "<h4 data-icon>#{@description}</h4>"
        @ui.description.append(@description)

    addFooter: ->
      @footer = @footer() if typeof @footer is "function"
      @$el.append(@footer) if @footer

    addHeader: ->
      @header = @header() if typeof @header is "function"
      @$el.prepend(@header) if @header

    addHeaderColumns: ->
      _.each @_getColumns(), (column) =>
        @ui.headerRow.append($("<th>", { text: column, class: column.to_class_case() }))

    _getColumns: ->
      if _.isFunction(@columns) then @columns() else @columns

    afterIncluded: (klass, concern) ->
      return unless klass?.prototype?.emptyViewMessage
      klass::emptyView = App.CreateEmptyTableView
        message: klass::emptyViewMessage
        colspan: klass::columns.length

composite_table_view_spec.coffee

#= require support/spec_helper
class MyPrettyTableView extends Backbone.Marionette.CompositeView
  header: "<h1>Great Person</h1>"
  columns: ["First Name", "Last Name"]
  sectorId: 3
  buttons: -> [ { label: "New Person", trigger: "new" }, { label: "Hide Admins", href: "##{@sectorId}/admin" } ]
  emptyViewMessage: "No People Are Here"
  @include "CompositeTableView"

describe "MyApp.Concerns.CompositeTableView", ->
  describe "with default settings", ->
    beforeEach ->
      @view = new MyPrettyTableView collection: new MyApp.Entities.PersonCollection
      @html = @view.render().$el.html()

    it "renders all the header columns", ->
      @html.should.include '<th class="last-name">Last Name</th>'

    it "sets the itemViewContainer to tbody", ->
      @view.itemViewContainer.should.equal "tbody"

    it "renders header dom", ->
      @html.should.include '<h1>Great Person</h1>'

    it "can render buttons with hrefs", ->
      @html.should.include '<a class="btn btn-primary" data-push-state="true" href="#3/admin">Hide Admins</a>'

    it "can render buttons that trigger actions", ->
      @html.should.include '<a class="btn btn-primary" data-push-state="true" href="#">New Person</a>'
      clicked = false
      @view.on("new", -> clicked = true)
      @view.$el.find("a:contains('New Person')").click().trigger("click")
      clicked.should.be.true

    it "sets a class name on the table", ->
      @html.should.include '<table class="table table-striped resource-list network-list">'

    it "creates an empty view", ->
      @view.emptyView.should.not.be.undefined
      @html.should.include "No People Are Here"
      @html.should.include 'colspan="2"'

  describe "with a column property that is a function", ->
    before ->
      class MyTableView extends MyPrettyTableView
        columns: ->
          ["a", "b"]
      @view = new MyTableView collection: new Bacchus.Entities.NetworkCollection
      @html = @view.render().$el.html()

    it "can render header columns if given a function", ->
      @html.should.include '<th class="a">a</th>'