added onResume to each component controller

adobecom · May 3, 2024 · dd0d97a · dd0d97a
1 parent c1293da
commit dd0d97a
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
+    });
   });
 }