From 94509ff5d36d8e946536ea379ba6d34af2311197 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <sami.mokaddem@circl.lu>
Date: Thu, 16 Feb 2023 13:34:17 +0100
Subject: [PATCH] new: [js-bootstrap:quickConfirm] Added quickConfirm UI
 element to create a confirmation popover to confirm actions

---
 webroot/js/bootstrap-helper.js | 61 ++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/webroot/js/bootstrap-helper.js b/webroot/js/bootstrap-helper.js
index 7f60c9c..d29d0c7 100644
--- a/webroot/js/bootstrap-helper.js
+++ b/webroot/js/bootstrap-helper.js
@@ -284,6 +284,67 @@ class UIFactory {
         })
         return promise
     }
+
+    /**
+     * Place an overlay onto a node and remove it whenever the promise resolves
+     * @param {(jQuery|string)} node       - The node on which the confirm popover should be palced
+     * @param {Object} options             - The options to be passed to the overlay class
+     * @return {Promise} Result of the passed promised
+     */
+    quickConfirm(node, options={}) {
+        const $node = $(node)
+        const defaultOptions = {
+            title: 'Confirm action',
+            description: '',
+            descriptionHtml: false,
+            container: 'body',
+            variant: 'success',
+            confirmText: 'Confirm',
+            confirm: function() {}
+        }
+        options = Object.assign({}, defaultOptions, options)
+        options.description = options.descriptionHtml ? options.descriptionHtml : sanitize(options.description)
+        const popoverOptions = {
+            title: options.title,
+            titleHtml: options.titleHtml,
+            container: options.container,
+            html: true,
+        }
+
+        var promiseResolve, promiseReject;
+        const confirmPromise = new Promise(function (resolve, reject) {
+            promiseResolve = resolve;
+            promiseReject = reject;
+        })
+        popoverOptions.content = function() {
+            const $node = $(this)
+            const $container = $('<div>')
+            const $buttonCancel = $('<a class="btn btn-secondary btn-sm me-2">Cancel</a>')
+                .click(function() {
+                    const popover = bootstrap.Popover.getInstance($node[0])
+                    popover.dispose()
+                })
+            const $buttonSubmit = $(`<a class="submit-button btn btn-${options.variant} btn-sm">${options.confirmText}</a>`)
+                .click(function() {
+                    options.confirm()
+                        .then(function(result) {
+                            promiseResolve(result)
+                        })
+                        .catch(function(error) {
+                            promiseReject(error)
+                        })
+                    const popover = bootstrap.Popover.getInstance($node[0])
+                    popover.dispose()
+                })
+            $container.append(`<p>${options.description}</p>`)
+            $container.append($(`<div>`).append($buttonCancel, $buttonSubmit))
+            return $container
+        }
+
+        const thePopover = this.popover($node, popoverOptions)
+        thePopover.show()
+        return confirmPromise // have to return a promise to avoid closing the modal
+    }
 }
 
 /** Class representing a Toast */