loviuz/openstamanager
loviuz
/
openstamanager
mirror of https://github.com/devcode-it/openstamanager.git
1
0
Fork 0
Code Issues Releases Activity

refactor(datatable): ♻️ Suddivisione in metodi

This commit is contained in:
Maicol Battistini 2021-12-03 15:10:26 +01:00
parent 68f9443658
commit 3ce5e635b9
No known key found for this signature in database
GPG Key ID: 4FDB0F87CDB1D34A
1 changed files with 42 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,52 +59,55 @@ export default class TableColumn extends Component {
const checkbox = $(vnode.dom)
.children('mwc-checkbox');
checkbox.on('change', () => {
const row: Cash = $(this.element)
.closest('table')
.find('tbody tr[checkable]');
row.addClass('mdc-data-table__row--selected');
row.find('mwc-checkbox').prop('checked', checkbox.prop('checked'));
});
checkbox.on('change', () => this.onCheckboxClicked.bind(this));
}
// Handle click on column (add arrows)
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
const {classList} = mutation.target;
const ascendingClass = 'mdc-data-table__header-cell--sorted';
const descendingClass = 'mdc-data-table__header-cell--sorted-descending';
const onValue = classList.contains(descendingClass);
const button: Cash = $(this.element).find('mwc-icon-button-toggle');
button.prop('on', onValue);
if (classList.contains(ascendingClass) || classList.contains(descendingClass)) {
$(this.element).css('cursor', 'auto').off('click');
button.show();
}
}
});
const observer = new MutationObserver(this.onClassChanged.bind(this));
observer.observe(this.element, {
attributes: true,
attributeFilter: ['class']
});
$(this.element).find('.mdc-data-table__filter-textfield').on('input', (event: InputEvent) => {
const index = $(this.element).index();
const rows: Cash = $(this.element)
.closest('table')
.find('tbody tr');
rows.hide();
rows.filter(
(index_, element) => $(element)
.find(`td:nth-child(${index + 1})`)
.text()
.search(event.target.value) !== -1
).show();
});
$(this.element).find('.mdc-data-table__filter-textfield').on('input', this.onFilterInput.bind(this));
}
onCheckboxClicked() {
const row: Cash = $(this.element)
.closest('table')
.find('tbody tr[checkable]');
row.addClass('mdc-data-table__row--selected');
row.find('mwc-checkbox').prop('checked', checkbox.prop('checked'));
}
onClassChanged(mutations: MutationRecord[]) {
for (const mutation of mutations) {
const {classList} = mutation.target;
const ascendingClass = 'mdc-data-table__header-cell--sorted';
const descendingClass = 'mdc-data-table__header-cell--sorted-descending';
const onValue = classList.contains(descendingClass);
const button: Cash = $(this.element).find('mwc-icon-button-toggle');
button.prop('on', onValue);
if (classList.contains(ascendingClass) || classList.contains(descendingClass)) {
$(this.element).css('cursor', 'auto').off('click');
button.show();
}
}
}
onFilterInput(event: InputEvent) {
const index = $(this.element).index();
const rows: Cash = $(this.element).closest('table').find('tbody tr');
rows.hide();
rows.filter((index_, element) => $(element)
.find(`td:nth-child(${index + 1})`)
.text()
.search(event.target.value) !== -1
).show();
}
}