diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js index 79a7dfb..6d733ea 100644 --- a/blocks/gmo-program-details/gmo-program-details.js +++ b/blocks/gmo-program-details/gmo-program-details.js @@ -515,7 +515,7 @@ function enableBackBtn(block, blockConfig) { block.querySelector('.back-button').addEventListener('click', () => { const host = location.origin + getBaseConfigPath(); const listPage = blockConfig.listpage; - document.location.href = host + `/${listPage}`; + document.location.href = host + `/${listPage}?isBack=true`; }) } diff --git a/blocks/gmo-program-header/gmo-program-header.js b/blocks/gmo-program-header/gmo-program-header.js index e1edebf..b962b94 100644 --- a/blocks/gmo-program-header/gmo-program-header.js +++ b/blocks/gmo-program-header/gmo-program-header.js @@ -249,7 +249,7 @@ function toggleDropdown(element) { dropdown.classList.toggle('active'); } -function toggleOption(optionValue, optionType) { +export function toggleOption(optionValue, optionType) { const currentlySelected = document.querySelector(`.dropoption.selected[data-type='${optionType}']`); if (currentlySelected && currentlySelected.dataset.value !== optionValue) { currentlySelected.classList.remove('selected'); // Remove the 'selected' class from the previously selected option diff --git a/blocks/gmo-program-list/gmo-program-list.js b/blocks/gmo-program-list/gmo-program-list.js index 6a902fb..e4451da 100644 --- a/blocks/gmo-program-list/gmo-program-list.js +++ b/blocks/gmo-program-list/gmo-program-list.js @@ -1,9 +1,14 @@ import { readBlockConfig } from '../../scripts/lib-franklin.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; import { graphqlAllCampaignsFilter, graphqlCampaignCount, generateFilterJSON } from '../../scripts/graphql.js'; -import { getProductMapping, checkBlankString, statusMapping, dateFormat, showLoadingOverlay, hideLoadingOverlay } from '../../scripts/shared-program.js' import { getBaseConfigPath } from '../../scripts/site-config.js'; import { searchAsset } from '../../scripts/assets.js'; +import { toggleOption } from '../gmo-program-header/gmo-program-header.js'; +import { + getProductMapping, checkBlankString, statusMapping, + dateFormat, showLoadingOverlay, hideLoadingOverlay, + div, span +} from '../../scripts/shared-program.js' const headerConfig = [ { @@ -39,7 +44,6 @@ const headerConfig = [ ] const DEFAULT_ITEMS_PER_PAGE = 8; -//const programStatusMapping = statusMapping; //Global variables used by helper functions let currentPageInfo = {}; let cursorArray = []; @@ -70,6 +74,10 @@ document.addEventListener('gmoCampaignListBlock', async function() { cursorArray = []; currentPage = 1; currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE; + + // save the filter in a cookie + createSearchFilterCookie(currentGraphqlFilter); + //Trigger loading the gmo-campaign-block decorate( block, currentNumberPerPage, '', false, false, currentGraphqlFilter); }); @@ -77,6 +85,20 @@ document.addEventListener('gmoCampaignListBlock', async function() { export default async function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) { showLoadingOverlay(block); if (blockConfig == undefined) blockConfig = readBlockConfig(block); + + // check if this was a 'back' from details. if so, retrieve search params from cookie + const params = new URLSearchParams(window.location.search); + const isBack = params.get('isBack'); + // clear the params from the url + clearURLParams(); + // retrieve previous search from cookie + if (isBack) { + const filterValue = getFilterFromCookie(); + if (filterValue) graphQLFilter = JSON.parse(filterValue); + // add filter values to filter list + displayFilterSelections(graphQLFilter); + } + const campaignPaginatedResponse = await graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter); const campaigns = campaignPaginatedResponse.data.programPaginated.edges; currentPageInfo = campaignPaginatedResponse.data.programPaginated.pageInfo; @@ -551,3 +573,33 @@ function sortColumn(dir, property) { container.appendChild(row); }); } + +function createSearchFilterCookie(graphQLFilter) { + const date = new Date(); + date.setTime(date.getTime() + (24 * 60 * 60 * 1000)); + const expires = `expires=${date.toUTCString()}`; + const searchParams = JSON.stringify(graphQLFilter); + document.cookie = `MH_PROGRAM_FILTER=${encodeURIComponent(searchParams)}; ${expires}; path=/`; +} + +function getFilterFromCookie() { + const cookieName = 'MH_PROGRAM_FILTER'; + const cookie = document.cookie.match(new RegExp(`(?:^|; )${cookieName}=([^;]*)`)); + return cookie ? decodeURIComponent(cookie[1]) : null; // Return null if the cookie is not found +} + +function clearURLParams() { + const currentUrl = window.location.href; + const baseUrl = currentUrl.split('?')[0]; + history.replaceState(null, '', baseUrl); +} + +function displayFilterSelections(filterObj) { + + for (const key in filterObj) { + if (filterObj[key]._expressions && Array.isArray(filterObj[key]._expressions)) { + const value = filterObj[key]._expressions[0].value; + toggleOption(value, key); + } + } +} \ No newline at end of file