SalesDocument.html.twig

{% set model = fsc.getCurrentView().model %}

<style>
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }
</style>

<script>
    let waitCounter = 0;
    let keyupInputName = null;

    function changeColumn(btn) {
        $(btn).addClass('active').siblings().removeClass('active');
        document.forms['salesForm']['columnView'].value = $(btn).data('column');

        if ($(btn).data('column') === 'subtotal') {
            $('.columSubtotal').removeClass('d-none').addClass('d-block');
            $('.columNeto').removeClass('d-block').addClass('d-none');
        } else {
            $('.columSubtotal').removeClass('d-block').addClass('d-none');
            $('.columNeto').removeClass('d-none').addClass('d-block');
        }
    }

    function findProduct() {
        $("#findProductInput").autocomplete({
            source: function (request, response) {
                $.ajax({
                    method: "POST",
                    url: '{{ fsc.url() }}',
                    data: {action: 'autocomplete-product', term: request.term},
                    dataType: "json",
                    success: function (results) {
                        let values = [];
                        results.forEach(function (element) {
                            if (element.key === null || element.key === element.value) {
                                values.push(element);
                            } else {
                                values.push({key: element.key, value: element.key + " | " + element.value});
                            }
                        });
                        response(values);
                    },
                    error: function (msg) {
                        alert(msg.status + " " + msg.responseText);
                    }
                });
            },
            select: function (event, ui) {
                if (ui.item.key !== null) {
                    const value = ui.item.value.split(" | ");
                    salesFormAction("fast-product", value[0]);
                }
            }
        });
    }

    function salesFastLine(e) {
        if (e.which == 13) {
            salesFormAction('fast-line', '0');
        }
    }

    function salesFormAction(action, selectedLine) {
        animateSpinner('add');
        $('#headerModal').modal('hide');

        document.forms['salesForm']['action'].value = action;
        document.forms['salesForm']['selectedLine'].value = selectedLine;

        const formData = new FormData(document.forms['salesForm']);
        const plainFormData = Object.fromEntries(formData.entries());
        const formDataJsonString = JSON.stringify(plainFormData);

        let data = new FormData();
        data.append('action', action);
        data.append('code', document.forms['salesForm']['code'].value);
        data.append('multireqtoken', document.forms['salesForm']['multireqtoken'].value);
        data.append('selectedLine', document.forms['salesForm']['selectedLine'].value);
        data.append('data', formDataJsonString);
        console.log(data);

        fetch('{{ fsc.url() }}', {
            method: 'POST',
            body: data
        }).then(function (response) {
            animateSpinner('remove');
            if (response.ok) {
                return response.json();
            }
            return Promise.reject(response);
        }).then(function (data) {
            if (data.header !== '') {
                document.getElementById("salesFormHeader").innerHTML = data.header;
            }
            if (data.lines !== '') {
                document.getElementById("salesFormLines").innerHTML = data.lines;
            } else {
                $.each(data.linesMap, function (index, value) {
                    if (document.forms['salesForm'][index] != null) {
                        document.forms['salesForm'][index].value = value;
                    }
                });
            }
            if (data.footer !== '') {
                document.getElementById("salesFormFooter").innerHTML = data.footer;
            }
            if (data.products !== '') {
                document.getElementById("findProductList").innerHTML = data.products;
            }
            if (Array.isArray(data.messages)) {
                data.messages.forEach(item => alert(item.message));
            }
            switch (document.forms['salesForm']['action'].value) {
                case 'add-product':
                case 'fast-product':
                    $(".doc-line-qty:last").select();
                    break;

                case 'fast-line':
                    document.forms['salesForm']['fastli'].focus();
                    break;

                case 'new-line':
                case 'new-text-line':
                    $(".doc-line-desc:last").focus();
                    break;

                case 'set-customer':
                    $("#findProductInput").focus();
                    break;
            }

            // si la acción no es eliminar la línea y,
            // si no hay foco, establecemos el foco si tenemos el name del input donde se estaba escribiendo
            if (document.forms['salesForm']['action'].value !== 'rm-line'
                && document.activeElement.name === undefined && keyupInputName !== null) {
                let focusInput = $('input[name="' + keyupInputName + '"]');
                let focusLength = focusInput.val().length;
                let focusType = focusInput[0].type;
                // para establecer el cursor al final de input el type debe ser text
                if (focusType !== 'text') {
                    focusInput[0].type = 'text';
                }
                focusInput.focus();
                focusInput[0].setSelectionRange(focusLength, focusLength);
                focusInput[0].type = focusType;
                keyupInputName = null;
            }

            findProduct();
        }).catch(function (error) {
            alert('error');
            console.warn(error);
            animateSpinner('remove', false);
        });

        return false;
    }

    async function salesFormActionWait(action, selectedLine, event) {
        if (event.keyCode === 9) {
            // si se pulsa tabulador no hacemos nada
            return false;
        }

        // usamos un contador y un temporizador para solamente procesar la última llamada
        waitCounter++;
        let waitNum = waitCounter;
        await new Promise(r => setTimeout(r, 300));
        if (waitNum < waitCounter) {
            return false;
        }

        // obtenemos el name del input si cumple la condición de pulsado
        if ($(event.target).is('input') && ['keyup', 'keypress', 'change'].includes(event.type)) {
            keyupInputName = event.target.name;
        }

        console.log('waitNum: ' + waitNum);
        return salesFormAction(action, selectedLine)
    }

    function salesFormSave(action, selectedLine) {
        animateSpinner('add');
        setOrdenLines();

        document.forms['salesForm']['action'].value = action;
        document.forms['salesForm']['selectedLine'].value = selectedLine;

        const formData = new FormData(document.forms['salesForm']);
        const plainFormData = Object.fromEntries(formData.entries());
        const formDataJsonString = JSON.stringify(plainFormData);

        let data = new FormData();
        data.append('action', action);
        data.append('code', document.forms['salesForm']['code'].value);
        data.append('multireqtoken', document.forms['salesForm']['multireqtoken'].value);
        data.append('selectedLine', document.forms['salesForm']['selectedLine'].value);
        data.append('data', formDataJsonString);
        console.log(data);

        fetch('{{ fsc.url() }}', {
            method: 'POST',
            body: data
        }).then(function (response) {
            if (response.ok) {
                return response.json();
            }
            animateSpinner('remove', true);
            return Promise.reject(response);
        }).then(function (data) {
            console.log(data);
            if (Array.isArray(data.messages)) {
                data.messages.forEach(item => alert(item.message));
            }
            if (data.ok) {
                window.location.replace(data.newurl);
            } else {
                animateSpinner('remove', true);
            }
        }).catch(function (error) {
            alert('error');
            console.warn(error);
            animateSpinner('remove', false);
        });

        return false;
    }

    function salesLineTotalWithTaxes(id) {
        const total = parseFloat(prompt('{{ trans('total-with-taxes') }}').replace(',', '.')) || 0;
        const dtopor = parseFloat(document.forms['salesForm']['dtopor_' + id].value) || 0;
        const dtopor2 = parseFloat(document.forms['salesForm']['dtopor2_' + id].value) || 0;
        const iva = parseFloat(document.forms['salesForm']['iva_' + id].value) || 0;
        const recargo = document.forms['salesForm']['recargo_' + id] ? parseFloat(document.forms['salesForm']['recargo_' + id].value) || 0 : 0;
        const irpf = parseFloat(document.forms['salesForm']['irpf_' + id].value) || 0;
        const cantidad = parseFloat(document.forms['salesForm']['cantidad_' + id].value) || 0;
        if (total <= 0) {
            alert('total > 0');
        } else if (cantidad <= 0) {
            alert('cantidad > 0');
        } else {
            let pvpSinDto = (100 * total / cantidad) / (100 + iva + recargo - irpf);
            let pvp = 10000 * pvpSinDto / ((100 - dtopor) * (100 - dtopor2));
            document.forms['salesForm']['pvpunitario_' + id].value = Math.round(pvp * 100000) / 100000;
            salesFormAction('recalculate', '0');
        }
    }

    function salesLineTotalWithoutTaxes(id) {
        const total = parseFloat(prompt('{{ trans('net') }}').replace(',', '.')) || 0;
        const dtopor = parseFloat(document.forms['salesForm']['dtopor_' + id].value) || 0;
        const dtopor2 = parseFloat(document.forms['salesForm']['dtopor2_' + id].value) || 0;
        const cantidad = parseFloat(document.forms['salesForm']['cantidad_' + id].value) || 0;
        if (total <= 0) {
            alert('total > 0');
        } else if (cantidad <= 0) {
            alert('cantidad > 0');
        } else {
            let pvpSinDto = (100 * total / cantidad) / 100;
            let pvp = 10000 * pvpSinDto / ((100 - dtopor) * (100 - dtopor2));
            document.forms['salesForm']['pvpunitario_' + id].value = Math.round(pvp * 100000) / 100000;
            salesFormAction('recalculate', '0');
        }
    }

    function setOrdenLines() {
        let orderInputs = $("input[name^='orden_']");
        let count = orderInputs.length * 10;
        orderInputs.each(function (index) {
            $(this).val(count - (index * 10));
        });
    }

    function sortableEnable() {
        $("#salesFormLines").sortable({
            update: function (event, ui) {
                setOrdenLines();
            }
        });
        $("#salesFormLines").sortable("option", "items", "> .fs-line");
        $("#salesFormLines").sortable("option", "disabled", false);
        $("#salesFormLines").sortable("option", "cursor", "move");
        $("#salesFormLines").sortable("option", "cancel", "null");
        $("#salesFormLines").sortable("option", "cancel", ".titles");
        $("#salesFormLines").sortable("option", "axis", "y");

        $("#salesFormLines .fs-line").css('cursor', 'grab');
        $("#salesFormLines .fs-line :input").css('cursor', 'grab');

        $("#salesFormLines").disableSelection();
    }

    function sortableDisable() {
        $("#salesFormLines").sortable("disable");

        $("#salesFormLines .fs-line").css('cursor', 'default');
        $("#salesFormLines .fs-line :input").css('cursor', 'default');
    }

    // creamos los inputs para que se envíen por post
    // con el resto de campos del formulario
    function prepareForm(action, inputs) {
        // creamos un input para cada elemento del array con clave => valor
        if (inputs && typeof inputs === 'object') {
            for (const [key, value] of Object.entries(inputs)) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = key;
                input.value = value;
                document.forms['salesForm'].appendChild(input);

                // cambiamos la forma de pago para que coincida con la de los recibos y se envíe por el formulario
                if (key === 'paid-payment-modal') {
                    $('#payment-methods').children('select').val(value);
                }
            }

            salesFormSave(action, 0);
        }
    }

    $(document).on('keyup', '.doc-line-desc', function (e) {
        while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
            $(this).height($(this).height() + 1);
            if ($(this).height() > 200) {
                break;
            }
        }
    });

    {% if model.editable %}
    let sortable = false;

    $(document).on('click', '#sortableBtn', function () {
        if (sortable) {
            sortableDisable();
            sortable = false;
            $(this).removeClass('btn-secondary').addClass('btn-light');
        } else {
            sortableEnable();
            sortable = true;
            $(this).removeClass('btn-light').addClass('btn-secondary');
        }
    });
    {% endif %}

    $(document).ready(function () {
        findProduct();

        if (document.forms['salesForm']['codcliente'].value === '') {
            $('#btnFindCustomerModal').click();
        }

        $("#findCustomerInput").autocomplete({
            autoFocus: true,
            source: function (request, response) {
                $.ajax({
                    method: "POST",
                    url: '{{ fsc.url() }}',
                    data: {action: 'find-customer', term: request.term},
                    dataType: "json",
                    success: function (results) {
                        response(results);
                    },
                    error: function (msg) {
                        alert(msg.status + " " + msg.responseText);
                    }
                });
            },
            select: function (event, ui) {
                if (ui.item.key !== null) {
                    const value = ui.item.value.split(" | ");
                    if (value.length > 1) {
                        document.forms['salesForm']['codcliente'].value = value[0];
                        ui.item.value = value[1];
                    }
                    $("#findCustomerModal").modal("hide");
                    salesFormAction("set-customer", "0");
                }
            },
            open: function (event, ui) {
                $(this).autocomplete('widget').css('z-index', 1500);
                return false;
            }
        });
    });
</script>

<form name="salesForm" method="post">
    {{ formToken() }}
    <input type="hidden" name="action"/>
    <input type="hidden" name="code" value="{{ model.primaryColumnValue() }}"/>
    <input type="hidden" name="selectedLine"/>
    <input type="hidden" name="columnView" value="{{ settings('default', 'columnetosubtotal', 'subtotal') }}"/>
    {{ fsc.renderSalesForm(model, model.getLines()) | raw }}
</form>