diff --git a/web_widget_numeric_step/README.rst b/web_widget_numeric_step/README.rst new file mode 100644 index 000000000000..dc5f9ab426b0 --- /dev/null +++ b/web_widget_numeric_step/README.rst @@ -0,0 +1,168 @@ +.. image:: https://odoo-community.org/readme-banner-image + :target: https://odoo-community.org/get-involved?utm_source=readme + :alt: Odoo Community Association + +======================= +Web Widget Numeric Step +======================= + +.. + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! source digest: sha256:9025ad79e52a5b2790d7a9406dc6aa4fd495d56b12bb3fea65d626b83ded7bb5 + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png + :target: https://odoo-community.org/page/development-status + :alt: Beta +.. |badge2| image:: https://img.shields.io/badge/license-AGPL--3-blue.png + :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html + :alt: License: AGPL-3 +.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github + :target: https://github.com/OCA/web/tree/20.0/web_widget_numeric_step + :alt: OCA/web +.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png + :target: https://translation.odoo-community.org/projects/web-20-0/web-20-0-web_widget_numeric_step + :alt: Translate me on Weblate +.. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png + :target: https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=20.0 + :alt: Try me on Runboat + +|badge1| |badge2| |badge3| |badge4| |badge5| + +This widget changes input number field and make it easier to increment +the number thanks to 2 buttons (+ and -). Use JS native logic for input +number, so you can use the options ``min``, ``max``, ``step``, +``placeholder``. + +**Table of contents** + +.. contents:: + :local: + +Usage +===== + +In your xml view, add ``widget="numeric_step"`` to a float or integer +field. This will add the 2 buttons "+" and "-" just next to the input +field in edit mode. Iteration step by default is 1. + +|image1| + +**Optional** + +Add an option to choose the step iteration and limits (min and max +values). + +Example for an 0.25 step, min to -1 and max to 10 : + +.. code:: xml + + days + +**Available Options** + +- step > Amount to increase/decrease (default: 1.0) +- min > Min. value allowed (default: no limit) +- max > Max. value allowed (default: no limit) +- auto_select > Select the content when the element get focus (default: + False) +- placeholder > Define the placeholder text (default: None) +- class > Define additional classes for the input (default: None) + +**Examples** + +Iteration with 0.25 step, min to -1 and max to 10. + +Start to increment with button, continue incrementing with scrolling +mouse. + +|image2| + +Iteration with 10 step, max limit 15, placeholder with onchange + +|image3| + +**Demo** + +You can test the feature by going to Settings > Technical > Reporting > +Paper Format. The fields "Top Margin (mm)" and "Bottom Margin (mm)" are +configured to use the widget with 0.5 step, min to 0 and max to 100, and +the fields "Left Margin (mm)" and "Right Margin (mm)" with 1 step, min +to 0 and max to 50. The integer field "Header spacing" is configured +with 5 step, min to 0 and max to 100. + +.. |image1| image:: https://raw.githubusercontent.com/OCA/web/20.0/web_widget_numeric_step/static/description/add_two_buttons.png +.. |image2| image:: https://raw.githubusercontent.com/OCA/web/20.0/web_widget_numeric_step/static/description/step0,25andlimits.gif +.. |image3| image:: https://raw.githubusercontent.com/OCA/web/20.0/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif + +Known issues / Roadmap +====================== + +When the value is entered using the keyboard, the limits set in the +widget can be exceeded + +Bug Tracker +=========== + +Bugs are tracked on `GitHub Issues `_. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us to smash it by providing a detailed and welcomed +`feedback `_. + +Do not contact contributors directly about support or help with technical issues. + +Credits +======= + +Authors +------- + +* GRAP +* Tecnativa + +Contributors +------------ + +- `GRAP `__: + + - Quentin DUPONT + +- `Tecnativa `__: + + - Alexandre Díaz + - Carlos Roca + +- Helly kapatel +- Thanakrit Pintana +- Dhara Solanki + +Maintainers +----------- + +This module is maintained by the OCA. + +.. image:: https://odoo-community.org/logo.png + :alt: Odoo Community Association + :target: https://odoo-community.org + +OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use. + +.. |maintainer-rafaelbn| image:: https://github.com/rafaelbn.png?size=40px + :target: https://github.com/rafaelbn + :alt: rafaelbn +.. |maintainer-yajo| image:: https://github.com/yajo.png?size=40px + :target: https://github.com/yajo + :alt: yajo + +Current `maintainers `__: + +|maintainer-rafaelbn| |maintainer-yajo| + +This module is part of the `OCA/web `_ project on GitHub. + +You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute. diff --git a/web_widget_numeric_step/__init__.py b/web_widget_numeric_step/__init__.py new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/web_widget_numeric_step/__manifest__.py b/web_widget_numeric_step/__manifest__.py new file mode 100644 index 000000000000..10bb35c53899 --- /dev/null +++ b/web_widget_numeric_step/__manifest__.py @@ -0,0 +1,25 @@ +# Copyright 2019 GRAP - Quentin DUPONT +# Copyright 2020 Tecnativa - Alexandre Díaz +# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html) + +{ + "name": "Web Widget Numeric Step", + "category": "web", + "version": "20.0.1.0.0", + "author": "GRAP, Tecnativa, Odoo Community Association (OCA)", + "license": "AGPL-3", + "website": "https://github.com/OCA/web", + "depends": ["web"], + "demo": ["demo/report_paperformat.xml"], + "assets": { + "web.assets_backend": [ + "web_widget_numeric_step/static/src/*", + ], + "web.assets_unit_tests": [ + "web_widget_numeric_step/static/tests/**/*", + ], + }, + "maintainers": ["rafaelbn", "yajo"], + "auto_install": False, + "installable": True, +} diff --git a/web_widget_numeric_step/demo/report_paperformat.xml b/web_widget_numeric_step/demo/report_paperformat.xml new file mode 100644 index 000000000000..f2122ae67af3 --- /dev/null +++ b/web_widget_numeric_step/demo/report_paperformat.xml @@ -0,0 +1,33 @@ + + + + report.paperformat + + + + numeric_step + {'step': 0.5, 'min': 0, 'max': 100} + + + numeric_step + {'step': 0.5, 'min': 0, 'max': 100} + + + numeric_step + {'step': 1, 'min': 0, 'max': 50} + + + numeric_step + {'step': 1, 'min': 0, 'max': 50} + + + numeric_step + {'step': 5, 'min': 0, 'max': 100} + + + + diff --git a/web_widget_numeric_step/i18n/de.po b/web_widget_numeric_step/i18n/de.po new file mode 100644 index 000000000000..d16afa183f69 --- /dev/null +++ b/web_widget_numeric_step/i18n/de.po @@ -0,0 +1,39 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_numeric_step +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 14.0\n" +"Report-Msgid-Bugs-To: \n" +"PO-Revision-Date: 2021-10-13 20:46+0000\n" +"Last-Translator: Corneliuus \n" +"Language-Team: none\n" +"Language: de\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: nplurals=2; plural=n != 1;\n" +"X-Generator: Weblate 4.3.2\n" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.xml:0 +msgid "Minus" +msgstr "Minus" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.esm.js:0 +msgid "Numeric Step" +msgstr "" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.xml:0 +msgid "Plus" +msgstr "Plus" + +#, python-format +#~ msgid "Value" +#~ msgstr "Wert" diff --git a/web_widget_numeric_step/i18n/es.po b/web_widget_numeric_step/i18n/es.po new file mode 100644 index 000000000000..ea627175cfbf --- /dev/null +++ b/web_widget_numeric_step/i18n/es.po @@ -0,0 +1,39 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_numeric_step +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 12.0\n" +"Report-Msgid-Bugs-To: \n" +"PO-Revision-Date: 2023-10-15 20:36+0000\n" +"Last-Translator: Ivorra78 \n" +"Language-Team: none\n" +"Language: es\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: nplurals=2; plural=n != 1;\n" +"X-Generator: Weblate 4.17\n" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.xml:0 +msgid "Minus" +msgstr "Menos" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.esm.js:0 +msgid "Numeric Step" +msgstr "Paso Numérico" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.xml:0 +msgid "Plus" +msgstr "Más" + +#, python-format +#~ msgid "Value" +#~ msgstr "Valor" diff --git a/web_widget_numeric_step/i18n/fr.po b/web_widget_numeric_step/i18n/fr.po new file mode 100644 index 000000000000..c47a151521af --- /dev/null +++ b/web_widget_numeric_step/i18n/fr.po @@ -0,0 +1,35 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_number_ux_choice +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 12.0\n" +"Report-Msgid-Bugs-To: \n" +"POT-Creation-Date: 2019-08-30 12:07+0000\n" +"PO-Revision-Date: 2019-08-30 12:07+0000\n" +"Last-Translator: <>\n" +"Language-Team: \n" +"Language: \n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: \n" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.xml:0 +msgid "Minus" +msgstr "Moins" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.esm.js:0 +msgid "Numeric Step" +msgstr "" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.xml:0 +msgid "Plus" +msgstr "Plus" diff --git a/web_widget_numeric_step/i18n/it.po b/web_widget_numeric_step/i18n/it.po new file mode 100644 index 000000000000..c56a4c0d27f8 --- /dev/null +++ b/web_widget_numeric_step/i18n/it.po @@ -0,0 +1,39 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_numeric_step +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 13.0\n" +"Report-Msgid-Bugs-To: \n" +"PO-Revision-Date: 2023-11-27 11:33+0000\n" +"Last-Translator: mymage \n" +"Language-Team: none\n" +"Language: it\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: nplurals=2; plural=n != 1;\n" +"X-Generator: Weblate 4.17\n" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.xml:0 +msgid "Minus" +msgstr "Meno" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.esm.js:0 +msgid "Numeric Step" +msgstr "Passo numerico" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.xml:0 +msgid "Plus" +msgstr "Più" + +#, python-format +#~ msgid "Value" +#~ msgstr "Valore" diff --git a/web_widget_numeric_step/i18n/web_widget_numeric_step.pot b/web_widget_numeric_step/i18n/web_widget_numeric_step.pot new file mode 100644 index 000000000000..04ad3512428d --- /dev/null +++ b/web_widget_numeric_step/i18n/web_widget_numeric_step.pot @@ -0,0 +1,32 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_numeric_step +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 19.0\n" +"Report-Msgid-Bugs-To: \n" +"Last-Translator: \n" +"Language-Team: \n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: \n" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.xml:0 +msgid "Minus" +msgstr "" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.esm.js:0 +msgid "Numeric Step" +msgstr "" + +#. module: web_widget_numeric_step +#. odoo-javascript +#: code:addons/web_widget_numeric_step/static/src/numeric_step.xml:0 +msgid "Plus" +msgstr "" diff --git a/web_widget_numeric_step/pyproject.toml b/web_widget_numeric_step/pyproject.toml new file mode 100644 index 000000000000..4231d0cccb3d --- /dev/null +++ b/web_widget_numeric_step/pyproject.toml @@ -0,0 +1,3 @@ +[build-system] +requires = ["whool"] +build-backend = "whool.buildapi" diff --git a/web_widget_numeric_step/readme/CONTRIBUTORS.md b/web_widget_numeric_step/readme/CONTRIBUTORS.md new file mode 100644 index 000000000000..3ab6f2745272 --- /dev/null +++ b/web_widget_numeric_step/readme/CONTRIBUTORS.md @@ -0,0 +1,8 @@ +- [GRAP](http://www.grap.coop): + - Quentin DUPONT \<\> +- [Tecnativa](https://www.tecnativa.com/): + - Alexandre Díaz + - Carlos Roca +- Helly kapatel \<\> +- Thanakrit Pintana \<\> +- Dhara Solanki \<\> diff --git a/web_widget_numeric_step/readme/DESCRIPTION.md b/web_widget_numeric_step/readme/DESCRIPTION.md new file mode 100644 index 000000000000..76c1f390145f --- /dev/null +++ b/web_widget_numeric_step/readme/DESCRIPTION.md @@ -0,0 +1,3 @@ +This widget changes input number field and make it easier to increment +the number thanks to 2 buttons (+ and -). Use JS native logic for input +number, so you can use the options `min`, `max`, `step`, `placeholder`. diff --git a/web_widget_numeric_step/readme/ROADMAP.md b/web_widget_numeric_step/readme/ROADMAP.md new file mode 100644 index 000000000000..953fb14c997e --- /dev/null +++ b/web_widget_numeric_step/readme/ROADMAP.md @@ -0,0 +1 @@ +When the value is entered using the keyboard, the limits set in the widget can be exceeded diff --git a/web_widget_numeric_step/readme/USAGE.md b/web_widget_numeric_step/readme/USAGE.md new file mode 100644 index 000000000000..a0b2f361ab03 --- /dev/null +++ b/web_widget_numeric_step/readme/USAGE.md @@ -0,0 +1,47 @@ +In your xml view, add `widget="numeric_step"` to a float or integer field. This will add the 2 +buttons "+" and "-" just next to the input field in edit mode. Iteration +step by default is 1. + +![](../static/description/add_two_buttons.png) + +**Optional** + +Add an option to choose the step iteration and limits (min and max +values). + +Example for an 0.25 step, min to -1 and max to 10 : + +``` xml + days +``` + +**Available Options** + +- step \> Amount to increase/decrease (default: 1.0) +- min \> Min. value allowed (default: no limit) +- max \> Max. value allowed (default: no limit) +- auto_select \> Select the content when the element get focus (default: + False) +- placeholder \> Define the placeholder text (default: None) +- class \> Define additional classes for the input (default: None) + +**Examples** + +Iteration with 0.25 step, min to -1 and max to 10. + +Start to increment with button, continue incrementing with scrolling +mouse. + +![](../static/description/step0,25andlimits.gif) + +Iteration with 10 step, max limit 15, placeholder with onchange + +![](../static/description/step10_limit15_placeholder117_with_onchange.gif) + +**Demo** + +You can test the feature by going to Settings > Technical > Reporting > Paper Format. +The fields "Top Margin (mm)" and "Bottom Margin (mm)" are configured to use the +widget with 0.5 step, min to 0 and max to 100, and the fields "Left Margin (mm)" +and "Right Margin (mm)" with 1 step, min to 0 and max to 50. The integer field +"Header spacing" is configured with 5 step, min to 0 and max to 100. diff --git a/web_widget_numeric_step/static/description/add_two_buttons.png b/web_widget_numeric_step/static/description/add_two_buttons.png new file mode 100644 index 000000000000..7a60f2dea9bf Binary files /dev/null and b/web_widget_numeric_step/static/description/add_two_buttons.png differ diff --git a/web_widget_numeric_step/static/description/icon.png b/web_widget_numeric_step/static/description/icon.png new file mode 100644 index 000000000000..3a662b992dd6 Binary files /dev/null and b/web_widget_numeric_step/static/description/icon.png differ diff --git a/web_widget_numeric_step/static/description/index.html b/web_widget_numeric_step/static/description/index.html new file mode 100644 index 000000000000..817c862e2c58 --- /dev/null +++ b/web_widget_numeric_step/static/description/index.html @@ -0,0 +1,491 @@ + + + + + +Web Widget Numeric Step + + + +
+ + + +Odoo Community Association + +
+

