lanes 0.1.9.5 → 0.3.0

data/client/lanes/components/select-field/styles.scss

@@ -1 +1,20 @@
 @import "lanes/vendor/widgets";
+
+.rw-combobox, .rw-datetimepicker, .rw-numberpicker, .rw-dropdownlist {
+    padding-bottom: 1px; // push down so border isn't covered
+    input { height: 32px; padding: 6px 12px; }
+}
+
+.rw-multiselect-taglist > li {
+    margin: 2px;
+    .rw-tag-btn {
+        margin: 0 3px;
+    }
+}
+
+.rw-dropdownlist {
+    height: 35px;
+    .rw-input{
+        line-height: 34px;
+    }
+}

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

@@ -0,0 +1,45 @@
+class InvalidTag extends Lanes.React.BaseComponent
+
+    mixins: [
+        Lanes.React.Mixins.ReadEditingState
+        Lanes.React.Mixins.FieldErrors
+        Lanes.React.Mixins.Viewport
+    ]
+
+    render: ->
+        return null unless (invalidMsg = @fieldInvalidValueMessage())
+        tooltip =
+            <BS.Tooltip id="error-tooltip">{invalidMsg}</BS.Tooltip>
+        <BS.OverlayTrigger
+            delayShow={300} delayHide={150} container={@context.viewport.lanes}
+            placement="top" overlay={tooltip}
+        >
+            <span ref='target'>
+                <LC.Icon ref='target' type='exclamation-triangle' className='error' />
+            </span>
+        </BS.OverlayTrigger>
+
+class Lanes.Components.ControlLabel extends Lanes.React.Component
+
+    mixins: [
+        Lanes.React.Mixins.ReadEditingState
+        Lanes.React.Mixins.FieldErrors
+    ]
+
+    propTypes:
+        model: Lanes.PropTypes.State
+        invalidMsg: React.PropTypes.string
+    focusInput: (ev) ->
+        _.dom(ev.target).closest('.form-group')
+            .qs('input', raise: false).focusAndSelect()
+    render: ->
+        if @props.titleOnly
+            <span className="label-title-only">
+                {@props.label}
+                <InvalidTag {...@props} />
+            </span>
+        else
+            <label className="control-label" onClick={@focusInput}>
+                <span className="label-title">{@props.label}</span>
+                <InvalidTag {...@props} />
+            </label>

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

