submit button listener

Author: gustavobascope

resources/js/inbox-rules/components/InboxRuleFillData.vue

@@ -1,90 +1,136 @@
 <template>
   <div>
     <b-embed
+      ref="preview"
       :src="linkTasks"
-      @load="loaded()"
       :disable-interstitial="true"
-      ref="preview"
-      :event-parent-id="_uid" /> 
+      :event-parent-id="_uid"
+      @load="loaded()"
+    />
   </div>
 </template>
 
-
 <script>
-  export default {
-    props: {
-      taskId: {
-        type: Number,
-        default: null
-      },
-      inboxRuleData: {
-        type: Object,
-        default: null
-      },
-      propInboxQuickFill: {
-        type: Object,
-        default: null
-      },
+export default {
+  props: {
+    taskId: {
+      type: Number,
+      default: null,
     },
-    data() {
-      return {
-        formData: {}
-      };
+    inboxRuleData: {
+      type: Object,
+      default: null,
     },
-    computed: {
-      linkTasks() {
-        return `/tasks/${this.taskId}/edit/preview?dispatchSubmit=1&alwaysAllowEditing=1&disableInterstitial=1`;
-      },
-      iframeContentWindow() {
-        return this.$refs['preview'].firstChild.contentWindow;
-      }
+    propInboxQuickFill: {
+      type: Object,
+      default: null,
     },
-    watch: {
-      formData() {
-        this.$emit("data", this.formData);
-      },
-      propInboxQuickFill() {
-        this.formData = _.merge({}, this.formData, this.propInboxQuickFill);
-        this.iframeContentWindow.location.reload();
-      }
+  },
+  data() {
+    return {
+      formData: {},
+      lastClickedButton: null,
+    };
+  },
+  computed: {
+    linkTasks() {
+      return `/tasks/${this.taskId}/edit/preview?dispatchSubmit=1&alwaysAllowEditing=1&disableInterstitial=1`;
+    },
+    iframeContentWindow() {
+      return this.$refs.preview.firstChild.contentWindow;
+    },
+  },
+  watch: {
+    formData() {
+      this.$emit("data", this.formData);
     },
-    mounted() {
-      this.receiveEvent('dataUpdated', (data) => {
-        this.formData = data;
+    propInboxQuickFill() {
+      this.formData = _.merge({}, this.formData, this.propInboxQuickFill);
+      this.iframeContentWindow.location.reload();
+    },
+  },
+  mounted() {
+    this.receiveEvent("dataUpdated", (data) => {
+      this.formData = data;
+    });
+    this.receiveEvent("formSubmit", (data) => {
+      // Use buttonInfo from event if it's a valid object, otherwise use lastClickedButton
+      // Note: There's a bug in screen-builder where buttonInfo arrives as `false` instead of the object
+      let submitData = null;
+      if (data && typeof data === "object" && !Array.isArray(data)) {
+        submitData = data;
+      } else if (this.lastClickedButton && this.lastClickedButton.label) {
+        // Fallback: use button info captured from iframe click listener
+        submitData = {
+          name: this.lastClickedButton.name,
+          label: this.lastClickedButton.label,
+          value: this.lastClickedButton.value,
+        };
+      }
+      this.$emit("submit", submitData);
+    });
+    this.receiveEvent("taskReady", () => {
+      this.sendEvent("fillDataOverwriteExistingFields", this.inboxRuleData);
+      // Setup click listener for submit buttons in iframe after task is ready
+      this.$nextTick(() => {
+        this.setupButtonClickListener();
       });
-      this.receiveEvent('formSubmit', (data) => {
-        this.$emit("submit", data);
+    });
+  },
+  methods: {
+    eraseData() {
+      this.sendEvent("eraseData", true);
+    },
+    reload() {
+      this.formData = {};
+      this.iframeContentWindow.location.reload();
+    },
+    loaded() {
+      // eslint-disable-next-line no-underscore-dangle
+      this.iframeContentWindow.event_parent_id = this._uid;
+      this.sendEvent("sendValidateForm", false);
+    },
+    sendEvent(name, data) {
+      const event = new CustomEvent(name, {
+        detail: data,
       });
-      this.receiveEvent('taskReady', () => {
-        this.sendEvent("fillDataOverwriteExistingFields", this.inboxRuleData);
+      this.iframeContentWindow.dispatchEvent(event);
+    },
+    receiveEvent(name, callback) {
+      window.addEventListener(name, (event) => {
+        // eslint-disable-next-line no-underscore-dangle
+        if (event.detail.event_parent_id !== this._uid) {
+          return;
+        }
+        callback(event.detail.data);
       });
     },
-    methods: {
-      eraseData() {
-        this.sendEvent("eraseData", true);
-      },
-      reload() {
-        this.formData = {};
-        this.iframeContentWindow.location.reload();
-      },
-      loaded() {
-        this.iframeContentWindow.event_parent_id = this._uid;
-        this.sendEvent("sendValidateForm", false);
-      },
-      sendEvent(name, data) {
-        const event = new CustomEvent(name, {
-          detail: data
-        });
-        this.iframeContentWindow.dispatchEvent(event);
-      },
-      receiveEvent(name, callback) {
-        window.addEventListener(name, (event) => {
-          if (event.detail.event_parent_id !== this._uid) {
-            return;
+    setupButtonClickListener() {
+      try {
+        const iframeDoc = this.iframeContentWindow.document;
+        // Listen for clicks on submit buttons in the iframe
+        iframeDoc.addEventListener("click", (event) => {
+          const button = event.target.closest("button");
+          if (button) {
+            // Check if this is a submit button (has btn-primary class or is inside form-group)
+            const isSubmitButton = button.classList.contains("btn-primary")
+              || button.classList.contains("btn-secondary")
+              || button.closest(".form-group");
+            if (isSubmitButton) {
+              this.lastClickedButton = {
+                name: button.getAttribute("name") || null,
+                label: button.textContent?.trim() || null,
+                value: button.value || null,
+              };
+            }
           }
-          callback(event.detail.data);
-        });
-      },
-    }
-  }
-</script>
+        }, true);
+      } catch (e) {
+        // Cross-origin restrictions may prevent access to iframe content
+        // eslint-disable-next-line no-console
+        console.warn("Could not setup button click listener in iframe:", e.message);
+      }
+    },
+  },
+};
+</script>