adding pagination async functionality to side action buttons

OvidijusParsiunas · Feb 19, 2024 · a786b3c · a786b3c
1 parent 7ffa41e
commit a786b3c
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 12 deletions.
diff --git a/component/src/elements/pagination/pageButtons/buttons/firstLast/firstPageButtonEvents.ts b/component/src/elements/pagination/pageButtons/buttons/firstLast/firstPageButtonEvents.ts
@@ -7,7 +7,7 @@ export class FirstPageButtonEvents {
     const buttonElement = event.target as HTMLElement;
     PageButtonStyle.mouseEnter(buttonElement, this._pagination.styles.pageButtons, true);
     if (this._pagination.activePageNumber === 1) return;
-    PaginationUtils.displayRowsForDifferentButton(this, 1);
+    PaginationUtils.getAndApplyDataOnButtonClick(this, 1);
   }
 
   public static setEvents(at: ActiveTable, firstButtonElement: HTMLElement) {

diff --git a/component/src/elements/pagination/pageButtons/buttons/firstLast/lastPageButtonEvents.ts b/component/src/elements/pagination/pageButtons/buttons/firstLast/lastPageButtonEvents.ts
@@ -9,7 +9,7 @@ export class LastPageButtonEvents {
     PageButtonStyle.mouseEnter(buttonElement, styles.pageButtons, true);
     const numberOfNumberButtons = PaginationUtils.getLastPossiblePageNumber(this);
     if (numberOfNumberButtons <= activePageNumber) return;
-    PaginationUtils.displayRowsForDifferentButton(this, numberOfNumberButtons);
+    PaginationUtils.getAndApplyDataOnButtonClick(this, numberOfNumberButtons);
   }
 
   public static setEvents(at: ActiveTable, lastButtonElement: HTMLElement) {

diff --git a/component/src/elements/pagination/pageButtons/buttons/number/pageNumberButtonEvents.ts b/component/src/elements/pagination/pageButtons/buttons/number/pageNumberButtonEvents.ts
@@ -17,7 +17,7 @@ export class PageNumberButtonEvents {
     if (this._pagination.activePageNumber === buttonNumber) {
       PageButtonStyle.mouseEnter(buttonElement, pageButtons, false);
     } else {
-      PaginationUtils.getAndApplyDataOnButtonClick(this, buttonNumber, buttonNumber);
+      PaginationUtils.getAndApplyDataOnButtonClick(this, buttonNumber);
       // for the case when mouse clicks on a number button and no new buttons are created
       PageButtonStyle.mouseEnter(buttonElement, pageButtons, false);
     }

diff --git a/component/src/elements/pagination/pageButtons/buttons/prevNext/nextPageButtonEvents.ts b/component/src/elements/pagination/pageButtons/buttons/prevNext/nextPageButtonEvents.ts
@@ -6,7 +6,7 @@ export class NextPageButtonEvents {
   private static buttonMouseUp(this: ActiveTable, event: MouseEvent) {
     const {activePageNumber, styles} = this._pagination;
     if (PaginationUtils.getLastPossiblePageNumber(this) <= activePageNumber) return;
-    PaginationUtils.displayRowsForDifferentButton(this, activePageNumber + 1);
+    PaginationUtils.getAndApplyDataOnButtonClick(this, activePageNumber + 1);
     const buttonElement = event.target as HTMLElement;
     PageButtonStyle.mouseEnter(buttonElement, styles.pageButtons, true);
   }

diff --git a/component/src/elements/pagination/pageButtons/buttons/prevNext/previousPageButtonEvents.ts b/component/src/elements/pagination/pageButtons/buttons/prevNext/previousPageButtonEvents.ts
@@ -6,7 +6,7 @@ export class PreviousPageButtonEvents {
   private static buttonMouseUp(this: ActiveTable, event: MouseEvent) {
     const {activePageNumber, styles} = this._pagination;
     if (activePageNumber === 1) return;
-    PaginationUtils.displayRowsForDifferentButton(this, activePageNumber - 1);
+    PaginationUtils.getAndApplyDataOnButtonClick(this, activePageNumber - 1);
     const buttonElement = event.target as HTMLElement;
     PageButtonStyle.mouseEnter(buttonElement, styles.pageButtons, true);
   }

diff --git a/component/src/utils/insertRemoveStructure/update/updateCellsForRows.ts b/component/src/utils/insertRemoveStructure/update/updateCellsForRows.ts
@@ -11,13 +11,17 @@ import {FireEvents} from '../../events/fireEvents';
 import {ActiveTable} from '../../../activeTable';
 
 export class UpdateCellsForRows {
-  public static updateRowCells(at: ActiveTable, rowElement: HTMLElement, rowIndex: number, updateType: CELL_UPDATE_TYPE) {
+  // prettier-ignore
+  public static updateRowCells(
+      at: ActiveTable, rowElement: HTMLElement, rowIndex: number, updateType: CELL_UPDATE_TYPE, update = true) {
     const dataCellElements = ExtractElements.textCellsArrFromRow(rowElement);
     dataCellElements.forEach((cellElement: Node, columnIndex: number) => {
       if (updateType !== CELL_UPDATE_TYPE.REMOVED) {
         CellEventsReset.reset(at, cellElement as HTMLElement, rowIndex, columnIndex); // REF-33
       }
-      FireEvents.onCellUpdate(at, CellElement.getText(cellElement as HTMLElement), rowIndex, columnIndex, updateType);
+      if (update) {
+        FireEvents.onCellUpdate(at, CellElement.getText(cellElement as HTMLElement), rowIndex, columnIndex, updateType);
+      }
     });
     if (updateType !== CELL_UPDATE_TYPE.REMOVED) {
       const leftMostCell = rowElement.children[0] as HTMLElement;

diff --git a/component/src/utils/outerTableComponents/pagination/async/paginationAsyncUtils.ts b/component/src/utils/outerTableComponents/pagination/async/paginationAsyncUtils.ts
@@ -1,3 +1,4 @@
+import {PageButtonElement} from '../../../../elements/pagination/pageButtons/pageButtonElement';
 import {UpdateIndexColumnWidth} from '../../../../elements/indexColumn/updateIndexColumnWidth';
 import {ColumnTypesUtils} from '../../../columnType/columnTypesUtils';
 import {CellEvents} from '../../../../elements/cell/cellEvents';
@@ -44,14 +45,16 @@ export class PaginationAsyncUtils {
     UpdateIndexColumnWidth.update(at);
   }
 
-  public static async getAndApplyNewData(at: ActiveTable, async: PaginationAsync, buttonNumber: number, id: unknown) {
-    at._pagination.asyncGetId = id;
+  public static async getAndApplyNewData(at: ActiveTable, async: PaginationAsync, buttonNumber: number, rows?: string) {
+    const uniqueId = rows || buttonNumber;
+    at._pagination.asyncGetId = uniqueId;
     ErrorElement.remove(at);
     LoadingElement.addActive(at);
+    PageButtonElement.setActive(at, buttonNumber);
     let data: TableData = [[]];
     try {
       data = await async.getPageData(buttonNumber, at._pagination.rowsPerPage);
-      if (at._pagination.asyncGetId !== id) return;
+      if (at._pagination.asyncGetId !== uniqueId) return;
     } catch (e) {
       PaginationAsyncUtils.displayError(e, at);
     }

diff --git a/component/src/utils/outerTableComponents/pagination/paginationUtils.ts b/component/src/utils/outerTableComponents/pagination/paginationUtils.ts
@@ -196,9 +196,9 @@ export class PaginationUtils {
     return visibleRows.find((row) => !row.classList.contains(FilterInternalUtils.HIDDEN_ROW_CLASS));
   }
 
-  public static async getAndApplyDataOnButtonClick(at: ActiveTable, buttonNumber: number, id: unknown) {
+  public static async getAndApplyDataOnButtonClick(at: ActiveTable, buttonNumber: number, rowsPerPage?: string) {
     if (at._pagination._async) {
-      PaginationAsyncUtils.getAndApplyNewData(at, at._pagination._async, buttonNumber, id);
+      PaginationAsyncUtils.getAndApplyNewData(at, at._pagination._async, buttonNumber, rowsPerPage);
     } else {
       PaginationUtils.displayRowsForDifferentButton(at, buttonNumber);
     }