mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
trbajando en los custom checks
This commit is contained in:
@ -3,48 +3,306 @@ import ClassSelect from '../../components/select2.js';
|
||||
|
||||
class DatosGenerales {
|
||||
|
||||
constructor(domItem) {
|
||||
constructor(domItem, wizardForm, validatorStepper) {
|
||||
this.domItem = domItem;
|
||||
this.formatoLibro = new ClassSelect($("#papelFormatoId"), '/papel-formato/menuitems', window.translations["formatoLibro"]);
|
||||
|
||||
this.wizardStep = wizardForm.querySelector('#datos-generales');
|
||||
this.validatorStepper = validatorStepper;
|
||||
|
||||
this.formatoLibro = new ClassSelect($("#papelFormatoId"), '/papel-formato/menuitems', window.translations["formatoLibro"]);
|
||||
this.cliente = new ClassSelect($("#clienteId"), '/clientes/cliente/menuitems', window.translations["selectCliente"]);
|
||||
|
||||
this.titulo = this.domItem.find("#titulo");
|
||||
|
||||
this.checkFormatoPersonalizado = this.domItem.find("#papelFormatoPersonalizado");
|
||||
this.formatoPersonalizado = this.domItem.find("#formatoPersonalizado");
|
||||
this.anchoPersonalizado = this.domItem.find("#papelFormatoAncho");
|
||||
this.altoPersonalizado = this.domItem.find("#papelFormatoAlto");
|
||||
|
||||
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");
|
||||
|
||||
this.divPaginasColorConsecutivas = this.domItem.find("#divPaginasColorConsecutivas");
|
||||
this.pagColorConsecutivas = this.domItem.find("#pagColorConsecutivas");
|
||||
this.divPapelDiferente = this.domItem.find("#divPapelDiferente");
|
||||
this.papelDiferente = this.domItem.find("#papelDiferente");
|
||||
this.divPosPaginasColor = this.domItem.find("#divPosPaginasColor");
|
||||
this.posPaginasColor = this.domItem.find("#posPaginasColor");
|
||||
|
||||
this.initValidation();
|
||||
}
|
||||
|
||||
|
||||
init() {
|
||||
|
||||
|
||||
// Selects
|
||||
this.formatoLibro.init();
|
||||
this.cliente.init();
|
||||
|
||||
// Eventos
|
||||
this.checkFormatoPersonalizado.bind('change', this.#handleFormatoLibro.bind(this));
|
||||
|
||||
this.tiposLibro.on('click', this.#handleTipolibro.bind(this));
|
||||
|
||||
this.tiposLibro.on('click', this.#handleTipolibro.bind(this));
|
||||
this.domItem.find('.input-paginas').on('change', this.#handlePaginas.bind(this));
|
||||
this.anchoPersonalizado.on('blur', this.#handleCheckFormatoPersonalizado.bind(this));
|
||||
this.altoPersonalizado.on('blur', this.#handleCheckFormatoPersonalizado.bind(this));
|
||||
this.pagColorConsecutivas.on('change', this.#handPaginasConsecutivas.bind(this));
|
||||
this.papelDiferente.on('change', this.#handlePapelDiferente.bind(this));
|
||||
|
||||
this.titulo.on('change', () => { $(".titulo").html(this.titulo.val()); });
|
||||
this.papelDiferente.on('change', () => { $(".titulo").html(this.titulo.val()); });
|
||||
}
|
||||
|
||||
initValidation() {
|
||||
|
||||
const stepper = this.validatorStepper;
|
||||
|
||||
this.formValidation = FormValidation.formValidation(this.wizardStep, {
|
||||
fields: {
|
||||
titulo: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: window.translations["validation"].requerido_short
|
||||
},
|
||||
}
|
||||
},
|
||||
cliente_id: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: window.translations["validation"].cliente,
|
||||
callback: function (input) {
|
||||
// Get the selected options
|
||||
const options = $("#clienteId").select2('data');
|
||||
const hasValidOption = options.some(option => parseInt(option.id) > 0);
|
||||
return options !== null && options.length > 0 && hasValidOption;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
tirada: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: window.translations["validation"].integer_greatherThan_0,
|
||||
callback: function (input) {
|
||||
const value = $("#tirada").val();
|
||||
return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
tirada2: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: window.translations["validation"].integer_greatherThan_0,
|
||||
callback: function (input) {
|
||||
let field = $("#tirada2");
|
||||
field.val(field.val().replace(/[^0-9]/g, ''));
|
||||
let value = field.value;
|
||||
if (value == '')
|
||||
return true;
|
||||
return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
tirada3: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: window.translations["validation"].integer_greatherThan_0,
|
||||
callback: function (input) {
|
||||
let field = $("#tirada3");
|
||||
field.val(field.val().replace(/[^0-9]/g, ''));
|
||||
let value = field.value;
|
||||
if (value == '')
|
||||
return true;
|
||||
return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
tirada4: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: window.translations["validation"].integer_greatherThan_0,
|
||||
callback: function (input) {
|
||||
let field = $("#tirada4");
|
||||
field.val(field.val().replace(/[^0-9]/g, ''));
|
||||
let value = field.value;
|
||||
if (value == '')
|
||||
return true;
|
||||
return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
papel_formato_id: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: window.translations["validation"].papelFormato,
|
||||
callback: function (input) {
|
||||
// Get the selected options
|
||||
const options = $("#clienteId").select2('data');
|
||||
const hasValidOption = options.some(option => parseInt(option.id) > 0);
|
||||
const custom_format = $("#papelFormatoPersonalizado").is(":checked");
|
||||
if (custom_format)
|
||||
return true;
|
||||
return options !== null && options.length > 0 && hasValidOption;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
papel_formato_ancho: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: window.translations["validation"].integer_greatherThan_0,
|
||||
callback: function (input) {
|
||||
// Get the selected options
|
||||
const custom_format = $("#papelFormatoPersonalizado").is(":checked");
|
||||
if (!custom_format)
|
||||
return true;
|
||||
const value = $("#papelFormatoAncho").val();
|
||||
return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
papel_formato_alto: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: window.translations["validation"].integer_greatherThan_0,
|
||||
callback: function (input) {
|
||||
// Get the selected options
|
||||
const custom_format = $("#papelFormatoPersonalizado").is(":checked");
|
||||
if (!custom_format)
|
||||
return true;
|
||||
const value = $("#papelFormatoAlto").val();
|
||||
return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
paginasColor: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: window.translations["validation"].integer_greatherThan_0,
|
||||
callback: function (input) {
|
||||
// Get the selected options
|
||||
const value = $("#paginasColor").val();
|
||||
return value.length >= 0 && Number.isInteger(parseInt(value)) && parseInt(value) >= 0;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
paginasNegro: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: window.translations["validation"].integer_greatherThan_0,
|
||||
callback: function (input) {
|
||||
// Get the selected options
|
||||
const value = $("#paginasNegro").val();
|
||||
return value.length >= 0 && Number.isInteger(parseInt(value)) && parseInt(value) >= 0;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
paginas: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: window.translations["validation"].integer_greatherThan_0,
|
||||
callback: function (input) {
|
||||
// Get the selected options
|
||||
const value = $("#paginas").val();
|
||||
return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
div_tipo_libro: {
|
||||
validators: {
|
||||
callback: {
|
||||
callback: function (input) {
|
||||
const divTipoLibro = $('#divTipoLibro'); // Selecciona el div
|
||||
|
||||
divTipoLibro.find('.fv-plugins-message-container').remove();
|
||||
if ($('.tipo-libro.selected').length > 0) {
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
divTipoLibro.append(`
|
||||
<div class="fv-plugins-message-container invalid-feedback">
|
||||
<div data-field="div_tipo_libro" data-validator="callback" style="margin-top: 50px;">
|
||||
${window.translations["validation"].tipo_libro}
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
// eleInvalidClass: '',
|
||||
eleValidClass: '',
|
||||
rowSelector: function (field, ele) {
|
||||
// field is the field name
|
||||
// ele is the field element
|
||||
switch (field) {
|
||||
case 'div_tipo_libro':
|
||||
return '.col-sm-10';
|
||||
case 'titulo':
|
||||
return '.col-sm-8';
|
||||
case 'cliente_id':
|
||||
return '.col-sm-5';
|
||||
case 'papel_formato_id':
|
||||
return '.col-sm-4';
|
||||
case 'papel_formato_ancho':
|
||||
case 'papel_formato_ancho':
|
||||
return '.col-sm-3';
|
||||
case 'tirada':
|
||||
case 'tirada2':
|
||||
case 'tirada3':
|
||||
case 'tirada4':
|
||||
return '.col-sm-2';
|
||||
|
||||
default:
|
||||
return '.col-sm-3';
|
||||
}
|
||||
}
|
||||
}),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus(),
|
||||
submitButton: new FormValidation.plugins.SubmitButton()
|
||||
}
|
||||
}).on('core.form.valid', () => {
|
||||
stepper.next();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
#handleFormatoLibro() {
|
||||
|
||||
if(this.checkFormatoPersonalizado.is(':checked')) {
|
||||
|
||||
if (this.checkFormatoPersonalizado.is(':checked')) {
|
||||
this.formatoLibro.hide();
|
||||
this.formatoPersonalizado.show();
|
||||
this.formValidation.revalidateField('papel_formato_id');
|
||||
}
|
||||
else{
|
||||
else {
|
||||
this.formatoLibro.show();
|
||||
this.formatoPersonalizado.hide();
|
||||
this.formValidation.revalidateField('papel_formato_ancho');
|
||||
this.formValidation.revalidateField('papel_formato_alto');
|
||||
}
|
||||
}
|
||||
|
||||
#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]) {
|
||||
@ -58,7 +316,7 @@ class DatosGenerales {
|
||||
}
|
||||
|
||||
#handlePaginas() {
|
||||
|
||||
|
||||
let paginasNegro = this.paginasNegro.val();
|
||||
let paginasColor = this.paginasColor.val();
|
||||
|
||||
@ -72,16 +330,16 @@ class DatosGenerales {
|
||||
let totalPaginas = parseInt(paginasNegro) + parseInt(paginasColor);
|
||||
this.paginas.val(totalPaginas);
|
||||
|
||||
let tipos = [this.domItem.find('#fresado'), this.domItem.find('#cosido')];
|
||||
if (totalPaginas < 32){
|
||||
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{
|
||||
else {
|
||||
for (let tipo of tipos) {
|
||||
tipo.show();
|
||||
}
|
||||
@ -92,9 +350,90 @@ class DatosGenerales {
|
||||
this.domItem.find('#grapado').find('.image-presupuesto').removeClass('selected');
|
||||
this.domItem.find('#grapado').hide();
|
||||
}
|
||||
else{
|
||||
else {
|
||||
this.domItem.find('#grapado').show();
|
||||
}
|
||||
this.formValidation.revalidateField('paginas');
|
||||
|
||||
// Se configura dependiento si hay color o no
|
||||
if (paginasColor == 0) {
|
||||
|
||||
this.#handleInteriorLayout('negro');
|
||||
this.divPaginasColorConsecutivas.addClass('d-none');
|
||||
this.divPosPaginasColor.addClass('d-none');
|
||||
this.posPaginasColor.val("");
|
||||
this.pagColorConsecutivas.prop('checked', false);
|
||||
}
|
||||
else {
|
||||
if(this.papelDiferente.is(":checked"))
|
||||
this.#handleInteriorLayout('mixto');
|
||||
else
|
||||
this.#handleInteriorLayout('color');
|
||||
this.divPaginasColorConsecutivas.removeClass('d-none');
|
||||
this.divPosPaginasColor.removeClass('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#handPaginasConsecutivas() {
|
||||
if (this.pagColorConsecutivas.is(':checked')) {
|
||||
this.divPapelDiferente.removeClass('d-none');
|
||||
}
|
||||
else {
|
||||
this.divPapelDiferente.addClass('d-none');
|
||||
this.papelDiferente.prop('checked', false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#handlePapelDiferente() {
|
||||
if (this.papelDiferente.is(':checked')){
|
||||
$(".interior-color").removeClass('d-none');
|
||||
this.#handleInteriorLayout('mixto');
|
||||
}
|
||||
else {
|
||||
$(".interior-color").addClass('d-none');
|
||||
$("#divGramajeInteriorColor").addClass('d-none');
|
||||
$(".papel-interior").removeClass('selected');
|
||||
$(".gramaje-interior").prop('checked', false);
|
||||
$(".gramaje-interior-color").prop('checked', false);
|
||||
this.#handlePaginas();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#handleInteriorLayout(layout) {
|
||||
switch (layout) {
|
||||
case 'negro':
|
||||
case 'mixto':
|
||||
$('#negroEstandar').removeClass('d-none');
|
||||
$('#negroPremium').removeClass('d-none');
|
||||
$('#colorEstandar').addClass('d-none');
|
||||
$('#colorPremium').addClass('d-none');
|
||||
break;
|
||||
case 'color':
|
||||
$('#negroEstandar').addClass('d-none');
|
||||
$('#negroPremium').addClass('d-none');
|
||||
$('#colorEstandar').removeClass('d-none');
|
||||
$('#colorPremium').removeClass('d-none');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
#handleCheckFormatoPersonalizado() {
|
||||
|
||||
const minAncho = this.anchoPersonalizado.min;
|
||||
const minAlto = this.altoPersonalizado.min;
|
||||
|
||||
if (this.anchoPersonalizado.val() < minAncho || this.anchoPersonalizado.val() == '' || isNaN(this.anchoPersonalizado.val())) {
|
||||
this.anchoPersonalizado.val(minAncho);
|
||||
}
|
||||
|
||||
if (this.altoPersonalizado.val() < minAlto || this.altoPersonalizado.val() == '' || isNaN(this.altoPersonalizado.val())) {
|
||||
this.altoPersonalizado.val(minAlto);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user