[IMP] survey: improve survey samples accessibility
PURPOSE: This commit improves the accessibility of the survey samples when no records are shown. SPECS Remove the modal used to show the samples and show them on the empty screen instead. When no survey exists, the user gets the proposition of trying survey samples. Previously, the user had to click on a button to open a modal showing the different samples. Now, the samples are shown in the empty screen directly. If the user does not have the rights to create surveys, the "Try It" buttons are removed from the NoContentHelper. Task-2794884 Part-of: odoo/odoo#87326
This commit is contained in:
Adrien Schoffeniels
@@ -1,55 +1,58 @@
|
||||
/** @odoo-module */
|
||||
|
||||
import Dialog from 'web.Dialog';
|
||||
import KanbanRenderer from 'web.KanbanRenderer';
|
||||
import ListRenderer from 'web.ListRenderer';
|
||||
import { qweb as QWeb, _t } from 'web.core';
|
||||
import { Markup } from 'web.utils';
|
||||
|
||||
const SurveySampleMixin = {
|
||||
|
||||
const SurveySampleModalMixin = {
|
||||
/**
|
||||
* Opens a dialog allowing the user to load a sample survey
|
||||
* We currently have 3 different samples to load (and one "tile" to click on
|
||||
* for each in the modal).
|
||||
* @override
|
||||
*/
|
||||
_render: function () {
|
||||
// Remove "Try It" buttons of the no content helper if user can not create surveys
|
||||
if (!this.activeActions.create) {
|
||||
this.noContentHelp = Markup(this.noContentHelp.replaceAll(
|
||||
'<a class="btn btn-primary o_survey_load_sample text-white"><span>Try It</span></a>',
|
||||
''
|
||||
));
|
||||
}
|
||||
this.isLoadingSample = false;
|
||||
this._super.apply(this, arguments);
|
||||
},
|
||||
|
||||
/**
|
||||
* Load and show the sample survey related to the clicked element,
|
||||
* when there is no survey to display.
|
||||
* We currently have 3 different samples to load:
|
||||
* - Sample Feedback Form
|
||||
* - Sample Certification
|
||||
* - Sample Live Presentation
|
||||
*
|
||||
* @private
|
||||
* @param {Event} ev
|
||||
*/
|
||||
_onOpenSurveySampleModalClick: function () {
|
||||
const $content = $(QWeb.render('survey.survey_sample_modal_body'));
|
||||
$content.find('.o_survey_sample_tile').each((_index, tile) => {
|
||||
const $tile = $(tile);
|
||||
$tile.on('click', async () => {
|
||||
const surveySampleAction = await this._rpc({
|
||||
model: 'survey.survey',
|
||||
method: $tile.data('action'),
|
||||
});
|
||||
this.do_action(surveySampleAction);
|
||||
});
|
||||
});
|
||||
const dialog = new Dialog(this, {
|
||||
title: _t('Load a Survey'),
|
||||
$content: $content,
|
||||
renderFooter: false,
|
||||
});
|
||||
dialog.open();
|
||||
_loadSample: function (ev) {
|
||||
// Prevent loading multiple samples if double clicked
|
||||
if (!this.isLoadingSample && this.activeActions.create) {
|
||||
this.isLoadingSample = true;
|
||||
this.do_action(this._rpc({
|
||||
model: 'survey.survey',
|
||||
method: $(ev.target).closest('.o_survey_sample_container').attr('action'),
|
||||
}));
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
const SurveyKanbanRenderer = KanbanRenderer.extend(SurveySampleModalMixin, {
|
||||
xmlDependencies: (KanbanRenderer.prototype.xmlDependencies || []).concat([
|
||||
'survey/static/src/xml/survey_sample_modal.xml',
|
||||
]),
|
||||
const SurveyKanbanRenderer = KanbanRenderer.extend(SurveySampleMixin, {
|
||||
events: _.extend({}, KanbanRenderer.prototype.events, {
|
||||
'click .o_survey_open_sample_modal': '_onOpenSurveySampleModalClick',
|
||||
'click .o_survey_load_sample': '_loadSample',
|
||||
}),
|
||||
});
|
||||
|
||||
const SurveyListRenderer = ListRenderer.extend(SurveySampleModalMixin, {
|
||||
xmlDependencies: (ListRenderer.prototype.xmlDependencies || []).concat([
|
||||
'survey/static/src/xml/survey_sample_modal.xml',
|
||||
]),
|
||||
const SurveyListRenderer = ListRenderer.extend(SurveySampleMixin, {
|
||||
events: _.extend({}, ListRenderer.prototype.events, {
|
||||
'click .o_survey_open_sample_modal': '_onOpenSurveySampleModalClick',
|
||||
'click .o_survey_load_sample': '_loadSample',
|
||||
}),
|
||||
});
|
||||
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
<t t-name="survey.survey_sample_modal_body">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="o_survey_sample_tile position-relative w-100 d-flex align-items-center justify-content-center m-auto"
|
||||
data-action="action_load_sample_feedback_form">
|
||||
<img src="/survey/static/src/img/survey_sample_feedback_form.png" class="img-fluid"/>
|
||||
<div class="o_survey_sample_tile_cover w-100 h-100 position-absolute text-center text-white p-3">
|
||||
Gather feedbacks from your employees and customers.
|
||||
</div>
|
||||
</div>
|
||||
<div class="h4 text-center m-2">Feedback Form</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="o_survey_sample_tile position-relative w-100 d-flex align-items-center justify-content-center m-auto"
|
||||
data-action="action_load_sample_certification">
|
||||
<img src="/survey/static/src/img/survey_sample_certification.png" class="img-fluid"/>
|
||||
<div class="o_survey_sample_tile_cover w-100 h-100 position-absolute text-center text-white p-3">
|
||||
Handle quiz & certifications online.
|
||||
</div>
|
||||
</div>
|
||||
<div class="h4 text-center m-2">Certification</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="o_survey_sample_tile position-relative w-100 d-flex align-items-center justify-content-center m-auto"
|
||||
data-action="action_load_sample_live_presentation">
|
||||
<img src="/survey/static/src/img/survey_sample_live_presentation.png" class="img-fluid"/>
|
||||
<div class="o_survey_sample_tile_cover w-100 h-100 position-absolute text-center text-white p-3">
|
||||
Add some fun to your presentations by sharing questions live.
|
||||
</div>
|
||||
</div>
|
||||
<div class="h4 text-center m-2">Live Presentation</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
@@ -180,7 +180,7 @@
|
||||
<field name="name">survey.survey.view.tree</field>
|
||||
<field name="model">survey.survey</field>
|
||||
<field name="arch" type="xml">
|
||||
<tree string="Survey" sample="1" js_class="survey_view_tree">
|
||||
<tree string="Survey" js_class="survey_view_tree">
|
||||
<field name="active" invisible="1"/>
|
||||
<field name="certification" invisible="1"/>
|
||||
<field name="title"/>
|
||||
@@ -202,7 +202,7 @@
|
||||
<field name="name">survey.survey.view.kanban</field>
|
||||
<field name="model">survey.survey</field>
|
||||
<field name="arch" type="xml">
|
||||
<kanban class="o_survey_survey_view_kanban" js_class="survey_view_kanban" sample="1">
|
||||
<kanban class="o_survey_survey_view_kanban" js_class="survey_view_kanban">
|
||||
<field name="active"/>
|
||||
<field name="certification"/>
|
||||
<field name="color"/>
|
||||
@@ -399,13 +399,52 @@
|
||||
<field name="res_model">survey.survey</field>
|
||||
<field name="view_mode">kanban,tree,form,activity</field>
|
||||
<field name="help" type="html">
|
||||
<p class="o_view_nocontent_smiling_face">
|
||||
Create a Survey
|
||||
</p><p>
|
||||
Surveys can serve many purposes: collect customer feedback, gather market insights, structure employee evaluations, test and certify resellers, support a live presentation, ...
|
||||
</p><p>
|
||||
Let's create one and share it! Not sure where to start? <a href="#" class="o_survey_open_sample_modal fw-bold">Load a survey</a>
|
||||
</p>
|
||||
<div class="row mb-4">
|
||||
<div class="col-sm-4 o_survey_sample_container" action="action_load_sample_feedback_form">
|
||||
<div class="o_survey_sample_tile position-relative w-100 d-flex align-items-center justify-content-center m-auto">
|
||||
<img src="/survey/static/src/img/survey_sample_feedback_form.png" class="img-fluid"/>
|
||||
<div class="o_survey_sample_tile_cover o_survey_load_sample w-100 h-100 position-absolute rounded-circle text-center text-white p-3">
|
||||
Gather feedbacks from your employees and customers.
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<a class="o_survey_load_sample h3 text-center text-primary">Feedback Form</a>
|
||||
</div>
|
||||
<a class="btn btn-primary o_survey_load_sample text-white"><span>Try It</span></a>
|
||||
</div>
|
||||
<div class="col-sm-4 o_survey_sample_container" action="action_load_sample_certification">
|
||||
<div class="o_survey_sample_tile position-relative w-100 d-flex align-items-center justify-content-center m-auto">
|
||||
<img src="/survey/static/src/img/survey_sample_certification.png" class="img-fluid"/>
|
||||
<div class="o_survey_sample_tile_cover o_survey_load_sample w-100 h-100 position-absolute rounded-circle text-center text-white p-3">
|
||||
Handle quiz & certifications online.
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<a class="o_survey_load_sample h3 text-center text-primary">Certification</a>
|
||||
</div>
|
||||
<a class="btn btn-primary o_survey_load_sample text-white"><span>Try It</span></a>
|
||||
</div>
|
||||
<div class="col-sm-4 o_survey_sample_container" action="action_load_sample_live_presentation">
|
||||
<div class="o_survey_sample_tile position-relative w-100 d-flex align-items-center justify-content-center m-auto">
|
||||
<img src="/survey/static/src/img/survey_sample_live_presentation.png" class="img-fluid"/>
|
||||
<div class="o_survey_sample_tile_cover o_survey_load_sample w-100 h-100 position-absolute rounded-circle text-center text-white p-3">
|
||||
Add some fun to your presentations by sharing questions live.
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<a class="o_survey_load_sample h3 text-center text-primary">Live Presentation</a>
|
||||
</div>
|
||||
<a class="btn btn-primary o_survey_load_sample text-white"><span>Try It</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Create a Survey
|
||||
</p>
|
||||
<p>
|
||||
Surveys can serve many purposes: collect customer feedback, gather market insights, structure employee evaluations, test and certify resellers, support a live presentation, ...
|
||||
</p><p>
|
||||
Not sure where to start? Try a sample Survey!
|
||||
</p>
|
||||
</field>
|
||||
</record>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user