luca 0.6.6

data/src/components/form_view.coffee

@@ -0,0 +1,205 @@
+Luca.components.FormView = Luca.core.Container.extend 
+  tagName: 'form'
+
+  className: 'luca-ui-form-view'
+
+  hooks:[
+    "before:submit"
+    "before:reset"
+    "before:load"
+    "before:load:new"
+    "before:load:existing"
+    "after:submit"
+    "after:reset"
+    "after:load"
+    "after:load:new"
+    "after:load:existing"
+    "after:submit:success"
+    "after:submit:fatal_error"
+    "after:submit:error"
+  ]
+
+  events:
+    "click .submit-button" : "submitHandler"
+    "click .reset-button" : "resetHandler"
+  
+  toolbar: true
+  
+  initialize: (@options={})->
+    Luca.core.Container::initialize.apply @, arguments
+    
+    _.bindAll @, "submitHandler", "resetHandler", "renderToolbars" 
+
+    @state ||= new Backbone.Model
+
+    @setupHooks( @hooks )
+    
+    @legend ||= ""
+
+    @configureToolbars()
+    @applyStyles() 
+
+  addBootstrapFormControls: ()->
+    @bind "after:render", ()=>
+      el = @$('.toolbar-container.bottom')
+
+      el.addClass('form-controls')
+      el.html @formControlsTemplate || Luca.templates["components/bootstrap_form_controls"](@)  
+
+  applyStyles: ()->
+    @applyBootstrapStyles() if Luca.enableBootstrap
+
+    @$el.addClass( "label-align-#{ @labelAlign }") if @labelAlign
+    @$el.addClass( @fieldLayoutClass ) if @fieldLayoutClass    
+
+  applyBootstrapStyles: ()->
+    @inlineForm = true if @labelAlign is "left"
+
+    @$el.addClass('well') if @well
+    @$el.addClass('form-search') if @searchForm 
+    @$el.addClass('form-horizontal') if @horizontalForm          
+    @$el.addClass('form-inline') if @inlineForm          
+
+  configureToolbars: ()->
+    return @addBootstrapFormControls() if Luca.enableBootstrap and @toolbar is true
+
+    if @toolbar is true 
+      @toolbars = [
+        ctype: 'form_button_toolbar'
+        includeReset: true
+        position: 'bottom'
+      ]
+
+    if @toolbars and @toolbars.length
+      @bind "after:render", _.once @renderToolbars    
+
+  resetHandler: (e)->
+    me = my = $( e.currentTarget )
+    @trigger "before:reset", @
+    @reset()
+    @trigger "after:reset", @
+
+  submitHandler: (e)->
+    me = my = $( e.currentTarget )
+    @trigger "before:submit", @
+    @submit()
+  
+  beforeLayout: ()->
+    Luca.core.Container::beforeLayout?.apply @, arguments
+    @$el.html Luca.templates["components/form_view"]( @ )    
+
+
+  prepareComponents: ()->
+    container = $('.form-view-body', @el)
+    _( @components ).each (component)->
+      component.container = container
+  
+  render: ()->
+    $( @container ).append( @$el )
+
+  wrapper: ()->
+    @$el.parents('.luca-ui-form-view-wrapper')
+
+  toolbarContainers: (position="bottom")->
+    $(".toolbar-container.#{ position }", @wrapper() ).first()
+
+  renderToolbars: ()->
+      _( @toolbars ).each (toolbar)=>
+        toolbar.container = $("##{ @cid }-#{ toolbar.position }-toolbar-container")
+        toolbar = Luca.util.lazyComponent(toolbar)
+        toolbar.render()
+  
+  getField: (name)->
+    _( @getFields('name', name) ).first()
+
+  getFields: (attr,value)->
+    # do a deep search of all of the nested components
+    # to find the fields
+    fields = @select("isField", true, true)
+
+    # if an optional attribute and value pair is passed
+    # then you can limit the array of fields even further
+    if fields.length > 0 and attr and value
+      fields = _(fields).select (field)->
+        property = field[ attr ]
+        return false unless property?
+        propvalue = if _.isFunction(property) then property() else property
+        value is propvalue
+
+    fields
+
+  loadModel: (@current_model)->
+    form = @
+    fields = @getFields()
+    
+    @trigger "before:load", @, @current_model
+    if @current_model
+      event = "before:load:#{ (if @current_model.isNew() then "new" else "existing")}"
+      @trigger event, @, @current_model
+    
+    _( fields ).each (field) =>
+      field_name = field.input_name || field.name
+      value = if _.isFunction(@current_model[ field_name ]) then @current_model[field_name].apply(@, form) else @current_model.get( field_name ) 
+      field?.setValue( value ) unless field.readOnly is true
+    
+    @trigger "after:load", @, @current_model
+
+    if @current_model
+      @trigger "after:load:#{ (if @current_model.isNew() then "new" else "existing")}", @, @current_model
+  
+  
+  reset: ()-> 
+    @loadModel( @current_model )
+
+  clear: ()->
+    @current_model = if @defaultModel? then @defaultModel() else undefined
+
+    _( @getFields() ).each (field)=> 
+      try
+        field.setValue('')
+      catch e
+        console.log "Error Clearing", @, field
+
+  getValues: (reject_blank=false,skip_buttons=true)->
+    _( @getFields() ).inject (memo,field)->
+      value = field.getValue() 
+      
+      skip = false
+      skip = true if skip_buttons and field.ctype is "button_field"
+      skip = true if reject_blank and _.isBlank(value)
+      skip = true if field.input_name is "id" and _.isBlank(value)
+
+      memo[ field.input_name || name ] = value unless skip
+
+      memo
+    , {}
+  
+  submit_success_handler: (model, response, xhr)->
+    @trigger "after:submit", @, model, response
+    
+    if response and response.success
+      @trigger "after:submit:success", @, model, response
+    else
+      @trigger "after:submit:error", @, model, response
+
+  submit_fatal_error_handler: ()->
+    @trigger.apply ["after:submit", @].concat(arguments)
+    @trigger.apply ["after:submit:fatal_error", @].concat(arguments)
+
+  submit: (save=true, saveOptions={})-> 
+    _.bindAll @, "submit_success_handler", "submit_fatal_error_handler"
+
+    saveOptions.success ||= @submit_success_handler
+    saveOptions.error ||= @submit_fatal_error_handler
+    
+    @current_model.set( @getValues() )
+    return unless save
+    @current_model.save( @current_model.toJSON(), saveOptions )
+
+  currentModel: ()-> 
+    @current_model
+
+  setLegend: (@legend)->
+    $('fieldset legend', @el).first().html(@legend)
+
+Luca.register 'form_view', 'Luca.components.FormView'

