columnSelect: render initial selected state

app/assets/javascripts/app/controllers/layout_ref.coffee

@@ -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

app/assets/javascripts/app/lib/app_post/column_select.coffee

@@ -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

app/assets/javascripts/app/views/generic/column_select.jst.eco

@@ -1,24 +1,24 @@
 <select
   class="columnSelect-shadow js-shadow"
-  id="<%= @id %>"
+  id="<%= @attribute.id %>"
-  name="<%= @name %>"
+  name="<%= @attribute.name %>"
-  <%= @required %>
+  <%= @attribute.required %>
-  <%= @autofocus %>
+  <%= @attribute.autofocus %>
-  value="<%= @value %>"
+  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>
+  <div class="u-placeholder u-unselectable js-placeholder<%= ' is-hidden' if @values.length %>"><%- @T('Nothing selected') %></div>
-  <% for option in @options: %>
+  <% for option in @attribute.options: %>
-  <div class="columnSelect-option is-hidden js-remove js-option" data-value="<%= option.value %>"><%= option.name %></div>
+  <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: %>
+    <% for option in @attribute.options: %>
-    <div class="columnSelect-option js-select js-option" data-value="<%= option.value %>" title="<%= option.name %>"><%= option.name %></div>
+    <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>