Techsystech
/
web
mirror of https://github.com/OCA/web.git
3
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

[IMP] web_widget_numeric_step: black, isort, prettier

pull/1790/head
Carlos Roca 2021-01-25 08:57:03 +01:00
parent 67be2e0681
commit bd049c718b
7 changed files with 132 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
setup/web_widget_numeric_step/odoo/addons/web_widget_numeric_step 120000
View File

@ -0,0 +1 @@
../../../../web_widget_numeric_step

6
setup/web_widget_numeric_step/setup.py 100644
View File

@ -0,0 +1,6 @@
import setuptools
setuptools.setup(
setup_requires=['setuptools-odoo'],
odoo_addon=True,
)

31
web_widget_numeric_step/__manifest__.py
View File

@ -3,23 +3,16 @@
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html) # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html)
{ {
'name': "Web Widget Numeric Step", "name": "Web Widget Numeric Step",
'category': "web", "category": "web",
'version': "12.0.1.2.0", "version": "12.0.1.2.0",
'author': "GRAP, Tecnativa, " "author": "GRAP, Tecnativa, " "Odoo Community Association (OCA)",
"Odoo Community Association (OCA)", "license": "AGPL-3",
'license': 'AGPL-3', "website": "https://github.com/OCA/web",
'website': 'https://github.com/OCA/web', "depends": ["web"],
'depends': ['web'], "data": ["view/assets.xml"],
'data': [ "qweb": ["static/src/xml/numeric_step.xml",],
'view/assets.xml' "demo": ["demo/res_users_view.xml"],
], "auto_install": False,
'qweb': [ "installable": True,
'static/src/xml/numeric_step.xml',
],
'demo': [
'demo/res_users_view.xml'
],
'auto_install': False,
'installable': True,
} }

9
web_widget_numeric_step/demo/res_users_view.xml
View File

@ -1,15 +1,18 @@
<?xml version="1.0" encoding="UTF-8" ?> <?xml version="1.0" encoding="UTF-8" ?>
<!-- Copyright 2020 Tecnativa - Alexandre Díaz <!-- Copyright 2020 Tecnativa - Alexandre Díaz
License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). --> License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). -->
<odoo> <odoo>
<record id="view_users_form" model="ir.ui.view"> <record id="view_users_form" model="ir.ui.view">
<field name="model">res.users</field> <field name="model">res.users</field>
<field name="inherit_id" ref="base.view_users_form"/> <field name="inherit_id" ref="base.view_users_form" />
<field name="arch" type="xml"> <field name="arch" type="xml">
<xpath expr="//div[hasclass('oe_title')]" position="after"> <xpath expr="//div[hasclass('oe_title')]" position="after">
<group> <group>
<field name="credit_limit" widget="numeric_step" options="{'step': 3, 'min': -10, 'max': 130}"/> <field
name="credit_limit"
widget="numeric_step"
options="{'step': 3, 'min': -10, 'max': 130}"
/>
</group> </group>
</xpath> </xpath>
</field> </field>

139
web_widget_numeric_step/static/src/js/numeric_step.js
View File

