[MOV/REF] survey: split statistics template into a canvas/header/content

This commit splits the statistics template into a "canvas" part, a "header" part and a "content"
part.

This is a preliminary work for the "survey live mode" task that will need to use the same
statistics content, but use a different canvas and header for it.

PR #43568
Task 1972640

1 files changed, 100 insertions, 86 deletions

diff --git a/addons/survey/views/survey_templates_statistics.xml b/addons/survey/views/survey_templates_statistics.xml
index d90ee432261..8bcee182a77 100644
--- a/addons/survey/views/survey_templates_statistics.xml
+++ b/addons/survey/views/survey_templates_statistics.xml
@@ -6,98 +6,112 @@
             <t t-set="page_record_limit" t-value="10"/><!-- Change this record_limit to change number of record  per page-->
             <div class="container o_survey_result">
                 <t t-call="survey.survey_button_form_view" />
-                <div class="jumbotron mt32">
-                    <h1>
-                        <span t-field="survey.title"/>
-                        <span style="font-size:1.5em;"
-                            t-attf-class="fa fa-bar-chart-o #{'fa-bar-chart-o' if survey.scoring_type == 'no_scoring' else 'fa-trophy' if survey.certification else 'fa-question-circle-o'} float-right " role="img" aria-label="Chart" title="Chart"/>
-                    </h1>
-                    <div t-field="survey.description" class="oe_no_empty"/>
-                    <h2 t-if="not question_and_page_data">
-                        Sorry, no one answered this survey yet.
-                    </h2>
-                </div>
-                <div t-if="question_and_page_data" class="card d-print-none">
-                    <div class="card-header"><span class="fa fa-filter"></span>  Filters <span t-if="search_filters" class="float-right text-primary clear_survey_filter"><i class="fa fa-times"></i> Clear All Filters</span></div>
-                    <div class="card-body">
-                        <span t-att-class="'badge only_left_radius filter-all %s' % 'badge-secondary' if search_finished else 'badge-primary o_active_filter'">All surveys</span>
-                        <span t-att-class="'badge only_right_radius filter-finished %s' % 'badge-secondary' if not search_finished else 'badge-primary o_active_filter'">Finished surveys</span>
-                        <span t-foreach="search_filters" t-as="filter_data">
-                            <span class="badge badge-primary only_left_radius"><i class="fa fa-filter" role="img" aria-label="Filter" title="Filter"></i></span><span class="badge badge-primary no_radius" t-esc="filter_data['question']"></span><span class="badge badge-success only_right_radius" t-esc="' > '.join(filter_data['answers'])"></span>
-                        </span>
-                    </div>
-                </div>
-                <div t-if="survey.scoring_type in ['scoring_with_answers', 'scoring_without_answers']">
-                    <h1 class="mt16">Results Overview</h1>
-                    <div>Success rate: <mark class="font-weight-bold"><t t-esc="survey_data['global_success_rate']"></t>%</mark></div>
-                    <div class="survey_graph" data-graph-type="pie" t-att-data-graph-data="survey_data['global_success_graph']">
-                        <!-- canvas element for drawing pie chart -->
-                        <canvas/>
-                    </div>
-                    <hr/>
-                </div>
+                <t t-call="survey.survey_page_statistics_header" />
+                <t t-call="survey.survey_page_statistics_inner" />
+            </div>
+        </t>
+    </template>
 
