Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Mantas Masalskis 2020-04-28 23:47:45 +03:00
parent b7afa91cc0
commit 49b21b147f
3 changed files with 56 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/app/views/generic/table.jst.eco
View file

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

4
app/assets/stylesheets/zammad.scss
View file

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

48
public/assets/tests/table.js
View file

@ -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')
});