lanes 0.1.2 → 0.1.5

data/client/lanes/components/modal/ModalDialog.coffee

@@ -1,8 +1,16 @@
 class Lanes.Components.ModalDialog extends Lanes.Components.Base
 
-    events:
+    constructor: (options={})->
+        _.extend(this, _.pick(options, 'hideOnBackdropClick', 'hideButton'))
+        super
+
+    domEvents:
         'hide.bs.modal': '_onHide'
 
+    hideOnEsc: true
+    showHideButton: true
+    hideOnBackdropClick: true
+
     bindings:
         'viewport.layout_size': { type:'class',selector:'.modal-dialog'}
         'viewport.layout_size': { selector: '.modal', type: 'class' }
@@ -16,18 +24,26 @@ class Lanes.Components.ModalDialog extends Lanes.Components.Base
     toggleShown: (show)->
         if show then this.show() else this.hide()
 
+    bodyClass: 'base'
+
     template: ->
         tmpl = Lanes.Templates.find('lanes/components/modal/template')
         tmpl({
             size    : @size  || 'lg'
-            title   : @title || context.dialog_title
+            title   : @title# || context.dialog_title
             body    : this.renderTemplateMethod('bodyTemplate')
+            bodyClass: _.result(this,'bodyClass')
             buttons : @buttons
+            showHideButton : @showHideButton
         })
 
+    renderContextFree: ->
+        this.replaceEl( this.renderTemplateMethod() );
+        this
+
     hide:->
         this.$el.modal('hide')
-        _.Promise.resolve( this )
+        this.notification?.resolve(this)
 
     show: ->
         if this.rendered
@@ -35,7 +51,12 @@ class Lanes.Components.ModalDialog extends Lanes.Components.Base
             this.$el.modal('show')
         else
             this.render()
-            this.$el.modal({ body: this.viewport.el })
+            this.$el.modal({
+                body: this.viewport.el
+                backdrop: if this.hideOnBackdropClick then true else 'static'
+                hideOnEsc: true
+                keyboard: @hideOnEsc
+            })
         this.notification = new _.DeferredPromise
         return this.notification.promise
 

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

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

data/client/lanes/components/modal/template.html

@@ -2,10 +2,10 @@
   <div class="modal-dialog modal-<%= @size %>">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <% if @hideBtn: %><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><% end %>
         <h4 class="modal-title" id="myModalLabel"><%= @title %></h4>
       </div>
-      <div class="modal-body">
+      <div class="modal-body <%= @bodyClass %>">
         <%- @body %>
       </div>
       <div class="modal-footer">

data/client/lanes/components/multi-select/MultiSelect.coffee

@@ -0,0 +1,46 @@
+# provides common code for both RadioGroup and SelectField
+#
+class Lanes.Components.MultiSelect extends Lanes.Components.Base
+    session:
+        multiple: { type: 'boolean', default: false }
+        selections: 'collection'
+        association: 'string'
+        mappings: 'object'
+
+    constructor: (options={})->
+        if options.model
+            if options.association && ! options.field_name
+                options.field_name = options.model.associations.pk(options.association)
+
+            if options.field_name
+                listener = {}
+                listener["change:#{options.field_name}"] ='onModelAttributeChange'
+                this.modelEvents = _.extend( listener, this.modelEvents||{} )
+
+        super
+
+        if @association
+            klass = options.model.associations.getClassFor(@association)
+            @selections = if klass::isCollection then new klass else new klass.Collection
+
+        if options.choices
+            @selections ||= options.choices
+
+        @selections.ensureLoaded()
+
+        @mappings = _.extend({
+            id: 'id', title: 'title', selected: 'selected'
+        },options.mappings||{})
+
+
+    onModelChange: ->
+        if @selections
+            this.onModelAttributeChange(@model,@model.get(@field_name))
+
+    selectionForID: (id)->
+        q={}; q[@mappings.id]=parseInt(id)
+        @selections.findWhere( q )
+
+    onModelAttributeChange: (model,fkid)->
+        if ! this.el.binding_is_setting
+            this.select( this.selectionForID( fkid ) )

data/client/lanes/components/popover/PopOver.coffee

@@ -1,6 +1,6 @@
 class Lanes.Components.PopOver extends Lanes.Components.Base
 
-    events:
+    domEvents:
         'hide.bs.popover': '_onHide'
 
     session:

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

@@ -0,0 +1,2 @@
+@import "lanes/styles/bootstrap";
+@import "lanes/styles/bootstrap/popovers";

data/client/lanes/components/{radio_group → radio-group}/RadioGroup.coffee

@@ -1,8 +1,8 @@
-class RadioInput
-    template: (scope)->
-        '<label><input type="radio" name="' + scope.field_name + '"/> <span></span></label>'
+#= require ../multi-select/MultiSelect
 
