lanes 0.1.9 → 0.1.9.5

data/client/lanes/components/helpers.coffee

@@ -0,0 +1,2 @@
+Lanes.Components.classNames = ->
+    className: _.classnames(arguments...)

data/client/lanes/components/index.js

@@ -1,2 +1,3 @@
-//= require ./Base
+//= require ./helpers
+//= require ./shared
 //= require ./enabled

data/client/lanes/components/modal/Modal.cjsx

@@ -0,0 +1,36 @@
+class Lanes.Components.Modal extends Lanes.React.Component
+
+    contextTypes:
+        uistate: Lanes.PropTypes.State.isRequired
+
+    dataObjects: ->
+        model: ->
+            @context.uistate
+
+    bindDataEvents: ->
+        model: "change:width"
+
+    componentWillUnmount: ->
+        @context.uistate.modalDialog = null
+
+    propTypes:
+        title: React.PropTypes.node,
+        backdrop: React.PropTypes.oneOf(['static', true, false]),
+        keyboard: React.PropTypes.bool,
+        closeButton: React.PropTypes.bool,
+        animation: React.PropTypes.bool,
+        onRequestHide: React.PropTypes.func
+
+    onRequestHide: ->
+        @context.uistate.modalDialog = null
+
+    render: ->
+        <BS.Modal
+            className={@context.uistate.layout_size}
+            bsSize="large"
+            onRequestHide={@onRequestHide}
+            {...@props} >
+
+            {@props.children}
+
+        </BS.Modal>

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

@@ -1,2 +1 @@
-//= require lanes/vendor/bootstrap/modal
-//= require_tree .
+//= require ./Modal

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

@@ -1,19 +0,0 @@
-
-
-.modal-backdrop{
-    position: absolute;
-}
-
-
-.modal {
-    .modal-dialog {
-        z-index: 26;
-    }
-    &.md{
-        .modal-lg {
-            right: 5%;
-            width: 100%;
-            left: 5%;
-        }
-    }
-}

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

@@ -0,0 +1,80 @@
+class Field extends Lanes.React.Component
+    render: ->
+        return null unless @model.visible
+        <div className="row">
+            <input id={@model.id} type="radio" name="field" value={@model.id}
+                checked={@model.selected}
+                onChange={ => @model.selected = true }
+            />
+            <label htmlFor=@model.id>{@model.title}</label>
+        </div>
+
+class Operator extends Lanes.React.Component
+    render: ->
+        return null unless @model.valid
+        <BS.Row>
+            <input id={@model.id} type="radio" name="operator" value={@model.id}
+                checked={@model.selected}
+                onChange={ => @model.selected = true }
+            />
+            <label htmlFor=@model.id>{@model.name}</label>
+        </BS.Row>
+
+class Lanes.Components.RecordFinder.Clause extends Lanes.React.Component
+
+    propsTypes:
+        onAddClause: React.PropTypes.func.isRequired
+        model: Lanes.PropTypes.State.isRequired
+
+    setValue: (ev) ->
+        @model.value = ev.target.value
+
+    runQuery: ->
+        @model.query.execute()
+
+    render: ->
+        <BS.Row className="clause">
+            <div className="col-xs-10">
+                <div className="input-group">
+
+                    <div className="input-group-btn">
+                        <BS.DropdownButton title={@model.description}>
+                            <form>
+                              <div className="col-xs-6">
+                                <div className="fields">
+                                    {@model.fields.map (f) ->
+                                        <Field key=f.id model=f /> }
+                                </div>
+                              </div>
+                              <div className="col-xs-6">
+                                <div className="operators">
+                                    {@model.operators.map (o) ->
+                                        <Operator key=o.id model=o /> }
+                                </div>
+                              </div>
+                            </form>
+                        </BS.DropdownButton>
+                    </div>
+                    <input type="text"
+                        value={@model.value}
+                        onChange={@setValue}
+                        className="form-control query-string"
+                    />
+                    <span className="input-group-btn">
+                        <button type="button" onClick={=> @props.model.remove()}
+                            className="btn btn-default del-clause">
+                            <i className="icon icon-trash-o"></i>
+                        </button>
+                        <button type="button" onClick={@props.onAddClause}
+                            className="btn btn-default add-clause">
+                            <i className="icon icon-plus"></i>
+                        </button>
+                    </span>
+                </div>
+            </div>
+            <div className="col-xs-2 action">
+                <BS.Button className="run-query" block onClick={@runQuery}>
+                    <i className="icon icon-search"></i><span> Search</span>
+                </BS.Button>
+            </div>
+        </BS.Row>

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