@ -2,28 +2,27 @@
* Copyright 2020 Tecnativa - Alexandre Díaz * Copyright 2020 Tecnativa - Alexandre Díaz
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html) */ * License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html) */
odoo.define('web_widget_numeric_step.field', function (require) { odoo.define("web_widget_numeric_step.field", function(require) {
"use strict"; "use strict";
var field_utils = require('web.field_utils'); var field_utils = require("web.field_utils");
var Registry = require('web.field_registry'); var Registry = require("web.field_registry");
var FieldFloat = require('web.basic_fields').FieldFloat; var FieldFloat = require("web.basic_fields").FieldFloat;
var NumericStep = FieldFloat.extend({ var NumericStep = FieldFloat.extend({
template: 'web_widget_numeric_step', template: "web_widget_numeric_step",
className: 'o_field_numeric_step o_field_number', className: "o_field_numeric_step o_field_number",
events: _.extend({}, _.omit(FieldFloat.prototype.events, ['change', 'input']), { events: _.extend({}, _.omit(FieldFloat.prototype.events, ["change", "input"]), {
'mousedown .btn_numeric_step': '_onStepMouseDown', "mousedown .btn_numeric_step": "_onStepMouseDown",
'touchstart .btn_numeric_step': '_onStepMouseDown', "touchstart .btn_numeric_step": "_onStepMouseDown",
'click .btn_numeric_step': '_onStepClick', "click .btn_numeric_step": "_onStepClick",
'wheel .input_numeric_step': '_onWheel', "wheel .input_numeric_step": "_onWheel",
'keydown .input_numeric_step': '_onKeyDown', "keydown .input_numeric_step": "_onKeyDown",
'change .input_numeric_step': '_onChange', "change .input_numeric_step": "_onChange",
'input .input_numeric_step': '_onInput', "input .input_numeric_step": "_onInput",
'onfocusout .widget_numeric_step': '_onFocusOut', "onfocusout .widget_numeric_step": "_onFocusOut",
}), }),
supportedFieldTypes: ['float', 'integer'], supportedFieldTypes: ["float", "integer"],
// Values in milliseconds used for mouse down smooth speed feature // Values in milliseconds used for mouse down smooth speed feature
DEF_CLICK_DELAY: 400, DEF_CLICK_DELAY: 400,
@ -32,25 +31,28 @@ odoo.define('web_widget_numeric_step.field', function (require) {
DELAY_THROTTLE_CHANGE: 200, DELAY_THROTTLE_CHANGE: 200,
/** /**
* @override * @override
*/ */
init: function () { init: function() {
this._super.apply(this, arguments); this._super.apply(this, arguments);
// Widget config // Widget config
var max_val = this.nodeOptions.max; var max_val = this.nodeOptions.max;
var min_val = this.nodeOptions.min; var min_val = this.nodeOptions.min;
if (!_.isUndefined(min_val) && !_.isUndefined(max_val) && min_val > max_val) { if (
!_.isUndefined(min_val) &&
!_.isUndefined(max_val) &&
min_val > max_val
) {
min_val = this.nodeOptions.max; min_val = this.nodeOptions.max;
max_val = this.nodeOptions.min; max_val = this.nodeOptions.min;
} }
this._config = { this._config = {
'step': Number(this.nodeOptions.step) || 1, step: Number(this.nodeOptions.step) || 1,
'min': Number(min_val), min: Number(min_val),
'max': Number(max_val), max: Number(max_val),
}; };
var self = this; var self = this;
@ -65,15 +67,21 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* *
* @override * @override
*/ */
start: function () { start: function() {
var self = this; var self = this;
this._click_delay = this.DEF_CLICK_DELAY; this._click_delay = this.DEF_CLICK_DELAY;
this._autoStep = false; this._autoStep = false;
return this._super.apply(this, arguments).then(function () { return this._super.apply(this, arguments).then(function() {
document.addEventListener( document.addEventListener(
'mouseup', $.proxy(self, "_onMouseUp"), false); "mouseup",
$.proxy(self, "_onMouseUp"),
false
);
document.addEventListener( document.addEventListener(
'touchend', $.proxy(self, "_onMouseUp"), false); "touchend",
$.proxy(self, "_onMouseUp"),
false
);
}); });
}, },
@ -82,8 +90,8 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* *
* @override * @override
*/ */
_formatValue: function (value) { _formatValue: function(value) {
if (this.mode === 'edit') { if (this.mode === "edit") {
return this._sanitizeNumberValue(value); return this._sanitizeNumberValue(value);
} }
return this._super.apply(this, arguments); return this._super.apply(this, arguments);
@ -94,9 +102,9 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* *
* @override * @override
*/ */
_parseValue: function () { _parseValue: function() {
var parsedVal = this._super.apply(this, arguments); var parsedVal = this._super.apply(this, arguments);
if (this.mode === 'edit') { if (this.mode === "edit") {
return Number(parsedVal) || 0; return Number(parsedVal) || 0;
} }
return parsedVal; return parsedVal;
@ -107,9 +115,9 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* *
* @override * @override
*/ */
_prepareInput: function () { _prepareInput: function() {
var result = this._super.apply(this, arguments); var result = this._super.apply(this, arguments);
this.$input.attr(_.pick(this.nodeOptions, ['placeholder'])); this.$input.attr(_.pick(this.nodeOptions, ["placeholder"]));
// InputField hard set the input type to 'text' or 'password', // InputField hard set the input type to 'text' or 'password',
// we force it again to be 'tel'. // we force it again to be 'tel'.
// The widget uses 'tel' type because offers a good layout on // The widget uses 'tel' type because offers a good layout on
@ -118,7 +126,7 @@ odoo.define('web_widget_numeric_step.field', function (require) {
// features like the minus and plus buttons, steps, min and max... // features like the minus and plus buttons, steps, min and max...
// Perhaps in a near future this can be improved to have the best of // Perhaps in a near future this can be improved to have the best of
// two types without hacky developments. // two types without hacky developments.
this.$input.attr('type', 'tel'); this.$input.attr("type", "tel");
return result; return result;
}, },
@ -127,11 +135,15 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* *
* @override * @override
*/ */
_renderEdit: function () { _renderEdit: function() {
_.defer(function () { _.defer(
this.$el.parents("td.o_numeric_step_cell").addClass("numeric_step_editing_cell"); function() {
}.bind(this)); this.$el
this._prepareInput(this.$el.find('input.input_numeric_step')); .parents("td.o_numeric_step_cell")
.addClass("numeric_step_editing_cell");
}.bind(this)
);
this._prepareInput(this.$el.find("input.input_numeric_step"));
}, },
/** /**
@ -139,8 +151,10 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* *
* @override * @override
*/ */
_renderReadonly: function () { _renderReadonly: function() {
this.$el.parents("td.numeric_step_editing_cell").removeClass("numeric_step_editing_cell"); this.$el
.parents("td.numeric_step_editing_cell")
.removeClass("numeric_step_editing_cell");
this._super.apply(this, arguments); this._super.apply(this, arguments);
}, },
@ -149,18 +163,18 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* *
* @param {String} mode can be "plus" or "minus" * @param {String} mode can be "plus" or "minus"
*/ */
_doStep: function (mode) { _doStep: function(mode) {
var cval = 0; var cval = 0;
try { try {
var field = this.record.fields[this.name]; var field = this.record.fields[this.name];
cval = field_utils.parse[field.type](this.$input.val()) cval = field_utils.parse[field.type](this.$input.val());
} catch { } catch {
cval = this.value; cval = this.value;
mode = false; // Only set the value in this case mode = false; // Only set the value in this case
} }
if (mode === 'plus') { if (mode === "plus") {
cval += this._config.step; cval += this._config.step;
} else if (mode === 'minus') { } else if (mode === "minus") {
cval -= this._config.step; cval -= this._config.step;
} }
var nval = this._sanitizeNumberValue(cval); var nval = this._sanitizeNumberValue(cval);
@ -175,7 +189,7 @@ odoo.define('web_widget_numeric_step.field', function (require) {
/** /**
* @private * @private
*/ */
_clearStepInterval: function () { _clearStepInterval: function() {
clearTimeout(this._auto_step_interval); clearTimeout(this._auto_step_interval);
this._auto_step_interval = false; this._auto_step_interval = false;
this._click_delay = this.DEF_CLICK_DELAY; this._click_delay = this.DEF_CLICK_DELAY;
@ -187,7 +201,7 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* @private * @private
* @param {MouseClickEvent} ev * @param {MouseClickEvent} ev
*/ */
_onStepClick: function (ev) { _onStepClick: function(ev) {
if (!this._autoStep) { if (!this._autoStep) {
var mode = ev.target.dataset.mode; var mode = ev.target.dataset.mode;
this._doStep(mode); this._doStep(mode);
@ -199,10 +213,12 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* @private * @private
* @param {MouseClickEvent} ev * @param {MouseClickEvent} ev
*/ */
_onStepMouseDown: function (ev) { _onStepMouseDown: function(ev) {
if (ev.button === 0 && !this._auto_step_interval) { if (ev.button === 0 && !this._auto_step_interval) {
this._auto_step_interval = setTimeout( this._auto_step_interval = setTimeout(
$.proxy(this, "_whileMouseDown", ev), this._click_delay); $.proxy(this, "_whileMouseDown", ev),
this._click_delay
);
} }
}, },
@ -210,7 +226,7 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* @private * @private
* @param {FocusoutEvent} ev * @param {FocusoutEvent} ev
*/ */
_onFocusOut: function (evt) { _onFocusOut: function(evt) {
if (this._auto_step_interval) { if (this._auto_step_interval) {
this._clearStepInterval(); this._clearStepInterval();
} }
@ -219,7 +235,7 @@ odoo.define('web_widget_numeric_step.field', function (require) {
/** /**
* @private * @private
*/ */
_onMouseUp: function () { _onMouseUp: function() {
this._clearStepInterval(); this._clearStepInterval();
}, },
@ -227,7 +243,7 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* @private * @private
* @param {MouseClickEvent} ev * @param {MouseClickEvent} ev
*/ */
_whileMouseDown: function (ev) { _whileMouseDown: function(ev) {
this._autoStep = true; this._autoStep = true;
var mode = ev.target.dataset.mode; var mode = ev.target.dataset.mode;
this._doStep(mode); this._doStep(mode);
@ -244,12 +260,12 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* *
* @param {WheelEvent} ev * @param {WheelEvent} ev
*/ */
_onWheel: function (ev) { _onWheel: function(ev) {
ev.preventDefault(); ev.preventDefault();
if (ev.originalEvent.deltaY > 0) { if (ev.originalEvent.deltaY > 0) {
this._doStep('minus'); this._doStep("minus");
} else { } else {
this._doStep('plus'); this._doStep("plus");
} }
}, },
@ -258,11 +274,11 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* *
* @param {KeyEvent} ev * @param {KeyEvent} ev
*/ */
_onKeyDown: function (ev) { _onKeyDown: function(ev) {
if (ev.keyCode === $.ui.keyCode.UP) { if (ev.keyCode === $.ui.keyCode.UP) {
this._doStep('plus'); this._doStep("plus");
} else if (ev.keyCode === $.ui.keyCode.DOWN) { } else if (ev.keyCode === $.ui.keyCode.DOWN) {
this._doStep('minus'); this._doStep("minus");
} }
}, },
@ -271,7 +287,7 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* *
* @override * @override
*/ */
_onChange: function (ev) { _onChange: function(ev) {
ev.target.value = this._sanitizeNumberValue(ev.target.value); ev.target.value = this._sanitizeNumberValue(ev.target.value);
return this._super.apply(this, arguments); return this._super.apply(this, arguments);
}, },
@ -285,7 +301,7 @@ odoo.define('web_widget_numeric_step.field', function (require) {
* @param {Number} value * @param {Number} value
* @returns {Number} * @returns {Number}
*/ */
_sanitizeNumberValue: function (value) { _sanitizeNumberValue: function(value) {
var cval = Number(value); var cval = Number(value);
if (_.isNaN(cval)) { if (_.isNaN(cval)) {
return value; return value;
@ -307,8 +323,7 @@ odoo.define('web_widget_numeric_step.field', function (require) {
}, },
}); });
Registry.add('numeric_step', NumericStep); Registry.add("numeric_step", NumericStep);
return NumericStep; return NumericStep;
}); });

30
web_widget_numeric_step/static/src/xml/numeric_step.xml
View File

@ -1,28 +1,40 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" ?>
<!-- <!--
Copyright 2019 GRAP - Quentin DUPONT Copyright 2019 GRAP - Quentin DUPONT
Copyright 2020 Tecnativa - Alexandre Díaz Copyright 2020 Tecnativa - Alexandre Díaz
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
--> -->
<templates> <templates>
<t t-name="web_widget_numeric_step"> <t t-name="web_widget_numeric_step">
<t t-if="widget.mode != 'readonly'"> <t t-if="widget.mode != 'readonly'">
<div class="input-group widget_numeric_step"> <div class="input-group widget_numeric_step">
<div class="input-group-prepend"> <div class="input-group-prepend">
<button class="fa fa-minus btn btn-default btn_numeric_step" <button
aria-label="Minus" title="Minus" type="button" data-mode="minus"/> class="fa fa-minus btn btn-default btn_numeric_step"
aria-label="Minus"
title="Minus"
type="button"
data-mode="minus"
/>
</div> </div>
<input type="tel" class="form-control input_numeric_step" aria-label="Value" /> <input
type="tel"
class="form-control input_numeric_step"
aria-label="Value"
/>
<div class="input-group-append"> <div class="input-group-append">
<button class="fa fa-plus btn btn-default btn_numeric_step" <button
aria-label="Plus" title="Plus" type="button" data-mode="plus"/> class="fa fa-plus btn btn-default btn_numeric_step"
aria-label="Plus"
title="Plus"
type="button"
data-mode="plus"
/>
</div> </div>
</div> </div>
</t> </t>
<t t-else=""> <t t-else="">
<field/> <field />
</t> </t>
</t> </t>
</templates> </templates>

14
web_widget_numeric_step/view/assets.xml
View File

@ -1,11 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" ?>
<odoo> <odoo>
<template id="assets_backend" inherit_id="web.assets_backend"> <template id="assets_backend" inherit_id="web.assets_backend">
<xpath expr="." position="inside"> <xpath expr="." position="inside">
<link rel="stylesheet" href="/web_widget_numeric_step/static/src/css/numeric_step.scss"/> <link
<script type="text/javascript" src="/web_widget_numeric_step/static/src/js/numeric_step.js"></script> rel="stylesheet"
href="/web_widget_numeric_step/static/src/css/numeric_step.scss"
/>
<script
type="text/javascript"
src="/web_widget_numeric_step/static/src/js/numeric_step.js"
/>
</xpath> </xpath>
</template> </template>
</odoo> </odoo>