[IMP] web: add support of "sample" attribute in views

With this commit, it is now possible to display sample (fake)
data in empty views, in the hope of easing user onboarding.
This can be enabled (in list and kanban views) with attribute
sample="1" on the arch root element. In this case, if there is
no data to display, sample data will be generated based on
heuristics (depending on field types and names). This can be
used in addition to the no content helper.

Task 2232801

X-original-commit: 7c8e627ff5029cb539d702705e5ce53d658c76ed
Co-authored-by: Aaron Bohy <aab@odoo.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Jérémy Hennecart <jeh@odoo.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>

1 files changed, 21 insertions, 6 deletions

diff --git a/addons/web/static/src/js/views/abstract_controller.js b/addons/web/static/src/js/views/abstract_controller.js
index 32257202649..3df1d48410b 100644
--- a/addons/web/static/src/js/views/abstract_controller.js
+++ b/addons/web/static/src/js/views/abstract_controller.js
@@ -259,23 +259,23 @@ var AbstractController = mvc.Controller.extend(ActionMixin, {
      * updating the renderer and wait for the rendering to complete.
      *
      * @param {Object} params will be given to the model and to the renderer
-     * @param {Object} [options]
+     * @param {Object} [options={}]
      * @param {boolean} [options.reload=true] if true, the model will reload data
      *
      * @returns {Promise}
      */
-    update: async function (params, options = {}) {
+    async update(params, options = {}) {
         const shouldReload = 'reload' in options ? options.reload : true;
         if (shouldReload) {
             this.handle = await this.dp.add(this.model.reload(this.handle, params));
         }
         const localState = this.renderer.getLocalState();
-        const state = this.model.get(this.handle);
+        const state = this.model.get(this.handle, { withSampleData: true });
         const promises = [
             this.updateRendererState(state, params).then(() => {
                 this.renderer.setLocalState(localState);
             }),
-            this._update(state, params),
+            this._update(this.model.get(this.handle), params)
         ];
         await this.dp.add(Promise.all(promises));
         this.updateButtons();
@@ -340,6 +340,20 @@ var AbstractController = mvc.Controller.extend(ActionMixin, {
         });
     },
     /**
+     * @private
+     * @param {function} callback function to execute before removing classname
+     *   'o_view_sample_data' (may be async). This allows to reload and/or
+     *   rerender before removing the className, thus preventing the view from
+     *   flickering.
+     */
+    async _removeSampleData(callback) {
+        this.model.leaveSampleMode();
+        if (callback) {
+            await callback();
+        }
+        this.el.classList.remove('o_view_sample_data');
+    },
+    /**
      * Renders the html provided by the route specified by the
      * bannerRoute attribute on the controller (banner_route in the template).
      * Renders it before the view output and add a css class 'o_has_banner' to it.
@@ -409,7 +423,7 @@ var AbstractController = mvc.Controller.extend(ActionMixin, {
      * @param {Object} [params.shouldUpdateControlPanel]
      * @returns {Promise}
      */
-    _update: function (state, params) {
+    async _update(state, params) {
         // AAB: update the control panel -> this will be moved elsewhere at some point
         if (!this.$buttons) {
             this.renderButtons();
@@ -423,7 +437,8 @@ var AbstractController = mvc.Controller.extend(ActionMixin, {
             promises.push(this.updateControlPanel());
         }
         this._pushState();
-        return Promise.all(promises);
+        await Promise.all(promises);
+        this.el.classList.toggle('o_view_sample_data', this.model.isInSampleMode());
     },
     /**
      * Can be used to update the key 'cp_content'. This method is called in start and _update methods.