lanes 0.1.9.5 → 0.3.0

data/client/lanes/components/grid/CellStyles.coffee

@@ -0,0 +1,20 @@
+class Lanes.Components.Grid.CellStyles
+
+    constructor: (fields) ->
+        @styles = []
+        @classes = []
+        @visibleIndexes = []
+        @props = []
+
+        for f, i in fields.models
+            continue unless f.visible
+
+            @styles[i]  = {flex: f.flex}
+            if f.fixedWidth
+                @styles[i].flexBasis = f.fixedWidth
+                @styles[i].flexGrow  = 0
+
+            @classes[i] = _.classnames( 'c', f.textAlign )
+            @visibleIndexes.push(i)
+
+            @props[i] = { className: @classes[i], style: @styles[i] }

data/client/lanes/components/grid/EditingMixin.cjsx

@@ -1,64 +1,124 @@
 Lanes.Components.Grid.EditingMixin = {
 
     propTypes:
-        topOffset: React.PropTypes.number.isRequired
         rowIndex:  React.PropTypes.number.isRequired
-        rowHeight: React.PropTypes.number.isRequired
         onSave:    React.PropTypes.func.isRequired
+        onCancel:  React.PropTypes.func.isRequired
         model:     Lanes.PropTypes.State.isRequired
         query:     Lanes.PropTypes.State.isRequired
         editors:   React.PropTypes.object
-        hideEditor:  React.PropTypes.func.isRequired
+        beforeSave: React.PropTypes.func
+        afterSave: React.PropTypes.func
+        allowDelete: React.PropTypes.bool
+        syncImmediatly: React.PropTypes.oneOfType([
+            React.PropTypes.bool, React.PropTypes.func
+        ])
+    editorTypes:
+        text: (props) ->
+            <input type="text" {...props}
+                onChange={_.partial(@onFieldChange, _, props.field)} />
+        bigdec: (props) ->
+            <LC.NumberInput unstyled {...props} />
+        date: (props) ->
+            <LC.DateTime {...props} inputOnly step={15}
+                onChange={_.partial(@onDateFieldChange, _, props.field)} />
 
-    topOffset: ->
-        @props.topOffset + (@props.rowIndex * @props.rowHeight)
+    displayTypes:
+        bigdec: (props) ->
+            <span>{props.value.toFixed(2)}</span>
+        text: (props) ->
+            <span>{props.value}</span>
+
+    listenNetworkEvents: true
+    getDefaultProps: -> editors: {}
 
     renderControls: ->
+        if @props.allowDelete
+            deleteBtn =
+                <button type="button" className="btn delete" onClick={@deleteRecord}>
+                    <i className="icon icon-trash" />Delete
+                </button>
+
         <div className="controls">
             <div className="buttons">
-                <button type="button" className="btn cancel" onClick={@props.hideEditor}>
+                <button type="button" className="btn cancel" onClick={@onCancel}>
                     <i className="icon icon-refresh" /> Cancel
                 </button>
+                {deleteBtn}
                 <button type="button" className="btn save" onClick={@saveRecord}>
                     <i className="icon icon-save" />Save
                 </button>
             </div>
         </div>
 
-    getFieldValue: (column) ->
-        @props.model[column.id]
+    getFieldValue: (field) ->
+        @props.model[field.id]
 
-    onFieldChange: (column, ev) ->
-        @props.model[column.id] = ev.target.value
+    onDateFieldChange: (date, field) ->
+        @props.model[field.id] = date
+    onFieldChange: (ev, field) ->
+        @props.model[field.id] = ev.target.value
 
     renderFields: ->
-        @props.query.fields.visible.map @renderField
+        for field, index in @props.query.fields.models when field.visible
+            @renderField(field, index)
 
     renderEditingBody: ->
         if _.isFunction(@renderBody)
             @renderBody()
         else
-            <div className="body">
+            <div className="editing-body">
                 <div className="fields">
                     {@renderFields()}
                 </div>
                 {@renderControls()}
             </div>
 
-    renderField: (column) ->
-        return null unless column.visible
-        control = if @props.editors[column.id]
-            @props.editors[column.id](model: @props.model)
-        else
-            <input type="text"
-                value={@getFieldValue(column)}
-                onChange={_.partial(@onFieldChange, column)} />
-        <div key={column.id} className="field">
-            <label>{column.title}</label>
+    renderEditValue: (props) ->
+        ( @props.editors[props.field.id] ||
+          @editorTypes[props.field.type] ||
+          @editorTypes['text']
+        ).call(this, props)
+
+    renderDisplayValue: (props) ->
+        ( @displayTypes[props.field.type] || @displayTypes['text'] ).call(this, props)
+
+    renderField: (field, index) ->
+        props = _.extend( {
+            index, field, props: @props, name: field.id, value: @getFieldValue(field)
+        }, _.pick(@props, 'model', 'query', 'rowIndex') )
+        control = if field.editable then @renderEditValue(props) else
+            @renderDisplayValue(props)
+
+        <div key={field.id}
+            style = {@props.cellStyles.styles[index]}
+            className = {_.classnames('field', @props.cellStyles.classes[index])}
+        >
+            <label>{field.title}</label>
             {control}
         </div>
 
+    onCancel: ->
+        @props.onCancel(@props.model)
+
+    shouldPerformSync: ->
+        !!Lanes.u.resultsFor(@props, 'syncImmediatly', @props.model)
+
     saveRecord: ->
-        @props.model.save().then (model) =>
-            @props.onSave(model)
+        return if false == @props.beforeSave?(@props.model, @props.rowIndex)
+        if @shouldPerformSync()
+            @props.model.save().then (model) =>
+                @props.onSave(model)
+                @props.afterEdit?(model, @props.rowIndex)
+        else
+            @props.onSave(@props.model)
+            @props.afterEdit?(@props.model, @props.rowIndex)
+
+    deleteRecord: ->
+        if @shouldPerformSync()
+            @props.model.destroy().then (model) =>
+                @props.onSave(model, true)
+        else
+            @props.onSave(@props.model, true)
+
 }

