fix(datatable): 🐛 Fix paginazione non funzionante

resources/js/Components/DataTable/DataTable.tsx

@@ -45,6 +45,36 @@ export default class DataTable extends Component<Attributes> {
     currentEnd: 10
   };
 
+  oninit(vnode: Vnode<Attributes>) {
+    super.oninit(vnode);
+
+    let defaultRowsPerPage: number = Number.parseInt(this.attrs.get('default-rows-per-page', '10') as string, 10);
+
+    if (Number.isInteger(defaultRowsPerPage)) {
+      if (!this.rowsPerPage.options.includes(defaultRowsPerPage)) {
+        [defaultRowsPerPage] = this.rowsPerPage.options;
+      }
+
+      this.rowsPerPage.value = defaultRowsPerPage;
+    }
+  }
+
+  oncreate(vnode: VnodeDOM<Attributes>) {
+    super.oncreate(vnode);
+
+    $(this.element)
+      .find('thead th.mdc-data-table__header-cell--with-sort')
+      .on('click', this.onColumnClicked.bind(this));
+    $(this.element)
+      .find('.mdc-data-table__pagination-rows-per-page-select')
+      .val(String(this.rowsPerPage.value))
+      .on('selected', this.onPaginationSelected.bind(this));
+    $(this.element)
+      // eslint-disable-next-line sonarjs/no-duplicate-string
+      .find('.mdc-data-table__pagination-button')
+      .on('click', this.onPaginationButtonClicked.bind(this));
+  }
+
   onbeforeupdate(vnode: VnodeDOM<Attributes, this>) {
     super.onbeforeupdate(vnode);
     const children = (vnode.children as Children[]).flat();
@@ -57,53 +87,24 @@ export default class DataTable extends Component<Attributes> {
       this.rowsPerPage.options = rowsPerPage
         .split(',')
         .map((value: string) => Number.parseInt(value, 10));
-    }
 
-    // @ts-ignore (Waiting proper fix from collect.jsd devs)
-    let defaultRowsPerPage: number = Number.parseInt(this.attrs.get('default-rows-per-page', '10') as string, 10);
 
-    if (Number.isInteger(defaultRowsPerPage)) {
+      if (this.rowsPerPage.currentStart === 0) {
-      if (!this.rowsPerPage.options.includes(defaultRowsPerPage)) {
+        this.rowsPerPage.currentEnd = this.rowsPerPage.value >= this.rows.length
-        [defaultRowsPerPage] = this.rowsPerPage.options;
+          ? this.rows.length
+          : this.rowsPerPage.value;
       }
-
-      this.rowsPerPage.value = defaultRowsPerPage;
-    }
-
-    if (this.rowsPerPage.currentStart === 0) {
-      this.rowsPerPage.currentEnd = this.rowsPerPage.value >= this.rows.length
-        ? this.rows.length
-        : defaultRowsPerPage;
     }
   }
 
   onupdate(vnode: VnodeDOM<Attributes, this>) {
     super.onupdate(vnode);
     const rows: Cash = $(this.element).find('tbody tr');
-    rows.hide();
+    rows.hide().slice(this.rowsPerPage.currentStart, this.rowsPerPage.currentEnd).show();
-
-    // eslint-disable-next-line no-plusplus
-    for (
-      let index = this.rowsPerPage.currentStart;
-      index < this.rowsPerPage.currentEnd;
-      index += 1
-    ) {
-      rows.eq(index).show();
-    }
 
     if (this.rowsPerPage.currentStart === 0) {
       this.paginate('first');
     }
-
-    $(this.element)
-      .find('thead th.mdc-data-table__header-cell--with-sort')
-      .on('click', this.onColumnClicked.bind(this));
-    $(this.element)
-      .find('.mdc-data-table__pagination-rows-per-page-select')
-      .on('selected', this.onPaginationSelected.bind(this));
-    $(this.element)
-      .find('.mdc-data-table__pagination-button')
-      .on('click', this.onPaginationButtonClicked.bind(this));
   }
 
   view() {
@@ -142,11 +143,7 @@ export default class DataTable extends Component<Attributes> {
                     style="--mdc-select-width: 112px; --mdc-select-height: 36px; --mdc-menu-item-height: 36px;"
                   >
                     {this.rowsPerPage.options.map((rowsPerPage) => (
-                      <mwc-list-item
+                      <mwc-list-item key={rowsPerPage} value={String(rowsPerPage)}>
-                        key={rowsPerPage}
-                        value={String(rowsPerPage)}
-                        selected={this.rowsPerPage.value === rowsPerPage}
-                      >
                         {rowsPerPage}
                       </mwc-list-item>
                     ))}
@@ -157,7 +154,9 @@ export default class DataTable extends Component<Attributes> {
                   <div className="mdc-data-table__pagination-total">
                     {__(':start-:chunk di :total', {
                       start: this.rowsPerPage.currentStart + 1,
-                      chunk: this.rowsPerPage.currentEnd,
+                      chunk: this.rowsPerPage.currentEnd > this.rows.length
+                        ? this.rows.length
+                        : this.rowsPerPage.currentEnd,
                       total: this.rows.length
                     })}
                   </div>
@@ -315,44 +314,49 @@ export default class DataTable extends Component<Attributes> {
   }
 
   onPaginationSelected(event: Event & {detail: {index: number}}) {
-    this.rowsPerPage.value = Number.parseInt(
+    const selectValue = $(event.target as HTMLFormElement).val();
-      $(event.target as Element)
+    const rowsPerPage = Number.parseInt(selectValue as string, 10);
-        .find('mwc-list-item')
+    this.rowsPerPage = {
-        .eq(event.detail.index)
+      ...this.rowsPerPage,
-        .val() as string,
+      value: rowsPerPage,
-      10
+      currentStart: 0,
-    );
+      currentEnd: rowsPerPage
-    this.rowsPerPage.currentStart = 0;
+    };
-    this.rowsPerPage.currentEnd = this.rowsPerPage.value;
+
     m.redraw();
   }
 
   onPaginationButtonClicked(event: Event) {
-    const button: Cash = $(event.target as Element);
+    const button: HTMLButtonElement | null = (event.target as HTMLElement).closest('.mdc-data-table__pagination-button');
-    this.paginate(button.data('page') as PaginationAction);
+    this.paginate(button?.dataset.page as PaginationAction);
     m.redraw();
   }
 
   paginate(action: PaginationAction) {
-    const increments = {
+    if (action === 'first' || action === 'last') {
-      first: -this.rowsPerPage.currentStart,
+      const checkPagination = () => (action === 'first' ? this.rowsPerPage.currentStart > 0 : this.rowsPerPage.currentEnd < this.rows.length);
-      next: this.rowsPerPage.value,
+
-      previous: -this.rowsPerPage.value,
+      let check = checkPagination();
-      last: this.rows.length - this.rowsPerPage.currentStart
+      while (check) {
-    };
+        this.paginate(action === 'first' ? 'previous' : 'next');
-    const increment = increments[action];
+        check = checkPagination();
+      }
+    } else {
+      const increments = {
+        next: this.rowsPerPage.value,
+        previous: -this.rowsPerPage.value
+      };
+      const increment = increments[action];
 
-    if (action !== 'first') {
       this.rowsPerPage.currentStart += increment;
-    }
+      if (this.rowsPerPage.currentStart < 0) {
+        this.rowsPerPage.currentStart = 0;
+      }
 
-    if (action !== 'last') {
       this.rowsPerPage.currentEnd += increment;
     }
 
-    const paginationButtons = this.element.querySelectorAll(
+    const paginationButtons: NodeListOf<HTMLButtonElement> = this.element.querySelectorAll('.mdc-data-table__pagination-button');
-      '.mdc-data-table__pagination-button'
-    );
     const disabled = {
       first: this.rowsPerPage.currentStart === 0,
       previous: this.rowsPerPage.currentStart === 0,
@@ -361,9 +365,7 @@ export default class DataTable extends Component<Attributes> {
     };
 
     for (const button of paginationButtons) {
-      const buttonElement = $(button);
+      button.disabled = disabled[button.dataset.page as PaginationAction];
-      const buttonAction = buttonElement.data('page') as PaginationAction;
-      buttonElement.prop('disabled', disabled[buttonAction]);
     }
   }