diff --git a/ecc/blocks/ecc-dashboard/ecc-dashboard.css b/ecc/blocks/ecc-dashboard/ecc-dashboard.css index 7eff20f6..b828e632 100644 --- 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 index cbce3f88..fe45f1f9 100644 --- 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 index 4c769dba..f9b0803f 100644 --- 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 index 4b7d5f1a..8ab49606 100644 --- 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 index 821b93e4..8a9813cb 100644 --- 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 index b8617772..6d13a5f9 100644 --- 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; } diff --git a/ecc/blocks/form-handler/form-handler.js b/ecc/blocks/form-handler/form-handler.js index f59d7490..7c5c2931 100644 --- a/ecc/blocks/form-handler/form-handler.js +++ b/ecc/blocks/form-handler/form-handler.js @@ -304,12 +304,17 @@ async function updateComponents(props) { function decorateForm(el) { const ctaRow = el.querySelector(':scope > div:last-of-type'); + const formBodyRow = el.querySelector(':scope > div:first-of-type'); if (ctaRow) { const toastParent = createTag('sp-theme', { class: 'toast-parent', color: 'light', scale: 'medium' }, '', { parent: ctaRow }); createTag('div', { class: 'toast-area' }, '', { parent: toastParent }); } + if (!formBodyRow) return; + + formBodyRow.classList.add('form-body'); + const app = createTag('sp-theme', { color: 'light', scale: 'medium' }); createTag('sp-underlay', {}, '', { parent: app }); createTag('sp-dialog', { size: 's' }, '', { parent: app }); @@ -326,7 +331,7 @@ function decorateForm(el) { form.append(formDiv.parentElement); }); - const cols = el.querySelectorAll(':scope > div:first-of-type > div'); + const cols = formBodyRow.querySelectorAll(':scope > div'); cols.forEach((col, i) => { if (i === 0) { @@ -381,7 +386,7 @@ async function saveEvent(props, options = { toPublish: false }) { try { await gatherValues(props); } catch (e) { - return { error: { message: e.message } }; + return { message: e.message }; } let resp; @@ -769,8 +774,17 @@ async function buildECCForm(el) { }); } +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 form...', { parent: loadingScreen }); + + el.prepend(loadingScreen); +} + export default async function init(el) { - el.style.display = 'none'; + buildLoadingScreen(el); const miloLibs = LIBS; const promises = Array.from(SPECTRUM_COMPONENTS).map(async (component) => { await import(`${miloLibs}/features/spectrum-web-components/dist/${component}.js`); @@ -786,19 +800,22 @@ export default async function init(el) { const devMode = urlParams.get('devMode'); if (devMode === 'true' && ['stage', 'local'].includes(MILO_CONFIG.env.name)) { - buildECCForm(el); - el.removeAttribute('style'); + buildECCForm(el).then(() => { + el.classList.remove('loading'); + }); return; } if (profile) { if (profile.noProfile || profile.account_type !== 'type3') { buildNoAccessScreen(el); + el.classList.remove('loading'); } else { - buildECCForm(el); + buildECCForm(el).then(() => { + el.classList.remove('loading'); + }); } - el.removeAttribute('style'); return; } @@ -806,11 +823,14 @@ export default async function init(el) { const unsubscribe = BlockMediator.subscribe('imsProfile', ({ newValue }) => { if (newValue?.noProfile || newValue.account_type !== 'type3') { buildNoAccessScreen(el); + el.classList.remove('loading'); + unsubscribe(); } else { - buildECCForm(el); + buildECCForm(el).then(() => { + el.classList.remove('loading'); + unsubscribe(); + }); } - el.removeAttribute('style'); - unsubscribe(); }); } } diff --git a/ecc/components/custom-search/custom-search.js b/ecc/components/custom-search/custom-search.js index ba3f2c7c..11e43813 100644 --- a/ecc/components/custom-search/custom-search.js +++ b/ecc/components/custom-search/custom-search.js @@ -123,7 +123,7 @@ export class CustomSearch extends LitElement { width: 24px; height: 24px; object-fit: cover; - border-radius: 24px; +${this.config.thumbnailType === 'circle' ? 'border-radius: 24px;' : ''} ">` : nothing} ${entry.displayValue} diff --git a/ecc/components/profile/profile.js b/ecc/components/profile/profile.js index 25ebe5ac..44d5c9c5 100644 --- a/ecc/components/profile/profile.js +++ b/ecc/components/profile/profile.js @@ -108,7 +108,7 @@ export class Profile extends LitElement { const { errors, message } = respJson.error; window.lana?.log(`error occured while saving profile ${errors ?? message}`); saveButton.pending = false; - this.dispatchEvent(new CustomEvent('show-error-toast', { detail: { errors, message }, bubbles: true, composed: true })); + this.dispatchEvent(new CustomEvent('show-error-toast', { detail: { error: { errors, message } }, bubbles: true, composed: true })); return; } @@ -182,7 +182,7 @@ export class Profile extends LitElement { lastNameSearchMap, } = this.getRequiredProps(); - const searchFieldConfig = { ...quietTextfieldConfig, showImage: true }; + const searchFieldConfig = { ...quietTextfieldConfig, showImage: true, thumbnailType: 'circle' }; return html` this.updateProfile({ firstName: event.detail.value })} @entry-selected=${this.handleProfileSelection} searchdata=${JSON.stringify(this.firstnamesearch)} identifier='speakerId'> diff --git a/ecc/icons/add-circle.svg b/ecc/icons/add-circle.svg index c292803b..ab88730f 100644 --- a/ecc/icons/add-circle.svg +++ b/ecc/icons/add-circle.svg @@ -2,10 +2,10 @@ S AddCircle 18 N - \ No newline at end of file + diff --git a/ecc/icons/remove-circle.svg b/ecc/icons/remove-circle.svg index 4bc8186a..e7c3ff2b 100644 --- a/ecc/icons/remove-circle.svg +++ b/ecc/icons/remove-circle.svg @@ -1,5 +1,5 @@ - + diff --git a/ecc/styles/styles.css b/ecc/styles/styles.css index 2250a396..ad0dcc00 100644 --- a/ecc/styles/styles.css +++ b/ecc/styles/styles.css @@ -7,6 +7,18 @@ * */ + :root { + --spectrum-color-gray-100: #E8E8E8; + --spectrum-color-gray-200: #D4D4D4; + --spectrum-color-gray-300: #B6B6B6; + --spectrum-color-gray-400: #A1A1A1; + --spectrum-color-gray-500: #909090; + --spectrum-color-gray-600: #686868; + --spectrum-color-gray-700: #444444; + --spectrum-color-gray-800: #242424; + --spectrum-color-text: #2C2C2C; + } + main a.con-button.no-event { user-select: none; pointer-events: none; diff --git a/test/scripts/utils.test.js b/test/scripts/utils.test.js index 41874aae..9dfbc3f2 100644 --- a/test/scripts/utils.test.js +++ b/test/scripts/utils.test.js @@ -10,7 +10,6 @@ describe('Decorating LCP', () => { it('with marquee', () => { document.body.innerHTML = marqueeMain; decorateArea(document.querySelector('main')); - console.log(document.body.querySelector('img')?.loading); expect(document.body.querySelector('img').getAttribute('loading')).to.equal(null); });