data/src/components/grid_view.coffee

@@ -0,0 +1,208 @@
+Luca.components.GridView = Luca.View.extend
+  events:
+    "dblclick .grid-view-row" : "double_click_handler"
+    "click .grid-view-row": "click_handler"
+
+  className: 'luca-ui-grid-view'
+
+  scrollable: true
+
+  emptyText: 'No Results To display'
+
+  # available options are striped, condensed, bordered
+  # or any combination of these, split up by space
+  tableStyle: 'striped'
+
+  hooks:[
+    "before:grid:render",
+    "before:render:header",
+    "before:render:row",
+    "after:grid:render",
+    "row:double:click",
+    "row:click",
+    "after:collection:load"
+  ]
+
+  initialize: (@options={})->
+    _.extend @, @options
+    _.extend @, Luca.modules.Deferrable
+
+    Luca.View::initialize.apply( @, arguments )
+
+    _.bindAll @, "double_click_handler", "click_handler"
+
+    @configure_collection()
+
+    @collection.bind "reset", (collection) =>
+      @refresh()
+      @trigger "after:collection:load", collection
+
+  beforeRender: ()->
+    @trigger "before:grid:render", @
+
+    @$el.addClass 'scrollable-grid-view' if @scrollable
+
+    @$el.html Luca.templates["components/grid_view"]()
+
+    @table  = $('table.luca-ui-grid-view', @el)
+    @header = $("thead", @table)
+    @body   = $("tbody", @table)
+    @footer = $("tfoot", @table)
+
+    if Luca.enableBootstrap
+      @table.addClass('table')
+
+    _( @tableStyle?.split(" ") ).each (style)=>
+      @table.addClass("table-#{ style }")
+
+    @setDimensions() if @scrollable
+
+    @renderHeader()
+
+    @emptyMessage()
+
+    @renderToolbars()
+
+    $(@container).append @$el
+
+  toolbarContainers:(position="bottom")->
+    $(".toolbar-container.#{ position }", @el)
+
+  renderToolbars: ()->
+    _( @toolbars ).each (toolbar)=>
+      toolbar = Luca.util.lazyComponent(toolbar)
+      toolbar.container = @toolbarContainers( toolbar.position )
+      toolbar.render()
+
+  setDimensions: (offset)->
+    @height ||= 285
+
+    $('.grid-view-body', @el).height( @height )
+    $('tbody.scrollable', @el).height( @height - 23 )
+
+    @container_width = do => $(@container).width()
+    @width = if @container_width > 0 then @container_width else 756
+
+    #@width += offset if offset
+
+    $('.grid-view-body', @el).width( @width )
+    $('.grid-view-body table', @el).width( @width )
+
+    @setDefaultColumnWidths()
+
+  resize: (newWidth)->
+    difference = newWidth - @width
+    @width = newWidth
+
+    $('.grid-view-body', @el).width( @width )
+    $('.grid-view-body table', @el).width( @width )
+
+    if @columns.length > 0
+      distribution = difference / @columns.length
+
+      _(@columns).each (col,index)=>
+        column = $(".column-#{ index }", @el )
+        column.width( col.width = col.width + distribution )
+
+  padLastColumn: ()->
+    configured_column_widths = _(@columns).inject (sum, column)->
+      sum = (column.width) + sum
+    , 0
+
+    unused_width = @width - configured_column_widths
+
+    if unused_width > 0
+      @lastColumn().width += unused_width
+
+  setDefaultColumnWidths: ()->
+    default_column_width = if @columns.length > 0 then @width / @columns.length else 200
+
+    _( @columns ).each (column)->
+      parseInt(column.width ||= default_column_width)
+
+    @padLastColumn()
+
+
+  lastColumn: ()->
+    @columns[ @columns.length - 1 ]
+
+  afterRender: ()->
+    @refresh()
+    @trigger "after:grid:render", @
+
+  emptyMessage: (text="")->
+    text ||= @emptyText
+    @body.html('')
+    @body.append Luca.templates["components/grid_view_empty_text"](colspan:@columns.length,text:text)
+
+  refresh: ()->
+    @body.html('')
+    @collection.each (model,index)=>
+      @render_row.apply(@, [model,index])
+
+    if @collection.models.length == 0
+      @emptyMessage()
+
+  ifLoaded: (fn, scope)->
+    scope ||= @
+    fn ||= ()-> true
+
+    @collection.ifLoaded(fn,scope)
+
+  applyFilter: (values, options={auto:true,refresh:true})->
+    @collection.applyFilter(values, options)
+
+  renderHeader: ()->
+    @trigger "before:render:header"
+
+    headers = _(@columns).map (column,column_index) =>
+      # temporary hack for scrollable grid dimensions.
+      style = if column.width then "width:#{ column.width }px;" else ""
+
+      "<th style='#{ style }' class='column-#{ column_index }'>#{ column.header}</th>"
+
+    @header.append("<tr>#{ headers }</tr>")
+
+  render_row: (row,row_index)->
+    model_id = if row?.get and row?.attributes then row.get('id') else ''
+
+    @trigger "before:render:row", row, row_index
+
+    cells = _( @columns ).map (column,col_index) =>
+      value = @cell_renderer(row, column, col_index)
+      style = if column.width then "width:#{ column.width }px;" else ""
+
+      display = if _.isUndefined(value) then "" else value
+
+      "<td style='#{ style }' class='column-#{ col_index }'>#{ display }</td>"
+
+    if @alternateRowClasses
+      alt_class = if row_index % 2 is 0 then "even" else "odd"
+
+    @body?.append("<tr data-record-id='#{ model_id }' data-row-index='#{ row_index }' class='grid-view-row #{ alt_class }' id='row-#{ row_index }'>#{ cells }</tr>")
+
+  cell_renderer: (row, column, columnIndex )->
+    if _.isFunction column.renderer
+      return column.renderer.apply @, [row,column,columnIndex]
+    else if column.data.match(/\w+\.\w+/)
+      source = row.attributes || row
+      return Luca.util.nestedValue( column.data, source )
+    else
+      return row.get?( column.data ) || row[ column.data ]
+
+  double_click_handler: (e)->
+    me = my = $( e.currentTarget )
+    rowIndex = my.data('row-index')
+    record = @collection.at( rowIndex )
+    @trigger "row:double:click", @, record, rowIndex
+
+  click_handler: (e)->
+    me = my = $( e.currentTarget )
+    rowIndex = my.data('row-index')
+    record = @collection.at( rowIndex )
+    @trigger "row:click", @, record, rowIndex
+
+    $('.grid-view-row', @body ).removeClass('selected-row')
+    me.addClass('selected-row')
+
+Luca.register "grid_view","Luca.components.GridView"

