problema muestra genericos que no

httpdocs/assets/js/safekat/common/common.js

@@ -0,0 +1,8 @@
+export function getToken()
+{        
+    const scriptUrl = new URL(import.meta.url);
+    const params = new URLSearchParams(scriptUrl.search);
+
+    const paramsObject = Object.fromEntries(params.entries());
+    return paramsObject.token;
+}

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

@@ -1,14 +1,22 @@
+import { getToken } from '../../common/common.js';
+import Ajax from '../../components/ajax.js';
+
 class DisenioInterior {
 
     constructor(domItem, wizardForm, validatorStepper) {
+
         this.domItem = domItem;
 
+        this.csrf_token = getToken();
+        this.csrf_hash = $('#mainContainer').find('input[name="' + this.csrf_token + '"]').val();
+
         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");
+        this.textoPapelInterior = this.domItem.find("#textoPapelInterior");
         this.divPapelInteriorColor = this.domItem.find("#divPapelInteriorColor");
         this.divGramajeInterior = this.domItem.find("#divGramajeInterior");
         this.papelInterior = this.domItem.find(".papel-interior");
@@ -18,11 +26,6 @@ class DisenioInterior {
         this.colorEstandar = this.domItem.find("#colorEstandar");
         this.colorPremium = this.domItem.find("#colorPremium");
 
-        this.offsetBlanco = this.domItem.find("#offsetBlanco");
-        this.offsetAhuesado = this.domItem.find("#offsetAhuesado");
-        this.offsetAhuesadoVolumen = this.domItem.find("#offsetAhuesadoVolumen");
-        this.estucadoMate = this.domItem.find("#estucadoMate");
-
         this.gramaje = this.domItem.find(".check-interior-gramaje");
         this.gramaje70 = this.domItem.find("#interiorGramaje70");
         this.gramaje80 = this.domItem.find("#interiorGramaje80");
@@ -41,11 +44,6 @@ class DisenioInterior {
         this.colorEstandar_color = this.domItem.find("#colorEstandarColor");
         this.colorPremium_color = this.domItem.find("#colorPremiumColor");
 
-        this.offsetBlanco_color = this.domItem.find("#offsetBlancoColor");
-        this.offsetAhuesado_color = this.domItem.find("#offsetAhuesadoColor");
-        this.offsetAhuesadoVolumen_color = this.domItem.find("#offsetAhuesadoVolumenColor");
-        this.estucadoMate_color = this.domItem.find("#estucadoMateColor");
-
         this.gramaje_color = this.domItem.find(".check-interior-color-gramaje");
         this.gramaje70_color = this.domItem.find("#interiorGramaje70Color");
         this.gramaje80_color = this.domItem.find("#interiorGramaje80Color");
@@ -66,6 +64,7 @@ class DisenioInterior {
 
         this.initValidation();
 
+        
         // Creamos un nuevo observador que detecta cambios en los atributos
         this.observer = new MutationObserver(mutations => {
             mutations.forEach(mutation => {
@@ -87,7 +86,6 @@ class DisenioInterior {
 
         // Eventos
         this.disenioInterior.on('click', this.#handleDisenioInterior.bind(this));
-        this.papelInterior.on('click', this.#handlePapelInterior.bind(this));
         this.disenioInterior_color.on('click', this.#handleDisenioInterior.bind(this));
         this.papelInterior_color.on('click', this.#handlePapelInterior.bind(this));
 
@@ -96,17 +94,9 @@ class DisenioInterior {
         this.observer.observe(this.negroPremium[0], { attributes: true });
         this.observer.observe(this.colorEstandar[0], { attributes: true });
         this.observer.observe(this.colorPremium[0], { attributes: true });
-        this.observer.observe(this.offsetBlanco[0], { attributes: true });
-        this.observer.observe(this.offsetAhuesado[0], { attributes: true });
-        this.observer.observe(this.offsetAhuesadoVolumen[0], { attributes: true });
-        this.observer.observe(this.estucadoMate[0], { attributes: true });
         this.observer.observe(this.colorEstandar_color[0], { attributes: true });
         this.observer.observe(this.colorPremium_color[0], { attributes: true });
-        this.observer.observe(this.offsetBlanco_color[0], { attributes: true });
-        this.observer.observe(this.offsetAhuesado_color[0], { attributes: true });
-        this.observer.observe(this.offsetAhuesadoVolumen_color[0], { attributes: true });
-        this.observer.observe(this.estucadoMate_color[0], { attributes: true });
-
+        
         this.checksGramaje.each(function () {
 
             const customOptionEL = $(this);
@@ -114,10 +104,69 @@ class DisenioInterior {
                 self.#handleClickGramaje(customOptionEL);
             });
         });
-
     }
 
 
+    updatePapeles(papeles) {
+
+        const context = this;
+        let tipo = 'negro';
+        if (this.colorEstandar.hasClass('selected'))
+            tipo = 'color';
+        else if (this.negroPremium.hasClass('selected'))
+            tipo = 'negrohq';
+        else if (this.colorPremium.hasClass('selected'))
+            tipo = 'colorhq';
+
+        new Ajax('/papelesgenericos/getpapelgenericocliente',
+            {
+                [this.csrf_token]: this.csrf_hash,
+                tipo: tipo,
+                cubierta: 0,
+            },
+            {},
+            this.fillPapeles.bind(context),
+            (response) => { console.log(response); }
+        ).get();
+    }
+
+    fillPapeles(response) {
+        
+
+        this.divPapelInterior.empty()
+
+        if(response.papeles.length > 0){
+            this.textoPapelInterior.removeClass('d-none');
+        }
+        else{
+            this.textoPapelInterior.addClass("d-none");
+        }
+
+        response.papeles.forEach(papel => {
+            var container = $('<div>', {
+                class: 'custom-selector d-flex flex-column align-items-center justify-content-center'
+            });
+
+            var radioButton = $('<input>', {
+                type: 'radio',          // Tipo de input
+                name: 'calcular-presupuesto papel-interior',
+                id: papel.id,           // ID único
+                value: 'option1'        // Valor del radio button
+            });
+
+            // Crear una etiqueta para el radio button
+            var label = $('<label>', {
+                for: papel.id,
+                text: papel.nombre
+            });
+
+            radioButton.on('click', this.#handlePapelInterior.bind(this));
+            
+            container.append(radioButton).append(label);
+            $('#divPapelInterior').append(container);
+        });
+    }
+
     cargarDatos(datos, papelInteriorDiferente) {
 
         if (papelInteriorDiferente) {
@@ -151,8 +200,6 @@ class DisenioInterior {
                     $(`#divGramajeInteriorColor .gramaje-interior-color input[data-value="${datos.color.gramaje}"]`).trigger('click');
                 }, 0);
             }
-
-
         }
         else {
             if (datos.color) {
@@ -182,9 +229,8 @@ class DisenioInterior {
                     $(`#divGramajeInterior .gramaje-interior input[data-value="${datos.negro.gramaje}"]`).trigger('click');
                 }, 0);
             }
-
         }
-
+        this.updatePapeles();
 
     }
 
@@ -375,7 +421,7 @@ class DisenioInterior {
         });
     }
 
-    
+
     getIsHq() {
 
         try {
@@ -403,7 +449,7 @@ class DisenioInterior {
         this.rl_tipo_interior.removeClass('d-none');
 
         const HQ = this.getIsHq();
-        const color = $("#paginasColor").val()>0?true:false;
+        const color = $("#paginasColor").val() > 0 ? true : false;
         const papelInterior = this.getPapel(true);
         const gramajeInterior = this.getGramaje();
         if (HQ != null && papelInterior != null && gramajeInterior != null) {
@@ -537,13 +583,40 @@ class DisenioInterior {
 
         // Para recalcular el presupuesto
         element.trigger('change');
+
+        this.updatePapeles();
     }
 
 
     #handlePapelInterior(event) {
+        const context = this;
+
         // Accede al ID del elemento que disparó el evento
         const element = $(event.target);
+        const papel = element[0].id;
 
+        let tipo = 'negro';
+        if (this.colorEstandar.hasClass('selected'))
+            tipo = 'color';
+        else if (this.negroPremium.hasClass('selected'))
+            tipo = 'negrohq';
+        else if (this.colorPremium.hasClass('selected'))
+            tipo = 'colorhq';
+
+        new Ajax('/papelesimpresion/getgramajecliente',
+            {
+                [this.csrf_token]: this.csrf_hash,
+                papel: papel,
+                tipo: tipo,
+                cubierta: 0,
+            },
+            {},
+            this.fillGramajes.bind(context),
+            (response) => { console.log(response); }
+        ).get();
+    
+
+        /*
         let class2Find = '.papel-interior';
         if (element[0].closest('.image-container').id.includes('Color'))
             class2Find = '.papel-interior-color';
@@ -569,13 +642,56 @@ class DisenioInterior {
         }
 
         // Para recalcular el presupuesto
-        element.trigger('change');
+        element.trigger('change');*/
+    }
+
+    fillGramajes(response) {
+        
+
+        this.divGramajeInterior.empty()
+        let showGramaje = false;
+
+        if(response.gramajes.length <= 0){
+            return;
+        }
+
+        response.gramajes.forEach(gramaje => {
+            var container = $('<div>', {
+                class: 'custom-selector d-flex flex-column align-items-center justify-content-center gramaje-interior'
+            });
+
+            var radioButton = $('<input>', {
+                type: 'radio',          // Tipo de input
+                name: 'calcular-presupuesto',
+                id: 'gramaje_' + gramaje.id,           // ID único
+                value: 'option1'        // Valor del radio button
+            });
+
+            // Crear una etiqueta para el radio button
+            var label = $('<label>', {
+                for: "gramaje_" + gramaje.id,
+                text: gramaje.text
+            });
+
+            
+            container.append(radioButton).append(label);
+            $('#divGramajeInterior').append(container);
+
+            showGramaje = true;
+        });
+
+        if ($("#divGramajeInterior").hasClass("d-none") && showGramaje) {
+            $("#divGramajeInterior").removeClass("d-none");
+        }
+        else if (!showGramaje) {
+            $("#divGramajeInterior").addClass("d-none");
+        }
     }
 
     #handleUpdateGramaje() {
 
         let showGramaje = false;
-
+/*
         $(".check-interior-gramaje ").prop("checked", false);
         $(".check-interior-color-gramaje ").prop("checked", false);
 
@@ -688,7 +804,7 @@ class DisenioInterior {
         }
         else if (!showGramaje) {
             $("#divGramajeInterior").addClass("d-none");
-        }
+        }*/
     }