lanes 0.5.6 → 0.6.0

data/client/lanes/components/shared/FieldMixin.cjsx

@@ -3,17 +3,17 @@ Lanes.Components.Form || = {}
 
 Lanes.Components.Form.FieldMixin = {
 
-    bindDataEvents: ->
+    registerForPubSub: false
+
+    bindEvents: ->
         model: "change:#{@props.name} remote-update:#{@props.name} invalid-fields invalid-field:#{@getInvalidFieldName()}"
 
     mixins: [
         Lanes.React.Mixins.Access
         Lanes.React.Mixins.ReadEditingState
-
         Lanes.React.Mixins.FieldErrors
     ]
 
-    pubsub: false
     propTypes:
         model:     Lanes.PropTypes.State.isRequired
         name:      React.PropTypes.string.isRequired
@@ -42,11 +42,11 @@ Lanes.Components.Form.FieldMixin = {
     _unsetChangeSet: ->
         @setState(displayChangeset: false, pendingChangeSetDelay: null)
 
-    setDataState: (state, evname) ->
+    setModelState: ->
         displayChangeset = @model.updatingFromChangeset and @model.changedAttributes()[@props.name]
         if displayChangeset and not @state.pendingChangeSetDelay
             pendingChangeSetDelay = _.delay(@_unsetChangeSet, 2000)
-        @setState(_.extend( state, {pendingChangeSetDelay, displayChangeset}))
+        @setState({pendingChangeSetDelay, displayChangeset})
 
     _fieldMixinGetLabelValue: ->
         @getLabelValue?() ||
@@ -69,7 +69,11 @@ Lanes.Components.Form.FieldMixin = {
 
     _fieldMixinRenderFormGroup: (child, props, options) ->
         if (invalidMsg = @fieldInvalidValueMessage())
-            msg = <BS.HelpBlock>{invalidMsg}</BS.HelpBlock>
+            feedback = [
+                <BS.FormControl.Feedback key="feedback" />
+                <BS.HelpBlock key="help">{invalidMsg}</BS.HelpBlock>
+            ]
+
         unless @props.unlabeled
             label =
                 <BS.ControlLabel>
@@ -80,8 +84,7 @@ Lanes.Components.Form.FieldMixin = {
             <BS.FormGroup validationState={options.validationState}>
                 {label}
                 {child}
-                <BS.FormControl.Feedback />
-                {msg}
+                {feedback}
             </BS.FormGroup>
         </BS.Col>
 
@@ -95,13 +98,14 @@ Lanes.Components.Form.FieldMixin = {
     _fieldMixinRenderDisplay: (props) ->
         value = @fieldMixinGetValue()
         value = value.toString() if _.isObject(value)
-
-        <BS.FormControl.Static {...props}>
+        <BS.FormControl.Static>
             {value}
         </BS.FormControl.Static>
 
+
     _fieldMixinRenderNone: (props) ->
-        <span {...props} />
+        clean = LC.Form.FieldMixin.statics.cleanSizeProps(props)
+        <span {...clean} />
 
     renderType: ->
         if @isEditingRecord()
@@ -117,11 +121,18 @@ Lanes.Components.Form.FieldMixin = {
             else
                 ['none', 'None']
     statics:
-        cleanColumnProps: (props) ->
-            _.omit props, 'model', 'label', 'name', 'unlabeled', 'fieldOnly', 'placeholder', 'type'
+        cleanSizeProps: (props, comp = {}) ->
+            Lanes.u.cleanBsSizes( LC.Form.FieldMixin.statics.cleanColumnProps(props, comp) )
+
+        cleanColumnProps: (props, comp, xtra...) ->
+            _.omit( props,  _.keys(comp.constructor.propTypes).concat([
+                'model', 'label', 'name', 'unlabeled', 'fieldOnly', 'placeholder',
+                'commands', 'query', 'editOnly', 'syncOptions', 'labelField', 'type',
+                'selectField', 'idField', 'queryModel', 'choices', 'align'
+            ], xtra))
 
         renderEmptyColumn: (props = @props) ->
-            props = @cleanColumnProps(props)
+            props = @cleanColumnProps(props, @)
             <BS.Col {...props} />
 
     render: ->
@@ -130,7 +141,7 @@ Lanes.Components.Form.FieldMixin = {
 
         hasError = @isFieldValueInvalid()
         options.validationState = 'warning' if hasError
-        props = LC.Form.FieldMixin.statics.cleanColumnProps(@props)
+        props = LC.Form.FieldMixin.statics.cleanColumnProps(@props, @)
 
         props.className = _.classnames(
             _.result(this, 'fieldClassName'),

data/client/lanes/components/shared/FieldSet.cjsx

@@ -17,7 +17,7 @@ class Lanes.Components.FieldSet extends Lanes.React.Component
         @setState(expanded: not @state.expanded)
 
     render: ->
-        colProps = _.omit(@props, 'name')
+        colProps = _.omit(@props, 'name', 'expanded')
         <BS.Col {...colProps}>
             <fieldset className={
                 _.classnames("collapsible", @props.className, @state.icon

data/client/lanes/components/shared/FieldWrapper.cjsx

@@ -20,7 +20,6 @@ class Lanes.Components.FieldWrapper extends Lanes.React.BaseComponent
             {@props.label}
         </BS.ControlLabel>
 
-
     renderType: ->
         if @isEditingRecord()
             if @hasWriteAccess()
@@ -37,8 +36,9 @@ class Lanes.Components.FieldWrapper extends Lanes.React.BaseComponent
 
     render: ->
         [type, child] = @renderType()
+
         props = _.omit(@props,
-            'value', 'model', 'value', 'label', 'name'
+            'value', 'model', 'value', 'label', 'name', 'displayComponent'
         )
         unless child
             Comp = @props.displayComponent

data/client/lanes/components/shared/FormGroup.cjsx

@@ -10,11 +10,11 @@ class Lanes.Components.FormGroup extends Lanes.React.Component
             'right', 'left', 'center'
         ])
 
-    bindDataEvents: ->
+    bindEvents: ->
         model: "invalid-fields invalid-field:#{@getInvalidFieldName()}"
 
     render: ->
-        className = _.classnames(className, @props.className, "field"
+        className = _.classnames(className, @props.className, "lanes-field"
             editing: @props.editing
             "align-#{@props.align}": @props.align
             display: false == @props.editing

data/client/lanes/components/shared/Icon.cjsx

@@ -1,21 +1,48 @@
+DEFAULT_TOOLTIP_PROPS = { placement: 'top', trigger: 'click' }
+
 class Lanes.Components.Icon extends Lanes.React.BaseComponent
 
     propTypes:
-        type: React.PropTypes.string.isRequired
-        animated: React.PropTypes.bool
+        type:         React.PropTypes.string.isRequired
+        animated:     React.PropTypes.bool
+        spinner:      React.PropTypes.bool
+        className:    React.PropTypes.string
+        tooltip:      React.PropTypes.oneOfType([
+            React.PropTypes.string, React.PropTypes.element
+        ])
+        tooltipProps: React.PropTypes.object
 
-    render: ->
+    getInitialState: ->
+        uniqueId: _.uniqueId('icon-tooltip-')
+
+    getDefaultProps: ->
+        tooltipProps: DEFAULT_TOOLTIP_PROPS
 
+    render: ->
         classes = _.classnames 'icon', "icon-#{@props.type}", @props.className,
             'non-printable': @props.noPrint,
             'with-action' : @props.onClick,
             "icon-#{@props.size}" : @props.size,
             'icon-pulse' : @props.animated
+            'icon-spin'  : @props.spin or @props.type is 'spinner'
             'flush'      : @props.flush
             'icon-lg'    : @props['lg']
             'icon-2x'    : @props['2x']
             'icon-3x'    : @props['3x']
             'icon-4x'    : @props['4x']
             'icon-5x'    : @props['5x']
+            'clickable'  : @props.clickable or (@props.tooltip and @props.tooltipProps.trigger is 'click')
+
+        icon =
+            <i style={@props.style} className={classes} />
 
-        <i {...@props} style={@props.style} className={classes} />
+        if @props.tooltip
+            props = _.extend({}, DEFAULT_TOOLTIP_PROPS, @props.tooltipProps)
+            <LC.Tooltip id={@state.uniqueId}
+                content={@props.tooltip}
+                {...props}
+            >
+                {icon}
+            </LC.Tooltip>
+        else
+            icon

data/client/lanes/components/shared/IconButton.cjsx

@@ -0,0 +1,8 @@
+class Lanes.Components.IconButton extends Lanes.React.BaseComponent
+
+    render: ->
+        buttonProps = _.omit(@props, 'icon', 'iconProps')
+        buttonProps.className = _.classnames(buttonProps.className, 'flush')
+        <BS.Button {...buttonProps}>
+            <LC.Icon type={@props.icon} lg {...@props.iconProps} />
+        </BS.Button>

data/client/lanes/components/shared/ImageAsset.cjsx

@@ -7,12 +7,12 @@ class Lanes.Components.ImageAsset extends Lanes.React.Component
             'thumb', 'medium', 'original'
         ]).isRequired
 
-    dataObjects:
+    modelBindings:
         asset: -> @props.model[@props.name]
 
     listenNetworkEvents: true
 
-    bindDataEvents: ->
+    bindEvents: ->
         model: "change:#{@props.name} change:#{@props.name}_data"
 
     handleImageChange: (ev) ->
@@ -30,7 +30,7 @@ class Lanes.Components.ImageAsset extends Lanes.React.Component
         className = _.classnames('image-asset', @props.className, {
             'with-image': @asset.hasImage
         })
-
+        console.log @asset.file_data
         <LC.FieldWrapper
             {...@props}
             className={className}
@@ -39,8 +39,11 @@ class Lanes.Components.ImageAsset extends Lanes.React.Component
             <Component />
             <form>
                 <label className="selector">
-                    <span>{if @asset.hasImage then 'Update' else 'Choose'}</span>
-                    <input id='file' className="file" type="file" onChange={@handleImageChange} />
+                    <span>
+                        {if @asset.hasImage then 'Update' else 'Choose'}
+                    </span>
+                    <input id='file' className="file" type="file"
+                        onChange={@handleImageChange} />
                 </label>
             </form>
         </LC.FieldWrapper>

data/client/lanes/components/shared/IndeterminateCheckbox.cjsx

@@ -0,0 +1,19 @@
+class Lanes.Components.IndeterminateCheckbox extends Lanes.React.Component
+
+    componentDidMount:  -> @updateIndeterminate()
+    componentDidUpdate: -> @updateIndeterminate()
+
+    updateIndeterminate: ->
+        _.dom(@).el.indeterminate =
+            @props.checked isnt true and @props.checked isnt false
+
+    handleCheckboxChange: (ev) ->
+        if ev.target.checked
+            @fieldMixinSetValue( new FakeInputEvent(@props.value) )
+
+    render: ->
+        <input type="checkbox"
+            {...@props}
+            checked={@props.checked}
+            onChange={@props.onChange}
+        />

data/client/lanes/components/shared/InputFieldMixin.cjsx

@@ -7,6 +7,10 @@ Lanes.Components.Form.InputFieldMixin =
     propTypes:
         onlyNumeric:  React.PropTypes.bool
         selctOnFocus: React.PropTypes.bool
+        onEnter: React.PropTypes.func
+
+    focus: ->
+        _.dom(@, 'input').el.focus()
 
     getDefaultProps: ->
         type: 'text'
@@ -33,4 +37,6 @@ Lanes.Components.Form.InputFieldMixin =
         if @props.onEnter         then handlers.onKeyDown = @handleKeyDown
         if @props.selectOnFocus   then handlers.onFocus   = @selectOnFocus
 
+        props = Lanes.u.cleanBsSizes(props)
+
         @renderInputField(props, handlers)

data/client/lanes/components/shared/JobProgress.cjsx

@@ -1,13 +1,14 @@
 class Lanes.Components.JobStatus extends Lanes.React.Component
 
+    registerForPubSub: true
+    listenNetworkEvents: true
+
     propTypes:
         job: Lanes.PropTypes.State
         onlyExecuting: React.PropTypes.bool
         message: React.PropTypes.string
 
-    pubsub: true
-    listenNetworkEvents: true
-    dataObjects: { job: 'props' }
+    modelBindings: { job: 'props' }
     statusMessage: ->
         if _.isEmpty(@job.stepsCompleted) then '' else
             'Completed: ' + _.toSentence(@job.stepsCompleted)

data/client/lanes/components/shared/NetworkActivityOverlay.cjsx

@@ -25,7 +25,7 @@ class Lanes.Components.NetworkActivityOverlay extends Lanes.React.Component
 
     listenNetworkEvents: true
 
-    setDataState: (state) ->
+    setNetworkActivity: (state) ->
         if state.hasError or state.isRequesting
             @installRemoval(state)
         else if not @state.hasError

data/client/lanes/components/shared/ScreenWrapper.cjsx

@@ -5,7 +5,7 @@ class Lanes.Components.ScreenWrapper extends Lanes.React.Component
 
     render: ->
         classes = _.classnames(
-            'screen-wrapper',  @props.identifier,
+            'screen-wrapper',  @props.identifier, @props.className
             'flex-vertically': @props.flexVertical
         )
         <div className={classes} style={@props.style}>

data/client/lanes/components/shared/ToggleField.cjsx

@@ -8,6 +8,7 @@ class Lanes.Components.ToggleField extends Lanes.React.Component
         null
 
     renderDisplay: (props) ->
+        props = Lanes.u.cleanBsSizes(props)
         <Lanes.Vendor.ReactToggle
             {...props}
             checked={!!@props.model[@props.name]}
@@ -15,7 +16,7 @@ class Lanes.Components.ToggleField extends Lanes.React.Component
         />
 
     renderEdit: (props) ->
-
+        props = Lanes.u.cleanBsSizes(props)
         <Lanes.Vendor.ReactToggle
             {...props}
             onChange={@handleToggleChange}

data/client/lanes/components/shared/Tooltip.cjsx

@@ -1,10 +1,18 @@
 class Lanes.Components.Tooltip extends Lanes.React.Component
 
-    TTProps: ['id', 'placement', 'positionLeft', 'positionTop', 'arrowOffsetLeft', 'arrowOffsetTop']
+    TTProps: [
+        'id', 'placement', 'positionLeft', 'positionTop',
+        'arrowOffsetLeft', 'arrowOffsetTop'
+    ]
 
     render: ->
         ttprops = _.pick(@props, @TTProps...)
         tooltip = <BS.Tooltip {...ttprops}>{@props.content}</BS.Tooltip>
-        <BS.OverlayTrigger overlay={tooltip} placement='left' container={@context.viewport.lanes}>
+        <BS.OverlayTrigger
+            overlay={tooltip}
+            placement='left'
+            container={@context.viewport.lanes}
+            {...@props}
+        >
             {@props.children}
         </BS.OverlayTrigger>

data/client/lanes/components/shared/fields.scss

@@ -6,8 +6,13 @@ $lanes-field-margin: 6px;
 
 
 .lanes-field {
-
-    .control-label {display: block;}
+    .form-control {
+        height: inherit;
+    }
+    .control-label {
+        display: block;
+        min-height: 18px;
+    }
 
     &.display {
         .form-group {

data/client/lanes/components/toolbar/RemoteChangeSets.cjsx

@@ -42,10 +42,13 @@ class Lanes.Components.Toolbar.RemoteChangeSets extends Lanes.React.Component
             <i className="icon icon-cloud-download icon-lg" />
             <LC.CountBadge superScript count={@model.changes.length} />
         </span>
-        <BS.Nav navbar pullRight className="changes-notification">
-          <BS.DropdownButton id="record-changes" title={title}>
-              <div className="scroller">
-                  {@model.changes.map (ch) -> <Change key={ch.cid} model={ch} />}
-              </div>
-          </BS.DropdownButton>
-        </BS.Nav>
+
+        <div className="changes-notification">
+            <BS.DropdownButton id="record-changes"
+                title={title}
+            >
+                <div className="scroller">
+                    {@model.changes.map (ch) -> <Change key={ch.cid} model={ch} />}
+                </div>
+            </BS.DropdownButton>
+        </div>

data/client/lanes/components/toolbar/SaveButton.cjsx

@@ -20,8 +20,9 @@ class Lanes.Components.Toolbar.SaveButton extends Lanes.React.Component
         return null unless @props.commands.canEditModel()
         model = @props.commands.getModel()
         text = if model.isNew() then 'Create' else 'Save'
-        classNames = _.classnames('save', 'navbar-btn', 'control', {disabled: !@isSavable(model)})
-        <BS.Button navItem componentClass="button"
-            onClick={@onSave} className={classNames} >
+        classNames = _.classnames('save', 'navbar-btn', 'control',
+            {disabled: !@isSavable(model)}
+        )
+        <BS.NavItem onClick={@onSave} className={classNames}>
             <LC.Icon type="cloud-upload" />{text}
-        </BS.Button>
+        </BS.NavItem>

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

@@ -7,27 +7,21 @@ class Lanes.Components.Toolbar extends Lanes.React.Component
         toggleEdit: Lanes.PropTypes.Model
         commands: React.PropTypes.object.isRequired
 
-    dataObjects:
-        changedModel: -> @props.commands.getModel()
+    modelBindings:
+        model: 'props'
 
-    bindDataEvents:
+    bindEvents:
         changedModel: 'remote-update isSavable'
 
-    renderResetButton: ->
-        <BS.Button navItem componentClass="button"
-            onClick={@props.commands.resetModel} className="reset navbar-btn control">
-            <LC.Icon type="undo" />Reset
-        </BS.Button>
-
     EditToggle: ->
         return null unless @props.commands.canEditModel()
-        <li navItem className="toggle control">
-           <label>
-               <Lanes.Vendor.ReactToggle
-               aria-labelledby="Editing"
-               onChange={@props.commands.toggleEdit}
-               checked={@props.commands.isEditing()} />
-               <span>Edit</span>
+        <li className="toggle control">
+            <label>
+                <Lanes.Vendor.ReactToggle
+                    aria-labelledby="Editing"
+                    onChange={@props.commands.toggleEdit}
+                    checked={@props.commands.isEditing()} />
+                <span>Edit</span>
             </label>
         </li>
 
@@ -37,9 +31,14 @@ class Lanes.Components.Toolbar extends Lanes.React.Component
     render: ->
         <BS.Nav bsStyle="pills" className="lanes-toolbar">
             <Lanes.Components.Toolbar.SaveButton commands={@props.commands} />
-            {@renderResetButton()}
+            <BS.NavItem
+                onClick={@props.commands.resetModel}
+                className="reset navbar-btn control">
+                <LC.Icon type="undo" />Reset
+            </BS.NavItem>
             {@props.children}
-            <div className="spacer"/>
+            <BS.NavItem className="spacer" />
+
             <@EditToggle />
-            <LC.Toolbar.RemoteChangeSets model=@changedModel />
+            <LC.Toolbar.RemoteChangeSets model=@model />
         </BS.Nav>

data/client/lanes/components/toolbar/changes-notification.scss

@@ -22,6 +22,9 @@
     }
 
     .dropdown-menu {
+        width: 300px;
+        right: 0;
+        left: -200px;
         .update {
             border-bottom: 1px solid $table-border-color;
             margin-bottom: 5px;
@@ -45,7 +48,6 @@
                 margin-left: 0.5rem;
                 white-space: nowrap;
                 text-overflow: ellipsis;
-                max-width: 180px;
                 overflow: hidden;
             }
         }

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

@@ -15,8 +15,11 @@
     align-items: center;
     flex-wrap: wrap;
 
-    .btn {
-        &.save {
+
+    .navbar-btn {
+        &.save > a {
+            width: 100%;
+            @extend .btn;
             @extend .btn-primary;
             // the save button needs to be clicable even if disabled
             &.disabled {
@@ -29,7 +32,7 @@
         flex: 1;
     }
     .control {
-        width: 100px;
+        width: 120px;
         margin-right: 10px;
     }
     .arrow {

data/client/lanes/lib/HotReload.coffee

@@ -3,7 +3,7 @@ REACT_CACHE = Object.create(null)
 Lanes.lib.HotReload =
 
     remember: (klass) ->
-        return klass # unless klass::FILE
+        return unless klass::FILE
         path = klass::FILE.path.join("/") + ".js"
         if REACT_CACHE[path]
             return klass

data/client/lanes/lib/all.js

@@ -5,7 +5,7 @@
 //= require ./loader
 //= require ./MakeBaseClass
 //= require ./el
-//= require ./dom-polyfills
+//= require ./polyfills
 //= require ./dom
 //= require ./format
 //= require ./promise_helpers

data/client/lanes/lib/dom.coffee

@@ -15,10 +15,23 @@ class Lanes.lib.Dom
     remove: ->
         @el.parentElement.removeChild(@el)
 
+    focus: ->
+        @el.focus?()
+
     focusAndSelect: ->
         @el.select?()
         @el.focus?()
 
+    setStyle: (style) ->
+        _.extend(@el.style, style)
+
+    on: (evname, fn, useCapture = false) ->
+        if @el.addEventListener
+            @el.addEventListener(evname, fn, useCapture)
+        else if @el.attachEvent
+            @el.attachEvent('on' + evname, fn)
+
+
     closest: (selector) ->
         # Traverse the DOM up with a while loop
         el = @el
@@ -39,7 +52,7 @@ chain = (fn) ->
 
 for name, func of Lanes.Vendor.dom
     Lanes.lib.Dom::[name] = if name.match(/^has/)
-        wrapArg
+        wrapArg(func)
     else
         chain(func)
 

data/client/lanes/lib/format.coffee

@@ -6,6 +6,9 @@ Lanes.u.format.shortDate = (d) ->
 Lanes.u.format.shortDateTime = (d) ->
     _.moment(d).format('lll')
 
+Lanes.u.format.dateTime = (d) ->
+    _.moment(d).format('YYYY-MM-DD hh:mm')
+
 Lanes.u.format.currency = (v) ->
     v ||= '0'
     _.sprintf('%0.2f', parseFloat(v)).replace(/\B(?=(\d{3})+\b)/g, ",")

data/client/lanes/lib/loader.coffee

@@ -88,8 +88,6 @@ class Lanes.lib.AssetLoader
 
 Lanes.lib.RequestAssets = (urls...) ->
     urls = urls[0] if urls.length == 1 && _.isArray(urls[0])
-    for url, i in urls
-        urls[i] = Lanes.config.assets_path_prefix.concat( '/', urls[i] )
     new _.Promise(  (resolve, reject) ->
         new Lanes.lib.AssetLoader(urls, (completed) ->
             failures = _.pick(completed, (status, url) -> !status.success )

data/client/lanes/lib/{dom-polyfills.coffee → polyfills.coffee}

@@ -3,3 +3,6 @@ if Element && !Element.prototype.matches
     proto.matches = proto.matchesSelector ||
         proto.mozMatchesSelector || proto.msMatchesSelector ||
         proto.oMatchesSelector || proto.webkitMatchesSelector
+
+unless _.isFunction(Object.assign)
+    Object.assign = _.extend

data/client/lanes/lib/utilFunctions.coffee

@@ -15,13 +15,11 @@ distillTypes = (type, ns) ->
     _.reduce( type.split( '.' ), ( ( memo, val ) -> return if memo then memo[ val ] else null ),  ns )
 
 Lanes.u = {
-
-    withReactContext: (newContext, fn) ->
-        previousContext = Lanes.Vendor.ReactContext.current
-        Lanes.Vendor.ReactContext.current = _.clone newContext
-        ret = fn()
-        Lanes.Vendor.ReactContext.current = previousContext
-        ret
+    cleanBsSizes: (props) ->
+        _.omit(props,
+            'xs', 'sm', 'md', 'lg',
+            'xsOffset', 'smOffset', 'mdOffset', 'lgOffset'
+        )
 
     makeComparatorUsing: (method) ->
         (a, b) -> Lanes.u.comparator(a[method], b[method])