-                <div t-foreach="question_and_page_data" t-as='question_data'>
-                    <t t-set="question" t-value="question_data['question']"/>
-                    <t t-if="question_data['is_page']">
-                        <h2 class="mt16 text-uppercase text-muted" t-field="question.title"/>
-                        <div t-field="question.description" class="oe_no_empty" />
-                        <hr class="mt-2 pb-1 mb-1"/>
-                    </t>
-                    <div t-else="" class="ml-4 mt-4">
-                        <t t-set="question_scoring" t-value="survey.scoring_type in ['scoring_with_answers', 'scoring_without_answers'] and question.question_type in ['simple_choice', 'multiple_choice']"/>
-                        <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']"/>
+    <template id="survey_page_statistics_header" name="Survey: result statistics header">
+        <div class="jumbotron mt32">
+            <h1>
+                <span t-field="survey.title"/>
+                <span style="font-size:1.5em;"
+                    t-attf-class="fa fa-bar-chart-o #{'fa-bar-chart-o' if survey.scoring_type == 'no_scoring' else 'fa-trophy' if survey.certification else 'fa-question-circle-o'} float-right " role="img" aria-label="Chart" title="Chart"/>
+            </h1>
+            <div t-field="survey.description" class="oe_no_empty"/>
+            <h2 t-if="not question_and_page_data">
+                Sorry, no one answered this survey yet.
+            </h2>
+        </div>
+    </template>
 
-                        <div class="d-flex align-items-start mb-2">
-                            <div class="mr-auto">
-                                <h5 t-field="question.title" class="mb-1"/>
-                                <div t-if="question_scoring">
-                                    <t t-if="len(question_data['right_answers']) >= 1">
-                                        <span t-if="len(question_data['right_answers']) == 1">Right answer: </span>
-                                        <span t-if="len(question_data['right_answers']) > 1">Right answers: </span>
-                                        <strong>
-                                            <t t-foreach="question_data['right_answers']" t-as="answer">
-                                                <span t-if="answer_index != 0">, </span><span t-esc="answer.value"/>
-                                            </t>
-                                        </strong>
-                                    </t>
-                                </div>
-                                <div class="ml-3 text-muted" t-field="question.description"/>
-                            </div>
-                            <!-- Question info -->
-                            <span class="badge badge-info" t-field='question.question_type'/>
-                            <t t-if="question.question_type == 'matrix'">
-                                <span class="badge badge-info ml-2" t-field='question.matrix_subtype'/>
-                            </t>
-                            <!-- Scoring info -->
-                            <t t-if="question_scoring">
-                                <span class="badge badge-success ml-3"><span t-esc="len(question_data['right_inputs'])"></span> Correct</span>
-                                <span class="badge badge-warning ml-1" t-if="question.question_type == 'multiple_choice'">
-                                    <span t-esc="len(question_data['partial_inputs'])"></span> Partial
-                                </span>
+    <template id="survey_page_statistics_inner" name="Survey: result statistics content">
+        <div t-if="question_and_page_data" class="card d-print-none">
+            <div class="card-header"><span class="fa fa-filter"></span>  Filters <span t-if="search_filters" class="float-right text-primary clear_survey_filter"><i class="fa fa-times"></i> Clear All Filters</span></div>
+            <div class="card-body">
+                <span t-att-class="'badge only_left_radius filter-all %s' % 'badge-secondary' if search_finished else 'badge-primary o_active_filter'">All surveys</span>
+                <span t-att-class="'badge only_right_radius filter-finished %s' % 'badge-secondary' if not search_finished else 'badge-primary o_active_filter'">Finished surveys</span>
+                <span t-foreach="search_filters" t-as="filter_data">
+                    <span class="badge badge-primary only_left_radius"><i class="fa fa-filter" role="img" aria-label="Filter" title="Filter"></i></span><span class="badge badge-primary no_radius" t-esc="filter_data['question']"></span><span class="badge badge-success only_right_radius" t-esc="' > '.join(filter_data['answers'])"></span>
+                </span>
+            </div>
+        </div>
+        <div t-if="survey.scoring_type in ['scoring_with_answers', 'scoring_without_answers']">
+            <h1 class="mt16">Results Overview</h1>
+            <div>Success rate: <mark class="font-weight-bold"><t t-esc="survey_data['global_success_rate']"></t>%</mark></div>
+            <div class="survey_graph" data-graph-type="pie" t-att-data-graph-data="survey_data['global_success_graph']">
+                <!-- canvas element for drawing pie chart -->
+                <canvas/>
+            </div>
+            <hr/>
+        </div>
+
+        <div t-foreach="question_and_page_data" t-as='question_data'>
+            <t t-set="question" t-value="question_data['question']"/>
+            <t t-if="question_data['is_page']">
+                <h2 class="mt16 text-uppercase text-muted" t-field="question.title"/>
+                <div t-field="question.description" class="oe_no_empty" />
+                <hr class="mt-2 pb-1 mb-1"/>
+            </t>
+            <div t-else="" class="ml-4 mt-4">
+                <t t-call="survey.survey_page_statistics_question" />
+            </div>
+        </div>
+    </template>
+
+    <template id="survey_page_statistics_question" name="Question: result statistics">
+        <t t-set="question_scoring" t-value="survey.scoring_type in ['scoring_with_answers', 'scoring_without_answers'] and question.question_type in ['simple_choice', 'multiple_choice']"/>
+        <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']"/>
+
+        <div>
+        <div class="d-flex align-items-start mb-2">
+            <div class="mr-auto">
+                <h5 t-field="question.title" class="mb-1"/>
+                <div t-if="question_scoring">
+                    <t t-if="len(question_data['right_answers']) >= 1">
+                        <span t-if="len(question_data['right_answers']) == 1">Right answer: </span>
+                        <span t-if="len(question_data['right_answers']) > 1">Right answers: </span>
+                        <strong>
+                            <t t-foreach="question_data['right_answers']" t-as="answer">
+                                <span t-if="answer_index != 0">, </span><span t-esc="answer.value"/>
                             </t>