@@ -0,0 +1,48 @@
+class Lanes.Components.DateTime extends Lanes.React.Component
+
+    mixins: [
+        Lanes.Components.Form.FieldMixin
+    ]
+    formGroupClass: 'date-time'
+
+    getDefaultProps: ->
+        format: 'ddd, MMM Do YYYY, h:mm a'
+
+    propTypes:
+        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}})
+
+    renderEdit: (label) ->
+        value = @_getValue() or ''
+        props = _.extend({
+            ref:       'control'
+            className: _.classnames('value', changeset: @state.changeset)
+            label:     if @props.unlabeled then false else label
+            value:     value
+            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
+            {...props}
+            className={@formGroupClassNames()}
+            label={label}
+        >
+            <Lanes.Vendor.ReactWidgets.DateTimePicker {...props} />
+        </LC.FormGroup>

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

@@ -0,0 +1,16 @@
+class Lanes.Components.DisplayValue extends Lanes.React.Component
+
+    mixins: [
+        Lanes.Components.Form.FieldMixin
+    ]
+    formGroupClass: 'display'
+
+    renderEdit: (label) ->
+        value = @_getValue()
+        <LC.FormGroup
+            {...@props}
+            className={@formGroupClassNames()}
+            label={@getLabelValue()}
+        >
+            {value}
+        </LC.FormGroup>

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

@@ -2,10 +2,11 @@ Lanes.Components.Form || = {}
 
 Lanes.Components.Form.FieldMixin = {
     bindDataEvents: ->
-        model: "change:#{@props.name} remote-update:#{@props.name}"
+        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
     ]
 
@@ -13,48 +14,78 @@ Lanes.Components.Form.FieldMixin = {
     propTypes:
         model: Lanes.PropTypes.State.isRequired
         name:  React.PropTypes.string.isRequired
-        label: React.PropTypes.string
+        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
 
-    unsetChangeSet: ->
-        @setState(changeset: false) if @isMounted()
+    _getValue: ->
+        if @props.getValue
+            @props.getValue.call(@model, @props)
+        else
+            @model[@props.name]
 
-    setDataState: (state, evname) ->
-        changeset = evname == "changeset"
-        if changeset
-            _.delay(@unsetChangeSet, 2000)
-        @setState  _.extend(state, {changeset: changeset})
+    _setValue: (value) ->
+        if @props.setValue then @props.setValue(value) else @model[@props.name] = value
+
+    componentWillUnmount: ->
+        clearTimeout(@state.pendingChangeSetDelay) if @state.pendingChangeSetDelay
 
+    _unsetChangeSet: ->
+        @setState(displayChangeset: false, pendingChangeSetDelay: null)
+
+    setDataState: (state, evname) ->
+        displayChangeset = @model.updatingFromChangeset and @model.changedAttributes()[@props.name]
+        if displayChangeset
+            pendingChangeSetDelay = _.delay(@_unsetChangeSet, 2000)
+        @setState(_.extend( state, {pendingChangeSetDelay, displayChangeset}))
 
     handleChange: (ev) ->
-        @props.model[@props.name] = ev.target.value
+        if @props.onChange
+            @props.onChange(ev)
+        else
+            @_setValue(ev.target.value)
         null
 
     renderMixinDisplayValue: ->
-        value = @props.model[@props.name] || ""
+        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
         else
-            className = _.classnames(className, "value", changeset: @state.changeset)
-            <BS.Col {...@props}>
-                <div className="form-group">
-                    <label className='field read-only'>
-                        <div className="title">{label}</div>
-                        <div className={className} name={@props.name}>
-                            {value}
-                        </div>
-                    </label>
-                </div>
-            </BS.Col>
+            <LC.FormGroup display {...@props}
+                className={className} label={label}
+            >
+                {value}
+            </LC.FormGroup>
+
+    getLabelValue: ->
+        @props.label || _.titleize _.humanize @props.name
 
     render: ->
         unless @props.unlabeled
-            label = @props.label || _.titleize _.humanize @props.name
+            label =
+                <LC.ControlLabel {...@props} titleOnly
+                    label={@getLabelValue()} />
+
         if @isEditingRecord()
             if @hasWriteAccess()
                 @renderEdit(label)

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

@@ -1,58 +1,35 @@
 class Lanes.Components.FieldSet extends Lanes.React.Component
 
     getDefaultProps: ->
-        speed: 0.4
+        expanded: true
 
     propTypes:
         title: React.PropTypes.string.isRequired
-        speed: React.PropTypes.number
-        collapsed: React.PropTypes.bool
+        expanded: React.PropTypes.bool
 
     getInitialState: ->
-        state = {
-            expanded: !@props.collapsed,
-            icon: if @props.collapsed then 'plus' else 'minus'
-        }
-        state.height = 30 if @props.collapsed
-        state
-
-    getClientHeight: ->
-        _.max(
-            _.pluck(@refs.body.getDOMNode().children, 'clientHeight')
-        ) + 45
+        expanded: @props.expanded
 
+    componentWillReceiveProps: (nextProps) ->
+        @setState(expanded: nextProps.expanded) if nextProps.expanded?
 
     toggleExpanded: ->
-        if @state.expanded
-            if ! @state.hasExpanded
-                @setState( hasExpanded: true, height: @getClientHeight() )
-                _.defer @toggleExpanded
-                return
-            @setState expanded: false, height: 30
-        else
-            @setState expanded: true, height: @getClientHeight()
-
-        _.delay( =>
-            if @isMounted()
-                @setState(icon: if @state.expanded then 'minus' else 'plus')
-        , @props.speed * 1000)
+        @setState(expanded: not @state.expanded)
 
     render: ->
         colProps = _.omit(@props, 'name')
         <BS.Col {...colProps}>
             <fieldset className={
                 _.classnames("collapsible", @props.className, @state.icon
-                {expanded: @state.expanded, collapsed: !@state.expanded})
-            }
-            style={
-                maxHeight: @state.height
-                transition: "max-height #{@props.speed}s ease-in-out";
+                    {expanded: @state.expanded, collapsed: !@state.expanded})
             }>
                 <legend onClick={@toggleExpanded}>
                     {@props.title}
                 </legend>
-                <div ref="body" className="fieldset-fields">
-                    {@props.children}
-                </div>
+                <BS.Collapse in={@state.expanded}>
+                    <div ref="body" className="fieldset-fields">
+                        {@props.children}
+                    </div>
+                </BS.Collapse>
             </fieldset>
         </BS.Col>

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

@@ -0,0 +1,13 @@
+class Lanes.Components.FieldWrapper extends Lanes.React.BaseComponent
+
+    mixins: [
+        Lanes.React.Mixins.ReadEditingState
+    ]
+
+    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>

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

@@ -0,0 +1,37 @@
+class Lanes.Components.FormGroup extends Lanes.React.Component
+
+    mixins: [
+        Lanes.React.Mixins.ReadEditingState
+        Lanes.React.Mixins.FieldErrors
+    ]
+
+    propTypes:
+        align: React.PropTypes.oneOf([
+            'right', 'left', 'center'
+        ])
+
+    bindDataEvents: ->
+        model: "invalid-fields invalid-field:#{@getInvalidFieldName()}"
+
+    render: ->
+        className = _.classnames(className, @props.className, "field"
+            editing: @props.editing
+            "align-#{@props.align}": @props.align
+            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">
+                <LC.ControlLabel {...@props} />
+                <div className="input-group" name={@props.name}>
+                    <div className={valueClassNames}>
+                        {@props.children}
+                    </div>
+                </div>
+            </div>
+        </BS.Col>

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

@@ -0,0 +1,20 @@
+class Lanes.Components.Icon extends Lanes.React.Component
+
+    propTypes:
+        type: React.PropTypes.string.isRequired
+        animated: React.PropTypes.bool
+
+    render: ->
+
+        classes = _.classnames 'icon', "icon-#{@props.type}", @props.className,
+            'cursor-pointer'      : @props.onClick,
+            "icon-#{@props.size}" : @props.size,
+            'icon-pulse' : @props.animated
+            'flush'      : @props.flush
+            'icon-lg'    : @props['lg']
+            'icon-2x'    : @props['2x']
+            'icon-3x'    : @props['3x']
+            'icon-4x'    : @props['4x']
+            'icon-5x'    : @props['5x']
+
+        <i style={@props.style} className={classes} />

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

@@ -0,0 +1,33 @@
+class Lanes.Components.ImageSaver extends Lanes.React.Component
+
+    propTypes:
+        model: Lanes.PropTypes.Model
+        name: React.PropTypes.string.isRequired
+
+    listenNetworkEvents: true
+    bindDataEvents: ->
+        model: "change:#{@props.name} change:#{@props.name}_data"
+
+    uploadImage: ->
+        imageFormData = new FormData()
+        imageFormData.append('imageFile', imageFile)
+
+    handleImageChange: (ev) ->
+        ev.preventDefault()
+        @model.set("#{@props.name}_file", ev.target.files[0])
+
+    renderImage: ->
+        <img className="preview" src={@model.imageUrlFor('logo', 'thumb')} />
+
+    render: ->
+        value = if @model.hasImage(@props.name) then @renderImage() else null
+        className = _.classnames(@props.className, 'image-saver', {'with-image': @model.hasImage(@props.name)})
+        <LC.FieldWrapper {...@props} className={className} value={value}>
+            {value}
+            <form>
+                <label className="selector">
+                    {if value then 'Update' else 'Choose'}
+                    <input id='file' className="file" type="file" onChange={@handleImageChange} />
+                </label>
+            </form>
+        </LC.FieldWrapper>

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

@@ -0,0 +1,19 @@
+class Lanes.Components.Input extends Lanes.React.Component
+
+    mixins: [
+        Lanes.Components.Form.InputFieldMixin
+    ]
+
+    renderInputField: (props, handlers, label) ->
+        if @props.inputOnly then @renderPlain(props, handlers) else @renderStyled(props, handlers, label)
+
+    renderPlain: (props, handlers) ->
+        <input {...props} {...handlers} />
+
+    renderStyled: (props, handlers, label) ->
+        colProps = _.omit(@props, 'name', 'label', 'type', 'editing', 'display')
+
+        colClassName = _.classnames("align-#{@props.align}": @props.align, @formGroupClassNames(), 'field')
+        <BS.Col {...colProps} className={colClassName}>
+            <BS.Input {...props} {...handlers} />
+        </BS.Col>