[IMP] survey: show images in result page

With this commit we add images to the answers in result page.
when clicking on the image, we open a survey_image_zoomer widget.
We also add "Responsible" filter on survey.survey view

task-3092439

closes odoo/odoo#108430

Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>

addons/survey/static/src/js/survey_result.js

@@ -3,6 +3,7 @@ odoo.define('survey.result', function (require) {
 
 var _t = require('web.core')._t;
 const { loadJS } = require('@web/core/assets');
+const { SurveyImageZoomer } = require("@survey/js/survey_image_zoomer");
 var publicWidget = require('web.public.widget');
 
 // The given colors are the same as those used by D3
@@ -416,6 +417,7 @@ publicWidget.registry.SurveyResultWidget = publicWidget.Widget.extend({
         'click a.filter-failed': '_onFilterFailedClick',
         'click a.filter-passed': '_onFilterPassedClick',
         'click a.filter-passed-and-failed': '_onFilterPassedAndFailedClick',
+        'click .o_survey_answer_image': '_onAnswerImgClick',
     },
 
     //--------------------------------------------------------------------------
@@ -556,6 +558,21 @@ publicWidget.registry.SurveyResultWidget = publicWidget.Widget.extend({
         window.location.href = window.location.pathname + '?' + params.toString();
     },
 
+    /**
+     * Called when an image on an answer in multi-answers question is clicked.
+     * Starts a widget opening a dialog to display the now zoomable image.
+     * this.imgZoomer is the zoomer widget linked to the survey result widget, if any.
+     *
+     * @private
+     * @param {Event} ev
+     */
+    _onAnswerImgClick: function (ev) {
+        ev.preventDefault();
+        new SurveyImageZoomer({
+            sourceImage: $(ev.currentTarget).attr('src')
+        }).appendTo(document.body);
+    },
+
     /**
      * Returns the modified pathname string for filters after adding or removing an
      * answer filter (from click event). Filters are formatted as `"rowX,ansX", where

addons/survey/static/src/scss/survey_templates_results.scss

@@ -73,6 +73,13 @@
             border-radius: 2em 0 0 2em;
         }
     }
+    .o_survey_answer_image{
+        cursor: zoom-in;
+        &:hover {
+            box-sizing: border-box;
+            box-shadow: 0 0 5px 2px grey;
+        }
+    }
     .o_survey_answer i {
         padding:3px;
         cursor:pointer;

addons/survey/views/survey_survey_views.xml

@@ -368,6 +368,7 @@
             <search string="Survey">
                 <field string="Survey" name="title" filter_domain="['|', ('title', 'ilike', self), ('session_code', 'ilike', self)]"/>
                 <field string="Question &amp; Pages" name="question_and_page_ids"/>
+                <field string="Responsible" name="user_id"/>
                 <filter string="Is a Certification" name="certification" domain="[('certification', '=', True)]"/>
                 <filter string="Is not a Certification" name="not_certification" domain="[('certification', '=', False)]"/>
                 <separator/>

addons/survey/views/survey_templates_statistics.xml

@@ -62,6 +62,7 @@
         <t t-set="comment_lines" t-value="question_data['comment_line_ids']"/>
         <t t-set="graph_data" t-value="question_data['graph_data']"/>
         <t t-set="table_data" t-value="question_data['table_data']"/>
+        <t t-set="question_has_image_answers" t-value="any(answer.value_image_filename for answer in question.suggested_answer_ids)"/>
 
         <div class="o_survey_results_question pb-5 border-bottom">
         <div class="row mb-3">
@@ -348,9 +349,9 @@
             </li>
             <li class="nav-item">
                 <a t-att-href="'#survey_data_question_%d' % question.id"
-                   t-att-aria-controls="'survey_data_question_%d' % question.id"
-                   t-attf-class="nav-link #{'active' if not question_answered else ''}"
-                   data-bs-toggle="tab" role="tab">
+                    t-att-aria-controls="'survey_data_question_%d' % question.id"
+                    t-attf-class="nav-link #{'active' if not question_answered else ''}"
+                    data-bs-toggle="tab" role="tab">
                     <i class="fa fa-list-alt me-1"/>Data
                 </a>
             </li>
@@ -366,11 +367,12 @@
                 <canvas/>
             </div>
             <div role="tabpanel" t-att-id="'survey_data_question_%d' % question.id"
-                 t-attf-class="tab-pane #{'active' if not question_answered else ''}">
+                t-attf-class="tab-pane #{'active' if not question_answered else ''}">
                 <table class="table table-hover">
                     <thead>
                         <tr>
                             <th>Answer</th>
+                            <th t-if="question_has_image_answers">Image</th>
                             <th>User Choice</th>
                             <th t-if="question.is_scored_question">Score</th>
                         </tr>
@@ -386,6 +388,11 @@
                                     <i t-if="question.is_scored_question and choice_data['suggested_answer'].is_correct" class="fa fa-check"/>
                                 </p>
                             </td>
+                            <td t-if="question_has_image_answers">
+                               <div t-if="choice_data['suggested_answer'].value_image"
+                                    t-field="choice_data['suggested_answer'].value_image"
+                                    t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_64_max o_survey_answer_image", "alt-field": "name", "itemprop": "image"}'/>
+                            </td>
                             <td class="o_survey_answer">
                                 <span t-esc="round(choice_data['count'] * 100.0/ (len(question_data['answer_line_done_ids']) or 1), 2)"></span> %
                                 <span t-esc="'%s Votes' % choice_data['count']" class="badge text-bg-primary"/>