[REF] survey : make survey timer a widget

This commit makes the survey timer js controller become a widget.
This widget is called by the survey form widget.
When the time is over, the widget triggers a time_up event
instead of calling the submit.
the time_up event is catched by the survey form widget that
calls himself the submit, as the submit is on the form
and not on the timer itself.

Task ID : 1930132
PR #32419

addons/survey/static/src/js/survey_form.js

@@ -25,15 +25,19 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
         var self = this;
         return this._super.apply(this, arguments).then(function() {
             self.options = self.$target.find('form').data()
-            var $timer = self.$('.o_survey_timer');
+            var $timer = $('.o_survey_timer');
             if ($timer.length) {
-                this.surveyTimerWidget = new publicWidget.registry.SurveyTimerWidget(this);
-                this.surveyTimerWidget.attachTo($timer);
-                this.surveyTimerWidget.on('time_up', this, function (ev) {
+                var timeLimitMinutes = self.options.timeLimitMinutes;
+                var timer = self.options.timer;
+                self.surveyTimerWidget = new publicWidget.registry.SurveyTimerWidget(self, {
+                    'timer': timer,
+                    'timeLimitMinutes': timeLimitMinutes
+                });
+                self.surveyTimerWidget.attachTo($timer);
+                self.surveyTimerWidget.on('time_up', self, function (ev) {
                     self.$el.find('button[type="submit"]').click();
                 });
             }
-
             self.$('div.o_survey_form_date').each(function () {
                 self._initDateTimePicker($(this));
             });
@@ -118,7 +122,7 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend({
         this._resetErrors();
 
         return self._rpc({
-            route: '/survey/submit/' + self.options['surveyToken'] + '/' + self.options['answerToken'],
+            route: '/survey/submit/' + self.options.surveyToken + '/' + self.options.answerToken ,
             params: params,
         }).then(function (result) {
             return self._onSubmitDone(result, params);

addons/survey/static/src/js/survey_timer.js

@@ -1,45 +1,73 @@
 odoo.define('survey.timer', function (require) {
 'use strict';
 
-require('web.dom_ready');
+var publicWidget = require('web.public.widget');
 
-if (!$('.js_survey_timer').length) {
-    return Promise.reject("DOM doesn't contain '.js_survey_timer'");
-}
-
-var $parent = $('.js_survey_timer');
-var timeLimitMinutes = parseInt($parent.data('time_limit_minutes'));
-
-if (timeLimitMinutes <= 0) {
-    return Promise.reject("Timer is not positive");
-}
-
-var countDownDate = moment.utc($parent.data('timer')).add(timeLimitMinutes, 'minutes');
-
-if (countDownDate.diff(moment.utc(), 'seconds') < 0) {
-    return Promise.reject("Timer is already finished");
-}
-
-var formatTime = function (time) {
-    return time > 9 ? time : '0' + time;
-};
-
-var $timer = $parent.find('.timer');
 var interval = null;
-var updateTimer = function () {
-    var timeLeft = countDownDate.diff(moment.utc(), 'seconds');
+var $timer = null;
+var countDownDate = null;
 
-    if (timeLeft >= 0) {
-        var timeLeftMinutes = parseInt(timeLeft / 60);
-        var timeLeftSeconds = timeLeft - (timeLeftMinutes * 60);
-        $timer.html(formatTime(timeLeftMinutes) + ':' + formatTime(timeLeftSeconds));
-    } else {
-        clearInterval(interval);
-        $('.o_survey_form').submit();
-    }
-};
+publicWidget.registry.SurveyTimerWidget = publicWidget.Widget.extend({
+    //--------------------------------------------------------------------------
+    // Widget
+    //--------------------------------------------------------------------------
 
-updateTimer();
-interval = setInterval(updateTimer, 1000);
+    /**
+     * @override
+     */
+    init: function (parent, params) {
+        this._super.apply(this, arguments);
+        this.$timer = params.timer;
+        this.$timeLimitMinutes = params.timeLimitMinutes;
+    },
+
+
+    /**
+    * Two responsabilities : Validate that time limit is not exceeded and Run timer otherwise.
+    *
+    * @override
+    */
+    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.trigger_up('time_up');
+        } else {
+            $timer = this.$el.find('.timer');
+            this._updateTimer(this);
+            interval = setInterval(this._updateTimer.bind(this), 1000);
+        }
+
+        return superDef;
+    },
+
+    // -------------------------------------------------------------------------
+    // Private
+    // -------------------------------------------------------------------------
+
+    _formatTime: function (time) {
+        return time > 9 ? time : '0' + time;
+    },
+
+    /**
+    * This function is responsible for the visual update of the timer DOM every second.
+    * 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');
+
+        if (timeLeft >= 0) {
+            var timeLeftMinutes = parseInt(timeLeft / 60);
+            var timeLeftSeconds = timeLeft - (timeLeftMinutes * 60);
+            $timer.html(this._formatTime(timeLeftMinutes) + ':' + this._formatTime(timeLeftSeconds));
+        } else {
+            clearInterval(interval);
+            this.trigger_up('time_up');
+        }
+    },
+});
+
+return publicWidget.registry.SurveyTimerWidget;
 
 });

addons/survey/views/survey_templates.xml

@@ -214,11 +214,7 @@
             <div class="container m-0 p-0">
                 <div class="row">
                     <div class="col-lg-8"><h1 t-esc="survey.title"></h1></div>
-                    <div
-                        t-if="survey.is_time_limited"
-                        class="js_survey_timer col-lg-4"
-                        t-att-data-timer="answer.start_datetime.isoformat()"
-                        t-att-data-time_limit_minutes="survey.time_limit">
+                    <div t-if="survey.is_time_limited" class="o_survey_timer col-lg-4">
                         <h1 class="timer text-right">00:00</h1>
                     </div>
                 </div>
@@ -256,7 +252,9 @@
 
         <form role="form" method="post" t-att-name="survey.id"
                 t-att-data-answer-token="answer.token"
-                t-att-data-survey-token="survey.access_token">
+                t-att-data-survey-token="survey.access_token"
+                t-att-data-timer="answer.start_datetime.isoformat() if survey.is_time_limited else False"
+                t-att-data-time-limit-minutes="survey.time_limit">
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
             <input type="hidden" name="token" t-att-value="answer.token" />
             <div class="o_survey_error alert alert-danger d-none" role="alert">