From dd0d97abde2528319c0a59b6ffbcf64f75a81ebb Mon Sep 17 00:00:00 2001 From: Qiyun Dai Date: Fri, 3 May 2024 12:47:50 -0500 Subject: [PATCH] added onResume to each component controller --- .../checkbox-component-controller.js | 4 ++++ .../event-format-component-controller.js | 8 +++++++- .../event-info-component-controller.js | 13 +++++++++++++ .../img-upload-component-controller.js | 4 ++++ .../controllers/share-controller.js | 10 ++++++++-- .../venue-info-component-controller.js | 4 ++++ blocks/form-handler/form-handler.js | 17 ++++++++--------- 7 files changed, 48 insertions(+), 12 deletions(-) diff --git a/blocks/form-handler/controllers/checkbox-component-controller.js b/blocks/form-handler/controllers/checkbox-component-controller.js index 54ba0878..fbc92781 100644 --- a/blocks/form-handler/controllers/checkbox-component-controller.js +++ b/blocks/form-handler/controllers/checkbox-component-controller.js @@ -38,6 +38,10 @@ export default function init(component) { }); } +export function onResume() { + // TODO: handle form prepopulation on component level +} + export function onSubmit(component, inputMap) { console.log(inputMap, 'checkbox onSubmit not built yet'); return {}; diff --git a/blocks/form-handler/controllers/event-format-component-controller.js b/blocks/form-handler/controllers/event-format-component-controller.js index 2ab1078b..6b469c6f 100644 --- a/blocks/form-handler/controllers/event-format-component-controller.js +++ b/blocks/form-handler/controllers/event-format-component-controller.js @@ -16,10 +16,12 @@ function initNewSeriesModal(component) { function prepopulateTimeZone(component) { const currentTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; - if (!currentTimeZone) return; const timeZoneInput = component.querySelector('#time-zone-select-input'); + + if (!timeZoneInput) return; + const options = timeZoneInput.querySelectorAll('option'); options.forEach((opt) => { @@ -35,6 +37,10 @@ export default function init(component) { prepopulateTimeZone(component); } +export function onResume() { + // TODO: handle form prepopulation on component level +} + export function onSubmit(component, inputMap) { console.log(inputMap); return {}; diff --git a/blocks/form-handler/controllers/event-info-component-controller.js b/blocks/form-handler/controllers/event-info-component-controller.js index 266dc02c..ab0353a6 100644 --- a/blocks/form-handler/controllers/event-info-component-controller.js +++ b/blocks/form-handler/controllers/event-info-component-controller.js @@ -273,6 +273,19 @@ export default function init(component) { initCalendar(component); } +export function onResume(component, eventObj, inputMap) { + inputMap.forEach((input) => { + const element = component.querySelector(input.selector); + if (!element) return; + + if (element[input.accessPoint] !== undefined) { + element[input.accessPoint] = eventObj[input.key]; + } else { + element.setAttirbute(input.accessPoint, eventObj[input.key]); + } + }); +} + export function onSubmit(component, inputMap) { const datePicker = component.querySelector('#event-info-date-picker'); const startDate = new Date(datePicker.dataset.startDate); diff --git a/blocks/form-handler/controllers/img-upload-component-controller.js b/blocks/form-handler/controllers/img-upload-component-controller.js index b3731449..8a6b9f1f 100644 --- a/blocks/form-handler/controllers/img-upload-component-controller.js +++ b/blocks/form-handler/controllers/img-upload-component-controller.js @@ -8,6 +8,10 @@ export default function init(component) { }); } +export function onResume() { + // TODO: handle form prepopulation on component level +} + export function onSubmit(component, inputMap) { console.log(inputMap); return {}; diff --git a/blocks/form-handler/controllers/share-controller.js b/blocks/form-handler/controllers/share-controller.js index f16fb902..0c3b08d4 100644 --- a/blocks/form-handler/controllers/share-controller.js +++ b/blocks/form-handler/controllers/share-controller.js @@ -68,8 +68,14 @@ export function getMappedInputsOutput(component, inputMap) { const inputFound = component.querySelector(row.selector); if (inputFound) { - const { key, accessPoint } = row; - output[key] = getElementOutput(inputFound, accessPoint); + const { key, accessPoint, shadowRootSelector } = row; + let targetInput = inputFound; + + if (shadowRootSelector) { + targetInput = inputFound.shadowRoot.querySelector(shadowRootSelector); + } + + output[key] = getElementOutput(targetInput, accessPoint); } }); diff --git a/blocks/form-handler/controllers/venue-info-component-controller.js b/blocks/form-handler/controllers/venue-info-component-controller.js index 478702c7..f691f9b7 100644 --- a/blocks/form-handler/controllers/venue-info-component-controller.js +++ b/blocks/form-handler/controllers/venue-info-component-controller.js @@ -9,6 +9,10 @@ export default function init(component) { initVenueImageInput(component); } +export function onResume() { + // TODO: handle form prepopulation on component level +} + export function onSubmit(component, inputMap) { const venueInfoVisible = component.querySelector('#checkbox-venue-info-visible').checked; diff --git a/blocks/form-handler/form-handler.js b/blocks/form-handler/form-handler.js index a1f41f8c..f50a3bd0 100644 --- a/blocks/form-handler/form-handler.js +++ b/blocks/form-handler/form-handler.js @@ -286,15 +286,14 @@ function prepopulateForm(el, inputMap) { const eventObj = JSON.parse(localStorage.getItem(eventId)); - inputMap.forEach((input) => { - const element = el.querySelector(input.selector); - if (!element) return; - - if (element[input.accessPoint] !== undefined) { - element[input.accessPoint] = eventObj[input.key]; - } else { - element.setAttirbute(input.accessPoint, eventObj[input.key]); - } + SUPPORTED_COMPONENTS.forEach((comp) => { + const mappedComponents = el.querySelectorAll(`.${comp}-component`); + if (!mappedComponents?.length) return; + + mappedComponents.forEach(async (component) => { + const { onResume } = await import(`./controllers/${comp}-component-controller.js`); + await onResume(component, eventObj, inputMap); + }); }); }