data/src/components/record_manager.coffee

@@ -0,0 +1,215 @@
+# The RecordManager is a high level component which incorporates
+# a filterable grid, and an editor form responsible for editing
+# the records in that grid. 
+#
+# it provides convenience methods for accesing those components.
+#
+# this represents a clean pattern for having multiple components
+# which work together.  inter-component communication should be handled
+# by parent containers, and not individual components, which should
+# usually not be aware of other components.
+
+# Work in progress
+Luca.components.RecordManager = Luca.containers.CardView.extend
+
+  events:
+    "click .record-manager-grid .edit-link" : "edit_handler"
+    "click .record-manager-filter .filter-button" : "filter_handler"
+    "click .record-manager-filter .reset-button" : "reset_filter_handler"
+    "click .add-button" : "add_handler"
+    "click .refresh-button" : "filter_handler"
+    "click .back-to-search-button" : "back_to_search_handler"
+  
+  record_manager: true
+
+  initialize: (@options={})->
+    Luca.containers.CardView::initialize.apply @, arguments
+    
+    throw "Record Managers must specify a name" unless @name
+
+    _.bindAll @, "add_handler", "edit_handler", "filter_handler", "reset_filter_handler"
+
+    _.extend @components[0][0], @filterConfig if @filterConfig
+    _.extend @components[0][1], @gridConfig if @gridConfig
+    _.extend @components[1][0], @editorConfig if @editorConfig
+  
+    @bind "after:card:switch", () =>
+      @trigger("activation:search", @) if @activeCard is 0
+      @trigger("activation:editor", @) if @activeCard is 1
+
+  components:[
+    ctype: 'split_view',
+    relayFirstActivation: true
+    components:[
+      ctype: 'form_view'
+    ,
+      ctype: 'grid_view'
+    ]
+  ,
+    ctype: 'form_view'
+  ]   
+
+  getSearch: (activate=false, reset=true)->
+    @activate(0) if activate is true
+    @getEditor().clear() if reset is true
+
+    _.first(@components)
+
+  getFilter: ()->
+    _.first @getSearch().components
+
+  getGrid: ()->
+    _.last @getSearch().components
+
+  getCollection: ()->
+    @getGrid().collection
+
+  getEditor: (activate=false,reset=false)->
+    if activate is true
+      @activate 1, (activator,previous,current)=>
+        current.reset()
+
+    _.last(@components)
+
+  beforeRender: ()->
+    @$el.addClass("#{ @resource }-manager")
+    Luca.containers.CardView::beforeRender?.apply @, arguments
+    
+    @$el.addClass("#{ @resource } record-manager")
+    @$el.data('resource', @resource)
+
+    $(@getGrid().el).addClass("#{ @resource } record-manager-grid")
+    $(@getFilter().el).addClass("#{ @resource } record-manager-filter")
+    $(@getEditor().el).addClass("#{ @resource } record-manager-editor")
+
+  # This is an example of a best practice from ExtJS
+  # that we incorporate in Luca, which is that container
+  # components are responsible for component communication.
+  #
+  # child components should not be aware of other components
+  # in the layout.  Their parents should be responsible for 
+  # controlling how they interact.  listening to events on one,
+  # changing state, inducing effects in the others
+  afterRender: ()->
+    Luca.containers.CardView::afterRender?.apply @, arguments 
+
+    manager = @
+    grid = @getGrid()
+    filter = @getFilter()
+    editor = @getEditor()
+    collection = @getCollection()
+   
+    # when a row is double clicked on the grid
+    # then we edit that row
+    grid.bind "row:double:click", (grid,model,index)->
+      manager.getEditor(true)
+      editor.loadModel( model )
+
+    editor.bind "before:submit", ()=>
+      $('.form-view-flash-container', @el).html('')
+      $('.form-view-body', @el).spin("large")
+
+    editor.bind "after:submit", ()=>
+      $('.form-view-body', @el).spin(false)
+    
+    editor.bind "after:submit:fatal_error", ()=>
+      $('.form-view-flash-container', @el ).append "<li class='error'>There was an internal server error saving this record.  Please contact developers@benchprep.com to report this error.</li>"
+      $('.form-view-body', @el).spin(false)
+
+    editor.bind "after:submit:error", (form, model, response)=>
+      _( response.errors ).each (error)=>
+        $('.form-view-flash-container', @el ).append "<li class='error'>#{ error }</li>"
+    
+    editor.bind "after:submit:success", (form, model, response)=>
+      $('.form-view-flash-container', @el).append "<li class='success'>Successfully Saved Record</li>"
+      
+      model.set( response.result )
+      form.loadModel( model )
+
+      grid.refresh()
+
+      _.delay ()=>
+        $('.form-view-flash-container li.success', @el).fadeOut(1000)
+        $('.form-view-flash-container', @el).html('')
+      , 4000
+    
+    filter.eachComponent (component)=>
+      try
+        component.bind "on:change", @filter_handler
+      catch e
+        undefined
+  
+  firstActivation: ()->
+    @getGrid().trigger "first:activation", @, @getGrid()
+    @getFilter().trigger "first:activation", @, @getGrid()
+
+  reload: ()->
+    manager = @
+
+    grid = @getGrid()
+    filter = @getFilter()
+    editor = @getEditor()
+    
+    # refresh the select fields in the filter
+    filter.clear()
+
+    grid.applyFilter()
+  
+  manageRecord: (record_id)->
+    model = @getCollection().get(record_id)
+    return @loadModel(model) if model
+    
+    console.log "Could Not Find Model, building and fetching"
+
+    model = @buildModel()
+    model.set({id:record_id},{silent:true})
+
+    model.fetch
+      success: (model,response)=>
+        @loadModel(model)
+
+  loadModel: (@current_model)->
+    @getEditor(true).loadModel( @current_model )
+    @trigger "model:loaded", @current_model
+
+  currentModel: ()->
+    @getEditor(false).currentModel()
+
+  buildModel: ()->
+    editor = @getEditor(false)
+    collection = @getCollection()
+
+    collection.add([{}], silent:true, at: 0)
+
+    model = collection.at(0)
+
+  createModel: ()->
+    @loadModel(@buildModel())
+
+  ##### DOM Event Handlers 
+  reset_filter_handler: (e)->
+    @getFilter().clear()
+    @getGrid().applyFilter( @getFilter().getValues() )
+
+  filter_handler: (e)->
+    @getGrid().applyFilter( @getFilter().getValues() )
+
+  edit_handler: (e)->
+    me = my = $( e.currentTarget )
+    record_id = my.parents('tr').data('record-id')
+  
+    if record_id
+      model = @getGrid().collection.get( record_id )
+
+    model ||= @getGrid().collection.at( row_index )
+
+
+  add_handler: (e)->
+    me = my = $( e.currentTarget )
+    resource = my.parents('.record-manager').eq(0).data('resource')
+
+  destroy_handler: (e)->
+    #destroy handler
+
+  back_to_search_handler: ()->
+    # search handler

