Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ASSETS-88914 : Fix Pagination Frontend Code #108

Merged
merged 9 commits into from
Jun 5, 2024
Merged

ASSETS-88914 : Fix Pagination Frontend Code #108

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3350ad4
Changed the default number items per page to 4
TyroneAEM Jun 4, 2024
017018f
Decrease debounce timeout to 200 milliseconds (0.2 secs)
TyroneAEM Jun 4, 2024
c470ba4
Added check that next page cannot go past last page
TyroneAEM Jun 4, 2024
daca165
fix(pagination): Ensure proper handling of next/prev buttons and page…
TyroneAEM Jun 4, 2024
8b310ec
- Changed default items per page to 8
TyroneAEM Jun 5, 2024
fee49f6
Increased the click delay to 500 milliseconds
TyroneAEM Jun 5, 2024
8ac3b46
Merge branch 'rc' into ASSETS-88914
TyroneAEM Jun 5, 2024
ca26d4f
Disabled the Previous and Next Button as soon as they are clicked, to…
TyroneAEM Jun 5, 2024
69a985e
- Resolved merge conflict from Merge branch 'rc' into ASSETS-88914
TyroneAEM Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 55 additions & 50 deletions blocks/gmo-program-list/gmo-program-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,10 @@ const headerConfig = [
const DEFAULT_ITEMS_PER_PAGE = 8;
//Global variables used by helper functions
let currentPageInfo = {};
let cursorArray = [];
let currentPage = 1;
let currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE;

let currentGraphqlFilter = {};
let totalPages = 0;
//Get Campaign Count for pagination
let campaignCount = await graphqlCampaignCount();
let blockConfig;
Expand All @@ -62,7 +61,6 @@ document.addEventListener('gmoCampaignListBlock', async function() {
//Trigger loading the gmo-campaign-block
//Reset page variables
currentPageInfo = {};
cursorArray = [];
currentPage = 1;
currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE;

Expand All @@ -75,26 +73,23 @@ export default async function decorate(block, numPerPage = currentNumberPerPage,
if (blockConfig == undefined) blockConfig = readBlockConfig(block);
const campaignPaginatedResponse = await graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter);
const campaigns = campaignPaginatedResponse.data.programPaginated.edges;

//Set previous cursor to currentCursor
currentPageInfo.previousCursor = currentPageInfo.currentCursor;

currentPageInfo = campaignPaginatedResponse.data.programPaginated.pageInfo;
//Current cursor used in previous page logic
currentPageInfo.currentCursor = cursor;
//Next Page
if (currentPageInfo.hasNextPage){
currentPageInfo.nextCursor = campaigns[campaigns.length - 1].cursor;
}

if (!previousPage && !nextPage)
{
cursorArray = campaigns.map(item => item.cursor);
currentPageInfo.nextCursor = currentPageInfo.endCursor === undefined ? campaigns[campaigns.length - 1].cursor : currentPageInfo.endCursor;
}
else if (nextPage){

campaigns.forEach(item => {
cursorArray.push(item.cursor);
});
}
currentPageInfo.itemCount = campaigns.length;

// Calculate total number of pages
totalPages = Math.ceil(campaignCount / currentNumberPerPage);

const listHeaders = buildListHeaders(headerConfig);
const listItems = await buildCampaignList(campaigns, numPerPage);
const listFooter = buildListFooter(campaignCount, numPerPage);
Expand All @@ -107,20 +102,21 @@ export default async function decorate(block, numPerPage = currentNumberPerPage,
listContainer.appendChild(listHeaders);
listContainer.appendChild(listItems);
listContainer.appendChild(listFooter);
//Show Hide Previous and Next Page buttons
// Show Hide Previous and Next Page buttons
const footerNext = document.querySelector('.footer-pagination-button.next');
const footerPrev = document.querySelector('.footer-pagination-button.prev');
if (currentPageInfo.hasPreviousPage){
footerPrev.classList.add('active');
if (currentPage > 1) {
footerPrev.classList.add('active');
} else {
footerPrev.classList.remove('active');
footerPrev.classList.remove('active');
}

if (currentPageInfo.hasNextPage){
footerNext.classList.add('active');
if (currentPage < totalPages) {
footerNext.classList.add('active');
} else {
footerNext.classList.remove('active');
footerNext.classList.remove('active');
}

decorateIcons(block);

}
Expand Down Expand Up @@ -315,6 +311,7 @@ function buildListHeaders(headerConfig) {

function buildListFooter(rows, rowsPerPage) {
const pages = Math.ceil(rows / rowsPerPage);
totalPages = pages;
const footerWrapper = document.createElement('div');
footerWrapper.classList.add('list-footer', 'footer-wrapper');
footerWrapper.dataset.pages = pages;
Expand All @@ -329,9 +326,13 @@ function buildListFooter(rows, rowsPerPage) {
const footerPrev = document.createElement('div');
footerPrev.classList.add('footer-pagination-button', 'prev');
footerPrev.textContent = 'Prev';

footerPrev.addEventListener('click', (event) => {
// Disable the button
footerPrev.classList.remove('active');
footerPrev.classList.add('disabled');
prevPage(event.target);
})
});

const footerPageBtnsWrapper = document.createElement('div');
footerPageBtnsWrapper.classList.add('footer-pages-wrapper');
Expand All @@ -340,9 +341,13 @@ function buildListFooter(rows, rowsPerPage) {
//Show current page
buildCurrentPageDivElement(currentPage, footerPageBtnsWrapper);

footerNext.addEventListener('click', (event) => {
footerNext.addEventListener('click', (event) => {
// Disable the button
footerNext.classList.remove('active');
footerNext.classList.add('disabled');
nextPage(event.target);
})
});

footerNext.textContent = 'Next';
footerPagination.appendChild(footerPrev);
footerPagination.appendChild(footerPageBtnsWrapper);
Expand Down Expand Up @@ -411,35 +416,34 @@ function repaginate(dropdown) {
}

function nextPage(nextBtn) {
if (currentPageInfo.hasNextPage) {
//Calculate Next Page
currentPage++;
const block = document.querySelector('.gmo-program-list.block');
decorate( block, currentNumberPerPage, currentPageInfo.nextCursor, false, true,currentGraphqlFilter);
if (!(nextBtn.classList.contains('active'))) {
return;
}
const prevBtn = document.querySelector('.footer-pagination-button.prev');
prevBtn.classList.add('active');
if (currentPage < totalPages) {
currentPage++;
const block = document.querySelector('.gmo-program-list.block');
decorate(block, currentNumberPerPage, currentPageInfo.nextCursor, false, true, currentGraphqlFilter);

const prevBtn = document.querySelector('.footer-pagination-button.prev');
prevBtn.classList.add('active');

if (currentPage === totalPages) {
nextBtn.classList.remove('active');
} else {
nextBtn.classList.add('active');
}
}
}

function prevPage(prevBtn) {
if (currentPageInfo.hasPreviousPage) {
currentPage--;
const block = document.querySelector('.gmo-program-list.block');
const currentCursor = currentPageInfo.currentCursor;
//Calculate cursor for previous page
const indexCursor = cursorArray.indexOf(currentCursor) - currentNumberPerPage;
decorate(block, currentNumberPerPage, cursorArray[indexCursor], true, false,currentGraphqlFilter);
if (!(prevBtn.classList.contains('active'))) {
return;
}
const nextBtn = document.querySelector('.footer-pagination-button.next');
const currentPageBtn = document.querySelector('#current-page');
const currentPageValue = parseInt(currentPageBtn.dataset.pagenumber);
const targetPage = (currentPageValue - 1);
nextBtn.classList.add('active');
if (currentPage > 1) {
currentPage--;
const block = document.querySelector('.gmo-program-list.block');
decorate(block, currentNumberPerPage, currentPage.previousCursor, true, false, currentGraphqlFilter);
const nextBtn = document.querySelector('.footer-pagination-button.next');
nextBtn.classList.add('active');
if (currentPage === 1) {
prevBtn.classList.remove('active');
} else {
prevBtn.classList.add('active');
}
}
}

Expand Down Expand Up @@ -485,4 +489,5 @@ function sortColumn(dir, property) {
sortArray.forEach(({ row }, index) => {
container.appendChild(row);
});
}
}

Loading