From a69c805c4e5a684563bfcb8a4f4fb424030696b1 Mon Sep 17 00:00:00 2001 From: Qiyun Dai Date: Wed, 2 Oct 2024 08:46:15 -0500 Subject: [PATCH 1/6] Update profile.js --- ecc/components/profile/profile.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ecc/components/profile/profile.js b/ecc/components/profile/profile.js index 4e83e701..b9c4560d 100644 --- a/ecc/components/profile/profile.js +++ b/ecc/components/profile/profile.js @@ -98,6 +98,7 @@ export class Profile extends LitElement { profile.isPlaceholder = false; profile.socialMedia = this.profile.socialMedia.filter((sm) => sm.link !== ''); this.profileCopy = {}; + this.pendingSocialIndexes = []; let respJson; if (this.profile.speakerId) { respJson = await updateSpeaker(profile, this.seriesId); From e872843dac0d464aacdcda381e7b687095e65320 Mon Sep 17 00:00:00 2001 From: Qiyun Dai Date: Wed, 2 Oct 2024 12:14:00 -0500 Subject: [PATCH 2/6] Fixing profile state issue --- .../terms-conditions-component-controller.js | 5 +- ecc/components/profile/profile.js | 128 +++++++++--------- ecc/scripts/utils.js | 2 +- 3 files changed, 68 insertions(+), 67 deletions(-) diff --git a/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js b/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js index 9c9f7303..2281bafb 100644 --- a/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js +++ b/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js @@ -41,7 +41,10 @@ async function loadPreview(component, templateId) { } const rsvpFormLocation = `${host}${templateId.substring(0, templateId.lastIndexOf('/'))}/rsvp-form`; - const resp = await fetchThrottledMemoizedText(`${rsvpFormLocation}.plain.html`); + const resp = await fetchThrottledMemoizedText( + `${rsvpFormLocation}.plain.html`, + { headers: { authorization: 'token MM/NpTtq0gAnckOSl96C4SGB67kFjbO6a4N9vYwb0gd5' } }, + ).catch(() => ({})); if (!resp) { component.remove(); diff --git a/ecc/components/profile/profile.js b/ecc/components/profile/profile.js index b9c4560d..930265ca 100644 --- a/ecc/components/profile/profile.js +++ b/ecc/components/profile/profile.js @@ -28,7 +28,6 @@ export class Profile extends LitElement { seriesId: { type: String }, fieldlabels: { type: Object, reflect: true }, profile: { type: Object, reflect: true }, - profileCopy: { type: Object, reflect: true }, firstnamesearch: { type: Array }, lastnamesearch: { type: Array }, }; @@ -42,25 +41,29 @@ export class Profile extends LitElement { this.profile = this.profile ?? { socialMedia: [{ link: '' }], isPlaceholder: true }; this.profileCopy = {}; - this.pendingSocialIndexes = []; } - addSocialMedia() { + addSocialMedia(shallow = false) { const socialMedia = { link: '' }; - if (this.profile?.socialMedia) { - this.profile.socialMedia.push(socialMedia); + const profile = shallow ? this.profileCopy : this.profile; + if (profile?.socialMedia) { + profile.socialMedia.push(socialMedia); } else { - this.profile.socialMedia = [socialMedia]; + profile.socialMedia = [socialMedia]; } this.requestUpdate(); } - updateProfile(profile) { - const updatedProfile = { ...this.profile, ...profile }; - this.dispatchEvent(new CustomEvent('update-profile', { detail: { profile: updatedProfile } })); + updateProfile(profile, shallow = false) { + if (shallow) { + this.profileCopy = { ...this.profileCopy, ...profile }; + } else { + const updatedProfile = { ...this.profile, ...profile }; + this.dispatchEvent(new CustomEvent('update-profile', { detail: { profile: updatedProfile } })); + } } - updateSocialMedia(index, value) { + updateSocialMedia(index, value, shallow = false) { const tempServiceName = getServiceName(value); // eslint-disable-next-line max-len let serviceName = SUPPORTED_SOCIAL.find((service) => service.toLowerCase() === tempServiceName.toLowerCase()); @@ -68,18 +71,22 @@ export class Profile extends LitElement { serviceName = 'Web'; } // eslint-disable-next-line max-len + if (shallow) { + this.profileCopy.socialMedia[index] = { link: value, serviceName }; + return; + } + this.profile.socialMedia[index] = { link: value, serviceName }; - this.pendingSocialIndexes.push(index); this.requestUpdate(); } - renderProfileTypePicker() { + renderProfileTypePicker(shallow = false) { // eslint-disable-next-line max-len - const fieldLabel = this.getRequiredProps().fieldLabelsJSON.chooseType ?? DEFAULT_FIELD_LABELS.chooseType; + const fieldLabel = this.getRequiredProps(shallow).fieldLabelsJSON.chooseType ?? DEFAULT_FIELD_LABELS.chooseType; return html`
${fieldLabel} *
- this.updateProfile({ type: event.target.value })}> + this.updateProfile({ type: event.target.value }, shallow)}> ${repeat(SPEAKER_TYPE, (type) => html` ${type} `)} @@ -87,18 +94,16 @@ export class Profile extends LitElement {
`; } - async saveProfile(e) { + async saveProfile(e, edited = false) { const imageDropzone = this.shadowRoot.querySelector('image-dropzone'); const saveButton = e.target; saveButton.pending = true; try { - const profile = { ...this.profile }; + const profile = edited ? structuredClone(this.profileCopy) : structuredClone(this.profile); profile.isPlaceholder = false; - profile.socialMedia = this.profile.socialMedia.filter((sm) => sm.link !== ''); - this.profileCopy = {}; - this.pendingSocialIndexes = []; + profile.socialMedia = profile.socialMedia.filter((sm) => sm.link !== ''); let respJson; if (this.profile.speakerId) { respJson = await updateSpeaker(profile, this.seriesId); @@ -174,57 +179,58 @@ export class Profile extends LitElement { return !this.profile.firstName || !this.profile.lastName || !this.profile.title; } - renderNameFieldWithSearchIntegrated() { + renderNameFieldWithSearchIntegrated(shallow = false) { const { firstNameData, quietTextfieldConfig, lastNameData, firstNameSearchMap, lastNameSearchMap, - } = this.getRequiredProps(); + } = this.getRequiredProps(shallow); 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'> - this.updateProfile({ lastName: event.detail.value })} @entry-selected=${this.handleProfileSelection} searchdata=${JSON.stringify(this.lastnamesearch)} identifier='speakerId'> + this.updateProfile({ firstName: event.detail.value }, shallow)} @entry-selected=${this.handleProfileSelection} searchdata=${JSON.stringify(this.firstnamesearch)} identifier='speakerId'> + this.updateProfile({ lastName: event.detail.value }, shallow)} @entry-selected=${this.handleProfileSelection} searchdata=${JSON.stringify(this.lastnamesearch)} identifier='speakerId'> `; } - renderRemainingFormBody() { + renderRemainingFormBody(shallow = false) { const { // eslint-disable-next-line max-len fieldLabelsJSON, quietTextfieldConfig, titleData, bioData, textareaConfig, socialMediaData, socialMediaConfig, - } = this.getRequiredProps(); + } = this.getRequiredProps(shallow); + const profile = shallow ? this.profileCopy : this.profile; // eslint-disable-next-line max-len - const imagefile = this.profile?.photo ? { ...this.profile.photo, url: this.profile.photo.imageUrl } : {}; + const imagefile = profile?.photo ? { ...profile.photo, url: profile.photo.imageUrl } : {}; return html` - this.updateProfile({ title: event.detail.value })}> - this.updateProfile({ bio: event.detail.value })}> + this.updateProfile({ title: event.detail.value }, shallow)}> + this.updateProfile({ bio: event.detail.value }, shallow)}> - { this.addSocialMedia(); }}> + { this.addSocialMedia(shallow); }}> `; } @@ -235,49 +241,49 @@ export class Profile extends LitElement { ${this.renderRemainingFormBody()}`; } - renderNameFields() { - const { firstNameData, quietTextfieldConfig, lastNameData } = this.getRequiredProps(); + renderNameFields(shallow = false) { + const { firstNameData, quietTextfieldConfig, lastNameData } = this.getRequiredProps(shallow); return html` - this.updateProfile({ firstName: event.detail.value })}> - this.updateProfile({ lastName: event.detail.value })}> + this.updateProfile({ firstName: event.detail.value }, shallow)}> + this.updateProfile({ lastName: event.detail.value }, shallow)}> `; } renderProfileEditForm() { return html` - ${this.renderProfileTypePicker()} - ${this.renderNameFields()} - ${this.renderRemainingFormBody()} + ${this.renderProfileTypePicker(true)} + ${this.renderNameFields(true)} + ${this.renderRemainingFormBody(true)} `; } - getRequiredProps() { + getRequiredProps(shallow = false) { const fieldLabelsJSON = { ...DEFAULT_FIELD_LABELS, ...(this.fieldlabels ?? {}), }; const firstNameData = { - value: this.profile?.firstName, + value: shallow ? this.profileCopy?.firstName : this.profile?.firstName, placeholder: fieldLabelsJSON.firstName, helperText: fieldLabelsJSON.firstNameSubText, }; const lastNameData = { - value: this.profile?.lastName, + value: shallow ? this.profileCopy?.lastName : this.profile?.lastName, placeholder: fieldLabelsJSON.lastName, helperText: fieldLabelsJSON.lastNameSubText, }; const bioData = { - value: this.profile?.bio ?? '', + value: shallow ? this.profileCopy?.bio : this.profile?.bio || '', placeholder: fieldLabelsJSON.bio, helperText: fieldLabelsJSON.bioSubText, }; const titleData = { - value: this.profile?.title, + value: shallow ? this.profileCopy?.title : this.profile?.title, placeholder: fieldLabelsJSON.title, helperText: fieldLabelsJSON.titleSubText, }; @@ -334,17 +340,8 @@ export class Profile extends LitElement { `; } - revertProfile() { - this.profileCopy.socialMedia = this.profileCopy.socialMedia.filter( - (_, index) => !this.pendingSocialIndexes.includes(index), - ); - this.pendingSocialIndexes = []; - this.profile = { ...this.profileCopy }; - this.requestUpdate(); - } - initializeProfileCopy() { - this.profileCopy = { ...this.profile }; + this.profileCopy = structuredClone(this.profile); this.requestUpdate(); } @@ -356,11 +353,12 @@ export class Profile extends LitElement {

Last update: ${new Date().toLocaleDateString()}

- { - this.revertProfile(); - }}>Cancel - { - this.saveProfile(e); + Cancel + { + this.saveProfile(e, true).then(() => { + const dialog = this.shadowRoot.querySelector('sp-dialog-wrapper'); + dialog?.dispatchEvent(new Event('close', { bubbles: true, composed: true })); + }); }} ?disabled=${this.saveDisabled()}> Confirm update @@ -395,7 +393,7 @@ export class Profile extends LitElement {
- ${this.renderProfileTypePicker(fieldLabelsJSON.chooseType)} + ${this.renderProfileTypePicker()}

${this.profile.firstName} ${this.profile.lastName}

${this.profile.photo?.imageUrl ? html`
@@ -429,9 +427,9 @@ export class Profile extends LitElement { dismiss-label="Close" underlay > - ${this.renderProfileEditFormWrapper('Edit Profile')} + ${this.renderProfileEditFormWrapper()} - + Edit
diff --git a/ecc/scripts/utils.js b/ecc/scripts/utils.js index 37a05767..d530e8d7 100644 --- a/ecc/scripts/utils.js +++ b/ecc/scripts/utils.js @@ -233,7 +233,7 @@ export async function decorateTextarea(cell, extraOptions) { export async function getSecret(key) { if (secretCache.length === 0) { - const resp = await fetch('/ecc/system/secrets.json') + const resp = await fetch('/ecc/system/secrets.json', { headers: { authorization: 'token milo-events-ecc' } }) .then((r) => r) .catch((e) => window.lana?.log(`Failed to fetch Google Places API key: ${e}`)); From bfadd5cd0440175795eab976a67efc6c32d16928 Mon Sep 17 00:00:00 2001 From: Qiyun Dai Date: Wed, 2 Oct 2024 13:20:21 -0500 Subject: [PATCH 3/6] use access.apiKeyId --- .../controllers/terms-conditions-component-controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js b/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js index 2281bafb..ea7b2e5f 100644 --- a/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js +++ b/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js @@ -43,7 +43,7 @@ async function loadPreview(component, templateId) { const rsvpFormLocation = `${host}${templateId.substring(0, templateId.lastIndexOf('/'))}/rsvp-form`; const resp = await fetchThrottledMemoizedText( `${rsvpFormLocation}.plain.html`, - { headers: { authorization: 'token MM/NpTtq0gAnckOSl96C4SGB67kFjbO6a4N9vYwb0gd5' } }, + { headers: { authorization: 'token jX2dkddbxUMzi/00JkbqJpUluciE8RTAbrIAjtKzx7Ah' } }, ).catch(() => ({})); if (!resp) { From afe521f2d1bb3bf31923859e7d1f3c6ab0f759f2 Mon Sep 17 00:00:00 2001 From: Qiyun Dai Date: Wed, 2 Oct 2024 13:47:42 -0500 Subject: [PATCH 4/6] Update terms-conditions-component-controller.js --- .../controllers/terms-conditions-component-controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js b/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js index ea7b2e5f..41ab2e8f 100644 --- a/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js +++ b/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js @@ -43,7 +43,7 @@ async function loadPreview(component, templateId) { const rsvpFormLocation = `${host}${templateId.substring(0, templateId.lastIndexOf('/'))}/rsvp-form`; const resp = await fetchThrottledMemoizedText( `${rsvpFormLocation}.plain.html`, - { headers: { authorization: 'token jX2dkddbxUMzi/00JkbqJpUluciE8RTAbrIAjtKzx7Ah' } }, + { headers: { authorization: 'token gM2cgLEyLEqBn8EIyuH0vd/GRbOamtmxF//YHhAwAEBl' } }, ).catch(() => ({})); if (!resp) { From cd15ff481ad2f3d278a50eb1e0f4c64581ed7575 Mon Sep 17 00:00:00 2001 From: Qiyun Dai Date: Wed, 2 Oct 2024 13:49:21 -0500 Subject: [PATCH 5/6] remove secret token --- ecc/scripts/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ecc/scripts/utils.js b/ecc/scripts/utils.js index d530e8d7..37a05767 100644 --- a/ecc/scripts/utils.js +++ b/ecc/scripts/utils.js @@ -233,7 +233,7 @@ export async function decorateTextarea(cell, extraOptions) { export async function getSecret(key) { if (secretCache.length === 0) { - const resp = await fetch('/ecc/system/secrets.json', { headers: { authorization: 'token milo-events-ecc' } }) + const resp = await fetch('/ecc/system/secrets.json') .then((r) => r) .catch((e) => window.lana?.log(`Failed to fetch Google Places API key: ${e}`)); From 71e0fc03c70db2c1c2aad05e310188ba1c2ac3f9 Mon Sep 17 00:00:00 2001 From: Qiyun Dai Date: Wed, 2 Oct 2024 13:51:31 -0500 Subject: [PATCH 6/6] remove access token again --- .../controllers/terms-conditions-component-controller.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js b/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js index 41ab2e8f..9c9f7303 100644 --- a/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js +++ b/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js @@ -41,10 +41,7 @@ async function loadPreview(component, templateId) { } const rsvpFormLocation = `${host}${templateId.substring(0, templateId.lastIndexOf('/'))}/rsvp-form`; - const resp = await fetchThrottledMemoizedText( - `${rsvpFormLocation}.plain.html`, - { headers: { authorization: 'token gM2cgLEyLEqBn8EIyuH0vd/GRbOamtmxF//YHhAwAEBl' } }, - ).catch(() => ({})); + const resp = await fetchThrottledMemoizedText(`${rsvpFormLocation}.plain.html`); if (!resp) { component.remove();