data/client/lanes/components/grid/Editor.cjsx

@@ -0,0 +1,45 @@
+class Lanes.Components.Grid.Editor extends Lanes.React.BaseComponent
+
+    propTypes:
+        onCancel: React.PropTypes.func.isRequired
+
+    getInitialState: ->
+        selectedModel: false
+
+    onEditCancel: (model) ->
+        @props.onCancel(model)
+
+    onEditSave: (model, isDeleted = false) ->
+        if (isDeleted)
+            @props.query.results.removeRow(@state.selectedIndex)
+        else
+            @props.query.results.saveModelChanges(model, @state.selectedIndex)
+        this.hideEditor()
+
+    componentWillReceiveProps: (nextProps) ->
+        if nextProps.editingRowIndex?
+            @setState(
+                selectedIndex: nextProps.editingRowIndex
+                selectedModel: @props.query.results.modelAt(nextProps.editingRowIndex)?.clone()
+            )
+
+    render: ->
+        return null unless @props.editing
+
+        Editor = if true == @props.editor
+            Lanes.Components.Grid.RowEditor
+        else
+            @props.editor
+        <Editor
+            {...@props.editing}
+            {...@props.editorProps}
+            query       = {@props.query}
+            model       = {@props.editing.model}
+            onCancel    = {@onEditCancel}
+            onSave      = {@onEditSave}
+            cellStyles  = {@props.cellStyles}
+            editors     = {@props.columEditors}
+            rowIndex    = {@props.editing.index}
+            rowHeight   = {@props.rowHeight}
+            allowDelete = {@props.allowDelete and @props.commands?.isEditing()}
+        />

data/client/lanes/components/grid/Grid.cjsx

@@ -1,7 +1,12 @@
 ##= require_self
 ##= require ./Toolbar
 ##= require ./RowEditor
+##= require ./PopOverMixin
 ##= require ./PopoverEditor
+##= require ./CellStyles
+##= require ./Header
+##= require ./Body
+##= require ./Selections
 
 class Lanes.Components.Grid extends Lanes.React.Component
 
@@ -13,10 +18,17 @@ class Lanes.Components.Grid extends Lanes.React.Component
         query: 'props'
 
     bindDataEvents:
-        query: 'change execute load'
+        query: 'load change sort'
+
+    getInitialState: ->
+        {}
+
+    componentWillReceiveProps: (nextProps) ->
+        if nextProps.autoLoadQuery and nextProps.query isnt @props.query
+            nextProps.query.ensureLoaded()
 
     propTypes:
-        query:  Lanes.PropTypes.State.isRequired
+        query:  React.PropTypes.instanceOf(Lanes.Models.Query).isRequired
         width:  React.PropTypes.number
         height: React.PropTypes.number
         editor: React.PropTypes.oneOfType([
@@ -25,115 +37,61 @@ class Lanes.Components.Grid extends Lanes.React.Component
         ])
         allowCreate:  React.PropTypes.bool
         columEditors: React.PropTypes.object
+        onColumnClick: React.PropTypes.func
         onSelectionChange: React.PropTypes.func
+        autoLoadQuery: React.PropTypes.bool
+        toolbarChildren: React.PropTypes.oneOfType([
+            React.PropTypes.element,
+            React.PropTypes.arrayOf(React.PropTypes.element)
+        ])
 
     getDefaultProps: ->
-        headerHeight: 50, rowHeight: 30, editorProps: {}
-
-    getInitialState: ->
-        columnWidths: {}, toolbar: !!@props.allowCreate
+        editorProps: {}, autoLoadQuery: true
 
     componentWillMount: ->
-        @query.results.ensureLoaded()
-
-    renderColumns: ->
-        @query.fields.visible.map (f, i) =>
-            <Lanes.Vendor.Grid.Column
-                dataKey={i}
-                columnData={f}
-                align={f.textAlign}
-                isResizable={true}
-                flexGrow={f.flex}
-                label={f.title}
-                width={@state.columnWidths[i] || 10}
-                key={i}
-            />
-
-    onRowClick: (ev, index) ->
-        newIndex = (if @state.selIndex == index then null else index)
-        el = Lanes.u.closestEl(ev.target, 'public_fixedDataTableCell_main')
-        @setState(selIndex: newIndex, editingEl: el)
-        @props.onSelectionChange?(
-            if newIndex? then @query.results.modelAt(newIndex) else null
-        )
-
-    headerHeight: ->
-        @props.headerHeight + ( if @state.toolbar then @props.headerHeight else 0 )
+        @query.ensureLoaded() if @props.autoLoadQuery
 
     onSortChange: (sortInfo) ->
-        @refs.grid.data = _.sorty(sortInfo, @refs.grid.data)
-        @setState(sortInfo: sortInfo, selIndex: undefined)
-
-    getSelected: ->
-        @query.results.modelAt(@state.selIndex) if @state.selIndex?
-
-    rowGetter: (rowIndex) ->
-        @query.results.rowAt(rowIndex, visibleOnly:true)
-
-    width: ->
-        @props.width  || @state.size?.width  || 500
-
-    height: ->
-        @props.height || @state.size?.height || 300
-
-    onColumnResizeEnd: (width, index) ->
-        columnWidths = @state.columnWidths || {}
-        columnWidths[index] = width
-        @setState({columnWidths})
-
-    hideEditor: -> @setState(selIndex: null)
-
-    onEditSave: (model) ->
-        @query.results.saveModelChanges(model)
-        this.hideEditor()
-
-    renderToolbar: ->
-        props = _.clone(@props)
-        props.onAddRecord = =>
-            @query.results.addBlankRow()
-            @setState(selIndex: 0)
-        <Lanes.Components.Grid.Toolbar {...props} />
-
-    renderEditor: ->
-        editor = if true == @props.editor
-            Lanes.Components.Grid.RowEditor
+        for sortConfig in sortInfo
+            sort = @query.fields.at(sortConfig.name).sortBy
+            sortConfig.fn = sort if sort
+
+        @setState(sortInfo: sortInfo, selectedIndex: undefined, selectedModel: undefined)
+
+    startEdit: (editingRowIndex = 0) ->
+        @setState({editingRowIndex})
+        _.defer => @setState({editingRowIndex: null})
+
+    cancelEdit: ->
+        if @state.editing?.model.isNew()
+            @props.query.results.removeRow(@state.editing.index)
+        @setState(editing: null)
+
+    onRowClick: (selectedModel, selectedIndex, position) ->
+        set = (attrs = {}) =>
+            if @props.editor and false isnt @props.commands?.isEditing()
+                @setState(_.extend(attrs, editing: {index: selectedIndex, model: selectedModel, position}))
+        if @props.onSelectionChange
+            osc = @props.onSelectionChange(selectedModel, selectedIndex)
+            if _.isPromise(osc)
+                @setState(is_loading: true)
+                osc.then -> set(is_loading: false)
+            else
+                set()
         else
-            @props.editor
-        React.createElement(editor, _.extend({
-            topOffset  : @headerHeight()
-            grid       : this
-            query      : @query
-            model      : @getSelected()
-            hideEditor : @hideEditor
-            onSave     : @onEditSave
-            editingEl  : @state.editingEl
-            editors    : @props.columEditors
-            rowHeight  : @props.rowHeight
-            rowIndex   : @state.selIndex
-        }, @props.editorProps))
-
-    renderLoading: ->
-        <div className="grid-component">
-            <div className="loading">Loading ...</div>
-        </div>
+            set()
 
     render: ->
-        <LC.Resize onResize={(size) => @setState(size:size)}>
-            <div className="grid-component">
-                {@renderToolbar() if @state.toolbar }
-                {@renderEditor() if @props.editor and @state.selIndex?}
-                <Lanes.Vendor.Grid
-                    ref="grid"
-                    rowsCount={@query.results.length}
-                    rowGetter={@rowGetter}
-                    onRowClick={@onRowClick}
-                    onColumnResizeEndCallback={@onColumnResizeEnd}
-                    rowHeight={@props.rowHeight}
-                    headerHeight={@props.headerHeight}
-                    width={@width()}
-                    height={@height()}
-                >
-                    {@renderColumns()}
-                </Lanes.Vendor.Grid>
-            </div>
-        </LC.Resize>
+        cellStyles = new Lanes.Components.Grid.CellStyles(@query.fields)
+        <div className='grid-component'>
+            <Lanes.Components.Grid.Toolbar {...@props} startEdit={@startEdit} />
+            <Lanes.Components.Grid.Header  {...@props} cellStyles={cellStyles} />
+            <Lanes.Components.Grid.Body
+                {...@props}
+                editing={@state.editing}
+                onEditCancel={@cancelEdit}
+                isLoading={@state.isLoading}
+                cellStyles={cellStyles}
+                onRowClick={@onRowClick if @props.editor or @props.onSelectionChange}
+            />
+        </div>

data/client/lanes/components/grid/Header.cjsx

@@ -0,0 +1,35 @@
+class Lanes.Components.Grid.Header extends Lanes.React.BaseComponent
+
+    propTypes:
+        query: React.PropTypes.instanceOf(Lanes.Models.Query).isRequired
+        cellStyles: React.PropTypes.object.isRequired
+        onColumnClick: React.PropTypes.func
+
+    onColumnClick: (f) ->
+        @props.query.setSortField(f)
+        @props.onColumnClick?(f)
+        @forceUpdate()
+
+    renderHeader: (f, i) ->
+        return unless @props.cellStyles.props[i]
+        sorted = f.sortable and @props.query.sortField is f
+        classNames = _.classnames(
+            sort:  f.sortable
+            asc:   sorted and @props.query.sortAscending
+            desc:  sorted and not @props.query.sortAscending
+            @props.cellStyles.props[i].className
+        )
+        <div key={i}
+            {...@props.cellStyles.props[i]}
+            onClick={_.partial(@onColumnClick, f)}
+            className={classNames}
+        >
+            <span className='l'>{f.title}</span>
+        </div>
+
+    render: ->
+        columns = @props.query.fields.map @renderHeader
+
+        <div className="header">
+            {columns}
+        </div>