[15.0][IMP] web_timeline: Added lock screen when loading records

OCA · Sep 14, 2023 · ed92fe8 · ed92fe8
1 parent b7c35c2
commit ed92fe8
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 1 deletion.
diff --git a/web_timeline/static/src/js/timeline_controller.js b/web_timeline/static/src/js/timeline_controller.js
@@ -58,6 +58,7 @@ odoo.define("web_timeline.TimelineController", function (require) {
 
             let fields = this.renderer.fieldNames;
             fields = _.uniq(fields.concat(n_group_bys));
+            this.render.blockUI();
             $.when(
                 res,
                 this._rpc({

diff --git a/web_timeline/static/src/js/timeline_renderer.js b/web_timeline/static/src/js/timeline_renderer.js
@@ -227,6 +227,7 @@ odoo.define("web_timeline.TimelineRenderer", function (require) {
                 this.qweb.add_template(tmpl);
             }
 
+            this.blockUI();
             this.timeline = new vis.Timeline(
                 this.$timeline.get(0),
                 {},
@@ -249,6 +250,59 @@ odoo.define("web_timeline.TimelineRenderer", function (require) {
             });
         },
 
+        /**
+         * Block the interface by displaying a progress bar.
+         *
+         * @private
+         */
+        blockUI: function () {
+            this.loadStartTime = Date.now();
+            $.blockUI({
+                message: core.qweb.render("TimelineView.loadProgressDialog", {}),
+            });
+            $(document.body).removeClass("o_ui_blocked");
+        },
+
+        /**
+         * Updates the information displayed in the interface block,
+         * incrementing the progress bar with the records loaded.
+         *
+         * @param {Number} index Total records uploaded
+         * @param {Number} totalEvents Total number of records to be uploaded
+         * @private
+         */
+        update_pct_blockedUI: function (index, totalEvents) {
+            const percentage = parseInt((index / totalEvents) * 100, 10);
+            $(".o_load_progress_dialog_index").text(index);
+            $(".o_load_progress_dialog")
+                .find(".progress-bar")
+                .text(percentage + "%")
+                .attr("aria-valuenow", percentage)
+                .css("width", percentage + "%");
+            if (percentage > 0) {
+                var estimatedTimeLeftMinutes =
+                    ((Date.now() - this.loadStartTime) *
+                        ((100 - percentage) / percentage)) /
+                    60000;
+                $(".o_load_progress_dialog_time_left").removeClass("d-none");
+                $(".o_load_progress_dialog_time_left_text").text(
+                    field_utils.format.float_time(estimatedTimeLeftMinutes)
+                );
+            } else {
+                $(".o_load_progress_dialog_total_events").text(totalEvents);
+            }
+        },
+
+        /**
+         * Unlocks the interface once all records have been loaded.
+         *
+         * @private
+         */
+        unblockUI: function () {
+            $(document.body).removeClass("o_ui_blocked");
+            $.unblockUI();
+        },
+
         /**
          * Clears and draws the canvas items.
          *
@@ -323,6 +377,7 @@ odoo.define("web_timeline.TimelineRenderer", function (require) {
          * @returns {jQuery.Deferred}
          */
         on_data_loaded: function (events, group_bys, adjust_window) {
+            this.update_pct_blockedUI(0, events.length);
             const ids = _.pluck(events, "id");
             return this._rpc({
                 model: this.modelName,
@@ -366,6 +421,7 @@ odoo.define("web_timeline.TimelineRenderer", function (require) {
                 if (mode && adjust) {
                     this.timeline.fit();
                 }
+                this.unblockUI();
             });
         },
 
@@ -382,9 +438,10 @@ odoo.define("web_timeline.TimelineRenderer", function (require) {
                 return events;
             }
             const groups = [];
+            const totalEvents = events.length;
             groups.push({id: -1, content: _t("<b>UNASSIGNED</b>"), order: -1});
             var seq = 1;
-            for (const evt of events) {
+            for (const [index, evt] of events.entries()) {
                 const grouped_field = _.first(group_bys);
                 const group_name = evt[grouped_field];
                 if (group_name) {
@@ -434,6 +491,7 @@ odoo.define("web_timeline.TimelineRenderer", function (require) {
                         }
                     }
                 }
+                this.update_pct_blockedUI(index, totalEvents);
             }
             return groups;
         },

diff --git a/web_timeline/static/src/xml/web_timeline.xml b/web_timeline/static/src/xml/web_timeline.xml
@@ -38,4 +38,33 @@
             </marker>
         </defs>
     </svg>
+    <div
+        t-name="TimelineView.loadProgressDialog"
+        class="o_load_progress_dialog text-white"
+    >
+        <span class="fa fa-spin fa-circle-o-notch fa-2x mb-2" />
+        <div class="o_load_progress_dialog">
+            Loading <span class="o_load_progress_dialog_index">1</span> out of <span
+                class="o_load_progress_dialog_total_events"
+            >?</span>...
+            <div class="o_load_progress_dialog_time_left d-none">
+                <span>Estimated time left:</span>
+                <span class="o_load_progress_dialog_time_left_text" />
+                <span>minutes</span>
+            </div>
+        </div>
+        <div class="d-flex align-items-center mt-2">
+            <div class="progress flex-grow-1">
+                <div
+                    class="progress-bar progress-bar-striped"
+                    role="progressbar"
+                    aria-valuenow="0"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                >
+                    <span>0%</span>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>