ASSETS-88902 : Add Target Geo Filter in the Landing Page (update all …

…dropdown lists to use updated graphql queries) (#77) * Add hardcoded Geo(graphy) dropdown list filter to Campaign Header * Fixed Previous Page pagination logic for calculating the cursor for the Previous page * Updated Products and Status Dropdown Lists code to use updated graphql persisted queries
hlxsites · May 9, 2024 · 664b9f5 · 664b9f5
1 parent 4b2aa39
commit 664b9f5
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 47 deletions.
diff --git a/blocks/gmo-campaign-header/gmo-campaign-header.js b/blocks/gmo-campaign-header/gmo-campaign-header.js
@@ -58,7 +58,27 @@ export default async function decorate(block) {
                 </div>
             </div>
         </div>
+
+        <div class="filter-wrapper">
+            <div class="label">Geography</div>
+            <div class="filter-dropdown" id="campaign-products">
+                <div class="dropdown-button">
+                    <div class="dropdown-label">All Geography</div>
+                    <span class="icon icon-chevronDown"></span>
+                    <span class="icon icon-chevronUp inactive"></span>
+                </div>
+                <div class="dropdown-content" id="dropdownProductOptions">
+                    <a href="#" id="option1" data-value="na" data-type="p0TargetGeo" class="dropoption">NA</a>
+                    <a href="#" id="option2" data-value="dme" data-type="p0TargetGeo" class="dropoption">DME</a>
+                    <a href="#" id="option3" data-value="latam" data-type="p0TargetGeo" class="dropoption">LATAM</a>
+                    <a href="#" id="option4" data-value="apac" data-type="p0TargetGeo" class="dropoption">APAC</a>
+                    <a href="#" id="option5" data-value="emea" data-type="p0TargetGeo" class="dropoption">EMEA</a>
+                </div>
+            </div>
+        </div>
+
     </div>
+
     <div class="selections-wrapper">
         <div class="selected-filters-list">
         </div>
@@ -122,53 +142,13 @@ export default async function decorate(block) {
 
     //Status List
     const statusResponse = await graphqlQueryNameList('getStatusList');
-    const statuses = statusResponse.data.programList.items;
-
-    // Extract unique statuses
-    const uniqueStatuses = Array.from(new Set(statuses.map(item => item.status)));
-    let dropdownContent = document.getElementById('dropdownStatusOptions');
-    // Clear existing options
-    dropdownContent.innerHTML = '';
-    // Append new options
-    uniqueStatuses.forEach((status, index) => {
-        // Create a new anchor element for each status
-        var anchor = document.createElement('a');
-        anchor.href = "#";
-        anchor.id = "option" + (index + 1); // increment index for 1-based id
-        //anchor.dataset.value = "option" + (index + 1);
-        anchor.dataset.value = status;
-        anchor.dataset.type = "status";
-        anchor.className = "dropoption";
-        anchor.textContent = status; // using the status as the text
-        // Append to the dropdown
-        dropdownContent.appendChild(anchor);
-    });
+    const statuses = statusResponse.data.jsonByPath.item.json.options;
+    populateDropdown(statuses, 'dropdownStatusOptions', 'status');
 
     //Product List
     const productResponse = await graphqlQueryNameList('getProductList');
-    const products = productResponse.data.programList.items;
-
-    // Extract unique statuses
-    const uniqueProducts = Array.from(new Set(products.map(item => item.productOffering)));
-    let dropdownProductContent = document.getElementById('dropdownProductOptions');
-    // Clear existing options
-    dropdownProductContent.innerHTML = '';
-    // Append new options
-    uniqueProducts.forEach((product, index) => {
-        // Create a new anchor element for each status
-        var anchor = document.createElement('a');
-        anchor.href = "#";
-        anchor.id = "option" + (index + 1); // increment index for 1-based id
-        //anchor.dataset.value = "option" + (index + 1);
-        anchor.dataset.value = product;
-        anchor.dataset.type = "productOffering";//field in graphQL
-        anchor.className = "dropoption";
-        anchor.textContent = product; // using the status as the text
-        // Append to the dropdown
-        dropdownProductContent.appendChild(anchor);
-    });
-
-    //End product dropdown
+    const products = productResponse.data.jsonByPath.item.json.options;
+    populateDropdown(products, 'dropdownProductOptions', 'productOffering');
 
     document.querySelectorAll('.dropdown-button').forEach((button) => {
         button.addEventListener('click', (event) => {
@@ -188,6 +168,29 @@ export default async function decorate(block) {
     decorateIcons(block);
 }
 
+function populateDropdown(options, dropdownId, type) {
+    let dropdownContent = document.getElementById(dropdownId);
+    // Clear existing options
+    dropdownContent.innerHTML = '';
+
+    // Append new options
+    options.forEach((option, index) => {
+        // Create a new anchor element for each option
+        var anchor = document.createElement('a');
+        anchor.href = "#";
+        anchor.id = "option" + (index + 1); // increment index for 1-based id
+        anchor.dataset.value = option.value;
+        anchor.dataset.type = type;
+        anchor.className = "dropoption";
+        anchor.textContent = option.text; // using the option text
+        // Append to the dropdown
+        dropdownContent.appendChild(anchor);
+    });
+}
+
+
+
+
 function toggleDropdown(element) {
     const dropdown = element.closest('.filter-dropdown');
     const icons = dropdown.querySelectorAll('.icon');

diff --git a/blocks/gmo-campaign-list/gmo-campaign-list.js b/blocks/gmo-campaign-list/gmo-campaign-list.js
@@ -114,8 +114,18 @@ export default async function decorate(block, numPerPage = currentNumberPerPage,
       footerNext.classList.remove('active');
     }
     decorateIcons(block);
+
+    //Debug Global Variables
+    //debug_console();
 }
 
+function debug_console(){
+  console.log('currentPageInfo',currentPageInfo);
+  console.log('cursorArray',cursorArray);
+  console.log('currentPage',currentPage);
+  console.log('campaignCount',campaignCount);
+
+}
 
 function getFilterValues(){
   // Select all elements with the class 'selected-filter'
@@ -379,10 +389,10 @@ function prevPage(prevBtn) {
     if (currentPageInfo.hasPreviousPage) {
       currentPage--;
       const block = document.querySelector('.gmo-campaign-list.block');
-      const currentCursor = currentPageInfo.nextCursor || currentPageInfo.currentCursor;
-      //Calculate cursor for previous page
-      const indexCursor = cursorArray.indexOf(currentCursor) - currentPageInfo.itemCount - currentNumberPerPage;
+      const currentCursor = currentPageInfo.currentCursor;
 
+      //Calculate cursor for previous page
+      const indexCursor = cursorArray.indexOf(currentCursor) - currentNumberPerPage;
       decorate(block, currentNumberPerPage, cursorArray[indexCursor], true, false);
       if (!(prevBtn.classList.contains('active'))) {
           return;