-                            <!-- Inputs info -->
-                            <span class="badge badge-info ml-3"><span t-esc="len(question_data['answer_input_done_ids'])"></span> Answered</span>
-                            <span class="badge badge-info ml-1"><span t-esc="len(question_data['answer_input_skipped_ids'])"></span> Skipped</span>
-                        </div>
-                        <t t-if="question.question_type in ['text_box', 'char_box', 'date', 'datetime']">
-                            <t t-call="survey.question_result_text"/>
-                        </t>
-                        <t t-elif="question.question_type in ['numerical_box']">
-                            <t t-call="survey.question_result_number"></t>
-                        </t>
-                        <t t-elif="question.question_type in ['simple_choice', 'multiple_choice']">
-                            <t t-call="survey.question_result_choice"></t>
-                        </t>
-                        <t t-elif="question.question_type in ['matrix']">
-                            <t t-call="survey.question_result_matrix"></t>
-                        </t>
-                    </div>
+                        </strong>
+                    </t>
                 </div>
+                <div class="ml-3 text-muted" t-field="question.description"/>
             </div>
+            <!-- Question info -->
+            <span class="badge badge-info" t-field='question.question_type'/>
+            <t t-if="question.question_type == 'matrix'">
+                <span class="badge badge-info ml-2" t-field='question.matrix_subtype'/>
+            </t>
+            <!-- Scoring info -->
+            <t t-if="question_scoring">
+                <span class="badge badge-success ml-3"><span t-esc="len(question_data['right_inputs'])"></span> Correct</span>
+                <span class="badge badge-warning ml-1" t-if="question.question_type == 'multiple_choice'">
+                    <span t-esc="len(question_data['partial_inputs'])"></span> Partial
+                </span>
+            </t>
+            <!-- Inputs info -->
+            <span class="badge badge-info ml-3"><span t-esc="len(question_data['answer_input_done_ids'])"></span> Answered</span>
+            <span class="badge badge-info ml-1"><span t-esc="len(question_data['answer_input_skipped_ids'])"></span> Skipped</span>
+        </div>
+        <t t-if="question.question_type in ['text_box', 'char_box', 'date', 'datetime']">
+            <t t-call="survey.question_result_text"/>
         </t>
+        <t t-elif="question.question_type in ['numerical_box']">
+            <t t-call="survey.question_result_number"></t>
+        </t>
+        <t t-elif="question.question_type in ['simple_choice', 'multiple_choice']">
+            <t t-call="survey.question_result_choice"></t>
+        </t>
+        <t t-elif="question.question_type in ['matrix']">
+            <t t-call="survey.question_result_matrix"></t>
+        </t>
+        </div>
     </template>
 
     <template id="question_result_text" name="Question: text result (text_box, char_box, date, datetime)">