lanes 0.4.0 → 0.5.0

data/client/lanes/components/shared/Helpers.coffee

@@ -3,7 +3,7 @@ Lanes.Components.Helpers = {
     modelLinkFields: (model) ->
         return (field) ->
             onChange: (ev) -> model[field] = ev.target.value
-            value: _.result(model, field)
+            value: _.result(model, field) or ''
 
 
 }

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

@@ -17,4 +17,4 @@ class Lanes.Components.Icon extends Lanes.React.Component
             'icon-4x'    : @props['4x']
             'icon-5x'    : @props['5x']
 
-        <i style={@props.style} className={classes} />
+        <i {...@props} style={@props.style} className={classes} />

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

@@ -0,0 +1,46 @@
+class Lanes.Components.ImageAsset extends Lanes.React.Component
+
+    propTypes:
+        model: Lanes.PropTypes.Model.isRequired
+        name: React.PropTypes.string.isRequired
+        size: React.PropTypes.oneOf([
+            'thumb', 'medium', 'original'
+        ]).isRequired
+
+    dataObjects:
+        asset: -> @props.model[@props.name]
+
+    listenNetworkEvents: true
+
+    bindDataEvents: ->
+        model: "change:#{@props.name} change:#{@props.name}_data"
+
+    handleImageChange: (ev) ->
+        ev.preventDefault()
+        @asset.blob = ev.target.files[0]
+
+    renderImage: ->
+        <img className="preview" src={@asset.thumbnail_url} />
+
+    blankImage: ->
+        null
+
+    render: ->
+        Component = if @asset.hasImage then @renderImage else @blankImage
+        className = _.classnames('image-asset', @props.className, {
+            'with-image': @asset.hasImage
+        })
+
+        <LC.FieldWrapper
+            {...@props}
+            className={className}
+            displayComponent={Component}
+        >
+            <Component />
+            <form>
+                <label className="selector">
+                    <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/Input.cjsx

@@ -5,4 +5,8 @@ class Lanes.Components.Input extends Lanes.React.Component
     ]
 
     renderInputField: (props, handlers) ->
-        <BS.Input standalone {...props} {...handlers} />
+        <BS.FormControl
+            {...props}
+            {...handlers}
+            onChange={@fieldMixinSetValue}
+        />

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

@@ -5,16 +5,12 @@ Lanes.Components.Form.InputFieldMixin =
     ]
 
     propTypes:
-        unlabled:     React.PropTypes.bool
         onlyNumeric:  React.PropTypes.bool
         selctOnFocus: React.PropTypes.bool
 
     getDefaultProps: ->
         type: 'text'
 
-    getValue: ->
-        @refs.input.getValue() or ''
-
     handleKeyDown: (ev) ->
         @props.onEnter() if ev.key is 'Enter'
 
@@ -25,31 +21,16 @@ Lanes.Components.Form.InputFieldMixin =
         @onFieldInteraction()
         @props.onBlur?()
 
-    renderEdit: (label) ->
-        value = @props.value or @_getValue() or ''
-
-        props = _.extend({
-            ref:       'input'
-            className: _.classnames('edit',
-                changeset: @state.changeset
-            )
-            label:     if @props.unlabeled then false else label
-        }, @props, {value: value})
+    renderEdit: (props) ->
+        props = _.extend(props, {
+            ref: 'input'
+            name: @props.name
+            value: @fieldMixinGetValue()
+        })
 
-        handlers = { onBlur: @onFieldBlur, onChange: @handleChange }
+        handlers = { onBlur: @onFieldBlur }
 
-        if @isFieldValueInvalid() then props.bsStyle   = 'error'
         if @props.onEnter         then handlers.onKeyDown = @handleKeyDown
         if @props.selectOnFocus   then handlers.onFocus   = @selectOnFocus
 
