trabajando en leer datos de tipo cubierta

This commit is contained in:
2025-10-09 21:59:59 +02:00
parent 328ff509e3
commit 6c4b63daa6
17 changed files with 573 additions and 116 deletions

View File

@ -23,10 +23,6 @@
transition: border 0.3s ease;
}
/* === Borde visible cuando está seleccionada === */
.image-container.selected {
border-color: #92b2a7;
}
/* === Imagen interna === */
.image-container img {
@ -37,6 +33,16 @@
transition: transform 0.3s ease;
}
/* Borde cuando está seleccionado, sin JS */
.image-container:has(input:checked) {
border-color: #92b2a7;
}
/* Si quieres la animación al seleccionar */
.image-container:has(input:checked) .image-presupuesto {
animation: zoomPop 800ms cubic-bezier(0.68,-0.55,0.27,1.55);
}
/* === Animación de zoom con rebote === */
.image-presupuesto.zoom-anim {
animation: zoomPop 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55);

View File

@ -7,17 +7,17 @@ class imagen_presupuesto {
this.group = data.group || ""; // Grupo al que pertenece el radio
this.texto = data.texto || ""; // Texto de la etiqueta
this.selected = data.selected || false;
this.extraClass = (data.extraClass && !(data.extraClass===undefined))? (data.extraClass + ' ') : '';
this.extraClass = (data.extraClass && !(data.extraClass === undefined)) ? (data.extraClass + ' ') : '';
this.extraData = data.extra_data || {}; // Datos extra opcionales
}
render() {
const contenedor = $('<div>', {
const contenedor = $('<label>', {
id: this.id,
class: `${this.extraClass + ' '}image-container imagen-selector${this.selected ? ' selected' : ''}`
class: `${this.extraClass + ' '}image-container imagen-selector}`
});
// Añadir atributos extra al contenedor
for (const [key, value] of Object.entries(this.extraData)) {
for (const [key, value] of Object.entries(this.extraData)) {
contenedor.attr(`data-${key}`, value);
}
contenedor.attr("data-summary-text", this.texto); // Para el resumen
@ -26,7 +26,8 @@ class imagen_presupuesto {
type: 'radio',
name: this.group,
value: this.id,
hidden: true
hidden: true,
checked: this.selected
});
@ -37,13 +38,12 @@ class imagen_presupuesto {
alt: this.alt
});
const etiqueta = $('<label>', {
for: this.id + '-img',
class: 'form-label',
const etiqueta = $('<div>', {
class: 'form-text text-center',
text: this.texto
});
contenedor.append(imagen, etiqueta);
contenedor.append(input, imagen, etiqueta);
return contenedor;
}

View File

@ -32,18 +32,18 @@ export function updatePaginas() {
export function updateTipoImpresion() {
const $selected = $('.opcion-color.selected');
const $selected = $('.opcion-color input:checked');
if ($selected.length > 0) {
const resumen = $selected.data('summary-text') || $selected.attr('id');
const resumen = $selected.closest('.opcion-color').data('summary-text') || $selected.closest('.opcion-color').attr('id');
$('#summary-tipo-interior').text(resumen);
}
}
export function updatePapelInterior() {
const $selected = $('.papel-interior.selected');
const $selected = $('.papel-interior input:checked');
if ($selected.length > 0) {
const resumen = $selected.data('summary-text') || $selected.val();
const resumen = $selected.closest('.papel-interior').data('summary-text') || $selected.closest('.papel-interior').val();
$('#summary-papel-interior').text(resumen);
}
}
@ -58,12 +58,12 @@ export function updateGramajeInterior() {
export function updateTapaCubierta(){
const $selected = $('.tapa-cubierta.selected');
const $selected = $('.tapa-cubierta input:checked');
if ($selected.length > 0) {
const resumen = $selected.data('summary-text') || $selected.attr('id');
const resumen = $selected.closest('.tapa-cubierta').data('summary-text') || $selected.closest('.tapa-cubierta').attr('id');
$('#summary-tapa-cubierta').text(resumen);
}
if($selected.attr('id') === 'tapaBlanda') {
if($selected.closest('.tapa-cubierta').attr('id') === 'tapaBlanda') {
$('.tapa-blanda-row').removeClass('d-none');
$('.tapa-dura-row').addClass('d-none');
@ -88,9 +88,9 @@ export function updateTapaCubierta(){
}
export function updatePapelCubierta() {
const $selected = $('.papel-cubierta.selected');
const $selected = $('.papel-cubierta input:checked');
if ($selected.length > 0) {
const resumen = $selected.data('summary-text') || $selected.val();
const resumen = $selected.closest('.papel-cubierta').data('summary-text') || $selected.closest('.papel-cubierta').val();
$('#summary-papel-cubierta').text(resumen);
}
}

View File

@ -0,0 +1,4 @@
import PresupuestoWizard from './wizard.js';
const app = new PresupuestoWizard({ mode: 'public' });
app.init();

View File

@ -0,0 +1,9 @@
import PresupuestoWizard from './wizard.js';
const app = new PresupuestoWizard({
mode: 'view',
readonly: true,
canSave: false,
useSessionCache: false,
});
app.init();

View File

@ -4,9 +4,16 @@ import TiradaCard from "./tirada-price-card.js";
import * as Summary from "./summary.js";
import { formateaMoneda } from "../utils.js";
class PresupuestoCliente {
export default class PresupuestoWizard {
constructor() {
constructor(options = {}) {
this.opts = Object.assign({
mode: 'public',
presupuestoId: null,
readonly: false,
canSave: false,
useSessionCache: true
}, options);
this.DEBUG = true; // Activar o desactivar el modo de depuración
@ -168,18 +175,38 @@ class PresupuestoCliente {
this.summaryTableExtras = $('#summary-servicios-extras');
}
init() {
async init() {
const root = document.getElementById('presupuesto-app');
const mode = root?.dataset.mode || 'public';
const presupuestoId = root?.dataset.id || null;
this.opts = { mode, presupuestoId };
const stored = sessionStorage.getItem("formData");
this.#initDatosGenerales();
this.#initCubierta();
if (stored) {
this.formData = JSON.parse(stored);
this.#loadDatosGeneralesData();
if (presupuestoId && mode !== 'public') {
await fetch(`/presupuesto/api/get?id=${encodeURIComponent(presupuestoId)}`, {
headers: {
'Accept': 'application/json',
}
})
.then(r => r.json())
.then(dto => {
this.formData = dto;
this.#loadDatosGeneralesData();
});
} else {
if (stored) {
this.formData = JSON.parse(stored);
this.#loadDatosGeneralesData();
}
}
this.#initCubierta();
Summary.updateEncuadernacion();
Summary.updateFormato();
Summary.updatePaginas();
@ -205,10 +232,47 @@ class PresupuestoCliente {
}
});
if (this.opts.canSave) {
$('#btn-guardar').on('click', async () => {
// compón el payload con lo que ya tienes:
const payload = {
id: this.opts.presupuestoId,
presupuesto: this.#getPresupuestoData(),
};
try {
const res = await fetch(this.opts.endpoints.save, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
}).then(r => r.json());
// feedback
Swal.fire({
icon: 'success',
title: window.languageBundle?.get('common.guardado') || 'Guardado',
timer: 1800,
showConfirmButton: false
});
// opcional: actualizar window.PRESUPUESTO_ID/resumen con el id devuelto
if (res.id) window.PRESUPUESTO_ID = res.id;
} catch (e) {
Swal.fire({ icon: 'error', title: 'Error al guardar', text: e?.message || '' });
}
});
}
// Limpiar el sessionStorage al salir de la página
window.addEventListener('beforeunload', () => {
sessionStorage.removeItem('formData');
});
}
#cacheFormData() {
sessionStorage.setItem("formData", JSON.stringify(this.formData));
if (!this.opts.useSessionCache) return;
const key = this.opts.mode === 'edit' && this.opts.presupuestoId
? `formData:edit:${this.opts.presupuestoId}`
: `formData:${this.opts.mode}`;
sessionStorage.setItem(key, JSON.stringify(this.formData));
}
#changeTab(idContenidoTab) {
@ -445,7 +509,7 @@ class PresupuestoCliente {
this.tirada4.val(this.formData.datosGenerales.tirada4);
this.paginasNegro.val(this.formData.datosGenerales.paginasNegro);
this.paginasColor.val(this.formData.datosGenerales.paginasColor);
this.paginasColor.val(this.formData.datosGenerales.paginasColor);;
this.posicionPaginasColor.val(this.formData.datosGenerales.posicionPaginasColor);
@ -456,7 +520,8 @@ class PresupuestoCliente {
}
$('.tipo-libro').removeClass('selected');
$('.image-container#' + this.formData.datosGenerales.tipoEncuadernacion).trigger('click');
$('input[name="tipoEncuadernacion"][value="' + this.formData.datosGenerales.tipoEncuadernacion + '"]')
.prop('checked', true);
this.#updateTipoEncuadernacion();
this.formatoPersonalizado.trigger('change');
@ -563,8 +628,8 @@ class PresupuestoCliente {
});
$(document).on('click', '.opcion-color', (e) => {
$(document).on('change', 'input[name="tipoImpresion"]', (e) => {
const data = this.#getPresupuestoData();
Summary.updateTipoImpresion();
@ -614,8 +679,8 @@ class PresupuestoCliente {
});
});
$(document).on('click', '.papel-interior', (e) => {
$(document).on('change', 'input[name="papelInterior"]', (e) => {
const data = this.#getPresupuestoData();
Summary.updatePapelInterior();
@ -770,6 +835,7 @@ class PresupuestoCliente {
for (let i = 0; i < opciones_color.length; i++) {
const opcion = opciones_color[i];
const item = new imagen_presupuesto(opcion);
item.group = 'tipoImpresion';
item.extraClass = 'interior-data opcion-color';
if ((this.formData.interior.tipoImpresion === '' && i === 0) ||
this.formData.interior.tipoImpresion === opcion.id) {
@ -782,6 +848,7 @@ class PresupuestoCliente {
for (let i = 0; i < opciones_papel_interior.length; i++) {
const opcion = opciones_papel_interior[i];
const item = new imagen_presupuesto(opcion);
item.group = 'papelInterior';
item.extraClass = 'interior-data papel-interior';
if (this.formData.interior.papelInteriorId == '' && i === 0 ||
this.formData.interior.papelInteriorId == opcion.extra_data["sk-id"]) {
@ -823,8 +890,8 @@ class PresupuestoCliente {
#getInteriorData() {
const tipoImpresion = $('#div-opciones-color .image-container.selected').attr('id') || 'negro';
const papelInteriorId = $('#div-papel-interior .image-container.selected').data('sk-id') || 3;
const tipoImpresion = $('#div-opciones-color .image-container input:checked').parent().attr('id') || 'negro';
const papelInteriorId = $('#div-papel-interior .image-container input:checked').parent().data('sk-id') || 3;
const gramajeInterior = $('input[name="gramaje-interior"]:checked').data('gramaje') || 90;
return {
tipoImpresion: tipoImpresion,
@ -882,12 +949,12 @@ class PresupuestoCliente {
});
});
$(document).on('click', '.tapa-cubierta', (e) => {
$(document).on('change', 'input[name="tipoCubierta"]', (e) => {
$('.tapa-dura-options').eq(0).removeClass('animate-fadeInUpBounce');
$('.tapa-blanda-options').eq(0).removeClass('animate-fadeInUpBounce');
if (e.currentTarget.id === 'tapaBlanda') {
if (e.currentTarget.value === 'tapaBlanda') {
$('.tapa-blanda-options').eq(0).addClass('animate-fadeInUpBounce');
$('.tapa-dura-options').addClass('d-none');
$('.tapa-blanda-options').removeClass('d-none');
@ -898,13 +965,13 @@ class PresupuestoCliente {
$('.tapa-dura-options').removeClass('d-none');
}
this.#getPapelesCubierta(e.currentTarget.id);
this.#getPapelesCubierta(e.currentTarget.value);
Summary.updateTapaCubierta();
});
$(document).on('click', '.solapas-cubierta', (e) => {
$(document).on('change', 'input[name="solapasCubierta"]', (e) => {
if (e.currentTarget.id === 'sin-solapas') {
if (e.currentTarget.closest('.image-container').id === 'sin-solapas') {
this.divSolapasCubierta.addClass('d-none');
}
else {
@ -918,6 +985,7 @@ class PresupuestoCliente {
Summary.updateTapaCubierta();
});
$(document).on('click', '.papel-cubierta', (e) => {
const data = this.#getPresupuestoData();
@ -1132,7 +1200,7 @@ class PresupuestoCliente {
const gramajeGuardas = parseInt($('#papel-guardas option:selected').data('gramaje')) || 170;
const guardasImpresas = parseInt(this.guardasImpresas) || 0;
const cabezada = this.cabezada.val() || 'WHI';
const papelCubiertaId = $('#div-papel-cubierta .image-container.selected').data('sk-id') || this.formData.cubierta.papelCubiertaId || 3;
const papelCubiertaId = $('#div-papel-cubierta .image-container input:checked').parent().data('sk-id') || this.formData.cubierta.papelCubiertaId || 3;
const gramajeCubierta = $('input[name="gramaje-cubierta"]:checked').data('gramaje') || this.formData.cubierta.gramajeCubierta || 170;
const acabado = parseInt($(`input[name="acabado-cubierta"]:checked`).attr('sk-id')) || 1;
const sobrecubierta = this.sobrecubierta.hasClass('active');
@ -1230,9 +1298,9 @@ class PresupuestoCliente {
#loadCubiertaData() {
$('.tapa-cubierta').removeClass('selected');
$(`#${this.formData.cubierta.tipoCubierta}`).addClass('selected');
$('input[name="tipoCubierta"][value="' + this.formData.cubierta.tipoCubierta + '"]')
.prop('checked', true);
if (this.formData.cubierta.tipoCubierta === 'tapaBlanda') {
$('.tapa-blanda-options').removeClass('d-none');
$('.tapa-dura-options').addClass('d-none');
@ -1247,7 +1315,7 @@ class PresupuestoCliente {
this.cabezada.val(this.formData.cubierta.cabezada);
}
$(`#${this.formData.cubierta.tipoCubierta}`).trigger('click');
$('input[name="tipoCubierta"][value="' + this.formData.cubierta.tipoCubierta + '"]').trigger('change');
if (this.formData.cubierta.solapasCubierta === 0) {
$('.solapas-cubierta#sin-solapas').addClass('selected');
@ -1632,7 +1700,3 @@ class PresupuestoCliente {
}
document.addEventListener('DOMContentLoaded', function () {
const presupuestoCliente = new PresupuestoCliente();
presupuestoCliente.init();
});