From f65d0735b7b97a4e471c046411f07b2ff327e2e3 Mon Sep 17 00:00:00 2001
From: Maicol Battistini <maicolbattistini@live.it>
Date: Thu, 26 Aug 2021 20:09:28 +0200
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E2=9C=A8=20=F0=9F=92=A9=20?=
 =?UTF-8?q?Aggiunto=20wrapper=20data=20table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Necessita miglioramenti
---
 .idea/inspectionProfiles/Project_Default.xml  |  3 +-
 .../js/Components/DataTable/DataTable.js      | 59 +++++++++++++++++++
 .../js/Components/DataTable/TableBody.js      |  7 +++
 .../js/Components/DataTable/TableCell.js      | 13 ++++
 .../js/Components/DataTable/TableFooter.js    |  0
 .../js/Components/DataTable/TableHead.js      |  7 +++
 .../js/Components/DataTable/TableHeadCell.js  | 15 +++++
 .../js/Components/DataTable/TableHeadRow.js   |  9 +++
 resources/js/Components/DataTable/TableRow.js |  9 +++
 9 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/Components/DataTable/DataTable.js
 create mode 100644 resources/js/Components/DataTable/TableBody.js
 create mode 100644 resources/js/Components/DataTable/TableCell.js
 create mode 100644 resources/js/Components/DataTable/TableFooter.js
 create mode 100644 resources/js/Components/DataTable/TableHead.js
 create mode 100644 resources/js/Components/DataTable/TableHeadCell.js
 create mode 100644 resources/js/Components/DataTable/TableHeadRow.js
 create mode 100644 resources/js/Components/DataTable/TableRow.js

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 1bedf61cf..c94741611 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -74,12 +74,13 @@
     <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="5">
+          <list size="6">
             <item index="0" class="java.lang.String" itemvalue="slot" />
             <item index="1" class="java.lang.String" itemvalue="class" />
             <item index="2" class="java.lang.String" itemvalue="tabindex" />
             <item index="3" class="java.lang.String" itemvalue="divider" />
             <item index="4" class="java.lang.String" itemvalue="padded" />
+            <item index="5" class="java.lang.String" itemvalue="scope" />
           </list>
         </value>
       </option>