-        props = _.omit(props, 'label')
-        field = @renderInputField(props, handlers)
-
-        if props.inputOnly
-            field
-        else
-            label ||= @props.label or _.field2title(@props.name)
-
-            <LC.FormGroup display {...props} label={label}>
-                {field}
-            </LC.FormGroup>
+        @renderInputField(props, handlers)

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

@@ -1,19 +1,26 @@
+class FakeNumberEvent
+    constructor: (value) ->
+        value = if _.isNull(value) then 0 else value
+        @target = {value}
+    isDefaultPrevented: -> false
+
 class Lanes.Components.NumberInput extends Lanes.React.Component
 
     mixins: [
         Lanes.Components.Form.InputFieldMixin
     ]
+
     handleNumberChange: (n) ->
-        value = if _.isNull(n) then 0 else n
-        @handleChange(target: {value})
+        @fieldMixinSetValue( new FakeNumberEvent(n) )
+
+    renderInputField: (props, handlers) ->
 
-    renderInputField: (props, handlers, label) ->
         props.format ||= '#,###.00'
         props = _.omit(props, 'label')
 
         <Lanes.Vendor.ReactWidgets.NumberPicker
             ref="select"
-            className={@props.className}
+
             {...handlers}
             {...props}
             onChange={@handleNumberChange}

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

@@ -1,14 +1,24 @@
+class FakeInputEvent
+    constructor: (value) ->
+        @target = {value}
+    isDefaultPrevented: -> false
+
+
 class Lanes.Components.RadioField extends Lanes.React.Component
 
     mixins: [
         Lanes.Components.Form.FieldMixin
     ]
 
-    renderEdit: ->
-        <BS.Col {...@props}>
-            <BS.Input
-                type="radio"
-                checked={@props.checked? || @props.value == @model[@props.name]}
-                onChange={@handleChange}
-                {...@props} />
-        </BS.Col>
+    handleRadioChange: (ev) ->
+        if ev.target.checked
+            @fieldMixinSetValue( new FakeInputEvent(@props.value) )
+
+    renderEdit: (props, handlers) ->
+        <BS.FormControl
+            {...props}
+            {...handlers}
+            type="radio"
+            checked={@props.checked? || @props.value == @model[@props.name]}
+            onChange={@handleRadioChange}
+        />

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

@@ -8,6 +8,6 @@ class Lanes.Components.ScreenWrapper extends Lanes.React.Component
             'screen-wrapper',  @props.identifier,
             'flex-vertically': @props.flexVertical
         )
-        <div className={classes}>
+        <div className={classes} style={@props.style}>
             {@props.children}
         </div>

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

@@ -0,0 +1,15 @@
+class Lanes.Components.TextArea extends Lanes.React.Component
+
+    mixins: [
+        Lanes.Components.Form.InputFieldMixin
+    ]
+
+    renderInputField: (props, handlers) ->
+        className = _.classnames(props.className, 'form-control')
+        <textarea
+            {...props}
+            {...handlers}
+            {..._.pick(@props, 'placeholder')}
+            className={className}
+            onChange={@fieldMixinSetValue}
+        />

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

@@ -1,31 +1,23 @@
 class Lanes.Components.ToggleField extends Lanes.React.Component
     mixins: [ Lanes.Components.Form.FieldMixin ]
 
-    formGroupClass: 'toggle'
+    fieldClassName: 'toggle'
 
-    renderDisplayValue: ->
+    handleToggleChange: (ev) ->
+        @props.model[@props.name] = ev.target.checked
+        null
+
+    renderDisplay: (props) ->
         <Lanes.Vendor.ReactToggle
+            {...props}
             checked={!!@props.model[@props.name]}
             disabled={true}
         />
 
-    handleToggleChange: (ev) ->
-        @props.model[@props.name] = ev.target.checked
-        null
+    renderEdit: (props) ->
 
-    renderEdit: (label) ->
-        props = _.omit(@props, 'label')
-        toggle = <Lanes.Vendor.ReactToggle
+        <Lanes.Vendor.ReactToggle
+            {...props}
             onChange={@handleToggleChange}
             checked={!!@props.model[@props.name]}
