[IMP] formio: Add Form UI overlay, to block user interaction while ...

Add Form UI overlay, to block user interaction while loading and upon wizard state and submission.
novacode-nl · Nov 25, 2024 · 7a0848b · 7a0848b
1 parent 1454bec
commit 7a0848b
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 14 deletions.
diff --git a/formio/CHANGELOG.md b/formio/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 15.0.6.19
+
+Add Form UI overlay, to block user interaction while loading and upon wizard state and submission.
+
 ## 15.0.6.18
 
 Improve the installation (`post_init_hook`) to auto install the latest stable formio.js (library) version from the GitHub tags API.

diff --git a/formio/static/src/css/formio_form_embed.css b/formio/static/src/css/formio_form_embed.css
@@ -5,10 +5,19 @@
     clear: both;
 }
 
-#formio_form_loading {
+#formio_form_loading_overlay {
+    position: fixed;
+    display: block;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     background: url('/web/static/lib/select2/select2-spinner.gif') center center no-repeat;
-    height: 16px;
-    margin-top: 5%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 9999;
+    cursor: pointer;
 }
 
 .formio_form_dock {

diff --git a/formio/static/src/js/form/formio_form.js b/formio/static/src/js/form/formio_form.js
@@ -67,6 +67,20 @@ export class OdooFormioForm extends Component {
         }
     }
 
+    hideOverlay() {
+        let loadingOverlay = document.getElementById('formio_form_loading_overlay');
+        if (loadingOverlay) {
+            loadingOverlay.style.display = 'none';
+        }
+    }
+
+    showOverlay() {
+        let loadingOverlay = document.getElementById('formio_form_loading_overlay');
+        if (loadingOverlay) {
+            loadingOverlay.style.display = 'block';
+        }
+    }
+
     wizardStateChange (form, submission) {
         this.resetParentIFrame();
         // readOnly check also applies in server endpoint
@@ -77,12 +91,16 @@ export class OdooFormioForm extends Component {
             if (this.formUuid) {
                 data['form_uuid'] = this.formUuid;
             }
+
+            self.showOverlay();
+
             $.jsonRpc.request(this.submitUrl, 'call', data).then(function(submission) {
                 if (typeof(submission) != 'undefined') {
                     // Set properties to instruct the next calls to save (draft) the current form.
                     this.formUuid = submission.form_uuid;
                     this.submitUrl = this.wizardSubmitUrl + this.formUuid + '/submit';
                 }
+                self.hideOverlay();
             });
         }
     }
@@ -100,6 +118,7 @@ export class OdooFormioForm extends Component {
                 configUrl += '?' + parentParams.toString();
             }
         }
+        self.showOverlay();
         $.jsonRpc.request(configUrl, 'call', {}).then(function(result) {
             if (!$.isEmptyObject(result)) {
                 self.schema = result.schema;
@@ -158,9 +177,41 @@ export class OdooFormioForm extends Component {
                         },
                         'form_data': form.data
                     };
-                    $.jsonRpc.request(apiUrl, 'call', {'data': data}).then(function(result) {
-                        form.submission = {'data': JSON.parse(result)};
-                    });
+
+                    const changeOverlay = component.properties.hasOwnProperty('changeOverlay')
+                          && component.properties.changeOverlay;
+
+                    if (changeOverlay) {
+                        // The overlayTimerPromise improves the UI/UX
+                        // feedback showing something (API) is processing.
+                        let overlayTimerPromise = new Promise((resolve) => {
+                            window.setTimeout(
+                                resolve, changeOverlay
+                            );
+                        });
+                        self.showOverlay();
+                        // Fix compatibility with jQuery Promises.
+                        //
+                        // TODO: when replaced $.ajax to native XHR, this
+                        // extra (return) Promise ain't needed.
+                        return new Promise((resolve) => {
+                            $.jsonRpc.request(apiUrl, 'call', {'data': data}).then(function(result) {
+                                form.submission = {'data': JSON.parse(result)};
+                            });
+                            overlayTimerPromise.then(() => {
+                                self.hideOverlay();
+                                resolve();
+                            });
+                        });
+                    }
+                    else {
+                        return new Promise((resolve) => {
+                            $.jsonRpc.request(apiUrl, 'call', {'data': data}).then(function(result) {
+                                form.submission = {'data': JSON.parse(result)};
+                            });
+                            resolve();
+                        });
+                    }
                 }
             }
         }
