Merge pull request #144 from adobecom/dev

Dev -> Stage Aug 1st #1
adobecom · Aug 5, 2024 · f40eb79 · f40eb79
2 parents 308afda + de80132
commit f40eb79
Show file tree

Hide file tree

Showing 13 changed files with 186 additions and 71 deletions.
diff --git a/ecc/blocks/ecc-dashboard/ecc-dashboard.css b/ecc/blocks/ecc-dashboard/ecc-dashboard.css
@@ -5,11 +5,22 @@
   margin: auto;
 }
 
-.ecc-dashboard.no-events .no-events-area {
-  margin: 64px;
+.ecc-dashboard .loading-screen {
+  position: fixed;
   display: flex;
-  flex-direction: column;
   align-items: center;
+  justify-content: center;
+  gap: 16px;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  background: var(--color-white);
+}
+
+.ecc-dashboard .loading-screen sp-field-label {
+  font-size: var(--type-body-s-size);
 }
 
 .ecc-dashboard .dashboard-header {
@@ -20,6 +31,42 @@
   align-items: flex-start;
 }
 
+.ecc-dashboard .dashboard-table-container {
+  max-width: 100%;
+}
+
+.ecc-dashboard .pagination-container {
+  margin: 40px auto 0;
+  display: flex;
+  width: max-content;
+  font-size: var(--type-body-xs-size);
+}
+
+.ecc-dashboard .loading-screen,
+.ecc-dashboard .dashboard-header,
+.ecc-dashboard .dashboard-table-container,
+.ecc-dashboard .pagination-container {
+  transition: opacity 0.5s;
+}
+
+.ecc-dashboard.loading .dashboard-header,
+.ecc-dashboard.loading .dashboard-table-container,
+.ecc-dashboard.loading .pagination-container {
+  opacity: 0;
+}
+
+.ecc-dashboard:not(.loading) .loading-screen {
+  opacity: 0;
+  z-index: -1;
+}
+
+.ecc-dashboard.no-events .no-events-area {
+  margin: 64px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .ecc-dashboard sp-theme sp-underlay + sp-dialog {
   position: fixed;
   top: 50%;
@@ -94,10 +141,6 @@
   display: none;
 }
 
-.ecc-dashboard .dashboard-table-container {
-  max-width: 100%;
-}
-
 .ecc-dashboard table {
   margin: auto;
   border-collapse: collapse; 
@@ -238,13 +281,6 @@
   background-color: var(--color-gray-200);
 }
 
-.ecc-dashboard .pagination-container {
-  margin: 40px auto 0;
-  display: flex;
-  width: max-content;
-  font-size: var(--type-body-xs-size);
-}
-
 .ecc-dashboard .pagination-container input {
   padding: 4px 12px;
   width: 16px;

diff --git a/ecc/blocks/ecc-dashboard/ecc-dashboard.js b/ecc/blocks/ecc-dashboard/ecc-dashboard.js
@@ -22,7 +22,6 @@ export function cloneFilter(obj) {
     'eventType',
     'cloudType',
     'seriesId',
-    'rsvpRequired',
     'templateId',
     'communityTopicUrl',
     'title',
@@ -297,7 +296,7 @@ function initMoreOptions(props, config, eventObj, row) {
     // clone
     clone.addEventListener('click', async (e) => {
       e.preventDefault();
-      const spTheme = props.el.querySelector('sp-theme');
+      const spTheme = props.el.querySelector('sp-theme.toast-area');
       const payload = { ...eventObj };
       payload.title = `${eventObj.title} - copy`;
       toolBox.remove();
@@ -323,7 +322,7 @@ function initMoreOptions(props, config, eventObj, row) {
     deleteBtn.addEventListener('click', async (e) => {
       e.preventDefault();
 
-      const spTheme = props.el.querySelector('sp-theme');
+      const spTheme = props.el.querySelector('sp-theme.toast-area');
       if (!spTheme) return;
 
       const underlay = spTheme.querySelector('sp-underlay');
@@ -637,16 +636,6 @@ function buildNoEventScreen(el, config) {
 }
 
 async function buildDashboard(el, config) {
-  const miloLibs = LIBS;
-  await Promise.all([
-    import(`${miloLibs}/deps/lit-all.min.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/theme.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/toast.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/button.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/dialog.js`),
-    import(`${miloLibs}/features/spectrum-web-components/dist/underlay.js`),
-  ]);
-
   const spTheme = createTag('sp-theme', { color: 'light', scale: 'medium', class: 'toast-area' }, '', { parent: el });
   createTag('sp-underlay', {}, '', { parent: spTheme });
   createTag('sp-dialog', { size: 's' }, '', { parent: spTheme });
@@ -658,7 +647,6 @@ async function buildDashboard(el, config) {
   };
 
   const data = await getEventsArray();
-
   if (!data?.length) {
     buildNoEventScreen(el, config);
   } else {
@@ -677,15 +665,40 @@ async function buildDashboard(el, config) {
     buildDashboardHeader(proxyProps, config);
     buildDashboardTable(proxyProps, config);
   }
+
+  setTimeout(() => {
+    el.classList.remove('loading');
+  }, 10);
+}
+
+function buildLoadingScreen(el) {
+  el.classList.add('loading');
+  const loadingScreen = createTag('sp-theme', { color: 'light', scale: 'medium', class: 'loading-screen' });
+  createTag('sp-progress-circle', { size: 'l', indeterminate: true }, '', { parent: loadingScreen });
+  createTag('sp-field-label', {}, 'Loading Adobe Event Creation Console dashboard...', { parent: loadingScreen });
+
+  el.prepend(loadingScreen);
 }
 
 export default async function init(el) {
+  const miloLibs = LIBS;
+  await Promise.all([
+    import(`${miloLibs}/deps/lit-all.min.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/theme.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/toast.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/button.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/dialog.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/underlay.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/progress-circle.js`),
+  ]);
+
   const { search } = window.location;
   const urlParams = new URLSearchParams(search);
   const devMode = urlParams.get('devMode');
 
   const config = readBlockConfig(el);
   el.innerHTML = '';
+  buildLoadingScreen(el);
   const profile = BlockMediator.get('imsProfile');
 
   if (devMode === 'true' && ['stage', 'local'].includes(MILO_CONFIG.env.name)) {

diff --git a/ecc/blocks/event-format-component/event-format-component.js b/ecc/blocks/event-format-component/event-format-component.js
@@ -55,11 +55,12 @@ function decorateTimeZoneSelect(column) {
   column.append(tzWrapper);
 }
 
-function decorateCheckbox(column) {
-  const checkbox = createTag('sp-checkbox', { id: 'rsvp-required-check' }, column.textContent.trim());
-  column.innerHTML = '';
-  column.append(checkbox);
-}
+// FIXME: comment out for now. Might support other checkboxes later.
+// function decorateCheckbox(column) {
+//   const checkbox = createTag('sp-checkbox', { id: 'rsvp-required-check' }, column.textContent.trim());
+//   column.innerHTML = '';
+//   column.append(checkbox);
+// }
 
 export default function init(el) {
   el.classList.add('form-component');
@@ -76,7 +77,7 @@ export default function init(el) {
         if (ci === 0) decorateCloudTagSelect(c);
         if (ci === 1) decorateSeriesSelect(c);
         // if (ci === 2) decorateNewSeriesBtnAndModal(c);
-        if (ci === 2) decorateCheckbox(c);
+        // if (ci === 2) decorateCheckbox(c);
       });
     }
 

diff --git a/ecc/blocks/form-handler/controllers/event-format-component-controller.js b/ecc/blocks/form-handler/controllers/event-format-component-controller.js
@@ -117,13 +117,11 @@ export default async function init(component, props) {
   const {
     cloudType,
     seriesId,
-    rsvpRequired,
   } = eventData;
 
   if (cloudType && seriesId) {
     changeInputValue(component.querySelector('#bu-select-input'), 'value', cloudType);
     changeInputValue(component.querySelector('#series-select-input'), 'value', seriesId);
-    changeInputValue(component.querySelector('#rsvp-required-check'), 'checked', rsvpRequired || 0);
     component.classList.add('prefilled');
   }
 }
@@ -144,15 +142,12 @@ export function onSubmit(component, props) {
   const eventType = 'InPerson';
   const cloudType = component.querySelector('#bu-select-input').value;
   const seriesId = component.querySelector('#series-select-input')?.value;
-  const rsvpRequired = component.querySelector('#rsvp-required-check').checked;
   const templateId = getTemplateId(cloudType);
 
   const eventFormat = {
-    // TODO: add the other text field values
     eventType,
     cloudType,
     seriesId,
-    rsvpRequired,
     templateId,
   };
 

diff --git a/ecc/blocks/form-handler/data-handler.js b/ecc/blocks/form-handler/data-handler.js
@@ -9,7 +9,6 @@ const submissionFilter = [
   'eventType',
   'cloudType',
   'seriesId',
-  'rsvpRequired',
   'templateId',
   'communityTopicUrl',
   'title',

diff --git a/ecc/blocks/form-handler/form-handler.css b/ecc/blocks/form-handler/form-handler.css
@@ -17,11 +17,36 @@
   --mod-textfield-spacing-block-start: 8px;
 }
 
-.form-handler sp-theme sp-underlay {
+.form-handler .loading-screen {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  background-color: var(--color-white);
+  opacity: 1;
+}
+
+.form-handler .loading-screen sp-field-label {
+  font-size: var(--type-body-s-size);
+}
+
+.form-handler .img-upload-text p {
+  margin: 0;
+  font-size: var(--type-body-xs-size);
+  line-height: normal;
+}
+
+.form-handler .main-frame sp-theme sp-underlay {
   z-index: 2;
 }
 
-.form-handler sp-theme sp-underlay + sp-dialog {
+.form-handler .main-frame sp-theme sp-underlay + sp-dialog {
   position: fixed;
   top: 50%;
   left: 50%;
@@ -31,21 +56,21 @@
   min-width: 480px;
 }
 
-.form-handler sp-theme sp-underlay + sp-dialog h1 {
+.form-handler .main-frame sp-theme sp-underlay + sp-dialog h1 {
   font-size: var(--type-heading-s-size);
 }
 
-.form-handler sp-theme sp-underlay + sp-dialog p {
+.form-handler .main-frame sp-theme sp-underlay + sp-dialog p {
   font-size: var(--type-body-s-size);
 }
 
-.form-handler sp-theme sp-underlay + sp-dialog .button-container {
+.form-handler .main-frame sp-theme sp-underlay + sp-dialog .button-container {
   display: flex;
   justify-content: flex-end;
   gap: 16px;
 }
 
-.form-handler sp-theme sp-underlay:not([open]) + sp-dialog {
+.form-handler .main-frame sp-theme sp-underlay:not([open]) + sp-dialog {
   display: none;
 }
 
@@ -71,6 +96,14 @@
   justify-content: center;
 }
 
+
+.form-handler .side-menu,
+.form-handler .main-frame,
+.form-handler .form-handler-ctas-panel,
+.form-handler .loading-screen {
+  transition: opacity 0.5s;
+}
+
 .form-handler.disabled .main-frame,
 .form-handler.disabled .form-handler-ctas-panel {
   pointer-events: none;
@@ -80,6 +113,13 @@
   transition: opacity 0.2s;
 }
 
+.form-handler.loading div:first-of-type,
+.form-handler.loading .side-menu,
+.form-handler.loading .main-frame,
+.form-handler.loading .form-handler-ctas-panel {
+  opacity: 0;
+}
+
 .form-handler .side-menu button {
   font-family: var(--body-font-family);
 }
@@ -94,7 +134,7 @@
   border-radius: 4px;
 }
 
-.form-handler > div:first-child {
+.form-handler > div.form-body {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -217,12 +257,6 @@
   grid-template-columns: 1fr 1fr;
 }
 
-.form-handler .img-upload-text p {
-  margin: 0;
-  font-size: var(--type-body-xs-size);
-  line-height: normal;
-}
-
 .form-handler .main-frame .section:first-of-type .content p {
   font-size: var(--type-body-xs-size);
 }
@@ -380,10 +414,16 @@
   color: var(--color-red);
 }
 
+.form-handler.hidden,
 .form-handler .hidden {
   display: none;
 }
 
+.form-handler:not(.loading) .loading-screen {
+  opacity: 0;
+  z-index: -1;
+}
+
 .form-handler .toast-parent {
   position: absolute;
   bottom: 100%;
@@ -400,7 +440,7 @@
 }
 
 @media screen and (min-width: 900px) {
-  .form-handler > div:first-child {
+  .form-handler > div.form-body {
     flex-direction: row;
   }