Web Widget Numeric Step

+ +

Beta License: AGPL-3 OCA/web Translate me on Weblate Try me on Runboat

+

This widget changes input number field and make it easier to increment +the number thanks to 2 buttons (+ and -). Use JS native logic for input +number, so you can use the options min, max, step, +placeholder.

+

Table of contents

+ +
+

Usage

+

In your xml view, add widget="numeric_step" to a float or integer +field. This will add the 2 buttons “+” and “-” just next to the input +field in edit mode. Iteration step by default is 1.

+

image1

+

Optional

+

Add an option to choose the step iteration and limits (min and max +values).

+

Example for an 0.25 step, min to -1 and max to 10 :

+
+<field name="sale_delay" widget="numeric_step" options="{'step': 0.25, 'min': -1, 'max': 10}" /> days
+
+

Available Options

+
    +
  • step > Amount to increase/decrease (default: 1.0)
    • +
  • min > Min. value allowed (default: no limit)
    • +
  • max > Max. value allowed (default: no limit)
    • +
  • auto_select > Select the content when the element get focus (default: +False)
    • +
  • placeholder > Define the placeholder text (default: None)
    • +
  • class > Define additional classes for the input (default: None)
    • +
+

Examples

+

Iteration with 0.25 step, min to -1 and max to 10.

