añadidos los ficheros

httpdocs/assets/js/safekat/components/select2.js

@@ -0,0 +1,64 @@
+class ClassSelect2 {
+
+    constructor(domItem, url, placeholder = "", delay = 60, text_field = 'nombre', id_field = 'id') {
+        this.domItem = domItem;
+        this.url = url;
+        this.placeholder = placeholder;
+        this.delay = delay;
+        this.text_field = text_field;
+        this.id_field = id_field;
+    }
+
+    init() {
+        
+        this.domItem.select2({
+            allowClear: false,
+            placeholder: this.placeholder,
+            ajax: {
+                url: this.url,
+                type: 'post',
+                dataType: 'json',
+                data: (params) => {
+
+                    return {
+                        id: this.id_field,
+                        text: this.text_field,
+                        searchTerm: params.term,
+                    };
+                },
+                delay: this.delay,
+                processResults: function (response) {
+                    
+                    return {
+                        results: response.menu
+                    };
+                },
+                cache: true
+            }
+        });
+    }
+
+    // Método para obtener el valor seleccionado
+    getValue() {
+        return this.domItem.val();
+    }
+
+    // Método para establecer el valor seleccionado
+    setValue(value) {
+        this.domItem.val(value).trigger('change');
+    }
+
+    // Método para oculatar el select2
+    hide() {
+        console.log(this.domItem);
+        this.domItem.select2('close'); 
+        this.domItem.next('.select2-container').hide(); 
+    }
+
+    // Método para mostrar el select2
+    show() {
+        this.domItem.next('.select2-container').show(); 
+    }
+}
+
+export default ClassSelect2;

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

@@ -0,0 +1,104 @@
+import ClassSelect from '../../components/select2.js';
+
+
+class DatosGenerales {
+
+    constructor(domItem) {
+        this.domItem = domItem;
+        this.formatoLibro = new ClassSelect($("#papelFormatoId"), '/papel-formato/menuitems', 'Seleccione formato');        
+        this.checkFormatoPersonalizado = this.domItem.find("#papelFormatoPersonalizado");
+        this.formatoPersonalizado = this.domItem.find("#formatoPersonalizado");
+
+        this.tiposLibro = this.domItem.find(".tipo-libro");
+
+        this.paginas = this.domItem.find("#paginas");
+        this.paginasNegro = this.domItem.find("#paginasNegro");
+        this.paginasColor = this.domItem.find("#paginasColor");
+        
+    }
+
+
+    init() {
+        
+        this.formatoLibro.init();
+        this.checkFormatoPersonalizado.bind('change', this.#handleFormatoLibro.bind(this));
+
+        this.tiposLibro.on('click', this.#handleTipolibro.bind(this)); 
+
+        this.domItem.find('.input-paginas').on('change', this.#handlePaginas.bind(this));
+    }
+
+
+    #handleFormatoLibro() {
+        
+        if(this.checkFormatoPersonalizado.is(':checked')) {
+            this.formatoLibro.hide();
+            this.formatoPersonalizado.show();
+        }
+        else{
+            this.formatoLibro.show();
+            this.formatoPersonalizado.hide();
+        }
+    }
+
+    #handleTipolibro(event) {
+        // Accede al ID del elemento que disparó el evento
+        const element = $(event.target);
+        
+        let containers = element.closest('.tipo-libro').parent().find('.tipo-libro');
+        for (let container of containers) {
+            if (container != element.closest('.tipo-libro')[0]) {
+                $(container).removeClass('selected');
+                $(container).find('.image-presupuesto').removeClass('selected');
+            }
+        }
+
+        element.closest('.tipo-libro').toggleClass('selected');
+        element.closest('.image-presupuesto').toggleClass('selected');
+    }
+
+    #handlePaginas(event) {
+        let paginas = this.paginas.val();
+        let paginasNegro = this.paginasNegro.val();
+        let paginasColor = this.paginasColor.val();
+
+        if (paginasNegro == '' || isNaN(paginasNegro)) {
+            paginasNegro = 0;
+        }
+        if (paginasColor == '' || isNaN(paginasColor)) {
+            paginasColor = 0;
+        }
+
+        let totalPaginas = parseInt(paginasNegro) + parseInt(paginasColor);
+        this.paginas.val(totalPaginas);
+
+        let tipos = [this.domItem.find('#fresado'),  this.domItem.find('#cosido')];
+        if (totalPaginas < 32){
+            for (let tipo of tipos) {
+                tipo.removeClass('selected');
+                tipo.find('.image-presupuesto').removeClass('selected');
+                
+                tipo.hide();
+            }
+        }
+        else{
+            for (let tipo of tipos) {
+                tipo.show();
+            }
+        }
+
+        
+        if (totalPaginas < 12 || totalPaginas > 40) {
+            this.domItem.find('#grapado').removeClass('selected');
+            this.domItem.find('#grapado').find('.image-presupuesto').removeClass('selected');
+            this.domItem.find('#grapado').hide();
+        }
+        else{
+            this.domItem.find('#grapado').show();
+        }
+    }
+
+}
+
+
+export default DatosGenerales;

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

@@ -0,0 +1,9 @@
+import DatosGenerales from './datosGenerales.js';
+
+document.addEventListener('DOMContentLoaded', function() {
+
+    let datosGenerales = new DatosGenerales($("#datos-generales"));
+    datosGenerales.init();
+    
+});
+

httpdocs/themes/vuexy/css/presupuestoCliente.css

@@ -0,0 +1,39 @@
+.image-container {
+    position: relative;
+    display: inline-block;
+    max-height: 150px;
+    max-width: 200px;
+}
+
+/* Estilo de la imagen */
+.image-container img {
+    max-width: 150px;
+    max-height: 150px;
+}
+
+/* Pseudo-elemento que muestra el tick */
+.image-container.selected::after {
+    content: '✔'; /* Símbolo de tick */
+    position: absolute;
+    top: 90px;
+    right: 25px;
+    font-size: 50px;
+    font-weight: bold;
+    color: green;
+    background-color: rgba(255, 255, 255, 0);
+    border-radius: 100%;
+    padding: 5px;
+}
+
+.image-presupuesto {
+    transition: transform 1s ease;
+}
+
+.image-presupuesto.selected {
+    --webkit-transform: rotateY(360deg);
+    --webkit-transform-style: preserve-3d;
+
+    transform: rotateY(360deg);
+    transform-style: preserve-3d;
+}
+