Implementacion de modulo de pedidos

resources/js/app.js

@@ -7,3 +7,112 @@ window.Alpine = Alpine;
 Alpine.plugin(focus);
 
 Alpine.start();
+
+document.addEventListener("DOMContentLoaded", ()=> {
+
+    //estados
+    let inputs = document.querySelectorAll('.input-enter');
+    let inputsProduct = document.querySelectorAll('.input-product');
+    let btnAdd = document.querySelector('#btn-add');
+
+    init();
+
+    function init()
+    {
+        inputEnterInit();
+        inputProductsEvent();
+        addKeyListener();
+    }
+
+
+
+    function inputEnterInit() {
+        inputs.forEach(function(input, index) {
+            input.addEventListener('keydown', function(event) {
+                if (event.key === 'Enter' || event.keyCode === 13) {
+                    event.preventDefault();
+                    let nextIndex = index + 1;
+                    if (nextIndex < inputs.length) {
+                        inputs[nextIndex].focus();
+                    }
+                }
+            });
+        });
+    }
+
+    function addKeyListener()
+    {
+        const keysPressed = ['F6','F7','F8','F9'];
+        
+        document.addEventListener('keydown',function(event){
+
+            if(!keysPressed.includes(event.key)) return;
+
+            event.preventDefault();
+
+            if(event.key === 'F8' && document.querySelector('#modal-1').checked)
+            {
+                event.preventDefault();
+                Livewire.emit('agregar');
+            }
+            else if(event.key === 'F9' && document.querySelector('#modal-1').checked)
+            {
+                Livewire.emit('save');                
+            }
+            else if(event.key === 'F6' && document.querySelector('#modal-2').checked)
+            {
+                event.preventDefault();
+                Livewire.emit('agregar');
+            }
+            else if(event.key === 'F7')
+            {
+                Livewire.emit('cerrarVenta' && document.querySelector('#modal-2').checked);
+            }
+            else if(event.key === 'F8' && document.querySelector('#modal-2').checked)
+            {
+                Livewire.emit('entregarVenta');
+            }
+            else if(event.key === 'F9' && document.querySelector('#modal-2').checked)
+            {
+                Livewire.emit('saveArrivo');
+            }
+        })
+    }
+
+
+    function inputProductsEvent() {
+        inputsProduct.forEach(function(inputProduct, index) {
+            inputProduct.addEventListener('keydown', function(event) {
+                if (event.key === 'Enter' || event.keyCode === 13) {
+                    event.preventDefault();
+                    let nextIndex = index + 1;
+                    console.log(`nextIndex:${nextIndex} | Length: ${inputs.length}`);
+                    if (nextIndex < inputsProduct.length) {
+                        inputsProduct[nextIndex].focus();
+                    }
+                    if( (nextIndex == inputsProduct.length))
+                    {
+                        btnAdd.click();
+                        updateProductsDOM();
+                    }
+                }
+            });
+        });
+    }
+
+    function updateListProducts()
+    {
+        inputsProduct[inputsProduct.length-6]?.focus();
+    }
+
+    Livewire.on('addProductEvent',function(){
+        updateProductsDOM();
+        updateListProducts();
+    });
+
+    async function updateProductsDOM()
+    {
+        inputsProduct = document.querySelectorAll('.input-product');
+        inputProductsEvent();
+    }
+});