[IMP] website: change theme loader during install/update

This commit attempts to update the old "website.ThemePreview.Loader" style
by integrating a loading animation when theme is being installed

Common code used to add loader and install the selected theme in both
ThemePreviewController & ThemePreviewKanbanController.
(preview theme and pick a theme)

task-2338062

closes odoo/odoo#57682

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

1 files changed, 66 insertions, 14 deletions

diff --git a/addons/website/static/src/js/theme_preview_form.js b/addons/website/static/src/js/theme_preview_form.js
index b074494648e..2519da77443 100644
--- a/addons/website/static/src/js/theme_preview_form.js
+++ b/addons/website/static/src/js/theme_preview_form.js
@@ -7,9 +7,67 @@ var viewRegistry = require('web.view_registry');
 var core = require('web.core');
 var qweb = core.qweb;
 
-var ThemePreviewController = FormController.extend({
+/*
+* Common code for theme installation/update handler.
+*/
+const ThemePreviewControllerCommon = {
+    /**
+     * @override
+     */
+    init() {
+        this._super(...arguments);
+        this.$loader = $(qweb.render('website.ThemePreview.Loader'));
+    },
+    /**
+     * Called to add loading effect and install/pdate the selected theme depending on action.
+     *
+     * @private
+     * @param {number} res_id
+     * @param {String} action
+     */
+    _handleThemeAction(res_id, action) {
+        let actionCallback = undefined;
+        this._addLoader();
+        switch (action) {
+            case 'button_choose_theme':
+                actionCallback = result => this.do_action(result);
+                break;
+            case 'button_refresh_theme':
+                actionCallback = () => this._removeLoader();
+                break;
+        }
+        const rpcData = {
+            model: 'ir.module.module',
+            method: action,
+            args: [res_id],
+            context: this.initialState.context,
+        };
+        const rpcOptions = {
+            shadow: true,
+        };
+        this._rpc(rpcData, rpcOptions)
+            .then(actionCallback)
+            .guardedCatch(() => this._removeLoader());
+    },
+    /**
+     * Called to add loader element in DOM.
+     *
+     * @private
+     */
+    _addLoader() {
+        $('body').append(this.$loader);
+    },
+    /**
+     * @private
+     */
+    _removeLoader() {
+        this.$loader.remove();
+    }
+};
+
+var ThemePreviewController = FormController.extend(ThemePreviewControllerCommon, {
     events: Object.assign({}, FormController.prototype.events, {
-        'click .o_use_theme': '_onUseThemeClick',
+        'click .o_use_theme': '_onStartNowClick',
         'click .o_switch_theme': '_onSwitchThemeClick',
         'change input[name="viewer"]': '_onSwitchButtonChange',
     }),
@@ -77,21 +135,12 @@ var ThemePreviewController = FormController.extend({
         this.trigger_up('history_back');
     },
     /**
-     * Handler called when user click on 'Use this theme' button in forw view.
+     * Handler called when user click on 'START NOW' button in form view.
      *
      * @private
      */
-    _onUseThemeClick: function () {
-        const $loader = $(qweb.render('website.ThemePreview.Loader'));
-        $('body').append($loader);
-        return this._rpc({
-            model: 'ir.module.module',
-            method: 'button_choose_theme',
-            args: [this.getSelectedIds()[0]],
-            context: this.initialState.context,
-        }, {shadow: true})
-            .then(result => this.do_action(result))
-            .guardedCatch(() => $loader.remove());
+    _onStartNowClick: function () {
+        this._handleThemeAction(this.getSelectedIds()[0], 'button_choose_theme');
     },
 });
 
@@ -103,4 +152,7 @@ var ThemePreviewFormView = FormView.extend({
 
 viewRegistry.add('theme_preview_form', ThemePreviewFormView);
 
+return {
+    ThemePreviewControllerCommon: ThemePreviewControllerCommon
+}
 });