-
-
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 0d77cd7
Showing
12 changed files
with
224 additions
and
211 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
28 changes: 28 additions & 0 deletions
28
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,28 @@ | ||
| 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: 45px !important; | ||
| } | ||
| div.o-checkbox.form-check.fa-icon-widget { | ||
| padding-left: 8px !important; | ||
| } |
185 changes: 96 additions & 89 deletions
185
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,108 @@ | ||
| /* 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; | ||
| return currentValue ? tooltip_true : 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: 0 additions & 14 deletions
14
sale_layout_category_hide_detail/static/src/js/hide_details_translations.js
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.