diff --git a/front/core/components/input-number/index.js b/front/core/components/input-number/index.js index 7117ada9a..2e4e73c29 100644 --- a/front/core/components/input-number/index.js +++ b/front/core/components/input-number/index.js @@ -21,6 +21,8 @@ export default class InputNumber extends Input { if (!isNaN(this.value)) this.input.value = this.value; + this.validateValue(); + this.emit('change', {event}); }); @@ -42,8 +44,11 @@ export default class InputNumber extends Input { * @param {Number} value - Value */ set value(value) { + if (!this.hasOwnProperty('_value') && value) + this.input.value = value; + this._value = value; - this.hasValue = this._value !== null; + this.hasValue = !(value === null || value === undefined || value === ''); if (this.hasValue) this.element.classList.add('not-empty'); @@ -101,6 +106,10 @@ export default class InputNumber extends Input { if (value) this.input.step = value; } + get validationError() { + return this.input.validationMessage; + } + /** * Increases the input value */ @@ -130,12 +139,42 @@ export default class InputNumber extends Input { */ validateValue() { if (!this.hasValidValue()) { - this.element.querySelector('.infix') - .classList.add('invalid', 'validated'); - } else { - this.element.querySelector('.infix') - .classList.remove('invalid', 'validated'); - } + this.hideError(); + this.showError(); + } else + this.hideError(); + } + + /** + * Shows the input validation error + */ + showError() { + const infixElement = this.element.querySelector('.infix'); + const infixClassList = infixElement.classList; + + const errorSpan = document.createElement('span'); + errorSpan.className = 'mdl-textfield__error'; + + const errorText = document.createTextNode(this.validationError); + + errorSpan.append(errorText); + infixElement.append(errorSpan); + + infixClassList.add('validated', 'invalid'); + } + + /** + * Hides the input validation error + */ + hideError() { + const infixElement = this.element.querySelector('.infix'); + const infixClassList = infixElement.classList; + const errorElement = this.element.querySelector('.infix span.mdl-textfield__error'); + + if (errorElement) + errorElement.remove(); + + infixClassList.remove('validated', 'invalid'); } } diff --git a/front/core/components/input-number/index.spec.js b/front/core/components/input-number/index.spec.js index 18d51512e..3da82fe21 100644 --- a/front/core/components/input-number/index.spec.js +++ b/front/core/components/input-number/index.spec.js @@ -50,7 +50,7 @@ describe('Component vnInputNumber', () => { controller.validateValue(); let classes = controller.element.querySelector('.infix').classList.toString(); - expect(classes).not.toContain('invalid validated'); + expect(classes).not.toContain('validated invalid'); }); it(`should call hasValidValue() and add the class invalid and validated`, () => { @@ -60,7 +60,7 @@ describe('Component vnInputNumber', () => { controller.validateValue(); let classes = controller.element.querySelector('.infix').classList.toString(); - expect(classes).toContain('invalid validated'); + expect(classes).toContain('validated invalid'); }); }); }); diff --git a/modules/agency/front/basic-data/index.html b/modules/agency/front/basic-data/index.html index ac37e8c07..f0ee393d1 100644 --- a/modules/agency/front/basic-data/index.html +++ b/modules/agency/front/basic-data/index.html @@ -32,30 +32,26 @@ - + model="$ctrl.zone.travelingDays" + min="0" step="1"> + model="$ctrl.zone.hour"> + model="$ctrl.zone.price" + min="0" step="0.01"> + model="$ctrl.zone.bonus" + min="0" step="0.01">