Fixes #2548 - Do not sort tables by (click on) header names if sortable by dnd is enabled

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

@@ -20,9 +20,11 @@
     <% end %>
     <% for header, i in @headers: %>
       <th class="js-tableHead<% if header.className: %> <%= header.className %><% end %><% if header.align: %> align-<%= header.align %><% end %>" style="<% if header.displayWidth: %>width:<%= header.displayWidth %>px<% end %>" data-column-key="<%= header.name %>">
-        <div class="table-column-head<%= ' js-sort' if @tableId %>">
+        <div class="table-column-head<%= ' table-column-head-unclickable' if @sortable %><%= ' js-sort' if @tableId and !@sortable %>">
           <div class="table-column-title"><%- @T(header.display) %></div>
-          <div class="table-column-sortIcon"><% if header.sortOrderIcon: %><%- @Icon(header.sortOrderIcon[0], header.sortOrderIcon[1]) %><% end %></div>
+          <% if !@sortable: %>
+            <div class="table-column-sortIcon"><% if header.sortOrderIcon: %><%- @Icon(header.sortOrderIcon[0], header.sortOrderIcon[1]) %><% end %></div>
+          <% end %>
         </div>
         <% if @tableId && !header.unresizable && i < @headers.length - 1 && (@headers.length - 1 != i && @headers[ i + 1 ] && !@headers[ i + 1 ].unresizable): %>
           <div class="table-col-resize js-col-resize"></div>

app/assets/stylesheets/zammad.scss

@@ -1143,6 +1143,10 @@ table {
 .table-column-head {
   display: flex;
   @extend %clickable;
+
+  &-unclickable {
+    cursor: default;
+  }
 }
 
 .table-column-sortIcon {

public/assets/tests/table.js

@@ -769,3 +769,51 @@ test('table test 5', function() {
   equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), 'some data 2', 'check row 2')
   equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'false', 'check row 2')
 });
+
+test('table test 6/7', function() {
+  $('#table').append('<hr><h1>sotable table with data</h1><div id="table-data6"></div>')
+  var el_head_sortable = $('#table-data6')
+
+  $('#table').append('<hr><h1>not sortable table with data</h1><div id="table-data7"></div>')
+  var el_not_head_sortable = $('#table-data7')
+
+  data = [
+    { name: 'a item', data: 'g data', active: true },
+    { name: 'b item', data: 'b data', active: false },
+    { name: 'c item', data: 'z data', active: true },
+  ]
+
+  new App.ControllerTable({
+    tableId:  'a',
+    el:       el_head_sortable,
+    overview: ['name', 'data', 'active'],
+    attribute_list: [
+      { name: 'name',     display: 'Name',      type: 'text', style: 'width: 10%' },
+      { name: 'data',     display: 'Data',      type: 'text' },
+      { name: 'active',   display: 'Active',    type: 'text' },
+    ],
+    objects: data
+  });
+
+  new App.ControllerTable({
+    tableId:  'b',
+    el:       el_not_head_sortable,
+    overview: ['name', 'data', 'active'],
+    attribute_list: [
+      { name: 'name',     display: 'Name',      type: 'text', style: 'width: 10%' },
+      { name: 'data',     display: 'Data',      type: 'text' },
+      { name: 'active',   display: 'Active',    type: 'text' },
+    ],
+    objects: data,
+    dndCallback: function() { return true }
+  });
+
+  equal(el_head_sortable.find('tbody > tr:nth-child(1) > td:first').text().trim(), 'a item', 'check row 1')
+  equal(el_not_head_sortable.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), 'a item', 'check row 1')
+
+  el_head_sortable.find('table > thead > tr > th:nth-child(2) > .js-sort').click()
+  el_not_head_sortable.find('table > thead > tr > th:nth-child(3) > .js-sort').click()
+
+  equal(el_head_sortable.find('tbody > tr:nth-child(1) > td:first').text().trim(), 'b item', 'check row 1')
+  equal(el_not_head_sortable.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), 'a item', 'check row 1')
+});