MMM: added last seen manifest search

libs/blocks/mmm/mmm.js

@@ -5,6 +5,20 @@ import { getMepPopup, API_URLS } from '../../features/personalization/preview.js
 const SEARCH_CRITERIA_CHANGE_EVENT = 'mmm-search-change';
 let cachedSearchCriteria = '';
 export const DEBOUNCE_TIME = 800;
+const SEARCH_CONTAINER = '.mmm-search-container';
+const LAST_SEEN_MAP = {
+  day: 1,
+  week: 7,
+  month: 30,
+  threeMonths: 90,
+  sixMonths: 180,
+  year: 360,
+  all: 0,
+};
+const SEARCH_INITIAL_VALUES = {
+  lastSeenManifest: LAST_SEEN_MAP.threeMonths,
+  pageNum: 1,
+};
 
 async function toggleDrawer(target, dd, pageId) {
   const el = target.closest('button');
@@ -72,12 +86,18 @@ function createButtonDetailsPair(mmmEl, page) {
   mmmEl.append(dt, dd);
 }
 
+/**
+ * This function should be fired by any search criteria field change event
+ * Or by page number change event
+ * @param {Number} pageNum - optional. Number of the clicked page.
+ * @param {Event} event - optional. Page number click Event object.
+ */
 function filterPageList(pageNum, event) {
   const shareUrl = new URL(`${window.location.origin}${window.location.pathname}`);
   const searchValues = {};
   const activeSearchWithShortKeyword = event?.target?.value && event.target.value.length < 2;
 
-  document.querySelector('.mmm-search-container').querySelectorAll('input, select').forEach((field) => {
+  document.querySelector(SEARCH_CONTAINER).querySelectorAll('input, select').forEach((field) => {
     const id = field.getAttribute('id').split('-').pop();
     const { value, tagName } = field;
     searchValues[id] = {
@@ -91,16 +111,14 @@ function filterPageList(pageNum, event) {
   shareUrl.searchParams.set('pageNum', pageNum || 1);
   searchValues.pageNum = { value: pageNum || 1, tagName: 'A' };
 
-  // This event triggers an API call with beloww search criterias and a re-render
+  // assemble event details object with all filter criterias
+  const detail = {};
+  Object.keys(searchValues).forEach((key) => {
+    detail[key] = searchValues[key].value;
+  });
+  // This event triggers an API call with most recent search criteria and a forces a re-render
   if (!activeSearchWithShortKeyword) {
-    document.dispatchEvent(new CustomEvent(SEARCH_CRITERIA_CHANGE_EVENT, {
-      detail: {
-        urls: searchValues.urls?.value,
-        geos: searchValues.geos?.value,
-        pages: searchValues.pages?.value,
-        pageNum: searchValues.pageNum?.value,
-      },
-    }));
+    document.dispatchEvent(new CustomEvent(SEARCH_CRITERIA_CHANGE_EVENT, { detail }));
   }
 
   document.querySelectorAll('button.copy-to-clipboard').forEach((button) => {
@@ -168,7 +186,7 @@ function createShareButton() {
 }
 
 function createDropdowns(data, sharedUrlSettings) {
-  const searchContainer = document.querySelector('.mmm-search-container');
+  const searchContainer = document.querySelector(SEARCH_CONTAINER);
   const dropdownForm = createTag(
     'div',
     { id: 'mmm-dropdown-container', class: 'mmm-form-container' },
@@ -204,7 +222,7 @@ function debounce(func) {
 }
 
 function createSearchField(data, sharedUrlSettings) {
-  const searchContainer = document.querySelector('.mmm-search-container');
+  const searchContainer = document.querySelector(SEARCH_CONTAINER);
   const searchForm = createTag(
     'div',
     { id: 'mmm-search-urls-container', class: 'mmm-form-container' },
@@ -221,13 +239,41 @@ function createSearchField(data, sharedUrlSettings) {
   searchField.addEventListener('change', debounce((event) => filterPageList(null, event)));
 }
 
+function createLastSeenManifestDD() {
+  const searchContainer = document.querySelector(SEARCH_CONTAINER);
+  const options = [
+    { value: 'Day', key: 1 },
+    { value: 'Week', key: 7 },
+    { value: 'Month', key: 30 },
+    { value: '3 Months', key: 90 },
+    { value: '6 Months', key: 180 },
+    { value: 'Year', key: 360 },
+    { value: 'All', key: 0 },
+  ];
+  const dd = createTag(
+    'div',
+    { id: 'mmm-dropdown-lastSeenManifest', class: 'mmm-form-container' },
+    `<div>
+      <label for="mmm-lastSeenManifest">Manifests seen in the last:</label>
+      <select id="mmm-lastSeenManifest" type="text" name="mmm-lastSeenManifest" class="text-field-input">
+        ${options.map((option) => `
+          <option value="${option.key}" ${option.key === SEARCH_INITIAL_VALUES.lastSeenManifest ? 'selected' : ''}>${option.value}</option>
+        `)}
+      </select>
+    </div>`,
+  );
+  dd.addEventListener('change', () => filterPageList());
+  searchContainer.append(dd);
+}
+
 async function createForm(el) {
   const data = parseData(el);
   const urlParams = new URLSearchParams(window.location.search);
   const sharedUrlSettings = Object.fromEntries(urlParams.entries());
-  const searchContainer = createTag('div', { class: 'mmm-search-container' });
+  const searchContainer = createTag('div', { class: SEARCH_CONTAINER.slice(1) });
   document.querySelector('.mmm-container').parentNode.prepend(searchContainer);
   createDropdowns(data, sharedUrlSettings);
+  createLastSeenManifestDD();
   createSearchField(data, sharedUrlSettings);
 }
 
@@ -300,7 +346,7 @@ async function createPageList(el, search) {
     role: 'presentation',
   });
   mmmElContainer.append(mmmEl);
-  const url = `${API_URLS.pageList}${search ? getSearchParams(search) : window.location.search || '?pageNum=1'}`;
+  const url = `${API_URLS.pageList}${getSearchParams(search ?? SEARCH_INITIAL_VALUES)}`;
   const response = await fetchData(
     url,
     DATA_TYPE.JSON,
@@ -318,6 +364,11 @@ async function createPageList(el, search) {
   handlePaginationClicks();
 }
 
+/**
+ * This function creates a listener to search criteria changes
+ * and will fires an API call when event is received.
+ * The search criteria change event is fired inside filterPageList()
+ */
 function subscribeToSearchCriteriaChanges() {
   document.addEventListener(SEARCH_CRITERIA_CHANGE_EVENT, (el) => {
     const searchCriteria = JSON.stringify(el?.detail || {});