-
-
Notifications
You must be signed in to change notification settings - Fork 193
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[MIG] sale_layout_category_hide_detail: Migration to 16.0
Change the fa icon Widget to new owl Component
- Loading branch information
1 parent
8150927
commit 1d4f366
Showing
13 changed files
with
267 additions
and
203 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
sale_layout_category_hide_detail/static/src/css/boolean_fa_icon_widget.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| div.fa-icon-widget > input.form-check-input, | ||
| div.fa_icon_tooltip { | ||
| display: none; | ||
| visibility: hidden; | ||
| } | ||
| div.o_field_widget.o_field_boolean_fa_icon:hover > div > label > div.fa_icon_tooltip { | ||
| position: absolute; | ||
| visibility: visible; | ||
| display: block; | ||
| z-index: 1; | ||
| cursor: pointer; | ||
| } | ||
| div.fa_icon_tooltip > span.tip_text { | ||
| background: #fff; | ||
| padding: 4px; | ||
| border: solid #2e2e2e 1px; | ||
| margin-left: -60px; | ||
| z-index: 1; | ||
| top: 0%; | ||
| left: 50%; | ||
| box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); | ||
| } | ||
| th.align-middle.cursor-default.o_boolean_fa_icon_cell.opacity-trigger-hover { | ||
| width: 20px !important; | ||
| } | ||
| div.o-checkbox.form-check.fa-icon-widget { | ||
| padding-left: 0px !important; | ||
| align-content: center; | ||
| display: inline-grid; | ||
| margin-left: -3px; | ||
| } | ||
| span.float-right { | ||
| float: right; | ||
| } |
186 changes: 97 additions & 89 deletions
186
sale_layout_category_hide_detail/static/src/js/boolean_fa_icon_widget.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +1,109 @@ | ||
| /* Copyright 2019 Tecnativa - Ernesto Tejeda | ||
| * Copyright 2022 Tecnativa - Víctor Martínez | ||
| * License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). | ||
| */ | ||
| odoo.define( | ||
| "sale_layout_category_hide_detail.boolean_fa_icon_widget", | ||
| function (require) { | ||
| "use strict"; | ||
| /** @odoo-module **/ | ||
| const {useState} = owl; | ||
| import {BooleanField} from "@web/views/fields/boolean/boolean_field"; | ||
| import {_lt} from "@web/core/l10n/translation"; | ||
| import {registry} from "@web/core/registry"; | ||
|
|
||
| var core = require("web.core"); | ||
| var AbstractField = require("web.AbstractField"); | ||
| var registry = require("web.field_registry"); | ||
| const iconTrue = "fa-check-square-o"; | ||
| const iconFalse = "fa-square-o"; | ||
| const tooltipTrue = "Switch to hidden"; | ||
| const tooltipFalse = "Switch to show"; | ||
|
|
||
| var _t = core._t; | ||
| export class BooleanFaIconWidget extends BooleanField { | ||
| setup() { | ||
| super.setup(); | ||
| this.state = useState({ | ||
| fa_class: this.getFaIconClass(this.props.value), | ||
| text_tooltip: this.getTextTooltip(this.props.value), | ||
| }); | ||
| } | ||
|
|
||
| var BooleanFaIconWidget = AbstractField.extend({ | ||
| className: "o_boolean_fa_icon_widget", | ||
| events: { | ||
| click: "_toggleValue", | ||
| }, | ||
| supportedFieldTypes: ["boolean"], | ||
| getFaIconClass(currentValue) { | ||
| var fa_icons = this.props.fa_icons; | ||
| var icon_true = fa_icons.icon_true || iconTrue; | ||
| var icon_false = fa_icons.icon_false || iconFalse; | ||
| return currentValue ? icon_true : icon_false; | ||
| } | ||
|
|
||
| // -------------------------------------------------------------------------- | ||
| // Public | ||
| // -------------------------------------------------------------------------- | ||
| getTextTooltip(currentValue) { | ||
| var show_tooltip = this.props.terminology; | ||
| var tooltip_true = show_tooltip.hover_true || tooltipTrue; | ||
| var tooltip_false = show_tooltip.hover_false || tooltipFalse; | ||
| debugger; | ||
| return currentValue ? _lt(tooltip_true) : _lt(tooltip_false); | ||
| } | ||
|
|
||
| /** | ||
| * A boolean field is always set since false is a valid value. | ||
| * | ||
| * @override | ||
| */ | ||
| isSet: function () { | ||
| return true; | ||
| }, | ||
| isAllowEdit() { | ||
| var resModel = this.props.record.resModel; | ||
| var state = this.props.record.data.state; | ||
| if (typeof state === "undefined" || state === null) { | ||
| state = this.props.record.data.parent_state; | ||
| } | ||
| if ( | ||
| ["account.move.line", "sale.order.line"].includes(resModel) && | ||
| state !== "draft" | ||
| ) { | ||
| this.props.allow = false; | ||
| this.props.readonly = true; | ||
| } | ||
| return this.props.allow; | ||
| } | ||
|
|
||
| // -------------------------------------------------------------------------- | ||
| // Private | ||
| // -------------------------------------------------------------------------- | ||
| get isReadonly() { | ||
| return this.props.readonly; | ||
| } | ||
|
|
||
| _allowEdit: function () { | ||
| var allow = true; | ||
| if ( | ||
| (this.model === "account.move.line" && | ||
| this.recordData.parent_state !== "draft") || | ||
| (this.model === "sale.order.line" && | ||
| this.recordData.state !== "draft") | ||
| ) { | ||
| allow = false; | ||
| } | ||
| return allow; | ||
| }, | ||
| get allow() { | ||
| return this.props.allow; | ||
| } | ||
|
|
||
| /** | ||
| * Render font-awesome icon based on state | ||
| * | ||
| * @override | ||
| * @private | ||
| */ | ||
| get fa_icons() { | ||
| return this.props.fa_icons; | ||
| } | ||
|
|
||
| _render: function () { | ||
| // Set icon class | ||
| var fa_icons = this.attrs.options.fa_icons; | ||
| var icon_true = (fa_icons && fa_icons.icon_true) || "fa-check-square-o"; | ||
| var icon_false = (fa_icons && fa_icons.icon_false) || "fa-square-o"; | ||
| var fa_class = this.value ? icon_true : icon_false; | ||
| // Set tip message | ||
| var terminology = this.attrs.options.terminology; | ||
| var hover_true = | ||
| (terminology && _t(terminology.hover_true)) || | ||
| _t("Click to uncheck"); | ||
| var hover_false = | ||
| (terminology && _t(terminology.hover_false)) || | ||
| _t("Click to check"); | ||
| var tip = this.value ? hover_true : hover_false; | ||
| var style = this._allowEdit() ? "" : "cursor:default"; | ||
| // Set template and add it to $el | ||
| var template = "<span class='fa %s' title='%s' style='%s'></span>"; | ||
| this.$el.empty().append(_.str.sprintf(template, fa_class, tip, style)); | ||
| }, | ||
| get terminology() { | ||
| return this.props.terminology; | ||
| } | ||
|
|
||
| // -------------------------------------------------------------------------- | ||
| // Handlers | ||
| // -------------------------------------------------------------------------- | ||
| onChange(newValue) { | ||
| if (this.props.readonly || !this.isAllowEdit()) { | ||
| return; | ||
| } | ||
| super.onChange(newValue); | ||
| this.state.fa_class = this.getFaIconClass(newValue); | ||
| this.state.text_tooltip = this.getTextTooltip(newValue); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Toggle value | ||
| * | ||
| * @private | ||
| * @param {MouseEvent} event | ||
| */ | ||
| _toggleValue: function (event) { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| if (this._allowEdit()) this._setValue(!this.value); | ||
| }, | ||
| }); | ||
| BooleanFaIconWidget.template = "sale_layout_category.BooleanFaIconWidget"; | ||
| BooleanFaIconWidget.displayName = _lt("Toggle"); | ||
|
|
||
| registry.add("boolean_fa_icon", BooleanFaIconWidget); | ||
| return BooleanFaIconWidget; | ||
| } | ||
| ); | ||
| BooleanFaIconWidget.defaultProps = { | ||
| fa_icons: { | ||
| icon_true: "fa-check-square-o", | ||
| icon_false: "fa-square-o", | ||
| }, | ||
| terminology: { | ||
| hover_true: "Switch to: details hidden", | ||
| hover_false: "Switch to: details shown", | ||
| }, | ||
| allow: true, | ||
| readonly: true, | ||
| }; | ||
|
|
||
| BooleanFaIconWidget.props = { | ||
| ...BooleanField.props, | ||
| fa_icons: {type: Object, optional: true}, | ||
| terminology: {type: Object, optional: true}, | ||
| allow: {type: Boolean, optional: true}, | ||
| }; | ||
|
|
||
| // Extract props from the attributes | ||
| BooleanFaIconWidget.extractProps = ({attrs}) => { | ||
| return { | ||
| fa_icons: attrs.options.fa_icons, | ||
| terminology: attrs.options.terminology, | ||
| }; | ||
| }; | ||
|
|
||
| registry.category("fields").add("boolean_fa_icon", BooleanFaIconWidget); |
14 changes: 8 additions & 6 deletions
14
sale_layout_category_hide_detail/static/src/js/hide_details_translations.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,16 @@ | ||
| /* eslint-disable strict */ | ||
| // This is an hack to get the hover_* options translated on the | ||
| // boolean_fa_icon_widget terminology widget. The terms are translated through | ||
| // _t(opt_terms.hover_true) or _t(opt_terms.hover_true) which will only work | ||
| // if the terms are already present in the translation map. | ||
| // This code does nothing but marks the strings as translatable | ||
| /** @odoo-module **/ | ||
| var _t = function (x) { | ||
| return x; | ||
| }; | ||
|
|
||
| _t("Switch to: details hidden"); | ||
| _t("Switch to: details shown"); | ||
|
|
||
| _t("Switch to: section subtotal hidden"); | ||
| _t("Switch to: section subtotal shown"); | ||
|
|
||
| _t("Switch to: subtotal hidden"); | ||
| _t("Switch to: subtotal shown"); | ||
|
|
||
| _t("Switch to: line amount hidden"); | ||
| _t("Switch to: line amount shown"); |
Oops, something went wrong.