add visible error in speaker editor modal (#269)

adobecom · Oct 29, 2024 · 364bbdf · 364bbdf
1 parent 14a53a5
commit 364bbdf
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git a/ecc/blocks/form-handler/form-handler.js b/ecc/blocks/form-handler/form-handler.js
@@ -83,7 +83,7 @@ const SPECTRUM_COMPONENTS = [
 export function buildErrorMessage(props, resp) {
   if (!resp) return;
 
-  const toastArea = props.el.querySelector('.toast-area');
+  const toastArea = resp.targetEl ? resp.targetEl.querySelector('.toast-area') : props.el.querySelector('.toast-area');
 
   if (resp.error) {
     const messages = [];
@@ -99,9 +99,10 @@ export function buildErrorMessage(props, resp) {
 
       messages.forEach((msg, i) => {
         const toast = createTag('sp-toast', { open: true, variant: 'negative', timeout: 6000 + (i * 3000) }, msg, { parent: toastArea });
-        toast.addEventListener('close', () => {
+        toast.addEventListener('close', (e) => {
+          e.stopPropagation();
           toast.remove();
-        });
+        }, { once: true });
       });
     } else if (errorMessage) {
       if (resp.status === 409 || resp.error.message === 'Request to ESP failed: {"message":"Event update invalid, event has been modified since last fetch"}') {
@@ -115,14 +116,16 @@ export function buildErrorMessage(props, resp) {
           href: `${url.toString()}`,
         }, 'See the latest version', { parent: toast });
 
-        toast.addEventListener('close', () => {
+        toast.addEventListener('close', (e) => {
+          e.stopPropagation();
           toast.remove();
-        });
+        }, { once: true });
       } else {
         const toast = createTag('sp-toast', { open: true, variant: 'negative', timeout: 6000 }, errorMessage, { parent: toastArea });
-        toast.addEventListener('close', () => {
+        toast.addEventListener('close', (e) => {
+          e.stopPropagation();
           toast.remove();
-        });
+        }, { once: true });
       }
     }
   }

diff --git a/ecc/components/profile/profile.js b/ecc/components/profile/profile.js
@@ -103,6 +103,15 @@ export class Profile extends LitElement {
 
     try {
       const profile = edited ? structuredClone(this.profileCopy) : structuredClone(this.profile);
+      const correctSocialMedia = profile.socialMedia.filter((sm) => sm.link !== '' && sm.link?.match(LINK_REGEX));
+
+      if (correctSocialMedia.length < profile.socialMedia.length) {
+        const dialogToastParent = edited ? this.shadowRoot.querySelector('.edit-profile-dialog') : null;
+        this.dispatchEvent(new CustomEvent('show-error-toast', { detail: { error: { message: 'Some of the social media links are not valid.' }, targetEl: dialogToastParent }, bubbles: true, composed: true }));
+        saveButton.pending = false;
+        return false;
+      }
+
       profile.isPlaceholder = false;
       profile.socialMedia = profile.socialMedia.filter((sm) => sm.link !== '');
       let respJson;
@@ -116,8 +125,9 @@ 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: { error: { errors, message } }, bubbles: true, composed: true }));
-        return;
+        const dialogToastParent = edited ? this.shadowRoot.querySelector('.edit-profile-dialog') : null;
+        this.dispatchEvent(new CustomEvent('show-error-toast', { detail: { error: { errors, message }, targetEl: dialogToastParent }, bubbles: true, composed: true }));
+        return false;
       }
 
       if (respJson.speakerId) {
@@ -162,12 +172,15 @@ export class Profile extends LitElement {
 
         this.updateProfile(profile);
         this.requestUpdate();
+        saveButton.pending = false;
+        return true;
       }
     } catch (error) {
       window.lana?.log(`error occured while saving profile ${error}`);
     }
 
     saveButton.pending = false;
+    return false;
   }
 
   handleProfileSelection(e) {
@@ -365,9 +378,11 @@ export class Profile extends LitElement {
     <sp-button-group class="footer-button-group">
       <sp-button variant="secondary" class="profile-edit-button" onclick="javascript: this.dispatchEvent(new Event('close', {bubbles: true, composed: true}));">Cancel</sp-button>
       <sp-button variant="primary" class="profile-edit-button" @click=${async (e) => {
-    this.saveProfile(e, true).then(() => {
-      const dialog = this.shadowRoot.querySelector('sp-dialog-wrapper');
-      dialog?.dispatchEvent(new Event('close', { bubbles: true, composed: true }));
+    this.saveProfile(e, true).then((success) => {
+      if (success) {
+        const dialog = this.shadowRoot.querySelector('sp-dialog-wrapper');
+        dialog?.dispatchEvent(new Event('close', { bubbles: true, composed: true }));
+      }
     });
   }} ?disabled=${this.saveDisabled()}>
   <img src="/ecc/icons/user-edit.svg" slot="icon"></img>
@@ -438,6 +453,7 @@ export class Profile extends LitElement {
         underlay
     >
         ${this.renderProfileEditFormWrapper()}
+        <sp-theme class="toast-area"></sp-theme>
     </sp-dialog-wrapper>
     <sp-button slot="trigger" variant="primary" class="profile-action-button" @click=${this.initializeProfileCopy}>
     <img src="/ecc/icons/user-edit.svg" slot="icon"></img>Edit</sp-button>