-    #bindings: {}
+class RadioInput extends Lanes.Views.Base
+    template: ->
+        '<label><input type="radio" name="' + this.field_name + '"/> <span></span></label>'
 
     constructor: (options)->
         @field_name=options.field_name
@@ -15,14 +15,9 @@ class RadioInput
         super
 
 
-Lanes.Views.Base.extend(RadioInput)
+class Lanes.Components.RadioGroup extends Lanes.Components.MultiSelect
 
-
-class RadioGroup
-    constructor: -> super
-
-    events:
-        'change input': 'onInputChange'
+    FILE: FILE
 
     writeTemplate: ->
         "<span data-hook='choices-input'></span>"
@@ -31,13 +26,15 @@ class RadioGroup
         fields:
             hook: 'choices-input'
             collection: 'selections'
-            options: 'subViewOptions'
+            waitFor: 'selections'
             view: RadioInput
+            options: 'subViewOptions'
 
-
-    initialize: ->
+    constructor: (options)->
         super
-        this.listenTo(@selections, "change", this.onSelectionChange) if @selections
+
+    subViewOptions: ->
+        { field_name: @field_name, mappings: @mappings }
 
     onSelectionChange: (option)->
         return unless option[@mappings.selected]
@@ -45,15 +42,7 @@ class RadioGroup
             other_option[@mappings.selected] = other_option[@mappings.id] == option[@mappings.id]
         ,this)
 
-    onInputChange: (ev)->
-        @selections.each( (option)->
-            option[@mappings.selected] = option[@mappings.id] == ev.target.value
-        ,this)
-
     getSelected: ->
         q={}
         q[@mappings.selected]=true
         @selections.findWhere(q)
-
-
-Lanes.Component.RadioGroup = Lanes.Component.ChoicesInput.extend(RadioGroup)

data/client/lanes/components/radio-group/index.js

@@ -0,0 +1 @@
+//= require ./RadioGroup

data/client/lanes/components/radio-group/styles.scss

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,38 @@
+class Lanes.Components.RecordFinder.Clause extends Lanes.Components.Base
+    FILE: FILE
+
+    writeTemplateName: 'clause'
+    useFormBindings: true
+    domEvents:
+        'hidden.bs.dropdown': 'onQueryChange'
+        'click .del-clause': 'delClause'
+        'input input.query-string': 'onInput'
+
+    onInput: (ev)->
+        this.model.value = ev.target.value
+
+    bindings:
+        'model.description': '.query-field-description'
+
+    subviews:
+        fields:
+            component: 'RadioGroup', model:'model',
+            options: -> { choices: @model.fields, field_name: 'fields', access: 'write' }
+
+        operators:
+            component: 'RadioGroup', model: 'model'
+            options: -> { choices: @model.operators, field_name: 'operators', mappings: { title:'name', visible: 'valid' }, access: 'write' }
+
+    delClause: ->
+        @model.remove()
+
+    onQueryChange: ->
+        this.$('input.query-string').focus()
+
+    render: ->
+        super
+        @defer @focus, delay: 500
+        this
+
+    focus: ->
+        this.$('input.query-string').focus()

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

@@ -0,0 +1,45 @@
+class Lanes.Components.RecordFinder.Dialog extends Lanes.Components.ModalDialog
+    FILE: FILE
+
+    domEvents:
+        'click .add-clause': 'addClause'
+        'click .run-query':  'runQuery'
+        'select-row .grid': 'onSelect'
+        'shown.bs.modal' : 'onShown'
+
+    subviews:
+        grid:
+            hook: 'grid'
+            component: 'Grid'
+            options: ->
+                { recordQuery: @recordQuery }
+        query_clauses:
+             container: '.query-clauses'
+             view: Lanes.Components.RecordFinder.Clause, collection: 'clauses'
+
+    bodyTemplateName: 'dialog'
+    bodyClass: "record-finder"
+
+    session:
+        recordQuery: 'model'
+        clauses: 'collection'
+
+    initialize:(options)->
+        @clauses = @recordQuery.clauses
+        @debounceMethod( 'runQuery')
+        this.listenTo(@recordQuery,'change',@runQuery)
+        _.bindAll(this,'hide')
+
+    onShown: ->
+        this.grid.adjustColumnWidth()
+
+    onSelect: (ev, model)->
+        @record = model
+        ev.preventDefault()
+        _.delay(this.hide, 500)
+
+    addClause: ->
+        @recordQuery.addNewClause()
+
+    runQuery: ->
+        this.grid.reload() if @recordQuery.isValid()

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