@@ -449,6 +500,7 @@ export class OdooFormioForm extends Component {
                     if (!$.isEmptyObject(result)) {
                         form.submission = {'data': JSON.parse(result)};
                     }
+                    self.hideOverlay();
                 });
             }
         });

diff --git a/formio/views/formio_form_templates.xml b/formio/views/formio_form_templates.xml
@@ -107,7 +107,7 @@ See LICENSE file for full licensing details. -->
                 <t t-if="builder">
                     <h3 t-if="builder.show_form_title" class="formio_form_title"><span name="title" t-esc="builder.title"/></h3>
                 </t>
-                
+
                 <t t-if="len(languages) > 1">
                     <div class="formio_languages">
                         <t t-foreach="languages" t-as="lang">
@@ -119,7 +119,7 @@ See LICENSE file for full licensing details. -->
                 </t>
                 <!-- form shall be mounted here -->
                 <div id="formio_form_app">
-                    <div id="formio_form_loading"></div>
+                    <div id="formio_form_loading_overlay"></div>
                 </div>
                 <div t-if="form and form.show_uuid" class="float-right">
                     <small class="text-muted">UUID: <span t-esc="form.uuid"/></small>

diff --git a/formio/views/formio_portal_templates.xml b/formio/views/formio_portal_templates.xml
@@ -24,7 +24,7 @@ See LICENSE file for full licensing details. -->
             </t>
         </xpath>
     </template>
-    
+
     <template id="portal_my_formio" name="My Forms">
         <t t-call="portal.portal_layout">
             <t t-set="breadcrumbs_searchbar" t-value="True"/>
@@ -184,7 +184,7 @@ See LICENSE file for full licensing details. -->
                 <t t-if="builder">
                     <h3 t-if="builder.show_form_title" class="formio_form_title"><span name="title" t-esc="builder.title"/></h3>
                 </t>
-                
+
                 <t t-if="len(languages) > 1">
                     <div class="formio_languages">
                         <t t-foreach="languages" t-as="lang">
@@ -197,7 +197,7 @@ See LICENSE file for full licensing details. -->
 
                 <!-- form shall be mounted here -->
                 <div id="formio_form_app">
-                    <div id="formio_form_loading"></div>
+                    <div id="formio_form_loading_overlay"></div>
                 </div>
 
                 <t t-if="formio_builder_uuid">

diff --git a/formio/views/formio_public_templates.xml b/formio/views/formio_public_templates.xml
@@ -83,7 +83,7 @@ See LICENSE file for full licensing details. -->
 
                 <!-- form shall be mounted here -->
                 <div id="formio_form_app">
-                    <div id="formio_form_loading"></div>
+                    <div id="formio_form_loading_overlay"></div>
                 </div>
 
                 <div t-if="form.show_uuid" class="float-right">
@@ -136,7 +136,7 @@ See LICENSE file for full licensing details. -->
                 <t t-if="builder">
                     <h3 t-if="builder.show_form_title" class="formio_form_title"><span name="title" t-esc="builder.title"/></h3>
                 </t>
-                
+
                 <t t-if="len(languages) > 1">
                     <div class="formio_languages">
                         <t t-foreach="languages" t-as="lang">
@@ -149,7 +149,7 @@ See LICENSE file for full licensing details. -->
 
                 <!-- form shall be mounted here -->
                 <div id="formio_form_app">
-                    <div id="formio_form_loading"></div>
+                    <div id="formio_form_loading_overlay"></div>
                 </div>
 
                 <t t-if="formio_builder_uuid">