data/src/components/router.coffee

@@ -0,0 +1,34 @@
+Luca.Router = Backbone.Router.extend
+  routes:
+    "" : "default"
+
+  initialize: (@options)->
+    _.extend @, @options
+
+    @routeHandlers = _( @routes ).values()
+
+    # when a route handler is fired, the route:route_name event is triggered by the router
+    # unfortunately this doesn't apply to calls to @navigate() so we override Backbone.Router.navigate
+    # and trigger an event separately.
+    _( @routeHandlers ).each (route_id) =>
+      @bind "route:#{ route_id }", ()=>
+        @trigger.apply @, ["change:navigation", route_id  ].concat( _( arguments ).flatten() )
+
+  #### Router Functions
+
+  # Intercept calls to Backbone.Router.navigate so that we can at least
+  # build a path from the route, even if we don't trigger the route handler
+  navigate: (route, triggerRoute=false)->
+    Backbone.Router.prototype.navigate.apply @, arguments
+    @buildPathFrom( Backbone.history.getFragment() )
+
+  # given a url fragment, construct an argument chain similar to what would be
+  # emitted from a normal route:#{ name } event that gets triggered
+  # when a route is actually fired.  This is used to trap route changes that happen
+  # through calls to @navigate()
+  buildPathFrom: (matchedRoute)->
+    _(@routes).each (route_id, route)=>
+      regex = @_routeToRegExp(route)
+      if regex.test(matchedRoute)
+        args = @_extractParameters(regex, matchedRoute)
+        @trigger.apply @, ["change:navigation", route_id].concat( args )

data/src/components/template.coffee

@@ -0,0 +1,19 @@
+Luca.components.Template = Luca.View.extend
+  initialize: (@options={})->
+    Luca.View::initialize.apply @, arguments
+    throw "Templates must specify which template / markup to use" unless @template or @markup
+
+    if _.isString(@templateContainer)
+      @templateContainer = eval("(window || global).#{ @templateContainer }")
+
+  templateContainer: "Luca.templates"
+
+  beforeRender: ()->
+    @templateContainer = JST if _.isUndefined( @templateContainer) 
+    @$el.html(@markup || @templateContainer[ @template ](@options) )
+
+  render: ()->
+    $(@container).append( @$el )
+
+
+Luca.register "template", "Luca.components.Template"