click para moverse del menu

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/viewPresupuestoclienteForm.php

@@ -29,7 +29,7 @@
 
       <div class="bs-stepper-header">
 
-        <div class="step active" data-target="#datos-generales">
+        <div class="step active titulos-menu" data-target="#datos-generales">
           <button type="button" class="step-trigger" aria-selected="false" disabled="disabled">
             <span class="bs-stepper-circle"><i class="ti ti-info-circle ti-sm"></i></span>
             <span class="bs-stepper-label">
@@ -38,7 +38,7 @@
           </button>
         </div>
 
-        <div class="step" data-target="#interior-libro">
+        <div class="step titulos-menu" data-target="#interior-libro">
           <button type="button" class="step-trigger" aria-selected="false" disabled="disabled">
             <span class="bs-stepper-circle"><i class="ti ti-book ti-sm"></i></span>
             <span class="bs-stepper-label">
@@ -47,7 +47,7 @@
           </button>
         </div>
 
-        <div class="step" data-target="#cubierta-libro">
+        <div class="step titulos-menu" data-target="#cubierta-libro">
           <button type="button" class="step-trigger" aria-selected="false" disabled="disabled">
             <span class="bs-stepper-circle"><i class="ti ti-books ti-sm"></i></span>
             <span class="bs-stepper-label">
@@ -56,7 +56,7 @@
           </button>
         </div>
 
-        <div class="step" data-target="#direcciones-libro">
+        <div class="step titulos-menu" data-target="#direcciones-libro">
           <button type="button" class="step-trigger" aria-selected="false" disabled="disabled">
             <span class="bs-stepper-circle"><i class="ti ti-map-pins ti-sm"></i></span>
             <span class="bs-stepper-label">
@@ -65,7 +65,7 @@
           </button>
         </div>
 
-        <div class="step" data-target="#resumen-libro">
+        <div class="step titulos-menu" data-target="#resumen-libro">
           <button type="button" class="step-trigger" aria-selected="false" disabled="disabled">
             <span class="bs-stepper-circle"><i class="ti ti-checkbox ti-sm"></i></span>
             <span class="bs-stepper-label">

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

@@ -5,7 +5,9 @@ import tarjetaTiradasPrecio from './tarjetaTiradasPrecio.js';
 class DatosGenerales {
 
     constructor(domItem, wizardForm, validatorStepper) {
+
         this.domItem = domItem;
+        this.allowNext = true;
 
         this.wizardStep = wizardForm.querySelector('#datos-generales');
         this.validatorStepper = validatorStepper;
@@ -367,6 +369,7 @@ class DatosGenerales {
                 submitButton: new FormValidation.plugins.SubmitButton()
             }
         }).on('core.form.valid', () => {
+            if (this.allowNext)
                 stepper.next();
         });
     }

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

@@ -12,6 +12,7 @@ class Direcciones {
         this.domItem = domItem;
         this.wizardStep = wizardForm.querySelector('#direcciones-libro');
         this.validatorStepper = validatorStepper;
+        this.allowNext = true;
 
         this.unidadesAdd = this.domItem.find('#unidadesEnvio');
         this.btnAdd = this.domItem.find('#insertarDireccion');
@@ -175,6 +176,7 @@ class Direcciones {
                 submitButton: new FormValidation.plugins.SubmitButton()
             }
         }).on('core.form.valid', () => {
+            if (this.allowNext)
                 stepper.next();
         });
     }

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

@@ -1,7 +1,9 @@
 class DisenioCubierta {
 
     constructor(domItem, wizardForm, validatorStepper) {
+        
         this.domItem = domItem;
+        this.allowNext = true;
 
         this.wizardStep = wizardForm.querySelector('#cubierta-libro');
         this.validatorStepper = validatorStepper;
@@ -313,6 +315,7 @@ class DisenioCubierta {
                 submitButton: new FormValidation.plugins.SubmitButton()
             }
         }).on('core.form.valid', () => {
+            if (this.allowNext)
                 stepper.next();
         });
     }

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

@@ -5,6 +5,7 @@ class DisenioInterior {
 
         this.wizardStep = wizardForm.querySelector('#interior-libro');
         this.validatorStepper = validatorStepper;
+        this.allowNext = true;
 
         this.disenioInterior = this.domItem.find(".disenio-interior");
         this.divPapelInterior = this.domItem.find("#divPapelInterior");
@@ -364,6 +365,7 @@ class DisenioInterior {
                 submitButton: new FormValidation.plugins.SubmitButton()
             }
         }).on('core.form.valid', () => {
+            if (this.allowNext)
                 stepper.next();
         });
     }

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

