trabajando en la cubierta

ci4/app/Language/es/Presupuestos.php

@@ -396,7 +396,6 @@ return [
         'paginasColor' => 'El número de páginas a color debe ser un número entero mayor o igual que 0.',
         'paginasNegro' => 'El número de páginas en negro debe ser un número entero mayor o igual que 0.',
         'paginas' => 'El total de páginas tiene que ser mayor que 0.',
-        'paginas_pares' => 'El número de páginas debe ser par.',
         'tipo_libro' => 'Seleccione el tipo de libro que desea para el presupuesto.',
         'decimal' => 'El campo {field} debe contener un número decimal.',
         'integer' => 'El campo {field} debe contener un número entero.',

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

@@ -1,5 +1,4 @@
-import { getToken } from '../../common/common.js';
+import { capitalizeFirstLetter, getToken } from '../../common/common.js';
-import { capitalizeFirstLetter } from '../../common/common.js';
 
 import Ajax from '../../components/ajax.js';
 import ClassSelect from '../../components/select2.js';
@@ -265,6 +264,8 @@ class DisenioCubierta {
         this.presupuestoConfirmado = false;
         this.papelForResumen = "";
         this.gramajeForResumen = "";
+
+        this.errores = [];
     }
 
 
@@ -327,6 +328,18 @@ class DisenioCubierta {
         this.observer.observe(this.tapaDuraLomoRedondo[0], { attributes: true });
         this.observer.observe(this.conSolapas[0], { attributes: true });
         this.observer.observe(this.sinSolapas[0], { attributes: true });
+
+        this.papelGuardas.onChange(() => {
+            if (self.validateTapaDuraOptions()) {
+                self.removeError(window.translations["validation"].papel_guardas)
+            }
+        });
+
+        this.gramajeGuardas.onChange(() => {
+            if (self.validateTapaDuraOptions()) {
+                self.removeError(window.translations["validation"].gramaje_guardas)
+            }
+        });
     }
 
 
@@ -403,106 +416,47 @@ class DisenioCubierta {
 
     validate(goToNext = true) {
 
-        let errores = [];
+        this.errores = [];
 
         let continueCheck = true;
 
         // diseño cubierta
-        $('#divTipoCubierta').removeClass('is-invalid');
+        continueCheck = this.validateDisenioCubierta();
-        if ($('.tipo-cubierta.selected').length == 0) {
-            $('#divTipoCubierta').addClass('is-invalid');
-            errores.push(window.translations["validation"].tipo_cubierta);
-            continueCheck = false;
-        }
 
         // solapas cubierta
-        $('#divSolapasCubierta').removeClass('is-invalid');
+        this.validateSolapasCubierta(continueCheck);
-        if (!$('#divSolapasCubierta').hasClass("d-none") && $('.solapas-cubierta.selected').length == 0 && continueCheck) {
-            $('#divSolapasCubierta').addClass('is-invalid');
-            errores.push(window.translations["validation"].opcion_solapas);
-        }
 
         // opciones tapa dura y lomo redondo
-        $('#papelGuardas').removeClass('is-invalid');
+        this.validateTapaDuraOptions(continueCheck);
-        $('#gramajeGuardas').removeClass('is-invalid');
-        if (!$('#divConfigTapaDura').hasClass('d-none') && continueCheck) {
-            if ($('#papelGuardas').select2('data').length == 0) {
-                $('#papelGuardas').addClass('is-invalid');
-                errores.push(window.translations["validation"].papel_guardas);
-            }
-            if ($('#gramajeGuardas').select2('data').length == 0) {
-                $('#gramajeGuardas').addClass('is-invalid');
-                errores.push(window.translations["validation"].gramaje_guardas);
-            }
-        }
 
         // papel
-        $('#divPapelCubierta').removeClass('is-invalid');
+        continueCheck = this.validatePapelCubierta(continueCheck);
-        if ($('.custom-selector-papel-cubierta input[type="radio"]:checked').length == 0 && continueCheck) {
-
-            $('#divPapelCubierta').addClass('is-invalid');
-            errores.push(window.translations["validation"].papel_cubierta);
-            continueCheck = false;
-        }
-        else if (!$('#divPapelEspecialCubierta').hasClass("d-none")) {
-            if ($('#papelEspecialCubiertaSel').select2('data').length == 0 && continueCheck) {
-                $('#divPapelEspecialCubierta').addClass('is-invalid');
-                errores.push(window.translations["validation"].papel_cubierta_especial);
-                continueCheck = false;
-            }
-        }
 
         // gramaje
-        $('#divGramajeCubierta').removeClass('is-invalid');
+        this.validateGramajeCubierta(continueCheck);
-        if ($('.custom-selector-gramaje-cubierta input[type="radio"]:checked').length == 0 && continueCheck) {
-            $('#divGramajeCubierta').addClass('is-invalid');
-            errores.push(window.translations["validation"].gramaje_cubierta);
-        }
 
         // sobrecubierta
-        $('#papelSobrecubierta').removeClass('is-invalid');
+        this.validateSobrecubierta();
-        $('#gramajeSobrecubierta').removeClass('is-invalid');
-        if ($("#addSobrecubierta").prop("checked") == true) {
-            if ($('#papelSobrecubierta').select2('data').length == 0) {
-                $('#papelSobrecubierta').addClass('is-invalid');
-                errores.push(window.translations["validation"].papel_sobrecubierta);
-            }
-            if ($('#gramajeSobrecubierta').select2('data').length == 0) {
-                $('#gramajeSobrecubierta').addClass('is-invalid');
-                errores.push(window.translations["validation"].gramaje_sobrecubierta);
-            }
-        }
 
         // faja
-        $('#papelFaja').removeClass('is-invalid');
+        this.validateFaja();
-        $('#gramajeFaja').removeClass('is-invalid');
-        if ($("#addFaja").prop("checked") == true) {
-            if ($('#papelFaja').select2('data').length == 0) {
-                $('#papelFaja').addClass('is-invalid');
-                errores.push(window.translations["validation"].papel_faja);
-            }
-            if ($('#gramajeFaja').select2('data').length == 0) {
-                $('#gramajeFaja').addClass('is-invalid');
-                errores.push(window.translations["validation"].gramaje_faja);
-            }
-        }
 
         const skAlert = document.getElementById('sk-alert');
         skAlert.innerHTML = '';
-        const uniqueErrors = [...new Set(errores)];
+        this.errores = [...new Set(this.errores)];
 
-        if (uniqueErrors.length > 0) {
+        if (this.errores.length > 0) {
             const message = window.translations["validation"].fix_errors +
                 `<ul class="mb-0">
-                            ${uniqueErrors.map(err => `<li>${err}</li>`).join('')}
+                            ${this.errores.map(err => `<li>${err}</li>`).join('')}
                         </ul>`;
             popErrorAlert(message, 'sk-alert', false);
-            errores = [];
+            this.errores = [];
             return false;
         }
         else {
             document.getElementById('sk-alert').innerHTML = '';
-            errores = [];
+            this.errores = [];
             if (goToNext)
                 this.validatorStepper.next();
             else
@@ -511,6 +465,123 @@ class DisenioCubierta {
 
     }
 
+    validateDisenioCubierta() {
+
+        $('#divTipoCubierta').removeClass('is-invalid');
+        if ($('.tipo-cubierta.selected').length == 0) {
+            $('#divTipoCubierta').addClass('is-invalid');
+            this.errores.push(window.translations["validation"].tipo_cubierta);
+            return false;
+        }
+        return true;
+    }
+
+    validateSolapasCubierta(continueCheck = true) {
+
+        $('#divSolapasCubierta').removeClass('is-invalid');
+        if (!$('#divSolapasCubierta').hasClass("d-none") && $('.solapas-cubierta.selected').length == 0) {
+            $('#divSolapasCubierta').addClass('is-invalid');
+            this.errores.push(window.translations["validation"].opcion_solapas);
+            return false;
+        }
+        return true;
+    }
+
+
+    validateTapaDuraOptions(continueCheck = true) {
+
+        $('#papelGuardas').removeClass('is-invalid');
+        $('#gramajeGuardas').removeClass('is-invalid');
+        if (!continueCheck)
+            return false;
+        if (!$('#divConfigTapaDura').hasClass('d-none') && continueCheck) {
+            if ($('#papelGuardas').select2('data').length == 0) {
+                $('#papelGuardas').addClass('is-invalid');
+                this.errores.push(window.translations["validation"].papel_guardas);
+                return false;
+            }
+            if ($('#gramajeGuardas').select2('data').length == 0) {
+                $('#gramajeGuardas').addClass('is-invalid');
+                this.errores.push(window.translations["validation"].gramaje_guardas);
+                return false;
+            }
+        }
+        return true;
+    }
+
+    validatePapelCubierta(continueCheck = true) {
+
+        $('#divPapelCubierta').removeClass('is-invalid');
+        $('#divPapelEspecialCubierta').removeClass('is-invalid');
+        if (!continueCheck)
+            return false;
+        if ($('.custom-selector-papel-cubierta input[type="radio"]:checked').length == 0 && continueCheck) {
+
+            $('#divPapelCubierta').addClass('is-invalid');
+            this.errores.push(window.translations["validation"].papel_cubierta);
+            return false;
+        }
+        else if (!$('#divPapelEspecialCubierta').hasClass("d-none")) {
+            if ($('#papelEspecialCubiertaSel').select2('data').length == 0 && continueCheck) {
+                $('#divPapelEspecialCubierta').addClass('is-invalid');
+                this.errores.push(window.translations["validation"].papel_cubierta_especial);
+                return false;
+            }
+        }
+        return true;
+    }
+
+    validateGramajeCubierta(continueCheck = true) {
+
+        $('#divGramajeCubierta').removeClass('is-invalid');
+        if ($('.custom-selector-gramaje-cubierta input[type="radio"]:checked').length == 0 && continueCheck) {
+            $('#divGramajeCubierta').addClass('is-invalid');
+            this.errores.push(window.translations["validation"].gramaje_cubierta);
+            return false;
+        }
+        return true;
+    }
+
+    validateSobrecubierta() {
+
+        let noError = true;
+        $('#papelSobrecubierta').removeClass('is-invalid');
+        $('#gramajeSobrecubierta').removeClass('is-invalid');
+        if ($("#addSobrecubierta").prop("checked") == true) {
+            if ($('#papelSobrecubierta').select2('data').length == 0) {
+                $('#papelSobrecubierta').addClass('is-invalid');
+                this.errores.push(window.translations["validation"].papel_sobrecubierta);
+                noError = false;
+            }
+            if ($('#gramajeSobrecubierta').select2('data').length == 0) {
+                $('#gramajeSobrecubierta').addClass('is-invalid');
+                this.errores.push(window.translations["validation"].gramaje_sobrecubierta);
+                noError = false;
+            }
+        }
+        return noError;
+    }
+
+    validateFaja() {
+
+        let noError = true;
+        $('#papelFaja').removeClass('is-invalid');
+        $('#gramajeFaja').removeClass('is-invalid');
+        if ($("#addFaja").prop("checked") == true) {
+            if ($('#papelFaja').select2('data').length == 0) {
+                $('#papelFaja').addClass('is-invalid');
+                this.errores.push(window.translations["validation"].papel_faja);
+                noError = false;
+            }
+            if ($('#gramajeFaja').select2('data').length == 0) {
+                $('#gramajeFaja').addClass('is-invalid');
+                this.errores.push(window.translations["validation"].gramaje_faja);
+                noError = false;
+            }
+        }
+        return noError;
+    }
+
     getLomoCubierta() {
 
         const lomoRedondo = this.tapaDuraLomoRedondo.hasClass("selected");
@@ -818,6 +889,10 @@ class DisenioCubierta {
         }
 
         element.trigger('change');
+
+        if (this.validateDisenioCubierta()) {
+            this.removeError(window.translations["validation"].tipo_cubierta);
+        }
     }
 
 
@@ -839,6 +914,10 @@ class DisenioCubierta {
         element.closest('.image-presupuesto').toggleClass('selected');
 
         element.trigger('change');
+
+        if (this.validateSobrecubierta()) {
+            this.removeError(window.translations["validation"].opcion_solapas);
+        }
     }
 
 
@@ -911,6 +990,11 @@ class DisenioCubierta {
         this.papelCubierta = this.papelEspecial.getVal();
         const tapa_dura = this.tapaBlanda.hasClass("selected") ? 0 : 1;
 
+        if (this.validatePapelCubierta()) {
+            this.removeError(window.translations["validation"].papel_cubierta);
+            this.removeError(window.translations["validation"].papel_cubierta_especial);
+        }
+
         new Ajax('/configuracion/papelesgenericos/getpapelcliente',
             {
                 [this.csrf_token]: this.csrf_hash,
@@ -925,6 +1009,7 @@ class DisenioCubierta {
                 tirada: this.presupuestoCliente.datosGenerales.getTiradas()[0],
             },
             {},
+
             this.fillGramajes.bind(context),
             (response) => { console.log(response); }
         ).get();
@@ -934,8 +1019,13 @@ class DisenioCubierta {
 
     fillPapeles(response) {
 
+        const self = this;
+
         this.divPapelCubierta.empty();
         this.divGramajeCubierta.empty();
+        this.divPapelCubierta.removeClass('is-invalid');
+        this.divGramajeCubierta.removeClass('is-invalid');
+        this.divPapelEspecial.removeClass('is-invalid');    
 
         if (response.papeles.length > 0) {
             this.textoPapelCubierta.removeClass('d-none');
@@ -962,7 +1052,11 @@ class DisenioCubierta {
                 text: papel.nombre
             });
 
-            radioButton.on('click', this.#handleGramajeCubierta.bind(this));
+            radioButton.on('click', () => {
+                self.removeError(window.translations["validation"].papel_cubierta);
+                self.removeError(window.translations["validation"].papel_cubierta_especial);
+                this.#handleGramajeCubierta();
+            });
 
             container.append(radioButton).append(label);
             $('#divPapelCubierta').append(container);
@@ -1101,6 +1195,10 @@ class DisenioCubierta {
                 const element = $(event.target);
                 const gramaje = element[0].id;
 
+                /*if(this.validateGramajeCubierta()) {
+                    this.removeError(window.translations["validation"].gramaje_cubierta);
+                }*/
+
                 this.presupuestoCliente.checkForm(event);
             });
 
@@ -1171,6 +1269,21 @@ class DisenioCubierta {
         else if ($('#' + id).val() > max)
             $('#' + id).val(max);
     }
+
+    removeError(error) {
+        const hasError = this.errores.filter(err => err === error).length > 0;
+        if (hasError) {
+            // remove the item from this.errores
+            this.errores = this.errores.filter(err => err !== error);
+        }
+        if (this.errores.length == 0) {
+            document.getElementById('sk-alert').innerHTML = '';
+        }
+        else {
+            document.getElementById('sk-alert').innerHTML = document.getElementById('sk-alert').innerHTML.
+                replace(window.translations["validation"].error, '');
+        }
+    }
 }