lanes 0.1.9.5 → 0.3.0

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

@@ -0,0 +1,12 @@
+.lanes-modal {
+
+
+    .modal-body {
+        @include flexbox();
+        @include flex-direction(column);
+    }
+
+    .grid-component .grid-body {
+        height: initial;
+    }
+}

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

@@ -23,14 +23,19 @@ class Operator extends Lanes.React.Component
 class Lanes.Components.RecordFinder.Clause extends Lanes.React.Component
 
     propsTypes:
-        onAddClause: React.PropTypes.func.isRequired
         model: Lanes.PropTypes.State.isRequired
+        onEnter: React.PropTypes.func.isRequired
+        onAddClause: React.PropTypes.func.isRequired
 
     setValue: (ev) ->
         @model.value = ev.target.value
 
-    runQuery: ->
-        @model.query.execute()
+    runQuery: -> @model.query.results.ensureLoaded()
+
+    componentDidMount: -> @refs.query.focus()
+
+    handleKeyDown: (ev) ->
+        @props.onEnter() if ev.key is 'Enter'
 
     render: ->
         <BS.Row className="clause">
@@ -38,7 +43,7 @@ class Lanes.Components.RecordFinder.Clause extends Lanes.React.Component
                 <div className="input-group">
 
                     <div className="input-group-btn">
-                        <BS.DropdownButton title={@model.description}>
+                        <BS.DropdownButton id={@model.field.title} title={@model.description}>
                             <form>
                               <div className="col-xs-6">
                                 <div className="fields">
@@ -56,6 +61,8 @@ class Lanes.Components.RecordFinder.Clause extends Lanes.React.Component
                         </BS.DropdownButton>
                     </div>
                     <input type="text"
+                        ref='query'
+                        onKeyDown={@handleKeyDown}
                         value={@model.value}
                         onChange={@setValue}
                         className="form-control query-string"

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

@@ -5,15 +5,12 @@ class Lanes.Components.RecordFinder.Dialog extends Lanes.React.Component
             @props.query.clauses
 
     propTypes:
+        query: Lanes.PropTypes.State.isRequired
         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>
@@ -21,34 +18,36 @@ class Lanes.Components.RecordFinder.Dialog extends Lanes.React.Component
 
     onRecordSelect: (model) ->
         return unless model
-        @props.query.loadModelWithAssociations(model).then @props.onRecordSelect
+        @props.query.loadModel(model).then @props.onRecordSelect
         _.delay( =>
             @onCancel()
         , 300)
 
     onCancel: ->
-        @refs.modal.onRequestHide()
+        @context.viewport.hideModal()
 
     addClause: ->
         @props.query.addNewClause()
+    selectFirst: ->
+        model = @props.query.results.modelAt(0)
+        @onRecordSelect(model) if model
 
-    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>
+    onColumnSort: (field) ->
+        clause = @clauses.last()
+        clause.field = field
+        _.dom(@, '.clause:last-child .query-string').focusAndSelect()
 
-            <div className='modal-footer'>
-                <BS.Button onClick={@onCancel}>Cancel</BS.Button>
+    render: ->
+        <div className='record-finder-dialog row'>
+            <div className="form-horizontal query-clauses">
+            { for c in @clauses.models
+                <LC.RecordFinder.Clause
+                    key={c.cid} onEnter={@selectFirst}
+                    onAddClause={@addClause} model=c /> }
             </div>
-
-        </LC.Modal>
+            <LC.Grid
+                onColumnClick={@onColumnSort}
+                query={@props.query} height=200 autoLoadQuery
+                onSelectionChange=@onRecordSelect
+            />
+        </div>

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

@@ -1,23 +1,41 @@
 class Lanes.Components.RecordFinder extends Lanes.React.Component
 
     propTypes:
-        query:    Lanes.PropTypes.State.isRequired
-        model:    Lanes.PropTypes.State.isRequired
-        commands: React.PropTypes.object.isRequired
-
+        query:       Lanes.PropTypes.State.isRequired
+        model:       Lanes.PropTypes.State
+        parentModel: Lanes.PropTypes.State
+        commands:    React.PropTypes.object
+        onModelSet:  React.PropTypes.func
 
     contextTypes:
