lanes 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4672ec1ecf5544a9da08b8eb826b5e573987ac7d
-  data.tar.gz: 53fb32ae3e09dec506b5cb9e1a961444c61bb122
+  metadata.gz: 98fcf2619dab60aa9576d6e71d67be4385a56ef6
+  data.tar.gz: a8d42b6cec864bc69e333bff826689378551c033
 SHA512:
-  metadata.gz: a8a6599cce4d9aaa1e0bcea8969636d7d83ecbd6263e4d6a325743af0531287ce74dee0b6fb69577b6607906114fbe4483bf1516be174f3a767279fa53ac65e8
-  data.tar.gz: f5e2136c4240d70c59c7ab485879e075d3600b0f4336e1b7da185823b4bdbcabaddae9abc38361f53b803c8fb4074583500b718df1f1e01db0eecaa6df1b975e
+  metadata.gz: 2e3d155815b2991ab8221bf0faca2e44005e44bcebe4900d9273ed7913d830a971b647faf9ba1002365de6113610a13a9286e876679c572fe5037fbe9f2ccd96
+  data.tar.gz: 7e51bfeecd2a829219816d435f7a636829d0e90f388ec85ff961cdbc9e5e2cbc8ecd4485ec3c0c04a240fdd5d84b7557e61130ed471b3487c6b002d6b25cb237

data/.gitignore

@@ -1,3 +1,4 @@
+.byebug_history
 *.gem
 *.rbc
 .DS_Store

data/client/lanes/Config.coffee

@@ -4,9 +4,11 @@ class SystemSettings extends Lanes.Models.Base
 
     props:
         id:       {type:"integer"}
-        logo:     "file"
         settings: "object"
 
+    associations:
+        logo:  { model: "Lanes.Models.Asset" }
+
     modelTypeIdentifier: -> 'system-settings'
     url: -> Lanes.config.api_path + '/system-settings'
     initialize: ->

data/client/lanes/access/screens/user-management/UserManagement.cjsx

@@ -19,7 +19,7 @@ class Lanes.Access.Screens.UserManagement extends Lanes.React.Screen
                 id="role_names"
                 key="row-select"
                 queryModel={Lanes.Models.User}
-                editOnly multiSelect writable unstyled
+                fieldOnly editOnly multiSelect writable
                 model={model}
                 labelField='name'
                 getSelection={@rolesForUser}
@@ -33,7 +33,7 @@ class Lanes.Access.Screens.UserManagement extends Lanes.React.Screen
         <LC.ScreenWrapper identifier="user-management" flexVertical>
             <h1>Users Management</h1>
             <LC.Grid
-                editorProps={height: 400, syncImmediatly: true}
+                editorProps={height: 350, syncImmediatly: true}
                 query={@state.query}
                 allowCreate
                 editor={Lanes.Access.Screens.UserManagement.Editor}

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

@@ -15,7 +15,6 @@ class Lanes.Components.Grid.Body extends Lanes.React.BaseComponent
         )
         left = ev.clientX - ourBounds.left
         selectedIndex = (if @props.selectedIndex == index then null else index)
-
         selectedModel = if selectedIndex?
             @props.query.results.modelAt(selectedIndex, clone: true)
         else null
@@ -23,6 +22,14 @@ class Lanes.Components.Grid.Body extends Lanes.React.BaseComponent
             {top, left, container: ourBounds, rowHeight: clickBounds.height}
         )
 
+    getDefaultEditingPosition: ->
+        el = _.dom(@).el
+        container = el.getBoundingClientRect()
+        {
+            container, top: 0, left: container.width * 0.4
+            rowHeight: el.querySelector('.r')?.clientHeight || 50
+        }
+
     convertValue: (value, field) ->
         if @fieldConvertors[field.type] then @fieldConvertors[field.type](value) else value
 

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

