Skip to content

Commit

Permalink
fix: keep the current page on page size change
Browse files Browse the repository at this point in the history
  • Loading branch information
lucien martijn committed Feb 10, 2025
1 parent 8c64c86 commit 3be0d01
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 71 deletions.
78 changes: 57 additions & 21 deletions media/scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@

let currentPageDataTab = 1
let currentPageQueryTab = 1

let pageSizeDataTab = 1;
let pageSizeQueryTab = 1;

let amountOfPagesDataTab = 1
let amountOfPagesQueryTab = 1

Expand Down Expand Up @@ -340,6 +344,8 @@
numRecordsDropdownSelectedIndex = numRecordsDropdown.selectedIndex
}

pageSizeQueryTab = defaultPageSizes[0]

const options = createOptionHTMLElementsString(defaultPageSizes)

resultsTable = new Tabulator(`#table-${requestSourceQueryTab}`, {
Expand Down Expand Up @@ -452,12 +458,10 @@
resetQueryResultControls(rowCountQueryTab)
initializeFooter(rowCountQueryTab, requestSourceQueryTab)
updatePageCounterState(
currentPageQueryTab,
amountOfPagesQueryTab,
requestSourceQueryTab
)
updateNavigationButtonsState(
currentPageQueryTab,
amountOfPagesQueryTab,
requestSourceQueryTab
)
Expand Down Expand Up @@ -615,7 +619,12 @@
function initSchema(/** @type {any} */ data) {
const columns = [
{ title: '#', field: 'index', width: 50 },
{ title: 'Column name', field: 'name', width: 150 },
{
title: 'Column name',
field: 'name',
width: 150,
cellClick: onCellClick,
},
{
title: 'Data type',
field: 'type',
Expand Down Expand Up @@ -666,6 +675,8 @@
cellClick: onCellClick,
}))

pageSizeDataTab = defaultPageSizes[0]

const options = createOptionHTMLElementsString(defaultPageSizes)
dataTable = new Tabulator('#table', {
columnDefaults: {
Expand Down Expand Up @@ -708,12 +719,10 @@

initializeFooter(rowCountDataTab, requestSourceDataTab)
updatePageCounterState(
currentPageDataTab,
amountOfPagesDataTab,
requestSourceDataTab
)
updateNavigationButtonsState(
currentPageDataTab,
amountOfPagesDataTab,
requestSourceDataTab
)
Expand Down Expand Up @@ -743,13 +752,11 @@
/** @type {number} */ rowCount,
/** @type {string} */ requestSource,
/** @type {string} */ requestType,
/** @type {number} */ currentPage,
/** @type {number} */ pageCount,
/** @type {any} */ schema
) {
if (requestSource === requestSourceDataTab) {
rowCountDataTab = rowCount
currentPageDataTab = currentPage
amountOfPagesDataTab = pageCount

dataTable.replaceData(data)
Expand All @@ -758,21 +765,18 @@
if (requestType === 'query') {
schemaQueryResult = schema
rowCountQueryTab = rowCount
currentPageQueryTab = currentPage
amountOfPagesQueryTab = pageCount
sortObjectQueryTab = undefined

initResultTable(data, headers)
} else if (requestType === 'paginator') {
rowCountQueryTab = rowCount
currentPageQueryTab = currentPage
amountOfPagesQueryTab = pageCount

resultsTable.replaceData(data)
resultsTable.clearAlert()
} else if (requestType === 'search') {
rowCountQueryTab = rowCount
currentPageQueryTab = currentPage
amountOfPagesQueryTab = pageCount

resultsTable.replaceData(data)
Expand All @@ -794,6 +798,7 @@
/** @type {String} */ requestSource,
/** @type {Number} */ rowCount
) {
// console.log(`updatePageCount(${requestSource}, ${rowCount})`)
if (requestSource === requestSourceQueryTab) {
const pageCountElement = document.getElementById('page-count')
if (rowCount > 0) {
Expand Down Expand Up @@ -823,16 +828,17 @@
}

function updatePageCounterState(
/** @type {Number} */ currentPage,
/** @type {Number} */ amountOfPages,
/** @type {String} */ requestSource
) {
// console.log(`updatePageCounterState(${currentPage}, ${amountOfPages}, ${requestSource})`);
// console.log(`updatePageCounterState(amountOfPages:${amountOfPages}, ${requestSource})`);

if (!doesFooterExist()) {
return
}

const currentPage = requestSource === requestSourceDataTab ? currentPageDataTab : currentPageQueryTab

const currentPageSpan = /** @type {HTMLElement} */ (
document.querySelector(`#page-current-${requestSource}`)
)
Expand All @@ -853,7 +859,6 @@
}

function updateNavigationButtonsState(
/** @type {Number} */ currentPage,
/** @type {Number} */ amountOfPages,
/** @type {String} */ requestSource
) {
Expand All @@ -876,6 +881,8 @@
document.querySelector(`#btn-last-${requestSource}`)
)

let currentPage = requestSource === requestSourceDataTab ? currentPageDataTab : currentPageQueryTab

if (amountOfPages <= 1) {
nextButton.setAttribute('disabled', '')
prevButton.setAttribute('disabled', '')
Expand Down Expand Up @@ -1046,6 +1053,20 @@
})
}

function calcNewPagePageNumerOnPageSizeChange(newPageSize, oldPageSize, pageNumber) {
let nextPageNumber;
if (newPageSize === undefined) {
nextPageNumber = 1;
} else {
// Calculate the zero-based index of the first item on the current page
const firstItemIndex = (pageNumber - 1) * Number(oldPageSize)

// Calculate the new page number
nextPageNumber = Math.floor(firstItemIndex / Number(newPageSize)) + 1
}
return nextPageNumber;
}

function initializeFooter(
/** @type {Number} */ rowCount,
/** @type {String} */ requestSource
Expand Down Expand Up @@ -1227,34 +1248,52 @@
const selectedOption = numRecordsDropdown.options[selectedIndex]
const getSelectedPageSize =
selectedOption.innerText.toLowerCase()

const pageSize =
getSelectedPageSize === 'all'
? undefined
: getSelectedPageSize

const filterValueInput = /** @type {HTMLElement} */ (
document.querySelector(`#input-filter-values`)
)

const pageNumber = 1
let pageNumber;
let sort
// https://stackoverflow.com/questions/61809200/default-page-number-on-page-size-change
if (requestSource === requestSourceDataTab) {
dataTable.alert('Loading...')
sort = sortObjectDataTab
if (pageSize === undefined) {
currentPageDataTab = 1
currentPageDataTab = pageNumber = 1
} else {
currentPageDataTab = pageNumber = calcNewPagePageNumerOnPageSizeChange(
Number(pageSize),
pageSizeDataTab,
currentPageDataTab
)
pageSizeDataTab = Number(pageSize)
}
} else {
numRecordsDropDownResultTableHasChanged = true
resultsTable.alert('Loading...')
sort = sortObjectQueryTab
if (pageSize === undefined) {
currentPageQueryTab = 1
currentPageQueryTab = pageNumber = 1
} else {
currentPageQueryTab = pageNumber = calcNewPagePageNumerOnPageSizeChange(
Number(pageSize),
pageSizeQueryTab,
currentPageQueryTab
)
pageSizeQueryTab = Number(pageSize)
}

}
vscode.postMessage({
type: 'changePageSize',
data: {
newPageSize: pageSize,
pageSize: pageSize,
pageNumber: pageNumber,
sort: sort,
searchString: filterValueInput?.value,
Expand Down Expand Up @@ -1286,6 +1325,7 @@
tableData.headers,
tableData.totalPageCount
)
// NOTE: Make sure data tab is clicked if parquet-wasm
document.getElementById('data-tab')?.click()
} else {
initCodeEditor(
Expand All @@ -1297,7 +1337,6 @@
schemaQueryResult = tableData.schema
rowCountQueryTab = tableData.rowCount
rowCountDataTab = tableData.rowCount
currentPageQueryTab = tableData.currentPage
amountOfPagesQueryTab = tableData.pageCount
initializeQueryResultControls()
initResultTable(tableData.rawData, tableData.headers)
Expand All @@ -1319,18 +1358,15 @@
tableData.rowCount,
tableData.requestSource,
tableData.requestType,
tableData.currentPage,
tableData.pageCount,
tableData.schema
)

updatePageCounterState(
tableData.currentPage,
tableData.pageCount,
tableData.requestSource
)
updateNavigationButtonsState(
tableData.currentPage,
tableData.pageCount,
tableData.requestSource
)
Expand Down
45 changes: 5 additions & 40 deletions src/paginator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ export interface QueryObject {
}

export abstract class Paginator {
protected currentPage: number = 1
public totalItems: number
protected totalPages: number

Expand All @@ -34,86 +33,52 @@ export abstract class Paginator {

if (
this.totalPages !== undefined &&
this.currentPage >= this.totalPages
query.pageNumber > this.totalPages
) {
throw new Error('No more pages available.')
}
this.currentPage += 1
return this.getItems(query)
}

async previousPage(query: QueryObject): Promise<any[]> {
this.totalPages = this.getTotalPages(query.pageSize)

if (this.currentPage <= 1) {
throw new Error('Already on the first page.')
if (query.pageNumber < 1) {
throw new Error('Page number cannot be 0')
}
this.currentPage -= 1
return this.getItems(query)
}

async firstPage(query: QueryObject): Promise<any[]> {
this.totalPages = this.getTotalPages(query.pageSize)

this.currentPage = 1
return this.getItems(query)
}

async lastPage(query: QueryObject): Promise<any[]> {
this.totalPages = this.getTotalPages(query.pageSize)

this.currentPage = this.totalPages

return this.getItems(query)
}

async gotoPage(query: QueryObject): Promise<any[]> {
this.totalPages = this.getTotalPages(query.pageSize)

if (query.pageNumber === undefined) {
query.pageNumber = this.getPageNumber()
}
if (query.pageNumber > this.totalPages) {
this.calculateNewPageNumber(query.pageSize)
query.pageNumber = this.getPageNumber()
throw new Error("Page number is higher than amount of pages.");
}

if (
query.pageNumber < 1 ||
(this.totalPages !== undefined &&
query.pageNumber > this.totalPages)
) {
// throw new Error("Invalid page number.");
throw new Error("Invalid page number.");
}
this.currentPage = query.pageNumber
return this.getItems(query)
}

async getItems(query: QueryObject): Promise<any[]> {
return this.getPage(query)
}

getCurrentPage(query: QueryObject) {
this.calculateNewPageNumber(query.pageSize)

return this.getPage(query)
}

getPageNumber() {
return this.currentPage
}

calculateNewPageNumber(newPageSize: number): void {
if (newPageSize === undefined) {
this.currentPage = 1
} else {
// Calculate the zero-based index of the first item on the current page
const firstItemIndex = (this.currentPage - 1) * newPageSize

// Calculate the new page number
const newPageNumber = Math.floor(firstItemIndex / newPageSize) + 1

this.currentPage = newPageNumber
}
}
}
Loading

0 comments on commit 3be0d01

Please sign in to comment.