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

feat: ✨ Aggiunto ordinamento nella tabella

Browse Source
This commit is contained in:
Maicol Battistini
2021-11-23 15:34:34 +01:00
parent 0d4d1b4356
commit 51544498c5
6 changed files with 134 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,9 @@
import '@material/mwc-icon-button-toggle';
import {type Cash} from 'cash-dom/dist/cash';
import Component from '../Component.jsx';
import Mdi from '../Mdi.jsx';
/**
* Attributes:
@@ -10,6 +15,24 @@ export default class TableColumn extends Component {
[`mdc-data-table__header-cell--${this.attrs.get('type')}`]: this.attrs.has('type')
});
if (this.attrs.has('sortable')) {
this.attrs.addClassNames('mdc-data-table__header-cell--with-sort');
this.attrs.put('aria-sort', 'none').put('data-column-id', this.attrs.get('id'));
vnode.children = (
<div className="mdc-data-table__header-cell-wrapper">
<mwc-icon-button-toggle style="--mdc-icon-button-size: 28px; display: none;">
<Mdi icon="arrow-down-thin" slot="onIcon"/>
<Mdi icon="arrow-up-thin" slot="offIcon" />
</mwc-icon-button-toggle>
&nbsp;
<div className="mdc-data-table__header-cell-label">
{vnode.children}
</div>
</div>
);
}
if ((!vnode.children || vnode.children.length === 0) && this.attrs.get('type') === 'checkbox') {
vnode.children = <mwc-checkbox/>;
}
@@ -32,5 +55,28 @@ export default class TableColumn extends Component {
.prop('checked', checkbox.prop('checked'));
});
}
// 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();
}
}
});
observer.observe(this.element, {
attributes: true,
attributeFilter: ['class']
});
}
}