feat: ✨ Major refactor componente DataTable

- Aggiunto supporto per le tabelle "checkable" (tabelle con le checkbox)
- Migliorata la gestione generale della tabella, rendendola meno complicata da creare

resources/js/Components/DataTable/DataTable.jsx

@@ -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;
+  }
 }

resources/js/Components/DataTable/TableBody.jsx

@@ -1,7 +0,0 @@
-import Component from '../Component.jsx';
-
-export default class TableBody extends Component {
-  view(vnode) {
-    return <tbody {...this.attrs.all()}>{vnode.children}</tbody>;
-  }
-}

resources/js/Components/DataTable/TableCell.jsx

@@ -6,7 +6,14 @@ import Component from '../Component.jsx';
  */
 export default class TableCell extends Component {
   view(vnode) {
-    this.attrs.addClassNames('mdc-data-table__cell', `mdc-data-table__cell--${this.attrs.get('type')}`);
+    this.attrs.addClassNames('mdc-data-table__cell', {
+      [`mdc-data-table__cell--${this.attrs.get('type')}`]: this.attrs.has('type')
+    });
+
+    if ((!vnode.children || vnode.children.length === 0) && this.attrs.get('type') === 'checkbox') {
+      vnode.children = <mwc-checkbox/>;
+    }
+
     return <td {...this.attrs.all()}>{vnode.children}</td>;
   }
 }

resources/js/Components/DataTable/TableColumn.jsx

@@ -0,0 +1,36 @@
+import Component from '../Component.jsx';
+
+/**
+ * Attributes:
+ * - type?: numeric, checkbox
+ */
+export default class TableColumn extends Component {
+  view(vnode) {
+    this.attrs.addClassNames('mdc-data-table__header-cell', {
+      [`mdc-data-table__header-cell--${this.attrs.get('type')}`]: this.attrs.has('type')
+    });
+
+    if ((!vnode.children || vnode.children.length === 0) && this.attrs.get('type') === 'checkbox') {
+      vnode.children = <mwc-checkbox/>;
+    }
+
+    return <th {...this.attrs.all()} role="columnheader" scope="col">{vnode.children}</th>;
+  }
+
+  oncreate(vnode) {
+    super.oncreate(vnode);
+
+    if (this.attrs.get('type') === 'checkbox') {
+      window.vnode = $(vnode.dom);
+      const checkbox = $(vnode.dom)
+        .children('mwc-checkbox');
+
+      checkbox.on('change', () => {
+        $(vnode.dom)
+          .closest('table')
+          .find('tbody tr[checkable] mwc-checkbox')
+          .prop('checked', checkbox.prop('checked'));
+      });
+    }
+  }
+}

resources/js/Components/DataTable/TableHead.jsx

@@ -1,7 +0,0 @@
-import Component from '../Component.jsx';
-
-export default class TableHead extends Component {
-  view(vnode) {
-    return <thead {...this.attrs.all()}>{vnode.children}</thead>;
-  }
-}

resources/js/Components/DataTable/TableHeadCell.jsx

@@ -1,14 +0,0 @@
-import Component from '../Component.jsx';
-
-/**
- * Attributes:
- * - type: numeric, checkbox
- */
-export default class TableHeadCell extends Component {
-  view(vnode) {
-    this.attrs.addClassNames('mdc-data-table__header-cell', {
-      [`mdc-data-table__header-cell--${this.attrs.get('type')}`]: this.attrs.has('type')
-    });
-    return <th {...this.attrs.all()} role="columnheader" scope="col">{vnode.children}</th>;
-  }
-}

resources/js/Components/DataTable/TableHeadRow.jsx

@@ -1,8 +0,0 @@
-import Component from '../Component.jsx';
-
-export default class TableHeadRow extends Component {
-  view(vnode) {
-    this.attrs.addClassNames('mdc-data-table__header-row');
-    return <tr {...this.attrs.all()}>{vnode.children}</tr>;
-  }
-}

resources/js/Components/DataTable/TableRow.jsx

@@ -1,8 +1,36 @@
+import '@material/mwc-checkbox';
+
+import {
+  type Children,
+  type Vnode
+} from 'mithril';
+
 import Component from '../Component.jsx';
+import TableCell from './TableCell.jsx';
 
 export default class TableRow extends Component {
   view(vnode) {
     this.attrs.addClassNames('mdc-data-table__row');
-    return <tr {...this.attrs.all()}>{vnode.children}</tr>;
+
+    return (
+      <tr {...this.attrs.all()}>
+        {this.checkbox(vnode.children)}
+        {vnode.children}
+      </tr>
+    );
+  }
+
+  checkbox(children: Array<Children>): Children {
+    if (!this.attrs.has('checkable')) {
+      return <></>;
+    }
+
+    for (const child: Vnode of children) {
+      if (child.attrs.type === 'checkbox') {
+        break;
+      }
+    }
+
+    return <TableCell type="checkbox"/>;
   }
 }

resources/js/Components/DataTable/index.js

@@ -1,9 +1,6 @@
 export { default as DataTable } from './DataTable.jsx';
-export { default as TableBody } from './TableBody.jsx';
 export { default as TableCell } from './TableCell.jsx';
+export { default as TableColumn } from './TableColumn.jsx';
 export { default as TableFooter } from './TableFooter.jsx';
-export { default as TableHead } from './TableHead.jsx';
-export { default as TableHeadCell } from './TableHeadCell.jsx';
-export { default as TableHeadRow } from './TableHeadRow.jsx';
 export { default as TableRow } from './TableRow.jsx';