fixed input time

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');
@@ -102,6 +107,10 @@ export default class InputNumber extends Input {
         this.input.step = value;
     }
 
+    get validationError() {
+        return this.input.validationMessage;
+    }
+
     /**
      * Increases the input value
      */
@@ -131,12 +140,42 @@ export default class InputNumber extends Input {
      */
     validateValue() {
         if (!this.hasValidValue()) {
-            this.element.querySelector('.infix')
+            this.hideError();
-                .classList.add('invalid', 'validated');
+            this.showError();
-        } else {
+        } else
-            this.element.querySelector('.infix')
+            this.hideError();
-                .classList.remove('invalid', 'validated');
     }
+
+    /**
+     * 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');
     }
 }
 

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');
         });
     });
 });

modules/agency/front/basic-data/index.html

@@ -32,31 +32,27 @@
             </vn-autocomplete>
         </vn-horizontal>
         <vn-horizontal>
-            <vn-input-number
+            <vn-input-number vn-two
-                vn-two
-                min="0"
-                step="1"
                 label="Traveling days"
-                field="$ctrl.zone.travelingDays">
+                model="$ctrl.zone.travelingDays"
+                min="0" step="1">
             </vn-input-number>
             <vn-input-time
                 vn-two
                 label="Estimated hour (ETD)"
-                field="$ctrl.zone.hour">
+                model="$ctrl.zone.hour">
             </vn-input-time>
         </vn-horizontal>
         <vn-horizontal>
             <vn-input-number vn-one
                 label="Price"
-                field="$ctrl.zone.price"
+                model="$ctrl.zone.price"
-                min="0"
+                min="0" step="0.01">
-                step="0.10">
             </vn-input-number>
             <vn-input-number vn-one
                 label="Bonus"
-                field="$ctrl.zone.bonus"
+                model="$ctrl.zone.bonus"
-                min="0"
+                min="0" step="0.01">
-                step="0.10">
             </vn-input-number> 
         </vn-horizontal>
         <vn-horizontal>