@@ -0,0 +1,55 @@
+class Lanes.Components.RecordFinder extends Lanes.Components.Base
+    FILE: FILE
+
+    writeTemplateName: 'field'
+    writeTemplateData: ->
+        { fieldName: @fieldName || @recordQuery.initialField.id }
+
+    domEvents:
+        "keyup .record-finder-query-string": "onKey"
+        "click .record-finder-query": "displayFinder"
+
+    session:
+        withAssociations: 'array'
+        invalid_chars: 'regex'
+        recordQuery: 'model'
+        fieldName:  'string'
+        queryField: [ 'string', false, 'code' ]
+
+    ui:
+        input: '.record-finder-query-string'
+
+    constructor: (options={})->
+        super
+        this.access = 'write'
+
+    initialize:(options)->
+        @recordQuery = new Lanes.Models.Query(
+            fields: options.fields, modelClass: options.modelClass
+        )
+
+    displayFinder: ->
+        finder = new Lanes.Components.RecordFinder.Dialog(
+            parent:this, title: @title, recordQuery: @recordQuery
+        )
+        finder.show().then( (dlg)->
+            dlg.remove().record
+        ).then( (record)=>
+            if record
+                if @withAssociations then record.withAssociations(@withAssociations...) else record
+            else
+                null
+        ).then( (record)=>
+            @.$el.trigger("display-record", record) if record
+        , (e)->Lanes.warn(e) )
+
+    onKey: (ev)->
+        if 13 == ev.keyCode
+            this.runQuery(ev)
+        else if @invalid_chars && @ui.input.val().match( @invalid_chars )
+            @ui.input.val( @ui.input.val().replace( @invalid_chars, '' ) )
+
+    runQuery: (ev)->
+        code = this.$(ev.target).val()
+        @recordQuery.loadSingle(code.toUpperCase(),{ include: @withAssociations })
+            .then( (reply)=> this.$el.trigger("display-record", reply.record) if reply.record )

data/client/lanes/components/{record_finder/clause.skr → record-finder/clause.html}

@@ -7,12 +7,14 @@
                     <span class="query-field-description"></span>
                     <span class="caret"></span>
                 </button>
-                <div class="query dropdown dropdown-menu">
+                <div class="query-field dropdown dropdown-menu">
                     <form>
-                        <div class="<%= h.grid_widths 6 %> fields">
-                        </div>
-                        <div class="<%= h.grid_widths 6 %> operators">
-                        </div>
+                      <div class="<%= h.grid_widths 6 %>">
+                        <div data-hook="fields"></div>
+                      </div>
+                      <div class="<%= h.grid_widths 6 %>">
+                        <div data-hook="operators"></div>
+                      </div>
                     </form>
                 </div>
             </div>

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

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

data/client/lanes/components/{record_finder/field.skr → record-finder/field.html}

@@ -1,5 +1,5 @@
 <div class="input-group">
-    <input type="text" name="<%= @field_name %>" id="foo" class="form-control record-finder-query-string">
+    <input type="text" name="<%= @fieldName %>" class="form-control record-finder-query-string">
     <span class="input-group-btn">
         <button type="button" class="btn btn-default record-finder-query">
             <i class="icon-search"></i>

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

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

data/client/lanes/{styles/components/record-finder.scss → components/record-finder/styles.scss}

@@ -33,31 +33,33 @@
   &.multiple {
     
   }
-}
 