-        uistate: Lanes.PropTypes.State.isRequired
+        viewport: Lanes.PropTypes.State.isRequired
+
+    modelForAccess: ->
+        if @props.parentModel
+            @props.parentModel[@props.associationName]
+        else
+            @props.model
 
     showFinder: ->
-        @context.uistate.modalDialog = =>
-            React.createElement LC.RecordFinder.Dialog,
-                query: @props.query
-                onRecordSelect: @props.commands.setModel
+        @props.query.reset()
+        @context.viewport.displayModal(
+            title: "Find #{@props.query.title}"
+            buttons: [{title: 'Cancel'}]
+            autoHide: true
+            body: =>
+                <LC.RecordFinder.Dialog query={@props.query} onRecordSelect={@setModel} />
+        )
+
+    setModel: (model) ->
+        if @props.parentModel
+            @props.parentModel.set(@props.associationName, model)
+        @props.commands?.setModel(model)
+        @props.onModelSet?(model)
 
     loadCurrentSelection: ->
-        @props.query.loadSingle(@refs.input.getValue()).then (model) =>
-            @props.commands.setModel(model)
+        value = @props.model[@props.query.initialField.id]
+        @props.query.loadSingle(value).then (model) =>
+            @setModel(model)
 
     onKeyPress: (ev) ->
         if "Enter" == ev.key
@@ -25,14 +43,27 @@ class Lanes.Components.RecordFinder extends Lanes.React.Component
             this.loadCurrentSelection()
         null
 
+    getValue: ->
+        if @props.parentModel
+            @props.parentModel[@props.associationName][@props.name]
+        else
+            @props.model[@props.name]
+
+
     render: ->
         findIcon = <button className="btn btn-primary icon icon-search icon-lg" onClick={@showFinder}/>
-        <LC.TextField
+        model = @props.parentModel or @props.model
+        label =
+            <LC.ControlLabel titleOnly {...@props} model={model} />
+
+        <LC.Input
             ref="input"
-            {...@props}
             groupClassName="record-finder"
             editOnly writable
             name={@props.query.initialField.id}
             onKeyPress={@onKeyPress}
-            model={@props.model}
+            {...@props}
+            label={label}
+            model={@modelForAccess()}
+            getValue={@getValue}
             buttonAfter={findIcon} />

data/client/lanes/components/record-finder/styles.scss

