pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] survey: fix session manager style issues

Browse Source 
This commit fixes a bunch of small issues on the session manager.
- Put the progress bar below survey link to optimise available room for title.
- Ensure attendees count is also updated when refreshing the results
and progress bar.
- Ensure the graph is correctly setup when there is no attendee yet.
- Update y axis in chart when new attendee join the survey in the middle of
a session.
- Set padding top to chart to avoid top bar label to disapear from chart if bar
is near 100%.

Task ID: 2343508

closes odoo/odoo#58291

X-original-commit: 018a07dc7bba85f5afdd41f8610098a3c493c82a
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
This commit is contained in:
David Beguin
2020-09-23 08:11:09 +00:00
parent dd2ac143f7
commit eccf8b9f5c
5 changed files with 57 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/survey/controllers/survey_session_manage.py
+2 -1
View File
@@ -236,5 +236,6 @@ class UserInputSession(http.Controller):
'question_statistics_graph': full_statistics.get('graph_data'),
'input_line_values': input_line_values,
'answers_validity': json.dumps(answers_validity),
'answer_count': survey.session_question_answer_count
'answer_count': survey.session_question_answer_count,
'attendees_count': survey.session_answer_count,
}
addons/survey/static/src/js/survey_session_chart.js
+14 -1
View File
@@ -36,7 +36,7 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
*
* @param {Object} questionStatistics object containing chart data (counts / labels / ...)
*/
updateChart: function (questionStatistics) {
updateChart: function (questionStatistics, newAttendeesCount) {
if (questionStatistics) {
this.questionStatistics = this._processQuestionStatistics(questionStatistics);
}
@@ -51,6 +51,11 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
}
this.chart.data.datasets[0].data[i] = value;
}
if (newAttendeesCount) {
this.chart.config.options.scales.yAxes[0].ticks.max = newAttendeesCount + 1;
}
this.chart.update();
}
},
@@ -157,6 +162,14 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
},
tooltips: {
enabled: false,
},
layout: {
padding: {
left: 0,
right: 0,
top: 50,
bottom: 0
}
}
},
};
addons/survey/static/src/js/survey_session_manage.js
+4 -3
View File
@@ -38,7 +38,6 @@ publicWidget.registry.SurveySessionManage = publicWidget.Widget.extend({
self.sessionShowLeaderboard = self.$el.data('sessionShowLeaderboard');
self.hasCorrectAnswers = self.$el.data('hasCorrectAnswers');
// display props
self.attendeesCount = self.$el.data('attendeesCount');
self.showBarChart = self.$el.data('showBarChart');
self.showTextAnswers = self.$el.data('showTextAnswers');
@@ -383,8 +382,10 @@ publicWidget.registry.SurveySessionManage = publicWidget.Widget.extend({
route: _.str.sprintf('/survey/session/results/%s', self.surveyAccessToken)
}).then(function (questionResults) {
if (questionResults) {
self.attendeesCount = questionResults.attendees_count;
if (self.resultsChart && questionResults.question_statistics_graph) {
self.resultsChart.updateChart(JSON.parse(questionResults.question_statistics_graph));
self.resultsChart.updateChart(JSON.parse(questionResults.question_statistics_graph), self.attendeesCount);
} else if (self.textAnswers) {
self.textAnswers.updateTextAnswers(questionResults.input_line_values);
}
@@ -518,7 +519,7 @@ publicWidget.registry.SurveySessionManage = publicWidget.Widget.extend({
* - The refresh of results (used for chart/text answers/progress bar)
*/
_setupIntervals: function () {
this.attendeesCount = this.$el.data('attendeesCount');
this.attendeesCount = this.$el.data('attendeesCount') ? this.$el.data('attendeesCount') : 0;
if (this.isStartScreen) {
this.attendeesRefreshInterval = setInterval(this._refreshAttendeesCount.bind(this), 2000);
addons/survey/static/src/scss/survey_form.scss
+19 -22
View File
@@ -241,11 +241,11 @@ nav#oe_main_menu_navbar {
.o_survey_session_manage {
h1 {
font-size: 4rem;
font-size: 3rem;
}
h2 {
font-size: 3.2rem;
font-size: 2.5rem;
}
.o_survey_session_navigation {
@@ -263,20 +263,28 @@ nav#oe_main_menu_navbar {
}
}
.o_survey_session_link_reminder {
position: absolute;
right: 2rem;
top: 2rem;
}
.o_survey_manage_fontsize_14 {
font-size: 1.4rem;
}
.o_survey_session_manage_container {
height: 100vh;
width: 85vw;
.o_survey_question_header {
top: 1em;
> div {
width: 400px;
}
.progress {
height: 2rem;
border-radius: 0.6rem;
font-size: 1.2rem;
background-color: #cfcfcf;
.progress-bar {
width: 0%;
transition: width 1s ease;
}
}
}
.o_survey_session_manage_container {
.o_survey_choice_key {
display: none;
}
@@ -292,17 +300,6 @@ nav#oe_main_menu_navbar {
margin-bottom: 6rem;
}
.progress {
height: 2rem;
border-radius: 0.6rem;
font-size: 1.2rem;
background-color: #cfcfcf;
.progress-bar {
width: 0%;
transition: width 1s ease;
}
}
.o_survey_session_text_answer {
.o_survey_session_text_answer_container {
border: solid 1.6px;
addons/survey/views/survey_templates_user_input_session.xml
+18 -16
View File
@@ -76,32 +76,34 @@
t-att-data-current-screen="'question' if is_scored_question else 'userInputs'"
t-att-data-show-bar-chart="show_bar_chart"
t-att-data-show-text-answers="show_text_answers">
<div class="p-4 d-flex flex-column o_survey_session_manage_container min-w-75 pt-6">
<h3 class="o_survey_session_link_reminder">
<div class="o_survey_question_header flex-wrap px-3 w-100 d-flex justify-content-between align-items-center position-absolute">
<h3>
<span>Go to <a t-att-href="survey.session_link" t-esc="survey.session_link" target="_blank" /></span>
<i class="fa fa-copy font-weight-normal ml-3 mr-1 o_survey_session_copy" />
<input class="o_survey_session_copy_url d-none" type="text" t-att-value="survey.session_link" />
</h3>
<h1 t-if="question.is_time_limited" class="o_survey_timer_container">
<span class="o_survey_timer d-inline-block"/>
</h1>
<div class="text-right d-flex flex-column justify-content-center">
<div t-if="show_bar_chart or show_text_answers">
<div class="progress" title="Attendees are answering the question...">
<div class="progress-bar o_survey_session_progress_small font-weight-bold"
role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<span class="px-2">0 / <t t-esc="survey.session_answer_count" /></span>
</div>
</div>
</div>
</div>
</div>
<div class="container px-4 pb-3 pt96 d-flex flex-column o_survey_session_manage_container">
<a role="button"
class="font-weight-bold fa fa-chevron-right o_survey_session_navigation o_survey_session_navigation_next p-3" />
<a role="button"
class="font-weight-bold fa fa-chevron-left o_survey_session_navigation o_survey_session_navigation_previous p-3 d-none" />
<div class="o_survey_session_results flex-column flex-grow-1">
<div class="row">
<div class="col-lg-8"><h1 t-esc="question.title"></h1></div>
<div class="col-lg-4 text-right d-flex flex-column justify-content-center">
<h1 t-if="question.is_time_limited" class="o_survey_timer_container">
<span class="o_survey_timer d-inline-block"/>
</h1>
<div t-if="show_bar_chart or show_text_answers">
<div class="progress" title="Attendees are answering the question...">
<div class="progress-bar o_survey_session_progress_small font-weight-bold"
role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<span class="px-2">0 / <t t-esc="survey.session_answer_count" /></span>
</div>
</div>
</div>
</div>
<div class="col-lg-12"><h1 t-esc="question.title"></h1></div>
</div>
<div t-attf-class="d-flex flex-column flex-grow-1 #{'justify-content-center' if not show_text_answers else ''} #{'align-items-center' if show_bar_chart else ''}">
<!-- Has to stay in 'style' attribute for Chartjs -->