+

Start to increment with button, continue incrementing with scrolling +mouse.

+

image2

+

Iteration with 10 step, max limit 15, placeholder with onchange

+

image3

+

Demo

+

You can test the feature by going to Settings > Technical > Reporting > +Paper Format. The fields “Top Margin (mm)” and “Bottom Margin (mm)” are +configured to use the widget with 0.5 step, min to 0 and max to 100, and +the fields “Left Margin (mm)” and “Right Margin (mm)” with 1 step, min +to 0 and max to 50. The integer field “Header spacing” is configured +with 5 step, min to 0 and max to 100.

+
+
+

Known issues / Roadmap

+

When the value is entered using the keyboard, the limits set in the +widget can be exceeded

+
+
+

Bug Tracker

+

Bugs are tracked on GitHub Issues. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us to smash it by providing a detailed and welcomed +feedback.

+

Do not contact contributors directly about support or help with technical issues.

+
+
+

Credits

+
+

Authors

+
    +
  • GRAP
    • +
  • Tecnativa
    • +
+
+
+

Contributors

+ +
+
+

Maintainers

+

This module is maintained by the OCA.

+ +Odoo Community Association + +

OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use.

+

Current maintainers:

+

rafaelbn yajo

+

This module is part of the OCA/web project on GitHub.

