added maxlength binding, finished logic on insert

front/core/components/input-account/index.js

@@ -9,73 +9,58 @@ export default class inputAccount extends Field {
         this.element.addEventListener('click', e => {
             let targetElement = e.target;
             targetElement.addEventListener('keydown', e => {
-                if (e.target.value.length > 10) {
+                let maxLength = this.maxLength;
-                    console.log('demasiado largo');
-                    e.target.value.substring(0, 10);
-                    e.preventDefault();
-                }
-            });
-            targetElement.addEventListener('keyup', e => {
-                console.log('keyup');
-                console.log(e);
-            });
-            targetElement.addEventListener('keypress', e => {
-                if (e.key == 'Enter') {
-                    console.log('Enter pulsado');
-                    return;
-                }
-                console.log('|----------------------|');
 
-                e.stopPropagation();
+                // In case the string is too long when the key is pressed, cut the string to the max length allowed
+                if (e.target.value.length > maxLength)
+                    e.target.value.substring(0, maxLength);
+            });
+            targetElement.addEventListener('keypress', async e => {
+                if (e.key == 'Enter')
+                    return; // If the enter key is pressed dismiss it
 
-                console.log('Tecla pulsada --> ', e.which);
+                let maxLength = this.maxLength;
+
+                // Call the function that obtains the current cursor position
                 let pointerPosition = getCaretPosition(e.target);
-                console.log('Posicion del cursor --> ', pointerPosition);
 
-                if (pointerPosition >= 10) {
+                // If the cursor position is on the last allowed character, prevent any keystroke from doing anything
+                if (pointerPosition >= maxLength) {
                     e.preventDefault();
                     e.stopPropagation();
                     return;
                 }
 
-                let currentArrValue = e.target.value.slice(0, 10);
+                // In case by any ways the input is longer than the max especified size, cut it to it.
+                let currentArrValue = e.target.value.slice(0, maxLength);
 
+                // Transform said input to a array with each character on one position
                 currentArrValue = currentArrValue.split('');
 
+                // Cut the array in 2 parts, one with everything right of the caret, and one with everything left to it
                 let rightToTheCaret = currentArrValue.slice(pointerPosition);
 
                 let leftToTheCaret = currentArrValue.slice(0, pointerPosition);
 
-                console.log('ValorCompleto --> ', currentArrValue);
+                // Remove the first number on the array that was right of the caret
-                console.log('Izquierda del puntero --> ', leftToTheCaret);
+                rightToTheCaret.shift();
-                console.log('Derecha del puntero --> ', rightToTheCaret);
 
-                if (e.which < 48 || e.which > 57) {
+                // The part that was left to the caret is not modified in any way and is put back into the textField
-                    console.log('notNumerical');
+                e.target.value = leftToTheCaret.join('');
-                    return;
-                }
 
-                let deletedNumber = rightToTheCaret.shift();
+                // Add one millisecond of delay to give the UI time to update,
+                // so that it detects the changes on the textField
+                await new Promise(r => setTimeout(r, 1));
 
-                console.log('Cortamos el primer valor de la derecha --> ', deletedNumber);
+                // Add the values that should be right to the Caret back in the textField
-
+                e.target.value = e.target.value + rightToTheCaret.join('');
-                console.log('Sustituida la primera posicion de la derecha del cursor --> ', rightToTheCaret);
-
-                let newValue = leftToTheCaret.concat(e.key, rightToTheCaret);
-
-                console.log('New Value --> ', leftToTheCaret, e.key, rightToTheCaret);
-
-                e.target.value = newValue.join('');
-                // .stopPropagation();
-                e.preventDefault();
 
+                // Update the current pointer position so that it moves 1 position to the right
                 pointerPosition++;
-
                 e.target.setSelectionRange(pointerPosition, pointerPosition);
 
-                let target = e.target;
+                // Prevent the keyUp event from happening
-
+                e.stopPropagation();
-                target.keyup();
 
                 return false;
             });
@@ -107,5 +92,8 @@ function getCaretPosition(targetElement) {
 }
 
 ngModule.vnComponent('vnInputAccount', {
-    controller: inputAccount
+    controller: inputAccount,
+    bindings: {
+        maxLength: '<'
+    }
 });

modules/supplier/front/fiscal-data/index.html

@@ -60,6 +60,7 @@
                 vn-one
                 label="Account"
                 ng-model="$ctrl.supplier.account"
+                max-length="10"
                 rule>
             </vn-input-account>
             <vn-autocomplete vn-one