[IMP] web: add new options to the Dialog widget

Now we can display dialogs with or without header / footer / backdrop
and we can force the DOM to be put elsewhere than the body.

Part of https://github.com/odoo/odoo/pull/29353
task-1903256

2 files changed, 32 insertions, 5 deletions

diff --git a/addons/web/static/src/js/core/dialog.js b/addons/web/static/src/js/core/dialog.js
index 807411144e9..8f128b657d9 100644
--- a/addons/web/static/src/js/core/dialog.js
+++ b/addons/web/static/src/js/core/dialog.js
@@ -50,6 +50,15 @@ var Dialog = Widget.extend({
      * @param {boolean} [options.technical=true]
      *        If set to false, the modal will have the standard frontend style
      *        (use this for non-editor frontend features)
+     * @param {jQueryElement} [options.$parentNode]
+     *        Element in which dialog will be appended, by default it will be
+     *        in the body
+     * @param {boolean} [options.backdrop=true]
+     *        Whether modal rendered with backdrop or not
+     * @param {boolean} [options.renderHeader=true]
+     *        Whether or not the dialog should be rendered with header
+     * @param {boolean} [options.renderFooter=true]
+     *        Whether or not the dialog should be rendered with footer
      */
     init: function (parent, options) {
         var self = this;
@@ -65,6 +74,10 @@ var Dialog = Widget.extend({
             $content: false,
             buttons: [{text: _t("Ok"), close: true}],
             technical: true,
+            $parentNode: false,
+            backdrop: true,
+            renderHeader: true,
+            renderFooter: true,
         });
 
         this.$content = options.$content;
@@ -75,6 +88,10 @@ var Dialog = Widget.extend({
         this.size = options.size;
         this.buttons = options.buttons;
         this.technical = options.technical;
+        this.$parentNode = options.$parentNode;
+        this.backdrop = options.backdrop;
+        this.renderHeader = options.renderHeader;
+        this.renderFooter = options.renderFooter;
     },
     /**
      * Wait for XML dependencies and instantiate the modal structure (except
@@ -91,6 +108,8 @@ var Dialog = Widget.extend({
                 title: self.title,
                 subtitle: self.subtitle,
                 technical: self.technical,
+                renderHeader: self.renderHeader,
+                renderFooter: self.renderFooter,
             }));
             switch (self.size) {
                 case 'large':
@@ -100,8 +119,10 @@ var Dialog = Widget.extend({
                     self.$modal.find('.modal-dialog').addClass('modal-sm');
                     break;
             }
-            self.$footer = self.$modal.find(".modal-footer");
-            self.set_buttons(self.buttons);
+            if (self.renderFooter) {
+                self.$footer = self.$modal.find(".modal-footer");
+                self.set_buttons(self.buttons);
+            }
             self.$modal.on('hidden.bs.modal', _.bind(self.destroy, self));
         });
     },
@@ -186,7 +207,13 @@ var Dialog = Widget.extend({
             self.$modal.find(".modal-body").replaceWith(self.$el);
             self.$modal.attr('open', true);
             self.$modal.removeAttr("aria-hidden");
-            self.$modal.modal('show');
+            if (self.$parentNode) {
+                self.$modal.appendTo(self.$parentNode);
+            }
+            self.$modal.modal({
+                show: true,
+                backdrop: self.backdrop,
+            });
             self._openedResolver();
             if (options && options.shouldFocusButtons) {
                 self._onFocusControlButton();
diff --git a/addons/web/static/src/xml/dialog.xml b/addons/web/static/src/xml/dialog.xml
index d5f6025d968..645e6e2391e 100644
--- a/addons/web/static/src/xml/dialog.xml
+++ b/addons/web/static/src/xml/dialog.xml
@@ -6,12 +6,12 @@
 <div role="dialog" t-name="Dialog" t-attf-class="modal#{technical ? ' o_technical_modal' : ''}#{fullscreen ? ' o_modal_full': ''}" tabindex="-1" data-backdrop="static" t-att-id="_.uniqueId('modal_')" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
-            <header class="modal-header">
+            <header t-if="renderHeader" class="modal-header">
                 <h4 class="modal-title"><t t-raw="title"/><span class="o_subtitle text-muted small"><t t-esc="subtitle"/></span></h4>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close" tabindex="-1">×</button>
             </header>
             <main class="modal-body"/>
-            <footer class="modal-footer"/>
+            <footer t-if="renderFooter" class="modal-footer"/>
         </div>
     </div>
 </div>