ColumnSelect: add support for grouping

Similar to html’s select, options can be put into groups:

[
  { label: "Germany", group: [{ value: 0, name: "Bavaria" }, { value: 1, name: "Berlin"}],
  { label: "USA", group: [{ value: 0, name: "New York" }, { value: 1, name: "California"}]
]

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

@@ -1474,7 +1474,25 @@ class InputsRef extends App.ControllerContent
         name:        'project-name'
         id:          'project-name-123'
         placeholder: 'Enter Project Name'
-        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'}]
+        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
@@ -1535,7 +1553,32 @@ class InputsRef extends App.ControllerContent
       attribute:
         name:        'company-name'
         id:          'company-name-12345'
-        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'},{value:19,name:'Telefónica Deutschland Holding GmbH'}]
+        options:     [
+          {label:'Group A', group: [
+            {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'}
+          ]},
+          {label:'Group B', group: [
+            {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'},
+            {value:19,name:'Telefónica Deutschland Holding GmbH'}
+          ]}
+        ]
     @$('.columnSelectPlaceholder').replaceWith( columnSelectObject.element() )
 
 App.Config.set( 'layout_ref/inputs', InputsRef, 'Routes' )

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

@@ -42,22 +42,37 @@ class App.ColumnSelect extends Spine.Controller
     if !_.isEmpty(@attribute.seperator)
       values = []
       if @attribute.value
-        values = @attribute.value.split(';')
+        values = @attribute.value.split(@attribute.seperator)
       else if @attribute.default
-        values = @attribute.default.split(';')
+        values = @attribute.default.split(@attribute.seperator)
 
       for value in values
         for option in @options.attribute.options
-          if option.value is value
+          # is grouped
+          if option.group is not undefined
+            for o in option.group
+              if o.value is value
+                o.selected = true
+          else if option.value is value
             option.selected = true
 
     @values = []
+    allOptions = []
     _.each @options.attribute.options, (option) =>
-      if option.selected
+      # is grouped
-        @values.push option.value.toString()
+      if option.group != undefined
+        for o in option.group
+          allOptions.push(o)
+          if o.selected
+            @values.push o.value.toString()
+      else
+        allOptions.push(option)
+        if option.selected
+          @values.push option.value.toString()
 
     @html App.view('generic/column_select')(
       attribute: @options.attribute
+      allOptions: allOptions
       values: @values
     )
 

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

@@ -10,19 +10,19 @@
   value="<%= @attribute.value %>"
   multiple
 >
-  <% for option in @attribute.options: %>
+  <% for option in @allOptions: %>
   <option value="<%= option.value %>" <%= ' selected' if option.selected %>><%= option.name %></option>
   <% end %>
 </select>
 <% end %>
 <div class="columnSelect-column columnSelect-column--selected js-selected" data-name="<%= @attribute.name %>">
   <div class="u-placeholder u-unselectable js-placeholder<%= ' is-hidden' if @values.length %>"><%- @T('Nothing selected') %></div>
-  <% for option in @attribute.options: %>
+  <% for option in @allOptions: %>
   <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" data-name="<%= @attribute.name %>">
-  <% if @attribute.options.length > 10: %>
+  <% if @allOptions.length > 10: %>
   <div class="columnSelect-search">
     <%- @Icon('magnifier') %>
     <input class="js-search" autocomplete="off">
@@ -33,7 +33,14 @@
   <% end %>
   <div class="columnSelect-pool js-pool">
     <% for option in @attribute.options: %>
-    <div class="columnSelect-option js-select js-option<%= ' is-hidden' if option.selected %>" data-value="<%= option.value %>" title="<%= option.title %>"><%= option.name %></div>
+      <% if option.group != undefined: %>
+        <div class="columnSelect-divider" title="<%= option.label %>"><%= option.label %></div>
+        <% for o in option.group: %>
+        <div class="columnSelect-option js-select js-option<%= ' is-hidden' if o.selected %>" data-value="<%= o.value %>" title="<%= o.title %>"><%= o.name %></div>
+        <% end %>
+      <% else: %>
+        <div class="columnSelect-option js-select js-option<%= ' is-hidden' if option.selected %>" data-value="<%= option.value %>" title="<%= option.title %>"><%= option.name %></div>
+      <% end %>
     <% end %>
   </div>
 </div>

app/assets/stylesheets/zammad.scss

@@ -10045,17 +10045,17 @@ output {
   padding: 0;
   line-height: 22px;
 
-  .columnSelect-shadow {
+  &-shadow {
     display: none;
   }
 
-  .columnSelect-column--selected {
+  &-column--selected {
     flex: 1 1 66%;
     overflow: auto;
     padding: 7px;
   }
 
-  .columnSelect-column--sidebar {
+  &-column--sidebar {
     flex-basis: 33%;
     flex-shrink: 1;
     border-left: 1px solid hsl(198,4%,90%);
@@ -10069,13 +10069,13 @@ output {
     }
   }
 
-  .columnSelect-pool {
+  &-pool {
     flex: 1 1 auto;
     overflow: auto;
     padding: 7px;
   }
 
-  .columnSelect-option {
+  &-option {
     @extend %clickable;
     padding: 0 5px;
     border-radius: 1px;
@@ -10088,41 +10088,49 @@ output {
     }
   }
 
+  &-divider {
+    opacity: 0.5;
+    
+    ~ .columnSelect-option {
+      padding-left: 10px;
+    }
+  }
+
   .is-hidden,
   .is-filtered {
     display: none;
   }
-}
 
-.columnSelect-search {
+  &-search {
-  position: relative;
+    position: relative;
 
-  .icon {
+    .icon {
-    fill: hsl(198,4%,85%);
+      fill: hsl(198,4%,85%);
-  }
+    }
 
-  .icon-magnifier {
+    .icon-magnifier {
-    left: 7px;
+      left: 7px;
-    top: 5px;
+      top: 5px;
-    position: absolute;
+      position: absolute;
-  }
+    }
 
-  .columnSelect-search-clear {
+    &-clear {
-    position: absolute;
+      position: absolute;
-    right: 0;
+      right: 0;
-    top: 0;
+      top: 0;
-    padding: 5px 7px;
+      padding: 5px 7px;
-    @extend %clickable;
+      @extend %clickable;
-    line-height: 1;
+      line-height: 1;
-  }
+    }
 
-  input {
+    input {
-    width: 100%;
+      width: 100%;
-    padding: 2px 30px 1px;
+      padding: 2px 30px 1px;
-    border: none;
+      border: none;
-    outline: none;
+      outline: none;
-    border-bottom: 1px solid hsl(198,4%,90%);
+      border-bottom: 1px solid hsl(198,4%,90%);
-    background: none;
+      background: none;
+    }
   }
 }