@@ -0,0 +1,54 @@
+class Lanes.Components.RecordFinder.Dialog extends Lanes.React.Component
+
+    dataObjects:
+        clauses: ->
+            @props.query.clauses
+
+    propTypes:
+        onRecordSelect: React.PropTypes.func.isRequired
+
+    contextTypes:
+        viewport: Lanes.PropTypes.State.isRequired
+
+    login: ->
+        @model.save().then =>
+            Lanes.current_user.setLoginData(@model.user, @model.access) if @model.user
+
+    warning: ->
+        <BS.Alert bsStyle='warning'>
+             <strong>{@model.lastServerMessage}</strong>
+        </BS.Alert>
+
+    onRecordSelect: (model) ->
+        return unless model
+        @props.query.loadModelWithAssociations(model).then @props.onRecordSelect
+        _.delay( =>
+            @onCancel()
+        , 300)
+
+    onCancel: ->
+        @refs.modal.onRequestHide()
+
+    addClause: ->
+        @props.query.addNewClause()
+
+    render: ->
+        <LC.Modal title='Find Record'
+            backdrop={false}
+            ref="modal"
+            animation={false}>
+            <div className='modal-body record-finder-dialog'>
+              <div className="form-horizontal query-clauses">
+                { for c in @clauses.models
+                    <LC.RecordFinder.Clause key={c.cid} onAddClause={@addClause} model=c /> }
+              </div>
+              <LC.Grid query={@props.query} height=200
+                  onSelectionChange=@onRecordSelect
+              />
+            </div>
+
+            <div className='modal-footer'>
+                <BS.Button onClick={@onCancel}>Cancel</BS.Button>
+            </div>
+
+        </LC.Modal>

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

@@ -0,0 +1,38 @@
+class Lanes.Components.RecordFinder extends Lanes.React.Component
+
+    propTypes:
+        query:    Lanes.PropTypes.State.isRequired
+        model:    Lanes.PropTypes.State.isRequired
+        commands: React.PropTypes.object.isRequired
+
+
+    contextTypes:
+        uistate: Lanes.PropTypes.State.isRequired
+
+    showFinder: ->
+        @context.uistate.modalDialog = =>
+            React.createElement LC.RecordFinder.Dialog,
+                query: @props.query
+                onRecordSelect: @props.commands.setModel
+
+    loadCurrentSelection: ->
+        @props.query.loadSingle(@refs.input.getValue()).then (model) =>
+            @props.commands.setModel(model)
+
+    onKeyPress: (ev) ->
+        if "Enter" == ev.key
+            ev.stopPropagation()
+            this.loadCurrentSelection()
+        null
+
+    render: ->
+        findIcon = <button className="btn btn-primary icon icon-search icon-lg" onClick={@showFinder}/>
+        <LC.TextField
+            ref="input"
+            {...@props}
+            groupClassName="record-finder"
+            editOnly writable
+            name={@props.query.initialField.id}
+            onKeyPress={@onKeyPress}
+            model={@props.model}
+            buttonAfter={findIcon} />

data/client/lanes/components/record-finder/config.json

@@ -1,3 +1,3 @@
 {
-    "depends": ["radio-group", "modal", "grid"]
+    "depends": ["modal", "grid"]
 }

data/client/lanes/components/record-finder/index.js

@@ -1,4 +1,3 @@
 //= require ./RecordFinder
-//= require ./Clause
 //= require ./Dialog
-//= require_tree .
+//= require ./Clause

data/client/lanes/components/request-spinner/index.js

@@ -0,0 +1 @@
+//= require ./request-spinner

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

