columnSelect: render initial selected state

This commit is contained in:
Felix Niklas 2016-02-10 10:51:43 +01:00
parent 2ad3aea16c
commit 2c5bfea046
3 changed files with 21 additions and 15 deletions

View file

@ -1478,7 +1478,7 @@ class InputsRef extends App.ControllerContent
name: 'project-name'
id: 'project-name-123'
placeholder: 'Enter Project Name'
options: [{value:0,name:'Apple'},{value:1,name:'Microsoft',selected:true},{value:2,name:'Google'},{value:3,name:'Deutsche Bahn'},{value:4,name:'Sparkasse'},{value:5,name:'Deutsche Post'},{value:6,name:'Mitfahrzentrale'},{value:7,name:'Starbucks'},{value:8,name:'Mac Donalds'},{value:9,name:'Flixbus'},{value:10,name:'Betahaus'},{value:11,name:'Bruno Banani'},{value:12,name:'Alpina'},{value:13,name:'Samsung'},{value:14,name:'ChariTea'},{value:15,name:'fritz-kola'},{value:16,name:'Vitamin Water'},{value:17,name:'Znuny'},{value:18,name:'Max & Moritz'}]
options: [{value:0,name:'Apple',selected:true},{value:1,name:'Microsoft',selected:true},{value:2,name:'Google'},{value:3,name:'Deutsche Bahn'},{value:4,name:'Sparkasse'},{value:5,name:'Deutsche Post'},{value:6,name:'Mitfahrzentrale'},{value:7,name:'Starbucks'},{value:8,name:'Mac Donalds'},{value:9,name:'Flixbus'},{value:10,name:'Betahaus'},{value:11,name:'Bruno Banani'},{value:12,name:'Alpina'},{value:13,name:'Samsung'},{value:14,name:'ChariTea'},{value:15,name:'fritz-kola'},{value:16,name:'Vitamin Water'},{value:17,name:'Znuny'},{value:18,name:'Max & Moritz'}]
@$('.searchableSelectPlaceholder').replaceWith( searchableSelectObject.element() )
# selectable search

View file

@ -23,11 +23,17 @@ class App.ColumnSelect extends Spine.Controller
constructor: ->
super
@values = []
@render()
render: ->
@html App.view('generic/column_select')( @options.attribute )
@values = []
_.each @options.attribute.options, (option) =>
if option.selected
@values.push option.value
@html App.view('generic/column_select')
attribute: @options.attribute
values: @values
# keep inital height
# disabled for now since controls in modals get rendered hidden

View file

@ -1,24 +1,24 @@
<select
class="columnSelect-shadow js-shadow"
id="<%= @id %>"
name="<%= @name %>"
<%= @required %>
<%= @autofocus %>
value="<%= @value %>"
id="<%= @attribute.id %>"
name="<%= @attribute.name %>"
<%= @attribute.required %>
<%= @attribute.autofocus %>
value="<%= @attribute.value %>"
multiple
>
<% for option in @options: %>
<% for option in @attribute.options: %>
<option value="<%= option.value %>"><%= option.name %></option>
<% end %>
</select>
<div class="columnSelect-column columnSelect-column--selected js-selected">
<div class="u-placeholder u-unselectable js-placeholder"><%- @T('Nothing selected') %></div>
<% for option in @options: %>
<div class="columnSelect-option is-hidden js-remove js-option" data-value="<%= option.value %>"><%= option.name %></div>
<div class="u-placeholder u-unselectable js-placeholder<%= ' is-hidden' if @values.length %>"><%- @T('Nothing selected') %></div>
<% for option in @attribute.options: %>
<div class="columnSelect-option js-remove js-option<%= ' is-hidden' if !option.selected %>" data-value="<%= option.value %>"><%= option.name %></div>
<% end %>
</div>
<div class="columnSelect-column columnSelect-column--sidebar">
<% if @options.length > 10: %>
<% if @attribute.options.length > 10: %>
<div class="columnSelect-search">
<%- @Icon('magnifier') %>
<input class="js-search">
@ -28,8 +28,8 @@
</div>
<% end %>
<div class="columnSelect-pool js-pool">
<% for option in @options: %>
<div class="columnSelect-option js-select js-option" data-value="<%= option.value %>" title="<%= option.name %>"><%= option.name %></div>
<% for option in @attribute.options: %>
<div class="columnSelect-option js-select js-option<%= ' is-hidden' if option.selected %>" data-value="<%= option.value %>" title="<%= option.name %>"><%= option.name %></div>
<% end %>
</div>
</div>