update filter UI

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
@@ -356,6 +356,8 @@ function dropdownButtonClickHandler(event) {
 }
 
 function dropOptionClickHandler(event) {
+    console.log(event.target.dataset.value);
+    console.log(event.target.dataset.type);
     toggleOption(event.target.dataset.value, event.target.dataset.type);
     toggleDropdown(event.target); // Closes the dropdown list
 }

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 = [
     {
@@ -60,7 +65,6 @@ document.addEventListener('gmoCampaignListBlock', async function() {
     }
 
     currentGraphqlFilter= generateFilterJSON(graphQLFilterArray);
-    console.log(currentGraphqlFilter);
     const block = document.querySelector('.gmo-program-list.block');
     //Get Campaign Count for pagination
     campaignCount = graphqlCampaignCount(currentGraphqlFilter);
@@ -85,15 +89,15 @@ export default async function decorate(block, numPerPage = currentNumberPerPage,
     // 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');
-    console.log(`Back? ${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);
     }
-    console.log(graphQLFilter);
 
     const campaignPaginatedResponse = await graphqlAllCampaignsFilter(numPerPage, cursor,graphQLFilter);
     const campaigns = campaignPaginatedResponse.data.programPaginated.edges;
@@ -588,4 +592,14 @@ 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);
+       }
+    }
 }