mirror of
https://git.imnavajas.es/jjimenez/erp-imprimelibros.git
synced 2026-01-13 08:58:48 +00:00
trabajando en leer datos de tipo cubierta
This commit is contained in:
@ -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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
import PresupuestoWizard from './wizard.js';
|
||||
|
||||
const app = new PresupuestoWizard({ mode: 'public' });
|
||||
app.init();
|
||||
@ -0,0 +1,9 @@
|
||||
import PresupuestoWizard from './wizard.js';
|
||||
|
||||
const app = new PresupuestoWizard({
|
||||
mode: 'view',
|
||||
readonly: true,
|
||||
canSave: false,
|
||||
useSessionCache: false,
|
||||
});
|
||||
app.init();
|
||||
@ -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();
|
||||
});
|
||||
Reference in New Issue
Block a user