Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-base: ui.js: sorting fixes for tables initialized from markup

Browse source 
- Populate id option from table id attribute
 - Update column head sort indicator in UITable.update()
 - Don't store sort state for tables without id

Ref: https://github.com/openwrt/luci/issues/6640
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2023-10-19 23:42:13 +02:00
parent bc37a550ac
commit ee6a4da00b
1 changed files with 29 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
modules/luci-base/htdocs/luci-static/resources/ui.js
View file

@ -3233,6 +3233,17 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ {
if (!Array.isArray(data)) if (!Array.isArray(data))
return; return;
this.data = data;
this.placeholder = placeholder;
var n = 0,
rows = this.node.querySelectorAll('tr, .tr'),
trows = [],
headings = [].slice.call(this.node.firstElementChild.querySelectorAll('th, .th')),
captionClasses = this.options.captionClasses,
trTag = (rows[0] && rows[0].nodeName == 'DIV') ? 'div' : 'tr',
tdTag = (headings[0] && headings[0].nodeName == 'DIV') ? 'div' : 'td';
if (sorting) { if (sorting) {
var list = data.map(L.bind(function(row) { var list = data.map(L.bind(function(row) {
return [ this.deriveSortKey(row[sorting[0]], sorting[0]), row ]; return [ this.deriveSortKey(row[sorting[0]], sorting[0]), row ];
@ -3249,19 +3260,15 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ {
list.forEach(function(item) { list.forEach(function(item) {
data.push(item[1]); data.push(item[1]);
}); });
headings.forEach(function(th, i) {
if (i == sorting[0])
th.setAttribute('data-sort-direction', sorting[1] ? 'desc' : 'asc');
else
th.removeAttribute('data-sort-direction');
});
} }
this.data = data;
this.placeholder = placeholder;
var n = 0,
rows = this.node.querySelectorAll('tr, .tr'),
trows = [],
headings = [].slice.call(this.node.firstElementChild.querySelectorAll('th, .th')),
captionClasses = this.options.captionClasses,
trTag = (rows[0] && rows[0].nodeName == 'DIV') ? 'div' : 'tr',
tdTag = (headings[0] && headings[0].nodeName == 'DIV') ? 'div' : 'td';
data.forEach(function(row) { data.forEach(function(row) {
trows[n] = E(trTag, { 'class': 'tr' }); trows[n] = E(trTag, { 'class': 'tr' });
@ -3324,6 +3331,7 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ {
if (!headrow) if (!headrow)
return; return;
options.id = node.id;
options.classes = [].slice.call(node.classList).filter(function(c) { return c != 'table' }); options.classes = [].slice.call(node.classList).filter(function(c) { return c != 'table' });
options.sortable = []; options.sortable = [];
options.captionClasses = []; options.captionClasses = [];
@ -3422,8 +3430,11 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ {
if (this.sortState) if (this.sortState)
return this.sortState; return this.sortState;
if (!this.options.id)
return null;
var page = document.body.getAttribute('data-page'), var page = document.body.getAttribute('data-page'),
key = page + '.' + this.id, key = page + '.' + this.options.id,
state = session.getLocalData('tablesort'); state = session.getLocalData('tablesort');
if (L.isObject(state) && Array.isArray(state[key])) if (L.isObject(state) && Array.isArray(state[key]))
@ -3440,7 +3451,7 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ {
return; return;
var page = document.body.getAttribute('data-page'), var page = document.body.getAttribute('data-page'),
key = page + '.' + this.id, key = page + '.' + this.options.id,
state = session.getLocalData('tablesort'); state = session.getLocalData('tablesort');
if (!L.isObject(state)) if (!L.isObject(state))
@ -3456,19 +3467,15 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ {
if (!ev.target.matches('th[data-sortable-row]')) if (!ev.target.matches('th[data-sortable-row]'))
return; return;
var th = ev.target, var index, direction;
direction = (th.getAttribute('data-sort-direction') == 'asc'),
index = 0;
this.node.firstElementChild.querySelectorAll('th').forEach(function(other_th, i) { this.node.firstElementChild.querySelectorAll('th, .th').forEach(function(th, i) {
if (other_th !== th) if (th === ev.target) {
other_th.removeAttribute('data-sort-direction');
else
index = i; index = i;
direction = th.getAttribute('data-sort-direction') == 'asc';
}
}); });
th.setAttribute('data-sort-direction', direction ? 'desc' : 'asc');
this.setActiveSortState(index, direction); this.setActiveSortState(index, direction);
this.update(this.data, this.placeholder); this.update(this.data, this.placeholder);
} }