[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:
+14
-16
@@ -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
-3
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user