Modified TextField to have a insertable option

front/core/components/textfield/textfield.js

@@ -5,9 +5,96 @@ export default class Textfield extends Field {
     constructor($element, $scope, $compile) {
         super($element, $scope, $compile);
         this.buildInput('text');
+
+        if (this.element.getAttribute('insertable')) {
+            this.element.addEventListener('click', e => {
+                let targetElement = e.target;
+                targetElement.addEventListener('keydown', e => {
+                    let maxLength = this.maxLength;
+
+                    // 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
+
+                    let maxLength = this.maxLength;
+
+                    // Call the function that obtains the current cursor position
+                    let pointerPosition = getCaretPosition(e.target);
+
+                    // If the cursor position is on the last allowed character,
+                    // prevent any keystroke from doing anything
+                    if (pointerPosition >= maxLength) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        return;
                     }
+
+                    // 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);
+
+                    // Remove the first number on the array that was right of the caret
+                    rightToTheCaret.shift();
+
+                    // The part that was left to the caret is not modified in any way and is put back into the textField
+                    e.target.value = leftToTheCaret.join('');
+
+                    // 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));
+
+                    // Add the values that should be right to the Caret back in the textField
+                    e.target.value = e.target.value + rightToTheCaret.join('');
+
+                    // Update the current pointer position so that it moves 1 position to the right
+                    pointerPosition++;
+                    e.target.setSelectionRange(pointerPosition, pointerPosition);
+
+                    return false;
+                });
+            });
+        }
+    }
+}
+function getCaretPosition(targetElement) {
+    let caretPosition = 0;
+
+    // IE Support
+    if (document.selection) {
+        // Set focus on the element
+        targetElement.focus();
+
+        // To get cursor position, get empty selection range
+        let selectionOrCaretPos = document.selection.createRange();
+
+        // Move selection start to 0 position
+        selectionOrCaretPos.moveStart('character', -targetElement.value.length);
+
+        // The caret position is selection length
+        caretPosition = selectionOrCaretPos.text.length;
+    } else if (targetElement.selectionStart || targetElement.selectionStart == 0) // Firefox Support
+        caretPosition = targetElement.selectionStart;
+
+    // Return results
+    return (caretPosition);
 }
 
 ngModule.vnComponent('vnTextfield', {
-    controller: Textfield
+    controller: Textfield,
+    bindings: {
+        maxLength: '<?',
+        insertable: '<?'
+    }
 });

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

@@ -56,13 +56,14 @@
             </vn-textfield>
         </vn-horizontal>
         <vn-horizontal>
-            <vn-input-account
+            <vn-textfield
                 vn-one
                 label="Account"
                 ng-model="$ctrl.supplier.account"
+                insertable="true"
                 max-length="10"
                 rule>
-            </vn-input-account>
+            </vn-textfield>
             <vn-autocomplete vn-one
                 ng-model="$ctrl.supplier.sageTaxTypeFk"
                 data="sageTaxTypes"

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-back",
-    "version": "8.8.0",
+    "version": "8.6.0",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {