lanes 0.1.9 → 0.1.9.5

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

@@ -0,0 +1,139 @@
+##= require_self
+##= require ./Toolbar
+##= require ./RowEditor
+##= require ./PopoverEditor
+
+class Lanes.Components.Grid extends Lanes.React.Component
+
+    mixins: [
+        Lanes.React.Mixins.MonitorSize
+    ]
+
+    dataObjects:
+        query: 'props'
+
+    bindDataEvents:
+        query: 'change execute load'
+
+    propTypes:
+        query:  Lanes.PropTypes.State.isRequired
+        width:  React.PropTypes.number
+        height: React.PropTypes.number
+        editor: React.PropTypes.oneOfType([
+            React.PropTypes.func
+            React.PropTypes.bool
+        ])
+        allowCreate:  React.PropTypes.bool
+        columEditors: React.PropTypes.object
+        onSelectionChange: React.PropTypes.func
+
+    getDefaultProps: ->
+        headerHeight: 50, rowHeight: 30, editorProps: {}
+
+    getInitialState: ->
+        columnWidths: {}, toolbar: !!@props.allowCreate
+
+    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 )
+
+    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
+        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>
+
+    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>

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

@@ -0,0 +1,28 @@
+##= require ./EditingMixin
+
+Lanes.Components.Grid.PopoverMixin = {
+
+    mixins: [
+        Lanes.Components.Grid.EditingMixin
+    ]
+
+    renderPopover: (child) ->
+        props = if @props.editingEl
+            xpos = @props.editingEl.offsetLeft + this.props.editingEl.scrollWidth / 2
+            if @props.editingEl.offsetLeft + 20 > @props.grid.width() / 2
+                { placement: 'left', positionLeft: @props.editingEl.offsetLeft }
+            else
+                { placement: 'right', positionLeft: @props.editingEl.offsetLeft + (this.props.editingEl.offsetWidth / 2) }
+        else
+            { placement: 'right', positionLeft: 200 }
+        <div className="editor po">
+            <BS.Popover
+                {...props}
+                positionTop={@topOffset() - 100}
+                arrowOffsetTop={100 + @props.rowHeight / 2}
+                title = "Edit #{@model.name || 'Record'}"
+            >
+                {@renderEditingBody()}
+            </BS.Popover>
+        </div>
+}

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

@@ -0,0 +1,8 @@
+class Lanes.Components.Grid.PopoverEditor extends Lanes.React.Component
+
+    mixins: [
+        Lanes.Components.Grid.PopOverMixin
+    ]
+
+    render: ->
+        @renderPopover()

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

@@ -0,0 +1,10 @@
+##= require ./EditingMixin
+
+class Lanes.Components.Grid.RowEditor extends Lanes.React.Component
+
+    mixins: [Lanes.Components.Grid.EditingMixin]
+
+    render: ->
+        <div className="editor row" style={top: @topOffset() - 3}>
+            {@renderEditingBody()}
+        </div>

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

@@ -0,0 +1,14 @@
+class Lanes.Components.Grid.Toolbar extends Lanes.React.Component
+
+    propTypes:
+        addRecord: React.PropTypes.func
+
+    addButton: ->
+        <BS.Button className="navbar-btn" onClick={@props.onAddRecord} bsSize='small'>
+            Add Row
+        </BS.Button>
+
+    render: ->
+        <BS.Navbar className="toolbar">
+            {@addButton() if @props.onAddRecord}
+        </BS.Navbar>

data/client/lanes/components/grid/config.json

@@ -1,3 +1,3 @@
 {
-    "depends": ["popover"]
+
 }

data/client/lanes/components/grid/editors.scss

@@ -1,65 +1,106 @@
-$editor-chome-color: $navbar-inverse-color;
+// Only to be included from grid/styles
 
