[REF] survey: use ajax instead of redirection for screen transitions

PURPOSE

To have a better UX, the transition between questions in a survey should not
be done by loading another page, but by loading next questions in AJAX.

This will allow to fade out / fade in the next question and improve the user
experience, as well as prepare the work for the complete survey redesign.

SPECIFICATIONS

General
=======

This commit refactors the way the questions are loaded.
To go to next question(s), instead of redirecting to a new page containing
the next question(s), the submit process is loading the next question(s)
using ajax. The template of the question is prepared at server side and is
given in html string to the client that display the next question in a smooth
transition (fade in / fade out).

This commit includes also the start and the end screen of the survey inside
the survey form in order to perform smooth transition between start screen
and first question(s) and between last question(s) and end screen.

Only one master template (survey form) is now used to display every part of
the survey : start + questions + end screens.

The answer_done error is now handled by the _prepare_survey_data itself.
If the user wants to display an already_done survey, the returned template
is the end screen.

This commit handles page transition for the survey results. When submitting
survey, the survey result widget is initialized and attached to the survey
result section.

A new route has been added : /survey/begin/.
If the user arrives on start screen, the state is 'New'. Once the user clicks
on Start button, an rpc call is made to survey/begin that will call the
survey_prepare_data to render the first question page and set the state to
in_progress and the start_datetime of the answer.

Validation
==========

Add the validation of all types of questions directly in the frontend.
This allows to reduce the latency before the survey is validated and was
necessary to go along with our new fade out / fade in mechanism.
The client does not need to wait the validation answer from the server to
display validation error messages.

The current questions are only faded out if the frontend validation has passed.
The server still makes this validation before submitting answers and loading
next question(s) to avoid direct rpc calls that would mess up the answers.

Error messages are now displayed with a slide down transition, for a wonderful
wow effect !

Timer
=====

As the survey form works with ajax to display start screen, question(s) and
end page, the timer has to be started only after the start screen.

This commit display and start the timer only after start survey button is
clicked.

Breadcrumb
==========

As the survey form now works in ajax to display in same page start screen,
question(s) and end page screen, the breadcrumb has to be controlled not only
on page loading but also manually between transition from a screen to another.

To ease the breadcrumb management, breadcrumb is now a widget that will reload
a js template, mainly depending of the current page id.
The js form initialize or update this widget giving this new page id.
On breadcrumb item click, the widget triggers a onclick caught by the form
that calls the submit with the given target.

This commit handles page transition for the breadcrumb. When going forward or
backward (next or previous page), the breadcrumb activates, deactivates and
links elements are reinitialized depending of the target page.

LINKS

Task ID: 2152223
PR #41453

Co-authored-by: Aurélien Warnon <awa@odoo.com>

1 files changed, 10 insertions, 13 deletions

diff --git a/addons/survey/static/src/js/survey_timer.js b/addons/survey/static/src/js/survey_timer.js
index 79f8b07c8dd..664871e4e7e 100644
--- a/addons/survey/static/src/js/survey_timer.js
+++ b/addons/survey/static/src/js/survey_timer.js
@@ -3,10 +3,6 @@ odoo.define('survey.timer', function (require) {
 
 var publicWidget = require('web.public.widget');
 
-var interval = null;
-var $timer = null;
-var countDownDate = null;
-
 publicWidget.registry.SurveyTimerWidget = publicWidget.Widget.extend({
     //--------------------------------------------------------------------------
     // Widget
@@ -17,8 +13,9 @@ publicWidget.registry.SurveyTimerWidget = publicWidget.Widget.extend({
      */
     init: function (parent, params) {
         this._super.apply(this, arguments);
-        this.$timer = params.timer;
-        this.$timeLimitMinutes = params.timeLimitMinutes;
+        this.timer = params.timer;
+        this.timeLimitMinutes = params.timeLimitMinutes;
+        this.surveyTimerInterval = null;
     },
 
 
@@ -30,13 +27,13 @@ publicWidget.registry.SurveyTimerWidget = publicWidget.Widget.extend({
     start: function () {
         var superDef = this._super.apply(this, arguments);
 
-        countDownDate = moment.utc(this.$timer).add(this.$timeLimitMinutes, 'minutes');
-        if (this.$timeLimitMinutes <= 0 || countDownDate.diff(moment.utc(), 'seconds') < 0) {
+        this.countDownDate = moment.utc(this.timer).add(this.timeLimitMinutes, 'minutes');
+        if (this.timeLimitMinutes <= 0 || this.countDownDate.diff(moment.utc(), 'seconds') < 0) {
             this.trigger_up('time_up');
         } else {
-            $timer = this.$el.find('.timer');
+            this.$timer = this.$el.find('.timer');
             this._updateTimer(this);
-            interval = setInterval(this._updateTimer.bind(this), 1000);
+            this.surveyTimerInterval = setInterval(this._updateTimer.bind(this), 1000);
         }
 
         return superDef;
@@ -55,14 +52,14 @@ publicWidget.registry.SurveyTimerWidget = publicWidget.Widget.extend({
     * When the time runs out, it triggers a 'time_up' event to notify the parent widget.
     */
     _updateTimer: function () {
-        var timeLeft = countDownDate.diff(moment.utc(), 'seconds');
+        var timeLeft = this.countDownDate.diff(moment.utc(), 'seconds');
 
         if (timeLeft >= 0) {
             var timeLeftMinutes = parseInt(timeLeft / 60);
             var timeLeftSeconds = timeLeft - (timeLeftMinutes * 60);
-            $timer.html(this._formatTime(timeLeftMinutes) + ':' + this._formatTime(timeLeftSeconds));
+            this.$timer.html(this._formatTime(timeLeftMinutes) + ':' + this._formatTime(timeLeftSeconds));
         } else {
-            clearInterval(interval);
+            clearInterval(this.surveyTimerInterval);
             this.trigger_up('time_up');
         }
     },