problema con los custom radiobutons

httpdocs/assets/js/safekat/pages/presupuestoCliente/datosGenerales.js

@@ -19,6 +19,9 @@ class DatosGenerales {
         this.anchoPersonalizado = this.domItem.find("#papelFormatoAncho");
         this.altoPersonalizado = this.domItem.find("#papelFormatoAlto");
 
+        this.fresado = $(this.domItem.find("#fresado")[0]);
+        this.cosido = $(this.domItem.find("#cosido")[0]);
+
         this.tiposLibro = this.domItem.find(".tipo-libro");
 
         this.paginas = this.domItem.find("#paginas");
@@ -313,6 +316,14 @@ class DatosGenerales {
 
         element.closest('.tipo-libro').toggleClass('selected');
         element.closest('.image-presupuesto').toggleClass('selected');
+
+        if(this.fresado.hasClass('selected') || this.cosido.hasClass('selected')){
+            $('#tapaDuraLomoRedondo').removeClass('d-none');
+        }
+        else{
+            $('#tapaDuraLomoRedondo').addClass('d-none');
+            $('#tapaDuraLomoRedondo').removeClass('selected');
+        }
     }
 
     #handlePaginas() {

httpdocs/assets/js/safekat/pages/presupuestoCliente/disenioCubierta.js

@@ -0,0 +1,498 @@
+class DisenioCubierta {
+
+    constructor(domItem, wizardForm, validatorStepper) {
+        this.domItem = domItem;
+
+        this.wizardStep = wizardForm.querySelector('#cubierta-libro');
+        this.validatorStepper = validatorStepper;
+
+        this.disenioCubierta = this.domItem.find(".tipo-cubierta");
+        this.solapasCubierta = this.domItem.find(".solapas-cubierta");
+        this.papelCubierta = this.domItem.find(".papel-cubierta");
+
+        this.divSolapas = this.domItem.find("#divSolapasCubierta");
+        this.divConfigTapaDura = this.domItem.find("#divConfigTapaDura");
+
+        this.tapaBlanda = this.domItem.find("#tapaBlanda");
+        this.tapaDuraLomoRecto = this.domItem.find("#tapaDura");
+        this.tapaDuraLomoRedondo = this.domItem.find("#tapaDuraLomoRedondo");
+
+        this.sinSolapas = this.domItem.find("#solapasCubiertaNo");
+        this.conSolapas = this.domItem.find("#solapasCubiertaSi");
+        this.divTamanioSolapas = this.domItem.find("#divTamanioSolapas");
+        this.tamanioSolapasCubierta = this.domItem.find("#solapasCubierta");
+
+        this.cartulinaEstucada = this.domItem.find("#cartulinaEstucada");
+        this.estucadoMate = this.domItem.find("#estucadoMate");
+
+        this.divGramajeCubierta = this.domItem.find("#divGramajeCubierta");
+        this.gramaje170 = $(this.domItem.find("#divGramaje170Cubierta"));
+        this.gramaje240 = $(this.domItem.find("#divGramaje240Cubierta"));
+        this.gramaje270 = $(this.domItem.find("#divGramaje270Cubierta"));
+        this.gramaje300 = $(this.domItem.find("#divGramaje300Cubierta"));
+        this.gramaje350 = $(this.domItem.find("#divGramaje350Cubierta"));
+
+        this.initValidation();
+
+        // Creamos un nuevo observador que detecta cambios en los atributos
+        this.observer = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    const targetElement = mutation.target;
+                    // check if targetElement has class 'selected'
+                    if (targetElement.classList.contains('tipo-cubierta')) {
+                        this.#handleMenuTipoCubierta();
+                    }
+                    else if (targetElement.classList.contains('solapas-cubierta')) {
+                        this.#handleMenuSolapas();
+                    }
+                }
+            });
+        });
+    }
+
+
+    init() {
+
+        // Eventos
+        this.disenioCubierta.on('click', this.#handleDisenioCubierta.bind(this));
+        this.solapasCubierta.on('click', this.#handleSolapasCubierta.bind(this));
+        this.papelCubierta.on('click', this.#handlePapelCubierta.bind(this));
+        this.tamanioSolapasCubierta.on('change', this.#handleTamanioSolapas.bind(this));
+
+        // Observadores
+        this.observer.observe(this.tapaBlanda[0], { attributes: true });
+        this.observer.observe(this.tapaDuraLomoRecto[0], { attributes: true });
+        this.observer.observe(this.tapaDuraLomoRedondo[0], { attributes: true });
+        this.observer.observe(this.cartulinaEstucada[0], { attributes: true });
+        this.observer.observe(this.conSolapas[0], { attributes: true });
+        this.observer.observe(this.sinSolapas[0], { attributes: true });
+    }
+
+    initValidation() {
+
+        const stepper = this.validatorStepper;
+
+        this.formValidation = FormValidation.formValidation(this.wizardStep, {
+            fields: {
+                div_impresion_interior: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divImpresionInterior = $('#divImpresionInterior'); // Selecciona el div
+
+                                divImpresionInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.disenio-interior.selected').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    divImpresionInterior.append(`
+                                        <div class="fv-plugins-message-container invalid-feedback">
+                                            <div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
+                                                ${window.translations["validation"].disenio_interior}
+                                            </div>
+                                        </div>
+                                    `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                div_papel_interior: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divPapelInterior = $('#divPapelInterior'); // Selecciona el div
+
+                                divPapelInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.papel-interior.selected').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    divPapelInterior.append(`
+                                        <div class="fv-plugins-message-container invalid-feedback">
+                                            <div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
+                                                ${window.translations["validation"].papel_interior}
+                                            </div>
+                                        </div>
+                                    `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                div_gramaje_interior: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divGramajeInterior = $('#divGramajeInterior'); // Selecciona el div
+                                if ($("#divGramajeInterior").hasClass("d-none")) return true;
+
+                                divGramajeInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.check-interior-gramaje:checked').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    divGramajeInterior.append(`
+                                    <div class="fv-plugins-message-container invalid-feedback">
+                                        <div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
+                                            ${window.translations["validation"].gramaje_interior}
+                                        </div>
+                                    </div>
+                                `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                div_impresion_interior_color: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divImpresionInterior = $('#divImpresionInteriorColor'); // Selecciona el div
+                                if (divImpresionInterior.hasClass("d-none")) return true;
+
+                                divImpresionInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.disenio-interior-color.selected').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    divImpresionInterior.append(`
+                                        <div class="fv-plugins-message-container invalid-feedback">
+                                            <div data-field="div_impresion_interior_color" data-validator="callback" style="margin-top: 50px;">
+                                                ${window.translations["validation"].disenio_interior}
+                                            </div>
+                                        </div>
+                                    `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                div_papel_interior_color: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divPapelInterior = $('#divPapelInteriorColor'); // Selecciona el div
+                                if (divPapelInterior.hasClass("d-none")) return true;
+
+                                divPapelInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.papel-interior.selected').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    divPapelInterior.append(`
+                                        <div class="fv-plugins-message-container invalid-feedback">
+                                            <div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
+                                                ${window.translations["validation"].papel_interior}
+                                            </div>
+                                        </div>
+                                    `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                div_gramaje_interior_color: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divGramajeInterior = $('#divGramajeInteriorColor'); // Selecciona el div
+                                if ($("#divGramajeInterior").hasClass("d-none")) return true;
+
+                                divGramajeInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.check-interior-gramaje:checked').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    divGramajeInterior.append(`
+                                    <div class="fv-plugins-message-container invalid-feedback">
+                                        <div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
+                                            ${window.translations["validation"].gramaje_interior}
+                                        </div>
+                                    </div>
+                                `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+            },
+            plugins: {
+                trigger: new FormValidation.plugins.Trigger(),
+                bootstrap5: new FormValidation.plugins.Bootstrap5({
+                    // Use this for enabling/changing valid/invalid class
+                    // eleInvalidClass: '',
+                    eleValidClass: '',
+                    rowSelector: function (field, ele) {
+                        // field is the field name
+                        // ele is the field element
+                        switch (field) {
+                            case 'div_impresion_interior':
+                            case 'div_papel_interior':
+                            case 'div_gramaje_interior':
+                            case 'div_impresion_interior_color':
+                            case 'div_papel_interior_color':
+                            case 'div_gramaje_interior_color':
+                                return '.col-sm-10';
+                            default:
+                                return '.col-sm-3';
+                        }
+                    }
+                }),
+                autoFocus: new FormValidation.plugins.AutoFocus(),
+                submitButton: new FormValidation.plugins.SubmitButton()
+            }
+        }).on('core.form.valid', () => {
+            stepper.next();
+        });
+    }
+
+
+    #handleDisenioCubierta(event) {
+        // Accede al ID del elemento que disparó el evento
+        const element = $(event.target);
+
+        let class2Find = '.tipo-cubierta';
+
+        let containers = element.closest(class2Find).parent().find(class2Find);
+        for (let container of containers) {
+            if (container != element.closest(class2Find)[0]) {
+                $(container).removeClass('selected');
+                $(container).find('.image-presupuesto').removeClass('selected');
+            }
+        }
+
+        element.closest(class2Find).toggleClass('selected');
+        element.closest('.image-presupuesto').toggleClass('selected');
+
+        $(".papel-cubierta").removeClass("selected");
+
+        if(this.tapaBlanda.hasClass("selected")){
+            this.cartulinaEstucada.removeClass("d-none");
+            this.divGramajeCubierta.addClass("d-none");
+        }
+        else{
+            this.cartulinaEstucada.addClass("d-none");
+            this.estucadoMate.addClass("selected");
+            this.divGramajeCubierta.removeClass("d-none");
+            this.gramaje170.removeClass("d-none");
+            this.gramaje170.closest(".checkbox-presupuesto-container").addClass("checked");
+            this.gramaje240.addClass("d-none");
+            this.gramaje270.addClass("d-none");
+            this.gramaje300.addClass("d-none");
+            this.gramaje350.addClass("d-none");
+        }
+    }
+
+
+    #handleSolapasCubierta(event) {
+        // Accede al ID del elemento que disparó el evento
+        const element = $(event.target);
+
+        let class2Find = '.solapas-cubierta';
+
+        let containers = element.closest(class2Find).parent().find(class2Find);
+        for (let container of containers) {
+            if (container != element.closest(class2Find)[0]) {
+                $(container).removeClass('selected');
+                $(container).find('.image-presupuesto').removeClass('selected');
+            }
+        }
+
+        element.closest(class2Find).toggleClass('selected');
+        element.closest('.image-presupuesto').toggleClass('selected');
+    }
+
+
+    #handlePapelCubierta(event) {
+        // Accede al ID del elemento que disparó el evento
+        const element = $(event.target);
+
+        let class2Find = '.papel-cubierta';
+
+        let containers = element.closest(class2Find).parent().find(class2Find);
+        for (let container of containers) {
+            if (container != element.closest(class2Find)[0]) {
+                $(container).removeClass('selected');
+                $(container).find('.image-presupuesto').removeClass('selected');
+            }
+        }
+
+        element.closest(class2Find).toggleClass('selected');
+        element.closest('.image-presupuesto').toggleClass('selected');
+    }
+
+    #handleMenuTipoCubierta(){
+
+        if(this.tapaBlanda.hasClass("selected")){
+            this.divSolapas.removeClass("d-none");
+            this.divConfigTapaDura.addClass("d-none");
+        }
+        else if(this.tapaDuraLomoRecto.hasClass("selected") || this.tapaDuraLomoRedondo.hasClass("selected")){
+            this.solapasCubierta.removeClass("selected");
+            this.divSolapas.addClass("d-none");
+            this.divConfigTapaDura.removeClass("d-none");
+        }
+        else{
+            this.divSolapas.addClass("d-none");
+            this.divConfigTapaDura.addClass("d-none");
+        }
+    }
+
+
+    #handleMenuSolapas(){
+            
+        if(this.conSolapas.hasClass("selected")){
+            this.divTamanioSolapas.removeClass("d-none");
+        }
+        else{
+            this.divTamanioSolapas.addClass("d-none");
+        }
+    }
+
+
+    #handleTamanioSolapas() {
+
+        const min = parseInt(this.tamanioSolapasCubierta[0].min);
+        const max = parseInt(this.tamanioSolapasCubierta[0].max);
+
+        if (this.tamanioSolapasCubierta.val() < min || this.tamanioSolapasCubierta.val() == '' || isNaN(this.tamanioSolapasCubierta.val())) {
+            this.tamanioSolapasCubierta.val(min);
+        }
+
+        else if (this.tamanioSolapasCubierta.val() > max)
+            this.tamanioSolapasCubierta.val(max);
+    }
+
+
+    #handleUpdateGramaje() {
+
+        let showGramaje = false;
+
+        $(".check-interior-gramaje ").prop("checked", false);
+
+        if (this.negroEstandar.hasClass("selected") || this.colorEstandar.hasClass("selected")) {
+
+            if (this.offsetBlanco.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.removeClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.removeClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesado.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.removeClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesadoVolumen.hasClass("selected")) {
+                this.gramaje70.removeClass("d-none");
+                this.gramaje80.addClass("d-none");
+                this.gramaje90.addClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.estucadoMate.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.addClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.removeClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+        }
+
+        else if (this.negroPremium.hasClass("selected") || this.colorPremium.hasClass("selected")) {
+
+            if (this.offsetBlanco.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.removeClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.removeClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.removeClass("d-none");
+                this.gramaje170.removeClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesado.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.removeClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.removeClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesadoVolumen.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.addClass("d-none");
+                this.gramaje90.addClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.estucadoMate.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.addClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.removeClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.removeClass("d-none");
+                this.gramaje150.removeClass("d-none");
+                this.gramaje170.removeClass("d-none");
+                showGramaje = true;
+            }
+        }
+
+        if ($("#divGramajeInterior").hasClass("d-none") && showGramaje) {
+            $("#divGramajeInterior").removeClass("d-none");
+        }
+        else if (!showGramaje) {
+            $("#divGramajeInterior").addClass("d-none");
+        }
+    }
+
+
+    
+}
+
+
+export default DisenioCubierta;

httpdocs/assets/js/safekat/pages/presupuestoCliente/disenioInterior.js

@@ -318,6 +318,17 @@ class DisenioInterior {
 
         element.closest(class2Find).toggleClass('selected');
         element.closest('.image-presupuesto').toggleClass('selected');
+
+        if($('#fresado').hasClass('selected')) {
+            if(this.estucadoMate.hasClass('selected') || this.estucadoMate_color.hasClass('selected')) {
+                $('#tapaDuraLomoRedondo').addClass('d-none');
+                $('#tapaDura').removeClass('d-none');
+            }
+            else{
+                $('#tapaDuraLomoRedondo').removeClass('d-none');
+                $('#tapaDura').addClass('d-none');
+            }
+        }
     }
 
     #handleUpdateGramaje() {

httpdocs/assets/js/safekat/pages/presupuestoCliente/presupuestoCliente.js

@@ -1,5 +1,6 @@
 import DatosGenerales from './datosGenerales.js';
 import DisenioInterior from './disenioInterior.js';
+import DisenioCubierta from './disenioCubierta.js';
 import Ajax from '../../components/ajax.js';
 
 class PresupuestoCliente {
@@ -19,6 +20,7 @@ class PresupuestoCliente {
 
         this.datosGenerales = new DatosGenerales($("#datos-generales"), this.clientePresupuestoWizard, this.validationStepper);
         this.disenioInterior = new DisenioInterior($("#interior-libro"), this.clientePresupuestoWizard, this.validationStepper);
+        this.disenioCubierta = new DisenioCubierta($("#cubierta-libro"), this.clientePresupuestoWizard, this.validationStepper);
     }
 
 
@@ -36,6 +38,7 @@ class PresupuestoCliente {
 
         this.datosGenerales.init();
         this.disenioInterior.init();
+        this.disenioCubierta.init();
 
         this.RELLENAR_PRESUPUESTO();
 
@@ -43,7 +46,10 @@ class PresupuestoCliente {
 
 
     RELLENAR_PRESUPUESTO() {
+
         $("#titulo").val("Titulo del libro");
+        $("#titulo").trigger('change');
+
         const clienteId = $("#clienteId");
         const newOption = new Option("Cliente 1", "1", true, true);
         clienteId.append(newOption).trigger('change');
@@ -113,26 +119,8 @@ class PresupuestoCliente {
     }
 
     #prevtStep() {
-        switch (this.validationStepper._currentIndex) {
-            case 4:
-                validationStepper.previous();
-                break;
-
-            case 3:
-                validationStepper.previous();
-                break;
-
-            case 2:
-                validationStepper.previous();
-                break;
-
-            case 1:
-                this.validationStepper.previous();
-                break;
-
-            default:
-                break;
-        }
+        if(this.validationStepper._currentIndex >= 1 && this.validationStepper._currentIndex <= 4)
+            this.validationStepper.previous();
     }
 }