[REF] survey: clean trigger icon rendering

The specific classes used to render the trigger icon should be as
localized as possible (not used in js and xml if not necessary).
We also take the opportunity to simplify the widget `state` items.

At this occasion, we also eliminate the flicker that could occur
with the icon of a triggered question when deleting its trigger.

Task-3151916

closes odoo/odoo#113168

X-original-commit: 5ce6915e66673b7d88363676473154c3ec8fd3aa
Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
This commit is contained in:
Florian Charlier
2023-02-21 07:35:02 +01:00
parent 9a079d5d4c
commit 145fe958c2
2 changed files with 17 additions and 19 deletions
@@ -3,7 +3,7 @@
import { _lt } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";
import { sprintf } from '@web/core/utils/strings';
import { standardWidgetProps} from "@web/views/widgets/standard_widget_props";
import { standardWidgetProps } from "@web/views/widgets/standard_widget_props";
const { Component, useEffect, useRef, useState } = owl;
@@ -12,36 +12,34 @@ export class SurveyQuestionTriggerWidget extends Component {
super.setup();
this.button = useRef('survey_question_trigger');
this.state = useState({
triggeringQuestionTitle: this.props.record.data.triggering_question_id,
surveyQuestionTriggerTooltip: "",
surveyQuestionTriggerIconClass: "",
surveyIconWarning: false,
triggerTooltip: "",
});
useEffect(() => {
if (this.button && this.button.el) {
this.state.triggeringQuestionTitle = this.props.record.data.triggering_question_id[1];
const triggeringQuestionTitle = this.props.record.data.triggering_question_id[1];
const triggerError = this.surveyQuestionTriggerError;
if (triggerError === "MISPLACED_TRIGGER_WARNING") {
this.state.surveyQuestionTriggerTooltip = sprintf(
this.state.surveyIconWarning = true;
this.state.triggerTooltip = sprintf(
'⚠ ' + _lt('This question is positioned before its trigger ("%s") and will be skipped.'),
this.state.triggeringQuestionTitle);
this.state.surveyQuestionTriggerIconClass = 'fa-exclamation-triangle text-warning';
triggeringQuestionTitle);
} else if (triggerError === "WRONG_QUESTIONS_SELECTION_WARNING") {
this.state.surveyQuestionTriggerTooltip = '⚠ ' + _lt(
this.state.surveyIconWarning = true;
this.state.triggerTooltip = '⚠ ' + _lt(
'Conditional display is not available when questions are randomly picked.');
this.state.surveyQuestionTriggerIconClass = 'fa-exclamation-triangle text-warning';
} else if (triggerError === "MISSING_TRIGGER_ERROR") {
// This case must be handled to not temporarily render the "normal" icon if previously
// on an error state, which would cause a flicker as the trigger itself will be removed
// at next save (auto on survey form and primary list view).
} else {
this.state.surveyQuestionTriggerTooltip = sprintf(_lt('Displayed if "%s: %s"'),
this.state.triggeringQuestionTitle, this.props.record.data.triggering_answer_id[1]);
this.state.surveyQuestionTriggerIconClass = 'fa-code-fork';
this.state.surveyIconWarning = false;
this.state.triggerTooltip = sprintf(_lt('Displayed if "%s: %s"'),
triggeringQuestionTitle, this.props.record.data.triggering_answer_id[1]);
}
} else {
this.state.triggeringQuestionTitle = "";
this.state.surveyQuestionTriggerTooltip = "";
this.state.surveyQuestionTriggerIconClass = "";
this.state.surveyIconWarning = false;
this.state.triggerTooltip = "";
}
});
}
@@ -3,9 +3,9 @@
<t t-name="survey.surveyQuestionTrigger" owl="1">
<button t-if="this.props.record.data.triggering_question_id" disabled="disabled" t-ref="survey_question_trigger"
class="btn btn-link px-1 py-0 pe-auto" t-att-class="this.surveyQuestionTriggerError ? 'opacity-100 ' : 'icon_rotates'">
<i class="fa fa-fw o_button_icon " t-att-class="this.state.surveyQuestionTriggerIconClass"
t-att-data-tooltip="this.state.surveyQuestionTriggerTooltip"/>
class="btn btn-link px-1 py-0 pe-auto" t-att-class="this.state.surveyIconWarning ? 'opacity-100' : 'icon_rotates'">
<i class="fa fa-fw o_button_icon " t-att-class="this.state.surveyIconWarning ? 'fa-exclamation-triangle text-warning' : 'fa-code-fork'"
t-att-data-tooltip="this.state.triggerTooltip"/>
</button>
</t>