@@ -0,0 +1,78 @@
+class Lanes.Components.SelectField extends Lanes.React.Component
+    mixins: [ Lanes.Components.Form.FieldMixin ]
+
+    getDefaultProps: ->
+        labelField: 'name', idField: 'id'
+
+    propTypes:
+        collection: Lanes.PropTypes.Collection
+        labelField: React.PropTypes.string
+        getSelection: React.PropTypes.func
+        setSelection: React.PropTypes.func
+
+    dataObjects:
+        collection: ->
+            @props.collection || (
+                @props.model?.associations.collectionFor(@props.name).fetch()
+            )
+
+    componentWillMount: ->
+        @collection.ensureLoaded()
+
+    onChange: (selections) ->
+        selections = [selections] unless _.isArray(selections)
+        records = _.map selections, (selection) =>
+            @collection.get(selection.id)
+        value = if @props.multi then records else _.first(records)
+        if @props.setSelection
+            @props.setSelection(@model, value, selections)
+        else
+            @model.set(@props.name, value)
+        true
+
+    getCurrentSelection: ->
+        return @props.getSelection(@model) if @props.getSelection
+        pk = @model.associations.pk(@props.name)
+        selected = @collection.get( @model[pk] )
+        return {} unless selected
+        label = selected[@props.labelField]
+        id = selected[@props.idField]
+        label = String(label) if _.isObject(label)
+        {id, label}
+
+    renderDisplayValue: ->
+        <span>{@getCurrentSelection().label}</span>
+
+    _getChoices: ->
+        if _.isFunction(@getChoices) then @getChoices() else
+            labelField = @props.labelField
+            @collection.map (model) ->
+                {id: model.id, label: _.result(model, labelField)}
+
+    renderEdit: (label) ->
+        Component = if @props.multi
+            Lanes.Vendor.ReactWidgets.Multiselect
+        else
+            Lanes.Vendor.ReactWidgets.Combobox
+        props = _.omit(@props, 'label')
+        select = <Component
+            data={@_getChoices()}
+            valueField="id"
+            textField="label"
+            onChange={@onChange}
+            name={@props.name}
+            value={@getCurrentSelection().id}
+            {...props} />
+
+        if @props.unstyled
+            select
+        else
+            colProps = _.omit(@props, 'name')
+            <BS.Col {...colProps}>
+                <div className="form-group">
+                    <label className="control-label">{label}</label>
+                    <div className="value">
+                        {select}
+                    </div>
+                </div>
+            </BS.Col>

data/client/lanes/components/select-field/index.js

@@ -1 +1,2 @@
-//= require_tree .
+//= require 'lanes/vendor/widgets'
+//= require './SelectField'

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

@@ -0,0 +1 @@
+@import "lanes/vendor/widgets";

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

@@ -0,0 +1,9 @@
+class Lanes.Components.CountBadge extends Lanes.React.Component
+
+    propTypes:
+        count: React.PropTypes.number
+
+
+    render: ->
+        classes = _.classnames('count', super: @props.superScript?)
+        <BS.Badge className={classes}>{@props.count}</BS.Badge>

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

@@ -0,0 +1,21 @@
+class Lanes.Components.ErrorDisplay extends Lanes.React.Component
+
+    propTypes:
+        model:  Lanes.PropTypes.State.isRequired
+
+    bindDataEvents: ->
+        model: "change:error"
+
+    clearErrors: ->
+        @model.errors = null
+
+    render: ->
+        return null unless @model.errors
+        <div className="alert alert-warning alert-dismissible" role="alert">
+            <button onClick={@clearErrors} type="button" className="close"
+                data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+            <i className="icon icon-exclamation-circle" />
+            { @model.errorMessage }
+        </div>

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

@@ -0,0 +1,71 @@
+Lanes.Components.Form || = {}
+
+Lanes.Components.Form.FieldMixin = {
+    bindDataEvents: ->
+        model: "change:#{@props.name} remote-update:#{@props.name}"
+
+    mixins: [
+        Lanes.React.Mixins.Access
+        Lanes.React.Mixins.ReadEditingState
+    ]
+
+    pubsub: false
+    propTypes:
+        model: Lanes.PropTypes.State.isRequired
+        name:  React.PropTypes.string.isRequired
+        label: React.PropTypes.string
+        unstyled: React.PropTypes.bool
+
+    unsetChangeSet: ->
+        @setState(changeset: false) if @isMounted()
+
+    setDataState: (state, evname) ->
+        changeset = evname == "changeset"
+        if changeset
+            _.delay(@unsetChangeSet, 2000)
+        @setState  _.extend(state, {changeset: changeset})
+
+
+    handleChange: (ev) ->
+        @props.model[@props.name] = ev.target.value
+        null
+
+    renderMixinDisplayValue: ->
+        value = @props.model[@props.name] || ""
+        value = String(value) if _.isObject(value) or not value
+        <span>{value}</span>
+
+    _mixinRenderValue: (label, className) ->
+        value = (@renderDisplayValue || @renderMixinDisplayValue)?()
+        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>
+
+    render: ->
+        unless @props.unlabeled
+            label = @props.label || _.titleize _.humanize @props.name
+        if @isEditingRecord()
+            if @hasWriteAccess()
+                @renderEdit(label)
+            else if @hasReadAccess()
+                (@renderReadOnly || @_mixinRenderValue)(label, "read-only")
+            else
+                <span />
+        else
+            if @hasReadAccess()
+                (@renderDisplay || @_mixinRenderValue)(label, "display")
+            else
+                <span/>
+
+}