-            />
-        if @props.unstyled
-            toggle
-        else
-            <LC.FormGroup
-                {...props}
-                className={@formGroupClassNames()}
-                label={label}
-            >
-                {toggle}
-            </LC.FormGroup>
+        />

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

@@ -3,51 +3,37 @@
 
 $lanes-field-margin: 6px;
 
-label.field {
-    display: block;
-}
-.field {
-    font-weight: normal;
-    .input-group {
-        font-weight: normal;
-        width: 100%;
-    }
+
+
+.lanes-field {
+
+    .control-label {display: block;}
+
     &.display {
-        .input-group {
-            display: block;
-        }
-        .value {
-            padding-left: $lanes-field-margin;
-            padding-right: $lanes-field-margin;
-            display: block;
-            height: $lanes-field-value-height;
-            line-height:  $lanes-field-value-height;
+        .form-group {
             border-bottom: 1px solid $input-border;
+            min-height: 57px; // 55 + 1px border
+        }
+        &.toggle {
+            .form-group { border-bottom: 0; }
+            .react-toggle { cursor: inherit; }
         }
 
     }
-    &.edit {
-        // bootstrap styles
-        .value > div > input:only-child {
-            border-top-left-radius: $border-radius-base;
-            border-top-right-radius: $border-radius-base;
-            border-bottom-left-radius: $border-radius-base;
-            border-bottom-right-radius: $border-radius-base;
-        }
+
+    &.align-right{
+        text-align: right;
+        .control-label, .value, .rw-widget input {text-align: right; }
     }
-    &.read-only .input-group {
-        @extend .form-control !optional;
-        padding: 6px 12px;
-        cursor: not-allowed;
+    &.align-center{
+        text-align: center;
+        .control-label, .value, .rw-widget input { text-align: center; }
     }
-    .label {
-        padding: 0;
-        font-size: 85%;
+
+    &.select {
+        .form-control-feedback { right: 30px; }
     }
-    &.read-only .title { margin-bottom: 5px; }
-}
 
-.field, {
     .form-group {
         background-color: rgba(255, 255, 255, 1);
         transition: background-color 1000ms linear;
@@ -63,44 +49,4 @@ label.field {
             background-color: darken($color-rgba, 20%);
         }
     }
-    &.display {
-        &.toggle {
-            .value { border-bottom: 0; }
-            .react-toggle { cursor: inherit; }
-        }
-        &.editing .react-toggle { margin-top: 5px; }
-        .value span {
-            display: inline-block;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            width: 100%;
-        }
-    }
-    .label-title {
-        display: inline-block;
-    }
-    label {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: 100%;
-    }
-    i.error {
-        margin-left: $lanes-field-margin;
-    }
-    .control-label {
-        margin-left: $lanes-field-margin;
-        margin-right: $lanes-field-margin;
-    }
-
-
-}
-
-.align-right{
-    .control-label, .value, .rw-widget input {text-align: right; }
-}
-.align-center{
-    .control-label, .value, .rw-widget input { text-align: center; }
 }

data/client/lanes/components/shared/{image-saver.scss → image-asset.scss}

@@ -1,6 +1,6 @@
 @import "../../styles/bootstrap/buttons";
 
-.image-saver {
+.image-asset {
     &.field {
         .value {
             border-bottom: 0;

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

@@ -2,7 +2,7 @@
 @import "./fieldset";
 @import "./resize-sensor";
 @import "./overlay";
-@import "./image-saver";
+@import "./image-asset";
 @import "./throbber";
 @import "lanes/vendor/styles/toggle";
 @import "lanes/vendor/styles/widgets";

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

@@ -1,10 +1,15 @@
 class Change extends Lanes.React.Component
 
     renderField: (field) ->
+        unless _.isObject(field.from)
+            from = <div className="from">{field.from}</div>
+        unless _.isObject(field.to)
+            to = <div className='to'>{field.to}</div>
+
         <div className='change' key={field.name}>
             <div className="field">{@model.record_name} {_.field2title field.name}:</div>
-            <div className="from">{field.from}</div>
-            <div className='to'>{field.to}</div>
+            {from}
+            {to}
         </div>
 
     render: ->
@@ -12,17 +17,15 @@ class Change extends Lanes.React.Component
             if @model.by?.email
                 <a href={"mailto:#{@model.by.email}"}>{@model.by.name}</a>
             else if @model?.by.name
-                @model.by.name
+                <span>@model.by.name</span>
             else
-                'Unknown User'
-
-        user =
-            <LC.Tooltip id='user-email' placement='left'
-                content={Lanes.Vendor.Moment( @model.created_at ).fromNow()}
-            >{user}</LC.Tooltip>
+                <span>Unknown User</span>
 
         <div className="update">
-            {user}
+            <div className="header">
+                {user}
+                <span className="time">{Lanes.Vendor.Moment( @model.created_at ).fromNow()}</span>
+            </div>
             <div className="changes">
                 {@renderField(change) for change in @model.displayed_changes }
             </div>

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

@@ -24,7 +24,20 @@
     .dropdown-menu {
         .update {
             border-bottom: 1px solid $table-border-color;
-            padding: 0.75rem;
+            margin-bottom: 5px;
+            padding: 5px;
+            &:last-child {
+                margin-bottom: 0;
+                border-bottom: 0;
+            }
+            .header {
+                display: flex;
+                align-items: stretch;
+                justify-content: space-between;
+            }
+            .time {
+                font-size: 80%;
+            }
             .change > div {
                 margin-bottom: 2px;
             }

data/client/lanes/extension/Base.coffee

@@ -1,8 +1,12 @@
 class BaseExtension
 
-    @extended: (klass) ->
+    @afterExtended: (klass) ->
         Lanes.Extensions.register(klass)
 
+    title: ->
+        _.titleize @identifier
+
+
 Lanes.Extensions.Base = Lanes.lib.MakeBaseClass(
     Lanes.Vendor.Ampersand.State, BaseExtension
 )

data/client/lanes/models/Asset.coffee

@@ -0,0 +1,81 @@
+class Lanes.Models.Asset extends Lanes.Models.Base
+
+    props:
+        id:        'integer'
+        order:     'integer'
+        thumbnail: 'object'
+        medium:    'object'
+        original:  'object'
+        metadata:  'object'
+
+    session:
+        data: 'string'
+        blob: 'object'
+        owner: 'object'
+        parent: 'object'
+        parent_association: 'string'
+
+    derived:
+        original_url:
+            deps: ['data', 'original'], fn: ->
+                if @data then @data else @original?.url
+        medium_url:
+            deps: ['data', 'medium'], fn: ->
+                if @data then @data else @medium?.url
+        thumbnail_url:
+            deps: ['data', 'thumbnail'], fn: ->
+                if @data then @data else @thumbnail?.url
+
+        hasImage:
+            deps: ['data', 'original', 'metadata'], fn: ->
+                @metadata?.content_type?.includes?('image')
+    events:
+        'change:blob': 'onBlobChange'
+        'parent:save': 'onParentSave'
+
+    initialize: ->
+        @on('change:parent', =>
+            oldParent = _this. previousAttributes().parent
+            @stopListening(oldParent, 'save', @save) if oldParent
+            @listenTo(@parent, 'save', @save)
+        )
+
+
+    onBlobChange: ->
+        if @blob
+            @metadata ||= {}
+            @metadata.content_type = @blob.type
+            reader = new FileReader()
+            reader.onloadend = (ev) =>
+                @data = reader.result if ev.type is 'loadend'
+            reader.readAsDataURL(@blob)
+
+        else
+            @data = null
+            @mdatadata?.content_type = undefined
+
+
+    save: ->
+        return unless @blob
+
+        form = new FormData()
+        form.append("id", @id) if @id
+        form.append("file", @blob, @blob.name)
+        form.append("owner_type", _.classify(@parent.modelTypeIdentifier()))
+        form.append("owner_id", @parent.getId())
+        form.append("owner_association", @parent_association)
+        form.append("extension_id", @parent.extensionIdentifier())
+
+        url = Lanes.config.api_path + '/asset'
+
+        Lanes.Vendor.xhr.post(url, {body: form}, (err, resp, body) =>
+            @blob = null
+            if err
+                @errors = { http: err.message }
+            else
+                reply = JSON.parse(body)
+                if reply.errors or reply.success is false
+                    @errors = reply.errors
+                else
+                    @set( reply.data )
+        )

data/client/lanes/models/AssociationMap.coffee

@@ -36,7 +36,9 @@ class Lanes.Models.AssocationMap
 
     replace: (parent, name, model) ->
         parent._cache[name] = model
-        model.parent = parent
+        model.parent = parent if model.hasAttribute?('parent') or model.parent?
+        model.parent_association = name if model.hasAttribute?('parent_association') or model.parent_association?
+
         parent.trigger("change", parent, {})
         parent.trigger("change:#{name}", model, {})
 
@@ -58,8 +60,12 @@ class Lanes.Models.AssocationMap
             else
                 new target_class(options)
         else
-            Proxy = association.getProxyFor(name)
-            new Proxy( association, association.getOptions(name, @)  )
+            existing = this._cache[name]
+            if existing and not existing.isProxy and existing[fk] == @[pk]
+                existing
+            else
+                Proxy = association.getProxyFor(name)
+                new Proxy( association, association.getOptions(name, @)  )
 
     # will be called in the scope of the parent model
     createCollection: (association, name, definition, fk, pk, target_class) ->
@@ -98,7 +104,8 @@ class Lanes.Models.AssocationMap
             -> definition.default.apply(this, args) || defaultCreator.apply(this, args)
         else
             defaultCreator
-        { fn: _.partial(createFn, args...) }
+        { fn: _.partial(createFn, args...), deps: [ @pk(name) ] }
+
 
     # Sets the assocations for "model"
     set: (model, data, options) ->
@@ -107,9 +114,11 @@ class Lanes.Models.AssocationMap
             if @exists(name) && Lanes.u.isModel(value) && !value.isNew()
                 model[@pk(name)] = if value then value.getId() else null
 
-    setFromServer: (model, data, options) ->
+    setFromServer: (model, data, options, method) ->
         this._set(model, data, options, 'setFromServer')
 
+
+
     onIdChange: (model) ->
         for name, def of @definitions
             if def.collection and @isCreated(model, name) and model[name]?.associationFilter

data/client/lanes/models/AssociationProxy.coffee

@@ -14,10 +14,11 @@ ProxyMethods = {
 
     replaceWithModel: (model, options, whenReadyMethod) ->
         model = new @_proxied_model(model) unless Lanes.u.isModel(model)
-
-        @_proxied_parent?.replace(
-            @_proxied_options.parent, options.association_name, model
-        )
+        if @_proxied_parent
+            if @_proxied_parent.isProxy
+                @_proxied_parent.replaceProxy(options.association_name, model)
+            else
+                @_proxied_parent.replace( @_proxied_options.parent, options.association_name, model )
         relayEvents(@_proxied_events, model, 'on')
         relayEvents(@_proxied_once_events, model, 'once')
 
@@ -32,9 +33,11 @@ ProxyMethods = {
 
     _replaceAndCall: (options, fn) ->
         model = new @_proxied_model()
+        retVal = undefined
         @replaceWithModel(model, options, ->
-            fn.call(model, fn)
+            retVal = fn.call(model, fn)
         )
+        retVal
 
 
     serialize: (options) ->
@@ -100,7 +103,7 @@ Lanes.Models.AssocationProxy = {
                 Proxy = Lanes.Models.AssocationProxy.construct(klass,
                     association_name: name
                 )
-                new Proxy(@)
+                new Proxy(@, @_proxied_model::associations.getOptions(name, @))
             )