chg: [helpers:bootstrap] Allows passing modal footer buttons

src/View/Helper/BootstrapHelper.php

@@ -768,7 +768,7 @@ class BoostrapModal extends BootstrapGeneric {
     function __construct($options) {
         $this->allowedOptionValues = [
             'size' => ['sm', 'lg', 'xl', ''],
-            'type' => ['ok-only','confirm','confirm-success','confirm-warning','confirm-danger'],
+            'type' => ['ok-only','confirm','confirm-success','confirm-warning','confirm-danger', 'custom'],
             'variant' =>  array_merge(BootstrapGeneric::$variants, ['']),
         ];
         $this->processOptions($options);
@@ -834,7 +834,10 @@ class BoostrapModal extends BootstrapGeneric {
 
     private function genFooter()
     {
-        $footer = $this->openNode('div', ['class' => array_merge(['modal-footer'], $this->options['footerClass'])]);
+        $footer = $this->openNode('div', [
+            'class' => array_merge(['modal-footer'], $this->options['footerClass']),
+            'data-custom-footer' => $this->options['type'] == 'custom'
+        ]);
         if (!empty($this->options['footerHtml'])) {
             $footer .= $this->options['footerHtml'];
         } else {
@@ -849,6 +852,8 @@ class BoostrapModal extends BootstrapGeneric {
             return $this->getFooterOkOnly();
         } else if (str_contains($this->options['type'], 'confirm')) {
             return $this->getFooterConfirm();
+        } else if ($this->options['type'] == 'custom') {
+            return $this->getFooterCustom();
         } else {
             return $this->getFooterOkOnly();
         }
@@ -893,6 +898,23 @@ class BoostrapModal extends BootstrapGeneric {
         ]))->button();
         return $buttonCancel . $buttonConfirm;
     }
+
+    private function getFooterCustom()
+    {
+        $buttons = [];
+        foreach ($this->options['footerButtons'] as $buttonConfig) {
+            $buttons[] = (new BoostrapButton([
+                'variant' => h($buttonConfig['variant'] ?? 'primary'),
+                'text' => h($buttonConfig['text']),
+                'class' => 'modal-confirm-button',
+                'params' => [
+                    'data-dismiss' => !empty($buttonConfig['clickFunction']) ? '' : 'modal',
+                    'data-clickFunction' => sprintf('%s', $buttonConfig['clickFunction'])
+                ]
+            ]))->button();
+        }
+        return implode('', $buttons);
+    }
 }
 
 class BoostrapProgress extends BootstrapGeneric {

webroot/js/bootstrap-helper.js

@@ -668,13 +668,17 @@ class ModalFactory {
     }
 
     /** Generate the function that will be called when the user confirm the modal */
-    getConfirmationHandlerFunction() {
+    getConfirmationHandlerFunction(i) {
         return (evt) => {
             let confirmFunction = this.options.confirm
-            if (this.options.APIConfirm) {
             const tmpApi = new AJAXApi({
                 statusNode: evt.target
             })
+            if (this.options.APIConfirms) {
+                if (i !== undefined && this.options.APIConfirms[i] !== undefined) {
+                    confirmFunction = () => { return this.options.APIConfirms[i](tmpApi) }
+                }
+            } else if (this.options.APIConfirm) {
                 confirmFunction = () => { return this.options.APIConfirm(tmpApi) }
             }
             let confirmResult = confirmFunction(() => { this.hide() }, this, evt)
@@ -695,6 +699,37 @@ class ModalFactory {
 
     /** Attach the submission click listener for modals that have been generated by raw HTML */
     findSubmitButtonAndAddListener() {
+        let $modalFooter = this.$modal.find('.modal-footer')
+        if ($modalFooter.data('custom-footer')) { // setup basic listener as callback are defined in the template
+            let $submitButtons = this.$modal.find('.modal-footer .modal-confirm-button')
+            var selfModal = this;
+            selfModal.options.APIConfirms = [];
+            $submitButtons.each(function(i) {
+                const $submitButton = $(this)
+                if ($submitButton.data('clickfunction') !== undefined && $submitButton.data('clickfunction') !== '') {
+                    const clickHandler = window[$submitButton.data('clickfunction')]
+                    selfModal.options.APIConfirms[i] = (tmpApi) => {
+                        let clickResult = clickHandler(selfModal, tmpApi)
+                        if (clickResult !== undefined) {
+                            return clickResult
+                                .then((data) => {
+                                    if (data.success) {
+                                        selfModal.options.POSTSuccessCallback(data)
+                                    } else { // Validation error
+                                        selfModal.injectFormValidationFeedback(form, data.errors)
+                                        return Promise.reject('Validation error');
+                                    }
+                                })
+                                .catch((errorMessage) => {
+                                    selfModal.options.POSTFailCallback(errorMessage)
+                                    return Promise.reject(errorMessage);
+                                })
+                        }
+                    }
+                }
+                $submitButton.click(selfModal.getConfirmationHandlerFunction(i))
+            })
+        } else {
             let $submitButton = this.$modal.find('.modal-footer #submitButton')
             if (!$submitButton[0]) {
                 $submitButton = this.$modal.find('.modal-footer .modal-confirm-button')
@@ -746,7 +781,7 @@ class ModalFactory {
                     }
                 }
                 $submitButton.click(this.getConfirmationHandlerFunction())
-    
+            }
         }
     }
 }