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: ✨ Major refactor componente DataTable

Browse Source 
- Aggiunto supporto per le tabelle "checkable" (tabelle con le checkbox)
- Migliorata la gestione generale della tabella, rendendola meno complicata da creare
This commit is contained in:
Maicol Battistini
2021-11-22 19:22:54 +01:00
parent e5d04fbf17
commit 7acaf6ed38
12 changed files with 210 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,22 +2,44 @@ import '@material/mwc-linear-progress';
import '@material/mwc-list/mwc-list-item';
import '@material/mwc-select';
import {
type Children,
type Vnode
} from 'mithril';
import Component from '../Component.jsx';
import Mdi from '../Mdi.jsx';
import TableColumn from './TableColumn.jsx';
import TableFooter from './TableFooter.jsx';
import TableRow from './TableRow.jsx';
export default class DataTable extends Component {
view(vnode) {
return <div className="mdc-data-table" {...this.attrs.all()}>
<div className="mdc-data-table__table-container">
<table className="mdc-data-table__table" aria-label={vnode.attrs['aria-label']}>
{vnode.children}
<table className="mdc-data-table__table" aria-label={this.attrs.get('aria-label')}>
<thead>
<tr className="mdc-data-table__header-row">
{this.attrs.has('checkable')
&& <TableColumn type="checkbox">
<mwc-checkbox/>
</TableColumn>}
{this.tableColumns(vnode.children)}
</tr>
</thead>
<tbody>
{this.tableRows(vnode.children)}
</tbody>
{this.tableFooter(vnode.children)}
</table>
{this.attrs.has('paginated') ? <div className="mdc-data-table__pagination">
{this.attrs.has('paginated') && <div className="mdc-data-table__pagination">
<div className="mdc-data-table__pagination-trailing">
<div className="mdc-data-table__pagination-rows-per-page">
<div className="mdc-data-table__pagination-rows-per-page-label">
Righe per pagina
{__('Righe per pagina')}
</div>
<mwc-select className="mdc-data-table__pagination-rows-per-page-select">
@ -33,8 +55,7 @@ export default class DataTable extends Component {
<div className="mdc-data-table__pagination-navigation">
<div className="mdc-data-table__pagination-total">
{/* TODO: Aggiungere i18n */}
1‑10 di 100
{__('1-:chunk di :total', {chunk: <span id="chunk">10</span>, total: <span id="total">100</span>})}
</div>
<mwc-icon-button className="mdc-data-table__pagination-button" data-page="first" disabled>
<Mdi icon="page_first"/>
@ -50,7 +71,7 @@ export default class DataTable extends Component {
</mwc-icon-button>
</div>
</div>
</div> : ''}
</div>}
<div className="mdc-data-table__progress-indicator">
<div className="mdc-data-table__scrim"/>
@ -59,4 +80,38 @@ export default class DataTable extends Component {
</div>
</div>;
}
tableColumns(children: Array<Children>) {
return this.filterElements(children.flat(), TableColumn);
}
tableRows(children: Array<Children>) {
let rows = this.filterElements(children.flat(), TableRow);
if (this.attrs.has('checkable')) {
rows = rows.map((row: Vnode) => (
<TableRow key={row.attrs.key} checkable {...row.attrs}>
{row.children}
</TableRow>
));
}
return rows;
}
tableFooter(children: Array<Children>) {
return this.filterElements(children.flat(), TableFooter);
}
filterElements(elements: Array<Children>, tag: Component | string): Array<Children> {
const filtered = [];
for (const element: Vnode of elements) {
if (element.tag === tag) {
filtered.push(element);
}
}
return filtered;
}
}