diff --git a/resources/js/Components/DataTable/DataTable.js b/resources/js/Components/DataTable/DataTable.js
new file mode 100644
index 000000000..3d2225ebf
--- /dev/null
+++ b/resources/js/Components/DataTable/DataTable.js
@@ -0,0 +1,59 @@
+import '@material/mwc-linear-progress';
+import '@material/mwc-list/mwc-list-item';
+import '@material/mwc-select';
+import Component from '../Component';
+import Mdi from '../Mdi';
+
+export default class DataTable extends Component {
+  view(vnode) {
+    return <div className="mdc-data-table" {...vnode.attrs}>
+      <div className="mdc-data-table__table-container">
+        <table className="mdc-data-table__table" aria-label={vnode.attrs['aria-label']}>
+          {vnode.children}
+        </table>
+
+        {vnode.attrs.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
+              </div>
+
+              <mwc-select className="mdc-data-table__pagination-rows-per-page-select">
+                <mwc-list-item value="10">10</mwc-list-item>
+                <mwc-list-item value="25">25</mwc-list-item>
+                <mwc-list-item value="50">50</mwc-list-item>
+                <mwc-list-item value="75">75</mwc-list-item>
+                <mwc-list-item value="100">100</mwc-list-item>
+              </mwc-select>
+            </div>
+
+            <div className="mdc-data-table__pagination-navigation">
+              <div className="mdc-data-table__pagination-total">
+                1‑10 di 100
+              </div>
+              <mwc-icon-button className="mdc-data-table__pagination-button" data-page="first" disabled>
+                <Mdi icon="page_first"/>
+              </mwc-icon-button>
+              <mwc-icon-button className="mdc-data-table__pagination-button" data-page="prev" disabled>
+                <Mdi icon="chevron_left"/>
+              </mwc-icon-button>
+              <mwc-icon-button className="mdc-data-table__pagination-button" data-page="next">
+                <Mdi icon="chevron_right"/>
+              </mwc-icon-button>
+              <mwc-icon-button className="mdc-data-table__pagination-button" data-page="last">
+                <Mdi icon="chevron_last"/>
+              </mwc-icon-button>
+            </div>
+          </div>
+        </div> : ''}
+
+        <div className="mdc-data-table__progress-indicator">
+          <div className="mdc-data-table__scrim"/>
+          <mwc-linear-progress className="mdc-data-table__linear-progress" indeterminate/>
+        </div>
+      </div>
+    </div>;
+    // TODO: Inserire traduzioni
+  }
+}
diff --git a/resources/js/Components/DataTable/TableBody.js b/resources/js/Components/DataTable/TableBody.js
new file mode 100644
index 000000000..ee9bd7898
--- /dev/null
+++ b/resources/js/Components/DataTable/TableBody.js
@@ -0,0 +1,7 @@
+import Component from '../Component';
+
+export default class TableBody extends Component {
+  view(vnode) {
+    return <tbody {...vnode.attrs}>{vnode.children}</tbody>;
+  }
+}
diff --git a/resources/js/Components/DataTable/TableCell.js b/resources/js/Components/DataTable/TableCell.js
new file mode 100644
index 000000000..1c43cabe4
--- /dev/null
+++ b/resources/js/Components/DataTable/TableCell.js
@@ -0,0 +1,13 @@
+import classnames from 'classnames';
+import Component from '../Component';
+
+/**
+ * Attributes:
+ * - type: numeric, checkbox
+ */
+export default class TableCell extends Component {
+  view(vnode) {
+    this.attrs.className = classnames('mdc-data-table__cell', vnode.attrs.className, `mdc-data-table__cell--${vnode.attrs.type}`);
+    return <td {...this.attrs}>{vnode.children}</td>;
+  }
+}
diff --git a/resources/js/Components/DataTable/TableFooter.js b/resources/js/Components/DataTable/TableFooter.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/resources/js/Components/DataTable/TableHead.js b/resources/js/Components/DataTable/TableHead.js
new file mode 100644
index 000000000..0ca8568a8
--- /dev/null
+++ b/resources/js/Components/DataTable/TableHead.js
@@ -0,0 +1,7 @@
+import Component from '../Component';
+
+export default class TableHead extends Component {
+  view(vnode) {
+    return <thead {...vnode.attrs}>{vnode.children}</thead>;
+  }
+}
diff --git a/resources/js/Components/DataTable/TableHeadCell.js b/resources/js/Components/DataTable/TableHeadCell.js
new file mode 100644
index 000000000..44ca952e2
--- /dev/null
+++ b/resources/js/Components/DataTable/TableHeadCell.js
@@ -0,0 +1,15 @@
+import classnames from 'classnames';
+import Component from '../Component';
+
+/**
+ * Attributes:
+ * - type: numeric, checkbox
+ */
+export default class TableHeadCell extends Component {
+  view(vnode) {
+    this.attrs.className = classnames('mdc-data-table__header-cell', vnode.attrs.className, {
+      [`mdc-data-table__header-cell--${vnode.attrs.type}`]: vnode.attrs.type
+    });
+    return <th {...this.attrs} role="columnheader" scope="col">{vnode.children}</th>;
+  }
+}
diff --git a/resources/js/Components/DataTable/TableHeadRow.js b/resources/js/Components/DataTable/TableHeadRow.js
new file mode 100644
index 000000000..d8ac478ca
--- /dev/null
+++ b/resources/js/Components/DataTable/TableHeadRow.js
@@ -0,0 +1,9 @@
+import classnames from 'classnames';
+import Component from '../Component';
+
+export default class TableHeadRow extends Component {
+  view(vnode) {
+    this.attrs.className = classnames('mdc-data-table__header-row', vnode.attrs.className);
+    return <tr {...this.attrs}>{vnode.children}</tr>;
+  }
+}
diff --git a/resources/js/Components/DataTable/TableRow.js b/resources/js/Components/DataTable/TableRow.js
new file mode 100644
index 000000000..58f9a700a
--- /dev/null
+++ b/resources/js/Components/DataTable/TableRow.js
@@ -0,0 +1,9 @@
+import classnames from 'classnames';
+import Component from '../Component';
+
+export default class TableRow extends Component {
+  view(vnode) {
+    this.attrs.className = classnames('mdc-data-table__row', vnode.attrs.className);
+    return <tr {...this.attrs}>{vnode.children}</tr>;
+  }
+}