@@ -1,3 +1,8 @@
+.record-finder-dialog {
+    @include flexbox();
+    @include flex-direction(column);
+}
+
 
 .record-finder-query-string {
   text-transform: uppercase;
@@ -5,11 +10,12 @@
 
 .record-finder {
   .form-control {
-    
+
   }
 }
 
 .query-clauses {
+
   .row {
     margin-bottom: 5px;
   }
@@ -31,7 +37,7 @@
     }
   }
   &.multiple {
-    
+
   }
 
   .query-field {
@@ -40,7 +46,7 @@
       label {
           display: block;
       }
-      
+
       .operators {
           label {
               display: block;
@@ -61,9 +67,6 @@
 
 
 .modal-dialog.tiny {
-  .skr-grid thead > tr > th {
-    font-size: unset;
-  }
   .action {
     text-align: center;
     .btn.run-query span {

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

@@ -1,78 +1,133 @@
 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
+        choices: React.PropTypes.arrayOf(
+            React.PropTypes.shape({
+                id: React.PropTypes.any
+                label: React.PropTypes.string
+            })
+        )
+        model:        Lanes.PropTypes.Model
+        labelField:   React.PropTypes.string
         getSelection: React.PropTypes.func
         setSelection: React.PropTypes.func
+        displayLimit: React.PropTypes.number
+        syncOptions:  React.PropTypes.object
+        multiSelect:  React.PropTypes.bool
+        fetchWhenOpen: React.PropTypes.bool
+        allowFreeForm: React.PropTypes.bool
+        includeBlankRow: React.PropTypes.bool
+        displayFallback: React.PropTypes.string
+
+    getDefaultProps: ->
+        labelField: 'code', idField: 'id'
 
     dataObjects:
-        collection: ->
-            @props.collection || (
-                @props.model?.associations.collectionFor(@props.name).fetch()
-            )
+        query: ->
+            src = @props.queryModel or
+                @props.model.associations?.collectionFor(@props.name).model
+            query = new Lanes.Models.Query({
+                syncOptions: Lanes.Models.Query.mergedSyncOptions(@props.syncOptions)
+                src: src
+                fields: [
+                    {id: (@props.model?.idAttribute or 'id'), visible: false},
+                    @props.labelField
+                ]
+            })
+
+    renderDisplayValue: ->
+        value = @getValue()?[@props.labelField]
+        <span>{value}</span>
+
+    getValue: ->
+        return undefined if @state.isOpen and not @props.multiSelect
+        return @state.tempDisplayValue if @state.tempDisplayValue
+        model = @props.getSelection?(@model, @props) or @model?[@props.name]
+        return undefined unless model
+        return model if @props.multiSelect
+        label = model[@props.labelField] or @props.defaultLabel
+        if !label and not _.isEmpty(@props.choices)
+            label = _.findWhere( @props.choices, id: model.id)?[@props.labelField]
+        if label
+            {id: model.id, "#{@props.labelField}": label}
+        else if model.id
+            model.id
+        else
+            undefined
 
-    componentWillMount: ->
-        @collection.ensureLoaded()
+    getClause: -> @query.clauses.first()
+    getChoices: ->
+        @props.choices or @query.results.map (row) =>
+            {id: row[0], "#{@props.labelField}": row[1]}
 
-    onChange: (selections) ->
-        selections = [selections] unless _.isArray(selections)
-        records = _.map selections, (selection) =>
-            @collection.get(selection.id)
-        value = if @props.multi then records else _.first(records)
+    onToggle: (isOpen) ->
+        if isOpen and _.isEmpty(@props.choices)
+            c = @getClause()
+            c.value = ''
+            @query.results.reload()
+        @setState({isOpen})
+
+    setModel: (model) ->
+        @setState({isOpen: false, tempDisplayValue: false, requestInProgress: false})
         if @props.setSelection
-            @props.setSelection(@model, value, selections)
+            @props.setSelection(model, model: @model)
         else
-            @model.set(@props.name, value)
-        true
+            @model.set(@props.name, model)
 
-    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}
+    onChange: (value) ->
+        if @props.multiSelect
+            @setModel(value)
+        else
+            if _.isObject(value)
+                model = if Lanes.u.isState(value) then value else new @query.model(value)
+                model.fetch(@props.syncOptions).then(@setModel)
+                @setState(isOpen: false, tempDisplayValue: value, requestInProgress: true)
+            else
+                if not @props.choices
+                    c = @getClause()
+                    return if c.value is value
+                    c.value = value
+                    @query.results.reload()
+                @setState(isOpen: true)
 
-    renderDisplayValue: ->
-        <span>{@getCurrentSelection().label}</span>
+    getMessages: ->
+        loading = @query.results.requestInProgress
+        emptyList: if loading then 'Loading …' else 'No records found'
+        emptyFilter: 'No records found'
 
-    _getChoices: ->
-        if _.isFunction(@getChoices) then @getChoices() else
-            labelField = @props.labelField
-            @collection.map (model) ->
-                {id: model.id, label: _.result(model, labelField)}
+    isBusy: ->
+        !!(@state.requestInProgress or @query.results.requestInProgress)
 
     renderEdit: (label) ->
-        Component = if @props.multi
-            Lanes.Vendor.ReactWidgets.Multiselect
-        else
-            Lanes.Vendor.ReactWidgets.Combobox
         props = _.omit(@props, 'label')
+        Component = Lanes.Vendor.ReactWidgets[if @props.multiSelect then 'Multiselect' else 'Combobox']
         select = <Component
-            data={@_getChoices()}
-            valueField="id"
-            textField="label"
+            ref="select"
+            className={@props.className}
+            open={@state.isOpen}
             onChange={@onChange}
+            onToggle={@onToggle}
+            data={@getChoices()}
+            busy={@isBusy()}
+            valueField="id"
+            textField={@props.labelField}
+            filter='startsWith'
             name={@props.name}
-            value={@getCurrentSelection().id}
-            {...props} />
+            messages={@getMessages()}
+            onBlur={@onFieldInteraction}
+            value={@getValue()}
+            {...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>
+            <LC.FormGroup
+                {...@props}
+                className={@formGroupClassNames()}
+                label={@getLabelValue()}
+            >
+                {select}
+            </LC.FormGroup>