loviuz/openstamanager
1
0
Fork 0
mirror of https://github.com/devcode-it/openstamanager.git synced 2025-06-05 22:09:38 +02:00
Code Issues Releases Activity

fix(datatable): 🐛 Ordinamento non funzionante

Browse Source
This commit is contained in:
Maicol Battistini
2021-12-03 16:14:04 +01:00
parent 1772ff1098
commit 1492a27fe6
2 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
resources/js/Components/DataTable/DataTable.jsx
View File

@ -214,33 +214,39 @@ export default class DataTable extends Component {
const column: Cash = $(event.target) const column: Cash = $(event.target)
.closest('th'); .closest('th');
const ascendingClass = 'mdc-data-table__header-cell--sorted'; const ascendingClass = 'mdc-data-table__header-cell--sorted';
const descendingClass = 'mdc-data-table__header-cell--sorted-descending';
// If it's already sorted change direction
if (column.hasClass(ascendingClass)) {
column.toggleClass(descendingClass);
}
// Clean previously sorted info and arrows // Clean previously sorted info and arrows
const columns = $(this.element) const columns = $(this.element)
.find('thead th'); .find('thead th');
columns.removeClass(ascendingClass); columns.removeClass(ascendingClass);
columns.find('mwc-icon-button-toggle') columns.off('click').on('click', this.onColumnClicked.bind(this));
.hide();
// Add ony one header to sort // Add ony one header to sort
column.addClass(ascendingClass); column.addClass(ascendingClass);
// Check if need descending sorting
const isDescending = column.hasClass(descendingClass);
// Do sorting // Do sorting
this.sortTable(column.index() + 1, isDescending, column.attr('type') === 'numeric'); this.sortTable(column.attr('id'), false);
// Set/remove callbacks
column.off('click');
column.find('mwc-icon-button-toggle').on('click', () => {
this.sortTable(column.attr('id'));
});
} }
sortTable(columnIndex: number, isDescending: boolean, isNumeric: boolean) { sortTable(columnId: number, toggleClass = true) {
const sorted = [...$(this.element) const column: Cash = $(`#${columnId}`);
.find(`tr td:nth-child(${columnIndex})`)].sort((a: HTMLElement, b: HTMLElement) => { const cells = $(this.element).find(`tr td:nth-child(${column.index() + 1})`).get();
// Handle button class
if (toggleClass) {
column.toggleClass('mdc-data-table__header-cell--sorted-descending');
}
const isNumeric = column.attr('type') === 'numeric';
const isDescending = column.hasClass('mdc-data-table__header-cell--sorted-descending');
cells.sort((a: HTMLElement, b: HTMLElement) => {
let aValue = a.textContent; let aValue = a.textContent;
let bValue = b.textContent; let bValue = b.textContent;
@ -262,7 +268,7 @@ export default class DataTable extends Component {
return aValue < bValue ? -1 : (aValue > bValue ? 1 : 0); return aValue < bValue ? -1 : (aValue > bValue ? 1 : 0);
}); });
for (const cell of sorted) { for (const cell of cells) {
const row = $(cell) const row = $(cell)
.parent(); .parent();
row.appendTo(row.parent()); row.appendTo(row.parent());

5
resources/js/Components/DataTable/TableColumn.jsx
View File

@ -98,8 +98,11 @@ export default class TableColumn extends Component {
button.prop('on', onValue); button.prop('on', onValue);
if (classList.contains(ascendingClass) || classList.contains(descendingClass)) { if (classList.contains(ascendingClass) || classList.contains(descendingClass)) {
$(this.element).css('cursor', 'auto').off('click'); $(this.element).css('cursor', 'auto');
button.show(); button.show();
} else if (!classList.contains(ascendingClass) && !classList.contains(descendingClass)) {
$(this.element).css('cursor', 'pointer');
button.hide();
} }
} }
} }