better cloudtype and series dropdown interaction

adobecom · Jan 29, 2025 · 6293af9 · 6293af9
1 parent 087b45d
commit 6293af9
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 53 deletions.
diff --git a/ecc/blocks/event-format-component/controller.js b/ecc/blocks/event-format-component/controller.js
@@ -53,8 +53,43 @@ function initStepLock(component) {
   onFormatChange();
 }
 
+async function populateSeriesOptions(props, component, cloud = null) {
+  const seriesSelect = component.querySelector('#series-select-input');
+  if (!seriesSelect) return;
+
+  const series = await getSeriesForUser();
+
+  if (!series) {
+    seriesSelect.pending = false;
+    seriesSelect.disabled = true;
+    return;
+  }
+
+  const filteredSeries = Object.values(series).filter((s) => {
+    const hasRequiredVals = s.seriesId && s.seriesName;
+    const isPublished = s.seriesStatus?.toLowerCase() === 'published';
+
+    const currentCloud = cloud || props.eventDataResp.cloudType || props.payload.cloudType;
+    const isInCurrentCloud = s.cloudType === currentCloud;
+
+    return hasRequiredVals && isPublished && isInCurrentCloud;
+  });
+
+  console.log('filteredSeries', filteredSeries);
+  filteredSeries.forEach((val) => {
+    if (!val.seriesId || !val.seriesName) return;
+    if (val.seriesStatus?.toLowerCase() !== 'published') return;
+
+    const opt = createTag('sp-menu-item', { value: val.seriesId }, val.seriesName);
+    seriesSelect.append(opt);
+  });
+
+  seriesSelect.pending = false;
+  seriesSelect.disabled = filteredSeries.length === 0;
+}
+
 export async function onPayloadUpdate(component, props) {
-  const { seriesId } = props.payload;
+  const { cloudType, seriesId } = props.payload;
   if (seriesId) {
     const partnerSelectorGroups = document.querySelectorAll('partner-selector-group');
     if (partnerSelectorGroups.length) {
@@ -82,36 +117,14 @@ export async function onRespUpdate(component, props) {
   }
 }
 
-async function populateSeriesOptions(props, component) {
+export default async function init(component, props) {
+  const buSelect = component.querySelector('#bu-select-input');
   const seriesSelect = component.querySelector('#series-select-input');
-  if (!seriesSelect) return;
-
-  const series = await getSeriesForUser();
-
-  if (!series) {
-    seriesSelect.pending = false;
-    seriesSelect.disabled = true;
-    return;
-  }
-
-  Object.values(series).filter((s) => {
-    const hasRequiredVals = s.seriesId && s.seriesName;
-    const isPublished = s.seriesStatus?.toLowerCase() === 'published';
-
-    // const currentCloud = props.eventDataResp.cloudType || props.payload.cloudType;
-    // const isInCurrentCloud = s.cloudType === currentCloud;
-
-    // return hasRequiredVals && isPublished && isInCurrentCloud;
-    return hasRequiredVals && isPublished;
-  }).forEach((val) => {
-    if (!val.seriesId || !val.seriesName) return;
-    if (val.seriesStatus?.toLowerCase() !== 'published') return;
 
-    const opt = createTag('sp-menu-item', { value: val.seriesId }, val.seriesName);
-    seriesSelect.append(opt);
-  });
-
-  seriesSelect.pending = false;
+  const eventData = props.eventDataResp;
+  prepopulateTimeZone(component);
+  initStepLock(component);
+  await populateSeriesOptions(props, component);
 
   seriesSelect.addEventListener('change', () => {
     const seriesId = seriesSelect.value;
@@ -125,38 +138,27 @@ async function populateSeriesOptions(props, component) {
       },
     });
   });
-}
-
-export default async function init(component, props) {
-  setTimeout(() => {
-    const seriesSelect = component.querySelector('#series-select-input');
-
-    if (seriesSelect.pending) {
-      const toastArea = props.el.querySelector('.toast-area');
-      if (!toastArea) return;
-
-      const toast = createTag('sp-toast', { open: true, timeout: 8000 }, 'Series ID is taking longer than usual to load. Please check if the Adobe corp. VPN is connected.', { parent: toastArea });
-      toast.addEventListener('close', () => {
-        toast.remove();
-      });
-    }
-  }, 5000);
-
-  const eventData = props.eventDataResp;
-  prepopulateTimeZone(component);
-  initStepLock(component);
-  await populateSeriesOptions(props, component);
 
   const {
     cloudType,
     seriesId,
   } = eventData;
 
   if (cloudType && seriesId) {
-    changeInputValue(component.querySelector('#bu-select-input'), 'value', cloudType);
-    changeInputValue(component.querySelector('#series-select-input'), 'value', seriesId);
+    changeInputValue(buSelect, 'value', cloudType);
+    changeInputValue(seriesSelect, 'value', seriesId);
     component.classList.add('prefilled');
   }
+
+  buSelect.addEventListener('change', () => {
+    const cloudTypeVal = buSelect.value;
+
+    if (cloudTypeVal) {
+      seriesSelect.pending = true;
+      seriesSelect.innerHTML = '';
+      populateSeriesOptions(props, component, cloudTypeVal);
+    }
+  });
 }
 
 function getTemplateId(bu) {

diff --git a/ecc/blocks/event-format-component/event-format-component.js b/ecc/blocks/event-format-component/event-format-component.js
@@ -16,7 +16,7 @@ async function decorateCloudTagSelect(column) {
 
   const clouds = await getClouds();
 
-  Object.entries(clouds).forEach((cloud) => {
+  clouds.forEach((cloud) => {
     const { cloudType, cloudName } = cloud;
 
     if (!cloudType || !cloudName) return;