@@ -16,6 +16,7 @@ Lanes.Components.Grid.EditingMixin = {
 
     editorTypes:
         text: (props) ->
+            props.value ||= ''
             <input type="text" {...props}
                 onChange={_.partial(@onFieldChange, _, props.field)} />
         bigdec: (props) ->
@@ -33,7 +34,8 @@ Lanes.Components.Grid.EditingMixin = {
     listenNetworkEvents: true
     getDefaultProps: -> editors: {}
     componentDidMount: ->
-        _.dom(@).qs('input').focusAndSelect()
+        qs = if @props.initiallyFocusedField then ".field[data-id=\"#{@props.initiallyFocusedField}\"] input" else 'input'
+        _.defer => _.dom(@).qs(qs).focusAndSelect()
 
     renderControls: ->
         if @props.allowDelete
@@ -55,7 +57,7 @@ Lanes.Components.Grid.EditingMixin = {
         </div>
 
     getFieldValue: (field) ->
-        @props.model[field.id]
+        @props.model[field.id] || ''
 
     onDateFieldChange: (date, field) ->
         @props.model[field.id] = date
@@ -94,6 +96,7 @@ Lanes.Components.Grid.EditingMixin = {
             @renderDisplayValue(props)
 
         <div key={field.id}
+            data-id={field.id}
             style = {@props.cellStyles.styles[index]}
             className = {_.classnames('field', @props.cellStyles.classes[index])}
         >

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

@@ -62,7 +62,7 @@ class Lanes.Components.Grid extends Lanes.React.Component
         editing = _.extend({}, options, {
             index: index,
             model: options.model or @props.query.results.modelAt(index)
-            position: options.position or (index * 50)
+            position: options.position || @refs.body.getDefaultEditingPosition()
         })
         set = (attrs = {}) =>
             if @props.editor and false isnt @props.commands?.isEditing()

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

@@ -22,7 +22,7 @@ Lanes.Components.Grid.PopoverMixin = {
         else
             props.placement = 'right'
             props.positionLeft = position.left
-        props.arrowOffsetTop = Math.min(position.top, (@props.height - 75))
+        props.arrowOffsetTop = Math.min(position.top + 20, (@props.height - 75))
         props.positionTop    = Math.max(5, position.top - props.arrowOffsetTop + (position.rowHeight / 2))
 
         <div className="editor po">

data/client/lanes/components/grid/row-editor.scss

@@ -29,6 +29,12 @@
             &.center input { text-align: center; }
             &.right  input { text-align: right;  }
         }
+        .lanes-field, .form-group {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            margin: 0;
+        }
     }
     .controls .buttons {
         background: $editor-background;

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

@@ -14,7 +14,7 @@
     .header, .r {
         display: flex;
         flex-direction: row;
-
+        min-height: 40px;
         display: flex;
         flex-direction: row;
         .c {

data/client/lanes/components/record-finder/RecordFinder.cjsx

@@ -7,6 +7,10 @@ class Lanes.Components.RecordFinder extends Lanes.React.Component
         commands:    React.PropTypes.object
         onModelSet:  React.PropTypes.func
 
+    mixins: [
+        Lanes.Components.Form.InputFieldMixin
+    ]
+
     contextTypes:
         viewport: Lanes.PropTypes.State.isRequired
 
@@ -43,27 +47,29 @@ class Lanes.Components.RecordFinder extends Lanes.React.Component
             this.loadCurrentSelection()
         null
 
-    getValue: ->
+    getValue: (ev) ->
         value = if @props.parentModel
             @props.parentModel[@props.associationName][@props.name]
         else
             @props.model[@props.name]
         value or ''
 
-    render: ->
-        findIcon = <button className="btn btn-primary icon icon-search icon-lg" onClick={@showFinder}/>
+
+    renderInputField: (props, handlers) ->
+                # editOnly writable
         model = @props.parentModel or @props.model
-        label =
-            <LC.ControlLabel titleOnly {...@props} model={model} />
 
-        <LC.Input
-            ref="input"
-            groupClassName="record-finder"
-            editOnly writable
-            name={@props.query.initialField.id}
-            onKeyPress={@onKeyPress}
-            {...@props}
-            label={label}
-            model={@modelForAccess()}
-            getValue={@getValue}
-            buttonAfter={findIcon} />
+        <BS.InputGroup>
+
+            <BS.FormControl
+                {...props} {...handlers}
+                onChange={@fieldMixinSetValue}
+                value={@getValue()}
+                onKeyPress={@onKeyPress}
+            />
+
+            <BS.InputGroup.Button>
+                <button className="btn btn-primary icon icon-search icon-lg"
+                    onClick={@showFinder} />
+            </BS.InputGroup.Button>
+        </BS.InputGroup>

data/client/lanes/components/select-field/SelectField.cjsx

@@ -18,6 +18,8 @@ class Lanes.Components.SelectField extends Lanes.React.Component
     getDefaultProps: ->
         labelField: 'label', idField: 'id'
 
+    fieldClassName: 'select'
+
     dataObjects:
         query: ->
             src = @props.queryModel or
@@ -31,16 +33,6 @@ class Lanes.Components.SelectField extends Lanes.React.Component
                 ]
             })
 
-    renderDisplayValue: ->
-        value = @getValue()
-        label = if _.isArray(value)
-            _.toSentence( _.map(value, @props.labelField) )
-        else if _.isObject(value)
-            value[@props.labelField]
-        else
-            value
-        <span>{label}</span>
-
     getValue: ->
         return undefined if @state.isOpen and not @props.multiSelect
         return @state.tempDisplayValue if @state.tempDisplayValue
@@ -102,10 +94,23 @@ class Lanes.Components.SelectField extends Lanes.React.Component
     isBusy: ->
         !!(@state.requestInProgress or @query.results.requestInProgress)
 
-    renderEdit: (label) ->
-        props = _.omit(@props, 'label')
-        Component = Lanes.Vendor.ReactWidgets[if @props.multiSelect then 'Multiselect' else 'Combobox']
-        select = <Component
+    renderDisplay: (props) ->
+        value = @getValue()
+        label = if _.isArray(value)
+            _.toSentence( _.map(value, @props.labelField) )
+        else if _.isObject(value)
+            value[@props.labelField]
+        else
+            value
+        <BS.FormControl.Static {...props}>
+            {label}
+        </BS.FormControl.Static>
+
+
+    renderEdit: (props) ->
+        type = if @props.multiSelect then 'Multiselect' else 'Combobox'
+        Component = Lanes.Vendor.ReactWidgets[type]
+        <Component
             ref="select"
             className={@props.className}
             open={@state.isOpen}
@@ -121,16 +126,4 @@ class Lanes.Components.SelectField extends Lanes.React.Component
             onBlur={@onFieldInteraction}
             value={@getValue()}
             {...props}
-            />
-
-
-        if @props.unstyled
-            select
-        else
-            <LC.FormGroup
-                {...@props}
-                className={@formGroupClassNames()}
-                label={@getLabelValue()}
-            >
-                {select}
-            </LC.FormGroup>
+        />

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

@@ -3,7 +3,7 @@ class Lanes.Components.DateTime extends Lanes.React.Component
     mixins: [
         Lanes.Components.Form.FieldMixin
     ]
-    formGroupClass: 'date-time'
+    fieldClassName: 'date-time'
 
     getDefaultProps: ->
         format: 'ddd, MMM Do YYYY, h:mm a'
@@ -12,37 +12,26 @@ class Lanes.Components.DateTime extends Lanes.React.Component
         unlabled: React.PropTypes.bool
         format:   React.PropTypes.string
 
-    renderDisplayValue: ->
-        <span>{_.moment(@model[@props.name]).format(@props.format)}</span>
-
-    getValue: ->
-        @refs.input.getValue()
 
     handleKeyDown: (ev) ->
         @props.onEnter() if ev.key is 'Enter'
 
     handleDateTimeChange: (val) ->
-        @handleChange({target: {value: val}})
+        @fieldMixinSetValue({target: {value: val}})
+
 
-    renderEdit: (label) ->
-        value = @_getValue() or ''
+    renderDisplay: (props) ->
+        <BS.FormControl.Static {...props}>
+            {_.moment(@model[@props.name]).format(@props.format)}
+        </BS.FormControl.Static>
+
+    renderEdit: (props) ->
         props = _.extend({
             ref:       'control'
-            className: _.classnames('value', changeset: @state.changeset)
-            label:     if @props.unlabeled then false else label
-            value:     value
+            value:     @fieldMixinGetValue()
             onChange:  @handleDateTimeChange
         }, @props)
-        if @props.inputOnly then @renderPlain(props) else @renderStyled(props, label)
-
-    renderPlain: (props) ->
-        <Lanes.Vendor.ReactWidgets.DateTimePicker {...props} />
 
-    renderStyled: (props, label) ->
-        <LC.FormGroup
+        <Lanes.Vendor.ReactWidgets.DateTimePicker
             {...props}
-            className={@formGroupClassNames()}
-            label={label}
-        >
-            <Lanes.Vendor.ReactWidgets.DateTimePicker {...props} />
-        </LC.FormGroup>
+        />

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

@@ -3,14 +3,9 @@ class Lanes.Components.DisplayValue extends Lanes.React.Component
     mixins: [
         Lanes.Components.Form.FieldMixin
     ]
-    formGroupClass: 'display'
+    fieldClassName: 'display-value'
 
-    renderEdit: (label) ->
-        value = @_getValue()
-        <LC.FormGroup
-            {...@props}
-            className={@formGroupClassNames()}
-            label={@getLabelValue()}
-        >
-            {value}
-        </LC.FormGroup>
+    renderEdit: (props) ->
+        <BS.FormControl.Static {...props}>
+            {@fieldMixinGetValue()}
+        </BS.FormControl.Static>

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

@@ -1,38 +1,40 @@
 Lanes.Components.Form || = {}
 
+
 Lanes.Components.Form.FieldMixin = {
+
     bindDataEvents: ->
         model: "change:#{@props.name} remote-update:#{@props.name} invalid-fields invalid-field:#{@getInvalidFieldName()}"
 
     mixins: [
         Lanes.React.Mixins.Access
-        Lanes.React.Mixins.FieldErrors
         Lanes.React.Mixins.ReadEditingState
+
+        Lanes.React.Mixins.FieldErrors
     ]
 
     pubsub: false
     propTypes:
-        model: Lanes.PropTypes.State.isRequired
-        name:  React.PropTypes.string.isRequired
+        model:     Lanes.PropTypes.State.isRequired
+        name:      React.PropTypes.string.isRequired
+        unlabeled: React.PropTypes.bool
+        fieldOnly: React.PropTypes.bool
+        onChange:  React.PropTypes.func
+        unstyled:  React.PropTypes.bool
+        getValue:  React.PropTypes.func
+        setValue:  React.PropTypes.func
         align: React.PropTypes.oneOf([
             'right', 'left', 'center'
         ])
         label: React.PropTypes.oneOfType([
             React.PropTypes.string, React.PropTypes.element
         ])
-        onChange: React.PropTypes.func
-        unstyled: React.PropTypes.bool
-        getValue: React.PropTypes.func
-        setValue: React.PropTypes.func
-
-    _getValue: ->
-        if @props.getValue
-            @props.getValue.call(@model, @props) or ''
-        else
-            @model[@props.name] or ''
 
-    _setValue: (value) ->
-        if @props.setValue then @props.setValue(value) else @model[@props.name] = value
+    fieldMixinSetValue: (ev) ->
+        if @props.onChange
+            @props.onChange(ev)
+        unless true is ev.isDefaultPrevented?()
+            @model[@props.name] = ev.target.value
 
     componentWillUnmount: ->
         clearTimeout(@state.pendingChangeSetDelay) if @state.pendingChangeSetDelay
@@ -42,61 +44,110 @@ Lanes.Components.Form.FieldMixin = {
 
     setDataState: (state, evname) ->
         displayChangeset = @model.updatingFromChangeset and @model.changedAttributes()[@props.name]
-        if displayChangeset
+        if displayChangeset and not @state.pendingChangeSetDelay
             pendingChangeSetDelay = _.delay(@_unsetChangeSet, 2000)
         @setState(_.extend( state, {pendingChangeSetDelay, displayChangeset}))
 
-    handleChange: (ev) ->
-        if @props.onChange
-            @props.onChange(ev)
+    _fieldMixinGetLabelValue: ->
+        @getLabelValue?() ||
+            @props.label ||
+            _.titleize _.humanize @props.name
+
+    fieldMixinGetValue: ->
+        value = if @props.getValue
+            @props.getValue.call(@model, @props)
+        else if @props.value?
+            @props.value
+        else if @getValue
+            @getValue()
         else
-            @_setValue(ev.target.value)
-        null
-
-    renderMixinDisplayValue: ->
-        value = @_getValue() || ""
-        value = String(value) if _.isObject(value) or not value
-        <span>{value}</span>
-
-    formGroupClassNames: ->
-        _.classnames( _.result(this, 'formGroupClass'), {
-            changeset: @state.displayChangeset
-        })
-
-    _mixinRenderValue: (label, className) ->
-        value = (@renderDisplayValue || @renderMixinDisplayValue)?()
-        className = _.classnames(@props.className, className, @formGroupClassNames(), {
-            "align-#{@props.align}": @props.align
-        })
-        if @props.unstyled
-            value
+            @model[@props.name]
+        if _.isBlank(value)
+            ''
         else
-            <LC.FormGroup display {...@props}
-                className={className} label={label}
-            >
-                {value}
-            </LC.FormGroup>
-
-    getLabelValue: ->
-        @props.label || _.titleize _.humanize @props.name
+            value
 
-    render: ->
+    _fieldMixinRenderFormGroup: (child, props, options) ->
+        if (invalidMsg = @fieldInvalidValueMessage())
+            msg = <BS.HelpBlock>{invalidMsg}</BS.HelpBlock>
         unless @props.unlabeled
             label =
-                <LC.ControlLabel {...@props} titleOnly
-                    label={@getLabelValue()} />
-
+                <BS.ControlLabel>
+                    {@_fieldMixinGetLabelValue()}
+                </BS.ControlLabel>
+
+        <BS.Col {...props}>
+            <BS.FormGroup validationState={options.validationState}>
+                {label}
+                {child}
+                <BS.FormControl.Feedback />
+                {msg}
+            </BS.FormGroup>
+        </BS.Col>
+
+    _fieldMixinRenderEdit: (props) ->
+        <BS.FormControl
+            type={@props.type || "text"}
+            value={@fieldMixinGetValue()}
+            {...props}
+        />
+
+    _fieldMixinRenderDisplay: (props) ->
+        value = @fieldMixinGetValue()
+        value = value.toString() if _.isObject(value)
+
+        <BS.FormControl.Static {...props}>
+            {value}
+        </BS.FormControl.Static>
+
+    _fieldMixinRenderNone: (props) ->
+        <span {...props} />
+
+    renderType: ->
         if @isEditingRecord()
             if @hasWriteAccess()
-                @renderEdit(label)
+                ['edit', 'Edit']
             else if @hasReadAccess()
-                (@renderReadOnly || @_mixinRenderValue)(label, "read-only")
+                ['read-only', 'Display']
             else
-                <span />
+                ['none', 'None']
         else
             if @hasReadAccess()
-                (@renderDisplay || @_mixinRenderValue)(label, "display")
+                ['display', 'Display']
             else
-                <span/>
+                ['none', 'None']
+    statics:
+        cleanColumnProps: (props) ->
+            _.omit props, 'model', 'label', 'name', 'unlabeled', 'fieldOnly', 'placeholder', 'type'
+
+        renderEmptyColumn: (props = @props) ->
+            props = @cleanColumnProps(props)
+            <BS.Col {...props} />
+
+    render: ->
+        [type, method] = @renderType()
+        options = {}
+
+        hasError = @isFieldValueInvalid()
+        options.validationState = 'warning' if hasError
+        props = LC.Form.FieldMixin.statics.cleanColumnProps(@props)
+
+        props.className = _.classnames(
+            _.result(this, 'fieldClassName'),
+            'lanes-field', type, props.className,
+            ( if @props.align then "align-#{@props.align}" else null),
+            {
+                changeset: @state.displayChangeset
+                'has-error': hasError
+            }
+        )
+
+        field = (@[ "render#{method}" ] || @["_fieldMixinRender#{method}"])(
+            if @props.fieldOnly then props else _.omit(props, 'className')
+        )
+        if @props.fieldOnly
+            field
+        else
+            ( @['renderFormGroup'] || @['_fieldMixinRenderFormGroup'] )(field, props, options)
 
 }

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

@@ -1,13 +1,66 @@
 class Lanes.Components.FieldWrapper extends Lanes.React.BaseComponent
 
     mixins: [
+        Lanes.React.Mixins.Access
+        Lanes.React.Mixins.FieldErrors
         Lanes.React.Mixins.ReadEditingState
     ]
+    blankElement: 'span'
+    propTypes:
+        model:    Lanes.PropTypes.State.isRequired
+        unlabeled: React.PropTypes.bool
+        displayComponent: React.PropTypes.any.isRequired
+        label: React.PropTypes.oneOfType([
+            React.PropTypes.string, React.PropTypes.element
+        ])
+
+    renderLabel: ->
+        return null if @props.unlabeled
+        <BS.ControlLabel>
+            {@props.label}
+        </BS.ControlLabel>
+
+
+    renderType: ->
+        if @isEditingRecord()
+            if @hasWriteAccess()
+                ['edit', @props.children]
+            else if @hasReadAccess()
+                ['display']
+            else
+                ['none', @blankElement]
+        else
+            if @hasReadAccess()
+                ['display']
+            else
+                ['none', @blankElement]
 
     render: ->
-        props = _.omit(@props, 'value')
-        isEdit = @isEditingRecord()
-        className = _.classnames(props.className, display: !isEdit)
-        <LC.FormGroup {...props} className={className}>
-            {if isEdit then @props.children else @props.value}
-        </LC.FormGroup>
+        [type, child] = @renderType()
+        props = _.omit(@props,
+            'value', 'model', 'value', 'label', 'name'
+        )
+        unless child
+            Comp = @props.displayComponent
+            child = <Comp props />
+
+        if @isFieldValueInvalid()
+            validationState = 'warning'
+
+        if (invalidMsg = @fieldInvalidValueMessage())
+            msg = <BS.HelpBlock>{invalidMsg}</BS.HelpBlock>
+
+        className = _.classnames( 'lanes-field', type, @props.className
+            ( if @props.align then "align-#{@props.align}" else null),
+        )
+
+        <BS.Col {...props} className={className}>
+            <BS.FormGroup validationState={validationState}>
+                <BS.ControlLabel>
+                {@renderLabel()}
+                </BS.ControlLabel>
+                {child}
+                <BS.FormControl.Feedback />
+                {msg}
+            </BS.FormGroup>
+        </BS.Col>

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

@@ -20,18 +20,13 @@ class Lanes.Components.FormGroup extends Lanes.React.Component
             display: false == @props.editing
             'has-error': @isFieldValueInvalid()
         )
-
         colProps = _.omit(@props, 'name', 'label', 'type', 'editing', 'display')
         valueClassNames = _.classnames('value', {
             "align-#{@props.align}": @props.align
         })
         <BS.Col {...colProps} className={className}>
-            <div className="form-group">
+            <BS.FormGroup className={valueClassNames}>
                 <LC.ControlLabel {...@props} />
-                <div className="input-group" name={@props.name}>
-                    <div className={valueClassNames}>
-                        {@props.children}
-                    </div>
-                </div>
-            </div>
+                {@props.children}
+            </BS.FormGroup>
         </BS.Col>