@@ -35,6 +35,8 @@ class PresupuestoCliente {
 
         this.divTiradasPrecios = $("#divTiradasPrecio");
 
+        this.titulosMenu = $(".titulos-menu");
+
         this.datos = {};
         this.ajax_calcular = new Ajax('/presupuestocliente/calcular',
             {}, this.datos,
@@ -65,6 +67,8 @@ class PresupuestoCliente {
         this.btnPrev.on('click', this.#prevtStep.bind(this));
         this.btnSave.on('click', this.#savePresupuesto.bind(this));
 
+        this.titulosMenu.on('click', this.#handleTitulosMenu.bind(this));
+
         if (window.location.href.includes("edit")) {
 
             this.#cargarPresupuesto();
@@ -242,6 +246,136 @@ class PresupuestoCliente {
     }*/
 
 
+    #handleTitulosMenu(event) {
+
+        $('.titulos-menu').removeClass('crossed');
+
+        const nextElement = $(event.target).attr('data-target')
+        const currentElement = $('.dstepper-block.active').attr('id');
+
+        if (currentElement === nextElement) {
+            return;
+        }
+
+        if (currentElement !== 'resumen-libro') {
+            this.#validateCurrentForm(currentElement, nextElement);
+        }
+        else {
+            this.#goToForm(nextElement);
+        }
+    }
+
+    #goToForm(form) {
+        
+        switch (form) {
+            case '#datos-generales':
+                this.validationStepper.to(1);
+                break;
+
+            case '#interior-libro':
+                this.validationStepper.to(2);
+                break;
+
+            case '#cubierta-libro':
+                this.validationStepper.to(3);
+                break;
+
+            case '#direcciones-libro':
+                this.validationStepper.to(4);
+                break;
+
+            case '#resumen-libro':
+                this.validationStepper.to(5);
+                break;
+
+            default:
+                break;
+        }
+    }
+
+
+    #validateCurrentForm(form, nextForm) {
+
+        switch (form) {
+            case 'datos-generales':
+                this.datosGenerales.allowNext = false;
+                validateForm(this.datosGenerales.formValidation).then((status) => {
+                    if (status !== 'Valid') {
+                        this.datosGenerales.allowNext = true;
+                        return false;
+                    }
+                    this.#goToForm(nextForm);
+                    this.datosGenerales.allowNext = true;
+                    return true;
+                }).catch(error => {
+                    this.datosGenerales.allowNext = true;
+                    console.error('Error al validar:', error);
+                    return false;
+                });
+                break;
+
+            case 'interior-libro':
+                this.disenioInterior.allowNext = false;
+                validateForm(this.disenioInterior.formValidation).then((status) => {
+                    if (status !== 'Valid') {
+                        this.disenioInterior.allowNext = true;
+                        return false;
+                    }
+                    this.#goToForm(nextForm);
+                    this.disenioInterior.allowNext = true;
+                    return true;
+                }
+                ).catch(error => {
+                    this.disenioInterior.allowNext = true;
+                    console.error('Error al validar:', error);
+                    return false;
+                });
+                break;
+
+            case 'cubierta-libro':
+                this.disenioCubierta.allowNext = false;
+                validateForm(this.disenioCubierta.formValidation).then((status) => {
+                    if (status !== 'Valid') {
+                        this.disenioCubierta.allowNext = true;
+                        return false;
+                    }
+                    this.#goToForm(nextForm);
+                    this.disenioCubierta.allowNext = true;
+                    return true;
+                }
+                ).catch(error => {
+                    this.disenioCubierta.allowNext = true;
+                    console.error('Error al validar:', error);
+                    return false;
+                });
+                break;
+
+            case 'direcciones-libro':
+                this.direcciones.allowNext = false;
+                validateForm(this.direcciones.formValidation).then((status) => {
+                    if (status !== 'Valid') {
+                        this.direcciones.allowNext = true;
+                        return false;
+                    }
+                    this.#goToForm(nextForm);
+                    this.direcciones.allowNext = true;
+                    return true;
+                }
+                ).catch(error => {
+                    this.direcciones.allowNext = true;
+                    console.error('Error al validar:', error);
+                    return false;
+                });
+                break;
+
+            default:
+                return false;
+        }
+    }
+
+
+
+
     stepperHandler() {
 
         const element = $('.fv-plugins-bootstrap5.fv-plugins-framework.active');
@@ -546,6 +680,16 @@ class PresupuestoCliente {
 }
 
 
+async function validateForm(formValidation) {
+    try {
+        const validationResult = await formValidation.validate();
+        return validationResult;
+    } catch (error) {
+        console.error('Error durante la validación:', error);
+        throw error;
+    }
+}
+
 
 function isValid(value) {
     if (value === null || value === undefined || value === '') {