From a786b3c67419c95dc9f1614ba55b664c79e2e204 Mon Sep 17 00:00:00 2001 From: Ovidijus Parsiunas Date: Mon, 19 Feb 2024 21:17:17 +0000 Subject: [PATCH] adding pagination async functionality to side action buttons --- .../buttons/firstLast/firstPageButtonEvents.ts | 2 +- .../buttons/firstLast/lastPageButtonEvents.ts | 2 +- .../pageButtons/buttons/number/pageNumberButtonEvents.ts | 2 +- .../pageButtons/buttons/prevNext/nextPageButtonEvents.ts | 2 +- .../buttons/prevNext/previousPageButtonEvents.ts | 2 +- .../insertRemoveStructure/update/updateCellsForRows.ts | 8 ++++++-- .../pagination/async/paginationAsyncUtils.ts | 9 ++++++--- .../outerTableComponents/pagination/paginationUtils.ts | 4 ++-- 8 files changed, 19 insertions(+), 12 deletions(-) diff --git a/component/src/elements/pagination/pageButtons/buttons/firstLast/firstPageButtonEvents.ts b/component/src/elements/pagination/pageButtons/buttons/firstLast/firstPageButtonEvents.ts index 38a279ec..fd46f461 100644 --- 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 index bf0e36e6..10eb2008 100644 --- 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 index 439a891d..b4789fc3 100644 --- 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 index ae42cc30..c523a752 100644 --- 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 index f690aebb..302b3b7f 100644 --- 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 index 6efcf886..b1fa15c6 100644 --- 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 index 671574fa..683616ff 100644 --- 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 index ec679885..cd421b06 100644 --- 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); }