WIP Edit profile view

adobecom · Jun 13, 2024 · 075cddd · 075cddd
1 parent 1a76841
commit 075cddd
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/blocks/form-handler/form-handler.js b/blocks/form-handler/form-handler.js
@@ -52,6 +52,8 @@ const SPECTRUM_COMPONENTS = [
   'divider',
   'button',
   'progress-circle',
+  'overlay',
+  'dialog',
 ];
 
 function replaceAnchorWithButton(anchor) {
@@ -483,7 +485,19 @@ async function buildECCForm(el) {
     currentStep: 0,
     farthestStep: 0,
     maxStep: el.querySelectorAll('.fragment').length - 1,
-    payload: {},
+    payload: {
+      profiles:[{
+        id:'122',
+        firstName:'John',
+        lastName:'Doe',
+        title:'CEO',
+        bio:'I am a CEO',
+        socialMedia:[{
+          url:'www.linkedin.com'
+        }],
+        type:'Speaker',
+      }]
+    },
     // TODO: split payload and response data handler callbacks.
     response: {},
   };

diff --git a/components/profile/profile.css.js b/components/profile/profile.css.js
@@ -66,4 +66,16 @@ h5 {
 .icon-remove-circle:hover {
   opacity: 1;
 }
+
+.edit-profile {
+    align-self: end;
+}
+
+modal{
+    width: 1000px;
+}
+
+.profile-edit-view {
+    width: 1000px;
+}
 `;
diff --git a/components/profile/profile.js b/components/profile/profile.js
@@ -58,7 +58,7 @@ export class Profile extends LitElement {
     this.profile.socialMedia[index] = { url: value };
   }
 
-  renderProfileForm() {
+  renderProfileForm(title) {
     const fieldLabelsJSON = {
       ...defaultFieldLabels,
       ...(this.fieldlabels ?? {}),
@@ -101,7 +101,8 @@ export class Profile extends LitElement {
     const quietTextfieldConfig = { size: 'xl', quiet: true };
 
     return html`
-    <h2>${fieldLabelsJSON.heading}</h2>
+    <div class="profile-edit-view">
+    <h2>${title}</h2>
     <div>
         <div><sp-field-label size="l" required>${fieldLabelsJSON.chooseType}</sp-field-label></div>
         <sp-picker label=${fieldLabelsJSON.chooseType} value=${this.profile?.type} size="l" @change=${(event) => this.updateValue('type', event.target.value)}>
@@ -186,13 +187,23 @@ export class Profile extends LitElement {
         ${this.profile?.socialMedia ? repeat(this.profile?.socialMedia, (socialMedia) => html`<p>${socialMedia.url}</p>`) : nothing}
     </div>
     <sp-divider></sp-divider>
-    <sp-button variant="primary">Save Profile</sp-button>
+    <overlay-trigger type="modal" class="edit-profile">
+    <sp-dialog-wrapper 
+        slot="click-content"
+        dismiss-label="Close"
+        underlay
+    >
+        ${this.renderProfileForm('Edit Profile')}
+    </sp-dialog-wrapper>
+    <sp-button slot="trigger" variant="primary" class="save-profile-button">Edit Profile</sp-button>
+    </overlay-trigger>
+    
     `;
   }
 
   render() {
     if (!this.profile.id) {
-      return this.renderProfileForm();
+      return this.renderProfileForm(this.fieldlabels.heading);
     }
     return this.renderProfileView();
   }