From dfab770e22f9b28f70ea282b9d2999e17ed1ba25 Mon Sep 17 00:00:00 2001 From: Guille Date: Wed, 4 Dec 2019 16:46:51 +0200 Subject: [PATCH] Replace amount-field with vaadin-integer-field (#980) --- frontend/src/components/amount-field.js | 124 ------------------ .../src/views/orderedit/order-item-editor.js | 6 +- package-lock.json | 12 +- .../bakery/ui/components/AmountField.java | 35 ----- .../ui/views/orderedit/OrderItemEditor.java | 4 +- .../elements/ui/OrderItemEditorElement.java | 4 +- 6 files changed, 13 insertions(+), 172 deletions(-) delete mode 100644 frontend/src/components/amount-field.js delete mode 100644 src/main/java/com/vaadin/starter/bakery/ui/components/AmountField.java diff --git a/frontend/src/components/amount-field.js b/frontend/src/components/amount-field.js deleted file mode 100644 index 01f22f625..000000000 --- a/frontend/src/components/amount-field.js +++ /dev/null @@ -1,124 +0,0 @@ -import { PolymerElement } from '@polymer/polymer/polymer-element.js'; -import '@polymer/iron-icon/iron-icon.js'; -import '@vaadin/vaadin-text-field/src/vaadin-text-field.js'; -import '@vaadin/vaadin-icons/vaadin-icons.js'; -import { html } from '@polymer/polymer/lib/utils/html-tag.js'; -{ - /** - * A pure Polymer Web Component for numeric fields. - */ - class AmountField extends PolymerElement { - static get template() { - return html` - - - - - - - - -`; - } - - static get is() { - return 'amount-field'; - } - - static get properties() { - return { - value: { - type: Number, - value: 0, - notify: true - }, - min: { - type: Number, - observer: '_minChanged', - value: 0 - }, - max: { - type: Number, - observer: '_maxChanged', - value: Number.MAX_SAFE_INTEGER || (Math.pow(2, 53) - 1) /* MSIE fallback */ - }, - disabled: { - type: Boolean, - value: false, - notify: true, - reflectToAttribute: true - }, - editable: { - type: Boolean - }, - pattern: { - type: String, - value: '\d*' - }, - label: String - }; - } - - get _enabled() { - return !this.disabled && !this.readOnly; - } - - get _number() { - const val = parseInt(this.value); - return isNaN(val) ? this.min : val; - } - - _minChanged(val) { - this.value = this._number < val ? val : this._number; - } - - _maxChanged(val) { - this.value = this._number > val ? val : this._number; - } - - _plus() { - !this._plusDisabled() && (this.value = this._number + 1); - this.$.input.focus(); - } - - _minus() { - !this._minusDisabled() && (this.value = this._number - 1); - this.$.input.focus(); - } - - _isEqual(value, other) { - return Math.max(this.min, Math.min(this._number, this.max)) === other; - } - - _plusDisabled(value, min, max, disabled, readOnly) { - return !this._enabled || this._number >= this.max; - } - - _minusDisabled(value, min, max, disabled, readOnly) { - return !this._enabled || this._number <= this.min; - } - } - - window.customElements.define(AmountField.is, AmountField); -} diff --git a/frontend/src/views/orderedit/order-item-editor.js b/frontend/src/views/orderedit/order-item-editor.js index 9507cc55d..53e0032bc 100644 --- a/frontend/src/views/orderedit/order-item-editor.js +++ b/frontend/src/views/orderedit/order-item-editor.js @@ -1,10 +1,10 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js'; import '@polymer/iron-icon/iron-icon.js'; +import '@vaadin/vaadin-text-field/src/vaadin-integer-field.js'; import '@vaadin/vaadin-text-field/src/vaadin-text-field.js'; import '@vaadin/vaadin-button/src/vaadin-button.js'; import '@vaadin/vaadin-form-layout/src/vaadin-form-layout.js'; import '@vaadin/vaadin-combo-box/src/vaadin-combo-box.js'; -import '../../components/amount-field.js'; import '../../../styles/shared-styles.js'; import { html } from '@polymer/polymer/lib/utils/html-tag.js'; class OrderItemEditor extends PolymerElement { @@ -41,8 +41,8 @@ class OrderItemEditor extends PolymerElement { - +
[[price]]
 diff --git a/package-lock.json b/package-lock.json index 0705374dc..2bd7be43c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4005,9 +4005,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001013", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001013.tgz", - "integrity": "sha512-hOAXaWKuq/UVFgYawxIOdPdyMQdYcwOCDOjnZcKn7wCgFUrhP7smuNZjGLuJlPSgE6aRA4cRJ+bGSrhtEt7ZAg==", + "version": "1.0.30001015", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001015.tgz", + "integrity": "sha512-/xL2AbW/XWHNu1gnIrO8UitBGoFthcsDgU9VLK1/dpsoxbaD5LscHozKze05R6WLsBvLhqv78dAPozMFQBYLbQ==", "dev": true }, "chalk": { @@ -7277,9 +7277,9 @@ } }, "node-releases": { - "version": "1.1.41", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.41.tgz", - "integrity": "sha512-+IctMa7wIs8Cfsa8iYzeaLTFwv5Y4r5jZud+4AnfymzeEXKBCavFX0KBgzVaPVqf0ywa6PrO8/b+bPqdwjGBSg==", + "version": "1.1.42", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.42.tgz", + "integrity": "sha512-OQ/ESmUqGawI2PRX+XIRao44qWYBBfN54ImQYdWVTQqUckuejOg76ysSqDBK8NG3zwySRVnX36JwDQ6x+9GxzA==", "dev": true, "requires": { "semver": "^6.3.0" diff --git a/src/main/java/com/vaadin/starter/bakery/ui/components/AmountField.java b/src/main/java/com/vaadin/starter/bakery/ui/components/AmountField.java deleted file mode 100644 index b79079d63..000000000 --- a/src/main/java/com/vaadin/starter/bakery/ui/components/AmountField.java +++ /dev/null @@ -1,35 +0,0 @@ -package com.vaadin.starter.bakery.ui.components; - -import com.vaadin.flow.component.AbstractSinglePropertyField; -import com.vaadin.flow.component.Tag; -import com.vaadin.flow.component.dependency.JsModule; - -@Tag("amount-field") -@JsModule("./src/components/amount-field.js") -public class AmountField extends AbstractSinglePropertyField { - - public AmountField() { - super("value", null, true); - } - - public void setEnabled(boolean enabled) { - getElement().setProperty("disabled", !enabled); - } - - public void setMin(int value) { - getElement().setProperty("min", value); - } - - public void setMax(int value) { - getElement().setProperty("max", value); - } - - public void setEditable(boolean editable) { - getElement().setProperty("editable", editable); - } - - public void setPattern(String pattern) { - getElement().setProperty("pattern", pattern); - } - -} diff --git a/src/main/java/com/vaadin/starter/bakery/ui/views/orderedit/OrderItemEditor.java b/src/main/java/com/vaadin/starter/bakery/ui/views/orderedit/OrderItemEditor.java index 7b5812bea..6b16a28f3 100644 --- a/src/main/java/com/vaadin/starter/bakery/ui/views/orderedit/OrderItemEditor.java +++ b/src/main/java/com/vaadin/starter/bakery/ui/views/orderedit/OrderItemEditor.java @@ -15,6 +15,7 @@ import com.vaadin.flow.component.internal.AbstractFieldSupport; import com.vaadin.flow.component.polymertemplate.Id; import com.vaadin.flow.component.polymertemplate.PolymerTemplate; +import com.vaadin.flow.component.textfield.IntegerField; import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.data.binder.BeanValidationBinder; import com.vaadin.flow.data.binder.BindingValidationStatus; @@ -23,7 +24,6 @@ import com.vaadin.flow.templatemodel.TemplateModel; import com.vaadin.starter.bakery.backend.data.entity.OrderItem; import com.vaadin.starter.bakery.backend.data.entity.Product; -import com.vaadin.starter.bakery.ui.components.AmountField; import com.vaadin.starter.bakery.ui.utils.FormattingUtils; import com.vaadin.starter.bakery.ui.views.storefront.events.CommentChangeEvent; import com.vaadin.starter.bakery.ui.views.storefront.events.DeleteEvent; @@ -41,7 +41,7 @@ public class OrderItemEditor extends PolymerTemplate implements H private Button delete; @Id("amount") - private AmountField amount; + private IntegerField amount; @Id("price") private Div price; diff --git a/src/test/java/com/vaadin/starter/bakery/testbench/elements/ui/OrderItemEditorElement.java b/src/test/java/com/vaadin/starter/bakery/testbench/elements/ui/OrderItemEditorElement.java index 1ef735f23..773e7d36e 100644 --- a/src/test/java/com/vaadin/starter/bakery/testbench/elements/ui/OrderItemEditorElement.java +++ b/src/test/java/com/vaadin/starter/bakery/testbench/elements/ui/OrderItemEditorElement.java @@ -23,7 +23,7 @@ private void clickAmountFieldPlusOrMinus(int value) { if (value == 0) { throw new IllegalArgumentException("Value should be -1 or 1"); } - final int idx = value < 0 ? 0 : 1; - $("amount-field").first().$("iron-icon").get(idx).click(); + final String part = value < 0 ? "decrease-button" : "increase-button"; + $("vaadin-integer-field").first().$("div").attribute("part", part).first().click(); } }