-.grid-row-editor {
-  position: absolute;
+$editor-background: #e6e6e6;
+$editor-border-color: #a8a8a8;
+$editor-border: 1px solid $editor-border-color;
+.editor {
 
-  form {
-    background-color: $editor-chome-color;
-    .edit {
-      position: absolute;
-      &:first-child {
-        margin-left: 4px;
-      }
+    .controls {
+        text-align: center;
+        position: relative;
+        overflow: visible;
+        .buttons {
+            width: 200px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+        }
     }
+    // common styles shared between row, popover and other editors
+    .fields {
+        display: flex;
 
-  }
-  .edit {
-    margin-top: 6px;
-  }
+        .field {
+            box-sizing: border-box;
+            margin: 3px;
+            flex: 1;
+            justify-content: center;
+            display: flex;
+            flex-direction: column;
+            > input {
+                width: 100%;
+                height: 35px;
+                border-radius: 5px;
+            }
+        }
+        input {
+            padding: 0 5px;
+        }
 
-  .controls {
-    text-align: center;
-    position: relative;
-    height: 0px;
-    overflow: visible;
-    .buttons {
-      background-color: $editor-chome-color;
-      display: inline-block;
-      padding: 2px 8px 8px;
-      position: relative;
-      border-bottom-left-radius: 7px;
-      border-bottom-right-radius: 7px;
+    }
 
-      // http://css-tricks.com/better-tabs-with-round-out-borders/
-      &:before,
-      &:after {
-        border: 1px solid $editor-chome-color;
+    // The row editor
+    &.row {
         position: absolute;
-        top: -1px;
-        width: 7px;
-        height: 6px;
-        content: " ";
-      }
-      &:before {
-        left: -7px;
-        border-top-right-radius: 6px;
-        border-width: 1px 1px 0px 0px;
-        box-shadow: 3px 0px 0px $editor-chome-color;
-      }
-      &:after {
-        right: -7px;
-        border-top-left-radius: 6px;
-        border-width: 1px 0px 0px 1px;
-        box-shadow: -3px 0px 0px $editor-chome-color;
-      }
+        width: 100%;
+        right: 25px;
+        left: 5px;
+        z-index:11;
+        min-height: 10px;
+
+        label { display: none; }
 
+        .fields {
+            flex-direction: row;
+            background: $editor-background;
+        }
+        .controls .buttons {
+            background: $editor-background;
+            padding: 2px 8px 8px;
+            position: relative;
+            border-bottom-left-radius: 7px;
+            border-bottom-right-radius: 7px;
 
+            // http://css-tricks.com/better-tabs-with-round-out-borders/
+            &:before,
+            &:after {
+                position: absolute;
+                top: -1px;
+                width: 7px;
+                height: 6px;
+                content: " ";
+            }
+            &:before {
+                left: -7px;
+                border-top-right-radius: 6px;
+                border-width: 1px 1px 0px 0px;
+                box-shadow: 3px 0px 0px $editor-background;
+            }
+            &:after {
+                right: -7px;
+                border-top-left-radius: 6px;
+                border-width: 1px 0px 0px 1px;
+                box-shadow: -3px 0px 0px $editor-background;
+            }
+        }
     }
-  }
-}
+    //Popover editor
+    .popover {
 
-.grid-popover-editor {
-  .buttons {
-    text-align: center;
-  }
+        .fields {
+            flex-direction: column;
+        }
+        label {
+            display: block;
+            font-size: 85%;
+        }
+        input {
+            width: 100%;
+        }
+        .controls {
+            border-top: 1px solid darken($editor-background, 15%);
+            padding-top: 8px;
+            margin-top: 8px;
+        }
+    }
 }

data/client/lanes/components/grid/index.js

@@ -1,8 +1,3 @@
-//= require ./template
-//= require ./row-editor
-//= require ./popover-editor
-//= require ./vendor
+//= require 'lanes/vendor/grid'
 //= require ./Grid
-//= require ./Editor
-//= require ./PopOverEditor
-//= require ./RowEditor
+//= require_tree .

data/client/lanes/components/grid/styles.scss

@@ -1,303 +1,15 @@
-@import "editors";
+@import "lanes/vendor/grid";
 
-.lanes-grid {
-
-  clear: both;
-  margin-top: 6px !important;
-  margin-bottom: 6px !important;
-  max-width: none !important;
-
-
-  .dataTables_processing {
-    position: absolute;
-
-    border: 2px solid $panel-default-border;
-    box-shadow:         3px 3px 5px 6px $table-bg-hover;
-
-    display: block;
-    line-height: 5px;
-    padding: 30px;
-    z-index: 28;
-
-    top: 50%;
-    width: 80%;
-    height: 40px;
-    margin-left: 10%;
-    margin-top: -25px;
-    padding-top: 20px;
-    text-align: center;
-    font-size: 1.2em;
-    background:url(asset_path('images/lanes/ajax-loader.gif')) no-repeat scroll 40% 7px $body-bg;
-  }
-
-
-  div.dataTables_length label {
-    font-weight: normal;
-    float: left;
-    text-align: left;
-  }
-
-  div.dataTables_length select {
-    width: 75px;
-  }
-
-  div.dataTables_filter label {
-    font-weight: normal;
-    float: right;
-  }
-
-  div.dataTables_filter input {
-    width: 16em;
-  }
-
-  div.dataTables_info {
-    padding-top: 8px;
-  }
-
-  div.dataTables_paginate {
-    float: right;
-    margin: 0;
-  }
-
-  div.dataTables_paginate ul.pagination {
-    margin: 2px 0;
-    white-space: nowrap;
-  }
-
-  td, th{
-    &.c {
-      text-align: center;
-    }
-
-    &.r {
-      text-align: right;
-    }
-
-    -webkit-box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-  }
-
-
-  thead .sorting,
-  thead .sorting_asc,
-  thead .sorting_desc,
-  thead .sorting_asc_disabled,
-  thead .sorting_desc_disabled {
-    cursor: pointer;
-  }
-
-  thead .sorting { background: url(image-path('images/lanes/dataTables/sort_both.png')) no-repeat center right; }
-  thead .sorting_asc { background: url(image-path('images/lanes/dataTables/sort_asc.png')) no-repeat center right; }
-  thead .sorting_desc { background: url(image-path('images/lanes/dataTables/sort_desc.png')) no-repeat center right; }
-
-  thead .sorting_asc_disabled { background: url(image-path('images/lanes/dataTables/sort_asc_disabled.png')) no-repeat center right; }
-  thead .sorting_desc_disabled { background: url(image-path('images/lanes/dataTables/sort_desc_disabled.png')) no-repeat center right; }
-
-  thead > tr > th {
-    padding-left: 18px;
-    padding-right: 18px;
-    font-size: 1.1vw;
-    white-space: nowrap;
-
-
-  }
-
-  th:active {
-    outline: none;
-  }
-
-  /* Scrolling */
-  div.dataTables_scrollHead table {
-    margin-bottom: 0 !important;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  div.dataTables_scrollHead table thead tr:last-child th:first-child,
-  div.dataTables_scrollHead table thead tr:last-child td:first-child {
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-  }
-
-  div.dataTables_scrollBody table {
-    border-top: none;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-  }
-
-  div.dataTables_scrollBody tbody tr:first-child th,
-  div.dataTables_scrollBody tbody tr:first-child td {
-    border-top: none;
-  }
-
-  div.dataTables_scrollFoot table {
-    margin-top: 0 !important;
-    border-top: none;
-  }
-
-  /* Frustratingly the border-collapse:collapse used by Bootstrap makes the column
-   width calculations when using scrolling impossible to align columns. We have
-   to use separate
- */
-  table.table-bordered.dataTable {
-    border-collapse: separate !important;
-  }
-  table.table-bordered thead th,
-  table.table-bordered thead td {
-    border-left-width: 0;
-    border-top-width: 0;
-  }
-  table.table-bordered tbody th,
-  table.table-bordered tbody td {
-    border-left-width: 0;
-    border-bottom-width: 0;
-  }
-  table.table-bordered th:last-child,
-  table.table-bordered td:last-child {
-    border-right-width: 0;
-  }
-  div.dataTables_scrollHead table.table-bordered {
-    border-bottom-width: 0;
-  }
-
-  tbody{
-    td{
-      height: 22px;
-    }
-  }
-
-  /*
-   * TableTools styles
-   */
-  .table tbody tr.active td,
-  .table tbody tr.active th {
-    background-color: #08C;
-    color: white;
-  }
-
-  .table tbody tr.active:hover td,
-  .table tbody tr.active:hover th {
-    background-color: #0075b0 !important;
-  }
-
-  .table tbody tr.active a {
-    color: white;
-  }
-
-  .table-striped tbody tr.active:nth-child(odd) td,
-  .table-striped tbody tr.active:nth-child(odd) th {
-    background-color: #017ebc;
-  }
-
-  table.DTTT_selectable tbody tr {
-    cursor: pointer;
-  }
-
-  div.DTTT .btn {
-    color: #333 !important;
-    font-size: 12px;
-  }
-
-  div.DTTT .btn:hover {
-    text-decoration: none !important;
-  }
-
-  ul.DTTT_dropdown.dropdown-menu {
-    z-index: 2003;
-  }
-
-  ul.DTTT_dropdown.dropdown-menu a {
-    color: #333 !important; /* needed only when demo_page.css is included */
-  }
-
-  ul.DTTT_dropdown.dropdown-menu li {
+.grid-component {
     position: relative;
-  }
-
-  ul.DTTT_dropdown.dropdown-menu li:hover a {
-    background-color: #0088cc;
-    color: white !important;
-  }
-
-  div.DTTT_collection_background {
-    z-index: 2002;
-  }
-
-  /* TableTools information display */
-  div.DTTT_print_info.modal {
-    height: 150px;
-    margin-top: -75px;
-    text-align: center;
-  }
-
-  div.DTTT_print_info h6 {
-    font-weight: normal;
-    font-size: 28px;
-    line-height: 28px;
-    margin: 1em;
-  }
-
-  div.DTTT_print_info p {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-
-
-  /*
-   * FixedColumns styles
-   */
-  div.DTFC_LeftHeadWrapper table,
-  div.DTFC_LeftFootWrapper table,
-  div.DTFC_RightHeadWrapper table,
-  div.DTFC_RightFootWrapper table,
-  table.DTFC_Cloned tr.even {
-    background-color: white;
-    margin-bottom: 0;
-  }
-
-  div.DTFC_RightHeadWrapper table ,
-  div.DTFC_LeftHeadWrapper table {
-    margin-bottom: 0 !important;
-    border-top-right-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-  }
-
-  div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
-  div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
-  div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
-  div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-  }
-
-  div.DTFC_RightBodyWrapper table,
-  div.DTFC_LeftBodyWrapper table {
-    border-top: none;
-    margin: 0 !important;
-  }
-
-  div.DTFC_RightBodyWrapper tbody tr:first-child th,
-  div.DTFC_RightBodyWrapper tbody tr:first-child td,
-  div.DTFC_LeftBodyWrapper tbody tr:first-child th,
-  div.DTFC_LeftBodyWrapper tbody tr:first-child td {
-    border-top: none;
-  }
-
-  div.DTFC_RightFootWrapper table,
-  div.DTFC_LeftFootWrapper table {
-    border-top: none;
-  }
 
+    .toolbar {
+        margin-bottom: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 
-  /*
-   * FixedHeader styles
-   */
-  div.FixedHeader_Cloned table {
-    margin: 0 !important
-  }
+    @import "./editors";
 
 
 }