[IMP] survey: Improve results display
Purpose ======= Give users a better experience when using the survey result page. Specifications ============== Handle long chars display for single-line question answers by showing them on multiple lines. Prevent answer tables from flickering when having multiple pages with different answers count by fixing their height. Display a no answers helper instead of the empty table and the alert message. Task-2957775 closes odoo/odoo#100168 Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
This commit is contained in:
@@ -94,4 +94,25 @@
|
||||
border-color: #DEE2E6;
|
||||
font-weight: bold;
|
||||
}
|
||||
table {
|
||||
font-size: 1rem;
|
||||
&.o_survey_results_table_indexed {
|
||||
td:first-child {
|
||||
width: 7%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_survey_no_answers::before {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
background: transparent url(/web/static/img/empty_folder.svg) no-repeat center;
|
||||
content: "";
|
||||
display: block;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -58,7 +58,9 @@
|
||||
</t>
|
||||
<t t-else="">
|
||||
<t t-if="question.question_type == 'text_box'" t-call="survey.question_text_box"/>
|
||||
<t t-if="question.question_type == 'char_box'" t-call="survey.question_char_box"/>
|
||||
<t t-if="question.question_type == 'char_box'" class="o_survey_print o_survey_comment_container p-0">
|
||||
<span t-out="answer_lines[0].value_char_box or None"/>
|
||||
</t>
|
||||
<t t-if="question.question_type == 'numerical_box'" t-call="survey.question_numerical_box"/>
|
||||
<t t-if="question.question_type == 'date'" t-call="survey.question_date"/>
|
||||
<t t-if="question.question_type == 'datetime'" t-call="survey.question_datetime"/>
|
||||
|
||||
@@ -63,6 +63,10 @@
|
||||
<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)"/>
|
||||
<!-- Line height for results tables with pagination (font size 1rem)
|
||||
If table height greater than expected, adding a scrollbar -->
|
||||
<t t-set="default_line_height" t-value="35"/> <!-- 1 line/answer -->
|
||||
<t t-set="text_box_line_height" t-value="83"/> <!-- 3 lines/answer -->
|
||||
|
||||
<div class="o_survey_results_question pb-5 border-bottom">
|
||||
<div class="row mb-3">
|
||||
@@ -99,18 +103,17 @@
|
||||
|
||||
<!-- Answers -->
|
||||
<t t-set="question_answered" t-value="question_data['answer_input_done_ids']"/>
|
||||
<div t-if="not question_answered" class="alert alert-secondary m-3" role="alert">
|
||||
No one answered this question.
|
||||
<div t-if="not question_answered" class="o_survey_no_answers text-center fw-bold">
|
||||
<p> No answers yet! </p>
|
||||
</div>
|
||||
|
||||
<t t-if="question_answered and question.question_type in ['text_box', 'char_box']"
|
||||
t-call="survey.question_result_text"/>
|
||||
<t t-elif="question_answered and question.question_type in ['numerical_box', 'date', 'datetime']"
|
||||
t-call="survey.question_result_number_or_date_or_datetime"/>
|
||||
<t t-elif="question.question_type in ['text_box', 'char_box']"
|
||||
t-call="survey.question_result_text"/>
|
||||
<t t-elif="question.question_type in ['numerical_box', 'date', 'datetime']"
|
||||
t-call="survey.question_result_number_or_date_or_datetime"/>
|
||||
<t t-elif="question.question_type in ['simple_choice', 'multiple_choice']"
|
||||
t-call="survey.question_result_choice"/>
|
||||
t-call="survey.question_result_choice"/>
|
||||
<t t-elif="question.question_type in ['matrix']"
|
||||
t-call="survey.question_result_matrix"/>
|
||||
t-call="survey.question_result_matrix"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -191,38 +194,43 @@
|
||||
</template>
|
||||
|
||||
<template id="question_result_text" name="Question: text result (text_box, char_box)">
|
||||
<table class="table table-hover table-sm" t-att-id="'survey_table_question_%d' % question.id">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>User Responses</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<t t-foreach="table_data" t-as="input_line">
|
||||
<tr t-if="not input_line.skipped" t-att-class="'d-none' if input_line_index >= page_record_limit else ''">
|
||||
<td>
|
||||
<t t-if="no_print_url"><t t-esc="input_line_index + 1"></t></t>
|
||||
<t t-else="">
|
||||
<a t-att-href="input_line.user_input_id.get_print_url()">
|
||||
<t t-esc="input_line_index + 1"></t>
|
||||
</a>
|
||||
</t>
|
||||
</td>
|
||||
<td>
|
||||
<t t-if="question.question_type == 'text_box'">
|
||||
<span t-if="no_print_url" t-field="input_line.value_text_box" />
|
||||
<a t-else="" t-att-href="input_line.user_input_id.get_print_url()" t-field="input_line.value_text_box"></a>
|
||||
</t>
|
||||
<t t-if="question.question_type == 'char_box'">
|
||||
<span t-if="no_print_url" t-field="input_line.value_char_box" />
|
||||
<a t-else="" t-att-href="input_line.user_input_id.get_print_url()" t-field="input_line.value_char_box"></a>
|
||||
</t>
|
||||
</td>
|
||||
<t t-set="non_skipped_records" t-value="list(filter(lambda record: not record.skipped, table_data))"/>
|
||||
<t t-set="first_page_records_count" t-value="len(non_skipped_records) if len(non_skipped_records) < page_record_limit else page_record_limit"/>
|
||||
<t t-set="cell_height" t-value="text_box_line_height if question.question_type == 'text_box' else default_line_height"/>
|
||||
<div t-attf-style="height: calc((#{cell_height}px * #{first_page_records_count}) + #{default_line_height}px + 16px);" class="overflow-auto">
|
||||
<table class="table table-hover table-sm o_survey_results_table_indexed" t-att-id="'survey_table_question_%d' % question.id">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>User Responses</th>
|
||||
</tr>
|
||||
</t>
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
<t t-foreach="non_skipped_records" t-as="input_line">
|
||||
<tr t-att-class="'d-none' if not input_line in non_skipped_records[:page_record_limit] else ''">
|
||||
<td>
|
||||
<t t-if="no_print_url"><t t-esc="input_line_index + 1"></t></t>
|
||||
<t t-else="">
|
||||
<a t-att-href="input_line.user_input_id.get_print_url()">
|
||||
<t t-esc="input_line_index + 1"></t>
|
||||
</a>
|
||||
</t>
|
||||
</td>
|
||||
<td>
|
||||
<t t-if="question.question_type == 'text_box'">
|
||||
<span t-if="no_print_url" t-field="input_line.value_text_box" />
|
||||
<a t-else="" t-att-href="input_line.user_input_id.get_print_url()" t-field="input_line.value_text_box"></a>
|
||||
</t>
|
||||
<t t-if="question.question_type == 'char_box'">
|
||||
<span t-if="no_print_url" t-field="input_line.value_char_box" />
|
||||
<a t-else="" t-att-href="input_line.user_input_id.get_print_url()" t-field="input_line.value_char_box"></a>
|
||||
</t>
|
||||
</td>
|
||||
</tr>
|
||||
</t>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<t t-call="survey.question_table_pagination"/>
|
||||
</template>
|
||||
|
||||
@@ -301,36 +309,40 @@
|
||||
</table>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" t-att-id="'survey_data_question_%d' % question.id">
|
||||
<table class="table table-hover table-sm" t-att-id="'survey_table_question_%d' % question.id">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>User Responses</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<t t-foreach="table_data" t-as="input_line">
|
||||
<tr t-if="not input_line.skipped" t-att-class="'d-none' if input_line_index >= page_record_limit else ''">
|
||||
<td>
|
||||
<t t-if="no_print_url"><t t-esc="input_line_index + 1"></t></t>
|
||||
<t t-else="">
|
||||
<a t-att-href="input_line.user_input_id.get_print_url()">
|
||||
<t t-esc="input_line_index + 1"></t>
|
||||
</a>
|
||||
</t>
|
||||
</td>
|
||||
<td>
|
||||
<a t-if="question.question_type == 'numerical_box'" t-att-href="input_line.user_input_id.get_print_url()" t-field="input_line.value_numerical_box"/>
|
||||
<a t-if="question.question_type == 'date'" t-att-href="input_line.user_input_id.get_print_url()" t-field="input_line.value_date"/>
|
||||
<t t-if="question.question_type == 'datetime'">
|
||||
<span t-if="no_print_url" t-field="input_line.value_datetime"/>
|
||||
<a t-else="" t-att-href="input_line.user_input_id.get_print_url()" t-field="input_line.value_datetime"></a>
|
||||
</t>
|
||||
</td>
|
||||
<t t-set="non_skipped_records" t-value="list(filter(lambda record: not record.skipped, table_data))"/>
|
||||
<t t-set="first_page_records_count" t-value="len(non_skipped_records) if len(non_skipped_records) < page_record_limit else page_record_limit"/>
|
||||
<div t-attf-style="height: calc((#{default_line_height}px * #{first_page_records_count + 1}) + 16px);" class="overflow-auto">
|
||||
<table class="table table-hover table-sm o_survey_results_table_indexed" t-att-id="'survey_table_question_%d' % question.id">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>User Responses</th>
|
||||
</tr>
|
||||
</t>
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
<t t-foreach="non_skipped_records" t-as="input_line">
|
||||
<tr t-att-class="'d-none' if not input_line in non_skipped_records[:page_record_limit] else ''">
|
||||
<td>
|
||||
<t t-if="no_print_url"><t t-esc="input_line_index + 1"></t></t>
|
||||
<t t-else="">
|
||||
<a t-att-href="input_line.user_input_id.get_print_url()">
|
||||
<t t-esc="input_line_index + 1"></t>
|
||||
</a>
|
||||
</t>
|
||||
</td>
|
||||
<td>
|
||||
<a t-if="question.question_type == 'numerical_box'" t-att-href="input_line.user_input_id.get_print_url()" t-field="input_line.value_numerical_box"/>
|
||||
<a t-if="question.question_type == 'date'" t-att-href="input_line.user_input_id.get_print_url()" t-field="input_line.value_date"/>
|
||||
<t t-if="question.question_type == 'datetime'">
|
||||
<span t-if="no_print_url" t-field="input_line.value_datetime"/>
|
||||
<a t-else="" t-att-href="input_line.user_input_id.get_print_url()" t-field="input_line.value_datetime"></a>
|
||||
</t>
|
||||
</td>
|
||||
</tr>
|
||||
</t>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<t t-call="survey.question_table_pagination"/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -475,7 +487,7 @@
|
||||
</template>
|
||||
|
||||
<template id="question_result_comments" name="Question: comments">
|
||||
<table class="table table-hover table-sm" t-att-id="'survey_table_question_%d' % question.id">
|
||||
<table class="table table-hover table-sm o_survey_results_table_indexed" t-att-id="'survey_table_question_%d' % question.id">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
@@ -501,9 +513,11 @@
|
||||
</template>
|
||||
|
||||
<template id="question_table_pagination" name="Survey: statistics table pagination">
|
||||
<ul t-att-id="'pagination_%d' % question.id" class="pagination" t-att-data-question_id="question.id" t-att-data-record_limit="page_record_limit">
|
||||
<t t-if="len(table_data) > page_record_limit">
|
||||
<t t-set="total" t-value="ceil(len(table_data) / page_record_limit) + 1"/>
|
||||
<ul t-att-id="'pagination_%d' % question.id" class="pagination mt-2" t-att-data-question_id="question.id"
|
||||
t-att-data-record_limit="page_record_limit">
|
||||
<t t-set="non_skipped_answers_count" t-value="len(question_data['answer_input_done_ids'])"/>
|
||||
<t t-if="non_skipped_answers_count > page_record_limit">
|
||||
<t t-set="total" t-value="ceil(non_skipped_answers_count / page_record_limit) + 1"/>
|
||||
<li t-foreach="range(1, total)" t-as="num"
|
||||
t-att-class="'page-item o_survey_js_results_pagination %s' % ('active' if num == 1 else '')">
|
||||
<a href="#" class="page-link" t-esc="num"></a>
|
||||
|
||||
Reference in New Issue
Block a user