-.query {
-  width: 300px;
-  .fields {
-    label {
-      display: block;
-    }
-  }
-  .operators {
-    label {
-      display: block;
-      max-height: 3rem;
-      overflow: hidden;
-      &.invalid {
-        max-height: 0;
-        margin: 0;
-        opacity: 0;
+  .query-field {
+      width: 300px;
+
+      label {
+          display: block;
+      }
+      
+      .operators {
+          label {
+              display: block;
+              max-height: 3rem;
+              overflow: hidden;
+              &.invalid {
+                  max-height: 0;
+                  margin: 0;
+                  opacity: 0;
+              }
+              transition-property: opacity, margin, max-height;
+              transition-duration: 0.2s, 0.4s;
+          }
       }
-      transition-property: opacity, margin, max-height;
-      transition-duration: 0.2s, 0.4s;
-    }
   }
+
 }
 
+
 .modal-dialog.tiny {
   .skr-grid thead > tr > th {
     font-size: unset;

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

@@ -0,0 +1,62 @@
+#= require ../multi-select/MultiSelect
+
+class SelectOption extends Lanes.Views.Base
+    template: (scope)->
+        '<option></option>'
+
+    constructor: (options)->
+        @groupName=options.groupName
+        m = options.mappings
+        @bindings = {}
+        @bindings["model.#{m.id}"]       = { type: 'value', selector: 'option' }
+        @bindings["model.#{m.selected}"] = { type: 'booleanAttribute', selector: 'option', name:'selected' }
+        @bindings["model.#{m.title}"]    = 'option'
+        @bindings["model.#{m.visible}"]  = { type: 'toggle' } if m.visible
+        super
+
+
+class Lanes.Components.SelectField extends Lanes.Components.MultiSelect
+
+
+    subviews:
+        fields:
+            hook: 'choices-input'
+            collection: 'selections'
+            options: 'subViewOptions'
+            view: SelectOption
+
+    session:
+        multiple: { type: 'boolean', default: false }
+
+    subViewOptions: ->
+        { field_name: @field_name, mappings: @mappings }
+
+    ui:
+        select: 'select'
+
+    domEvents:
+        'change' : 'onSelectChange'
+
+    onSelectChange: (ev)->
+        if @model && @association
+            @model.set(@association, this.selectionForID( this.ui.select.val() ))
+
+    constructor: (options={})->
+        super
+
+    writeTemplate: ->
+        multiple = if this.multiple then "multiple" else ""
+        "<div><select class='form-control' #{multiple} name='#{this.field_name}' data-hook='choices-input'></select></div>"
+
+    readTemplate: ->
+        "<div class='ro-input' name='#{this.field_name}'></div>"
+
+    select: (option)->
+        if this.readOnly
+            this.$el.text( if option then option.code else "" )
+        else if option
+            id = option.get(@mappings.id)
+            option = this.query("option[value=\"#{id}\"]")
+            option.selected = true
+        else
+            this.$el.find(":selected").prop('selected',false)

data/client/lanes/extension/EarlyExtensions.js.erb

@@ -1,3 +1,3 @@
-<% Lanes::Extensions.early_loaded do | ext | %>
-<% require_asset ext.javascript_include %>
-<% end %>
+<% Lanes::Extensions.each_asset(phase: :early, type: :js) do | asset |
+require_asset asset
+end %>

data/client/lanes/extension/Extensions.coffee

@@ -11,14 +11,17 @@ Lanes.Extensions = {
         instance.onAvailable?(application) for identifier, instance of @instances
 
     setBootstrapData: (bootstrap_data)->
+        @controlling_id = bootstrap_data.controlling_extension
         for identifier,data of bootstrap_data
             instance = this.instances[identifier]
             instance?.setBootstrapData?(data)
 
     makeNamespace: (identifier)->
-        for ns in ['Models','Views','Controllers','Screens']
+        for ns in ['Models','Views','Controllers','Screens','Components']
             Lanes.namespace("#{identifier}.#{ns}")
 
+    controlling: ->
+        this.get( @controlling_id )
 
     get: (identifier)->
         this.instances[identifier]

data/client/lanes/extension/LateLoaded.js.erb

@@ -1,3 +1,3 @@
-<% Lanes::Extensions.late_loaded do | ext | %>
-<% require_asset ext.javascript_include %>
-<% end %>
+<% Lanes::Extensions.each_asset(phase: :late, type: :js) do | asset |
+require_asset asset
+end %>

data/client/lanes/index.js

@@ -2,10 +2,10 @@
 //= require ./vendor/modern-stack
 //= require ./lib
 //= require ./extension
-//= require ./data
+//= require ./models
 //= require ./plugins
 //= require ./views
-//= require ./screens
 //= require ./components/Base
 //= require ./components/enabled
+//= require ./screens
 //= require ./extension/LateLoaded

data/client/lanes/index.scss.erb

@@ -0,0 +1,30 @@
+@font-face {
+  font-family: 'lanes-icon';
+  src:url(font-path('lanes/styles/fonts/icomoon.eot') + '?-7u8s0f');
+  src:url(font-path('lanes/styles/fonts/icomoon.eot') + '?#iefix-7u8s0f') format('embedded-opentype'),
+  url(font-path('lanes/styles/fonts/icomoon.woff') + '?-7u8s0f') format('woff'),
+  url(font-path('lanes/styles/fonts/icomoon.ttf')  + '?-7u8s0f') format('truetype'),
+  url(font-path('lanes/styles/fonts/icomoon.svg')  + '?-7u8s0f#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.lanes {
+
+<% Lanes::Extensions.each_asset(phase: :all, type: :css) do | asset | %>
+  @import "<%= asset %>";
+<% end %>
+
+<% Lanes::Components.enabled_with_dependencies(self) do | component | %>
+  @import "lanes/components/<%= component %>/styles";
+<% end %>
+
+<% if !Lanes.config.initial_workspace_screen_id.blank? &&
+      screen = Lanes::Screen[Lanes.config.initial_workspace_screen_id]
+%>
+  @import "<%= screen.css.remove(/\.css$/) + "/index.scss" %>"
+<% end %>
+
+  @import "styles/plugins/all"
+  
+}