+

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

+
+
+
+
+ + diff --git a/web_widget_numeric_step/static/description/step0,25andlimits.gif b/web_widget_numeric_step/static/description/step0,25andlimits.gif new file mode 100644 index 000000000000..ce6780e1b753 Binary files /dev/null and b/web_widget_numeric_step/static/description/step0,25andlimits.gif differ diff --git a/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif b/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif new file mode 100644 index 000000000000..709498e3cf32 Binary files /dev/null and b/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif differ diff --git a/web_widget_numeric_step/static/src/numeric_step.esm.js b/web_widget_numeric_step/static/src/numeric_step.esm.js new file mode 100644 index 000000000000..3d767212613e --- /dev/null +++ b/web_widget_numeric_step/static/src/numeric_step.esm.js @@ -0,0 +1,115 @@ +import { + FloatField, + floatField, + floatFieldProps, +} from "@web/views/fields/float/float_field"; +import {t, useProps} from "@odoo/owl"; +import {_t} from "@web/core/l10n/translation"; +import {formatInteger} from "@web/views/fields/formatters"; +import {parseInteger} from "@web/views/fields/parsers"; +import {registry} from "@web/core/registry"; + +export class NumericStep extends FloatField { + static template = "web_widget_numeric_step"; + props = useProps({ + ...floatFieldProps, + step: t.number().optional(1), + min: t.number().optional(), + max: t.number().optional(), + placeholder: t.string().optional(), + additional_class: t.string().optional(), + }); + + get isInteger() { + return this.props.record.fields[this.props.name].type === "integer"; + } + parse(value) { + if (this.isInteger && this.props.inputType !== "number") { + return parseInteger(value, {allowOperation: true}); + } + return super.parse(value); + } + get formattedValue() { + // Same logic as the core IntegerField, so integers are not shown as floats + if ( + !this.isInteger || + !this.props.formatNumber || + (this.props.inputType === "number" && !this.props.readonly) + ) { + return super.formattedValue; + } + return formatInteger(this.value, { + humanReadable: this.props.humanReadable && !this.state.hasFocus, + decimals: this.props.decimals, + }); + } + _onStepClick(ev) { + const mode = ev.target.dataset.mode; + this._doStep(mode); + } + _onKeyDown(ev) { + if (ev.key === "ArrowUp") { + this._doStep("plus"); + } else if (ev.key === "ArrowDown") { + this._doStep("minus"); + } + } + _onWheel(ev) { + ev.preventDefault(); + if (!this._lastWheelTime) { + this._lastWheelTime = 0; + } + const now = Date.now(); + const throttleLimit = 100; + if (now - this._lastWheelTime >= throttleLimit) { + this._lastWheelTime = now; + if (ev.deltaY > 0) { + this._doStep("minus"); + } else { + this._doStep("plus"); + } + } + } + updateField(val) { + return this.props.record.update({[this.props.name]: val}); + } + _doStep(mode) { + let cval = this.props.record.data[this.props.name]; + if (mode === "plus") { + cval += this.props.step; + } else if (mode === "minus") { + cval -= this.props.step; + } + if (this.props.min !== undefined && cval < this.props.min) { + cval = this.props.min; + } else if (this.props.max !== undefined && cval > this.props.max) { + cval = this.props.max; + } + if (this.isInteger) { + cval = Math.round(cval); + } + this.updateField(cval); + } +} + +export const numericStep = { + ...floatField, + component: NumericStep, + supportedTypes: ["float", "integer"], + displayName: _t("Numeric Step"), + // Width of the core float column plus the two step buttons + listViewWidth: 165, + extractProps({attrs, options}) { + const props = floatField.extractProps(...arguments); + return { + ...props, + step: options.step || 1, + min: options.min, + max: options.max, + placeholder: attrs.placeholder, + additional_class: attrs.class, + }; + }, +}; + +registry.category("fields").add("numeric_step", numericStep); diff --git a/web_widget_numeric_step/static/src/numeric_step.scss b/web_widget_numeric_step/static/src/numeric_step.scss new file mode 100644 index 000000000000..b7ed1c492b85 --- /dev/null +++ b/web_widget_numeric_step/static/src/numeric_step.scss @@ -0,0 +1,14 @@ +// Copyright 2023 Moduon Team S.L. +// License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html) + +.widget_numeric_step { + // Hide the buttons until the user hovers if possible + @media (hover: hover) { + .btn_numeric_step { + visibility: hidden; + } + } + &:hover .btn_numeric_step { + visibility: visible; + } +} diff --git a/web_widget_numeric_step/static/src/numeric_step.xml b/web_widget_numeric_step/static/src/numeric_step.xml new file mode 100644 index 000000000000..57f4fbfef8be --- /dev/null +++ b/web_widget_numeric_step/static/src/numeric_step.xml @@ -0,0 +1,58 @@ + + + diff --git a/web_widget_numeric_step/static/tests/numeric_step.test.js b/web_widget_numeric_step/static/tests/numeric_step.test.js new file mode 100644 index 000000000000..150b681de99b --- /dev/null +++ b/web_widget_numeric_step/static/tests/numeric_step.test.js @@ -0,0 +1,165 @@ +import {advanceTime, animationFrame, expect, test} from "@odoo/hoot"; +import { + clickSave, + contains, + defineModels, + fields, + models, + mountView, + onRpc, +} from "@web/../tests/web_test_helpers"; +import { + manuallyDispatchProgrammaticEvent, + press, + queryOne, + resize, +} from "@odoo/hoot-dom"; + +class Partner extends models.Model { + name = fields.Char(); + qux = fields.Float(); + int_field = fields.Integer(); + + _records = [{id: 1, name: "A long name ".repeat(10), qux: 5, int_field: 1200}]; +} + +defineModels([Partner]); + +onRpc("has_group", () => true); + +const INPUT = ".o_field_widget[name='qux'] input"; +const MINUS = ".o_field_widget[name='qux'] button[data-mode='minus']"; +const PLUS = ".o_field_widget[name='qux'] button[data-mode='plus']"; + +function mountForm(fieldAttrs = "") { + return mountView({ + type: "form", + resModel: "partner", + resId: 1, + arch: `
`, + }); +} + +test("plus and minus buttons change the value by the default step", async () => { + onRpc("partner", "web_save", ({args}) => { + expect.step(`save ${args[1].qux}`); + }); + await mountForm(); + expect(INPUT).toHaveValue("5.00"); + await contains(PLUS).click(); + expect(INPUT).toHaveValue("6.00"); + await contains(PLUS).click(); + await contains(MINUS).click(); + await contains(MINUS).click(); + await contains(MINUS).click(); + expect(INPUT).toHaveValue("4.00"); + await clickSave(); + expect.verifySteps(["save 4"]); +}); + +test("the step option is used", async () => { + await mountForm(`options="{'step': 0.25}"`); + await contains(PLUS).click(); + expect(INPUT).toHaveValue("5.25"); + await contains(MINUS).click(); + await contains(MINUS).click(); + expect(INPUT).toHaveValue("4.75"); +}); + +test("min and max options limit the value", async () => { + await mountForm(`options="{'step': 2, 'min': 4, 'max': 8}"`); + await contains(PLUS).click(); + await contains(PLUS).click(); + expect(INPUT).toHaveValue("8.00"); + await contains(PLUS).click(); + expect(INPUT).toHaveValue("8.00"); + await contains(MINUS).click(); + await contains(MINUS).click(); + await contains(MINUS).click(); + expect(INPUT).toHaveValue("4.00"); +}); + +test("arrow keys change the value", async () => { + await mountForm(`options="{'step': 2}"`); + await contains(INPUT).focus(); + await press("ArrowUp"); + await animationFrame(); + expect(INPUT).toHaveValue("7.00"); + await press("ArrowDown"); + await press("ArrowDown"); + await animationFrame(); + expect(INPUT).toHaveValue("3.00"); +}); + +test("mouse wheel changes the value, with a throttle", async () => { + await mountForm(); + await manuallyDispatchProgrammaticEvent(queryOne(INPUT), "wheel", {deltaY: -100}); + await animationFrame(); + expect(INPUT).toHaveValue("6.00"); + // A second event right after the first one is ignored + await manuallyDispatchProgrammaticEvent(queryOne(INPUT), "wheel", {deltaY: -100}); + await animationFrame(); + expect(INPUT).toHaveValue("6.00"); + await advanceTime(100); + await manuallyDispatchProgrammaticEvent(queryOne(INPUT), "wheel", {deltaY: 100}); + await animationFrame(); + expect(INPUT).toHaveValue("5.00"); +}); + +test("readonly fields only show the value, like the core float field", async () => { + await mountForm(`readonly="1"`); + expect(".o_field_widget[name='qux'] span").toHaveText("5.00"); + expect(INPUT).toHaveCount(0); + expect(MINUS).toHaveCount(0); + expect(PLUS).toHaveCount(0); +}); + +test("integer fields are displayed and saved as integers", async () => { + onRpc("partner", "web_save", ({args}) => { + expect.step(`save ${args[1].int_field}`); + }); + await mountView({ + type: "form", + resModel: "partner", + resId: 1, + arch: `
+ + `, + }); + const input = ".o_field_widget[name='int_field'] input"; + expect(input).toHaveValue("1,200"); + await contains( + ".o_field_widget[name='int_field'] button[data-mode='plus']" + ).click(); + expect(input).toHaveValue("1,201"); + await contains(input).edit("15"); + expect(input).toHaveValue("15"); + await clickSave(); + expect.verifySteps(["save 15"]); +}); + +test("placeholder and class attributes are applied", async () => { + await mountForm(`placeholder="Quantity" class="my_custom_class"`); + expect(INPUT).toHaveAttribute("placeholder", "Quantity"); + expect(".widget_numeric_step.my_custom_class").toHaveCount(1); +}); + +test("list view column is wide enough for the buttons", async () => { + // Narrow screen and a long text column: the column gets its minimal width + resize({width: 400}); + await mountView({ + type: "list", + resModel: "partner", + arch: ` + + + + `, + }); + // Rows only render the input while being edited + await contains(".o_data_row td[name='qux']").click(); + // The input keeps the width of a regular float column (~92px) next to the buttons + expect(queryOne(".o_data_row td[name='qux'] input").offsetWidth).toBeGreaterThan( + 85 + ); +}); diff --git a/web_widget_numeric_step/tests/__init__.py b/web_widget_numeric_step/tests/__init__.py new file mode 100644 index 000000000000..c91c41ddcc3a --- /dev/null +++ b/web_widget_numeric_step/tests/__init__.py @@ -0,0 +1 @@ +from . import test_js diff --git a/web_widget_numeric_step/tests/test_js.py b/web_widget_numeric_step/tests/test_js.py new file mode 100644 index 000000000000..8d8877c07674 --- /dev/null +++ b/web_widget_numeric_step/tests/test_js.py @@ -0,0 +1,21 @@ +# Copyright 2026 Tecnativa - Carlos Roca +# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). + +from odoo.tests import HttpCase, tagged + +from odoo.addons.web.tests.test_js import unit_test_error_checker + + +@tagged("post_install", "-at_install") +class TestHoot(HttpCase): + def test_hoot_web_widget_numeric_step(self): + self.browser_js( + "/web/tests?headless&loglevel=2&preset=desktop&timeout=15000" + "&filter=web_widget_numeric_step", + "", + "", + login="admin", + timeout=600, + success_signal="[HOOT] Test suite succeeded", + error_checker=unit_test_error_checker, + )