Optimizando vista html

This commit is contained in:
imnavajas
2025-04-22 12:00:12 +02:00
parent ed5f73db25
commit 649a244a10
3 changed files with 119 additions and 257 deletions

View File

@ -92,6 +92,8 @@ return [
'papelPod' => 'Papel (POD)',
'gramaje' => 'Gramaje',
'gramajePod' => 'Gramaje (POD)',
'solapas' => 'Solapas',
'acabados' => 'Acabados',
'opcionesPresupuesto' => 'Opciones presupuesto',
'retractilado' => 'Retractilado individual',
'retractilado5' => 'Retractilado de 5',

View File

@ -1,10 +1,11 @@
<!-- File: app/Views/catalogo_configuracion_libro.php -->
<div class="accordion accordion-bordered mt-3" id="accordionConfiguracionLibro">
<div class="card accordion-item active">
<h2 class="accordion-header" id="headingConfiguracionLibro">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseConfiguracionLibro" aria-expanded="true"
aria-controls="collapseConfiguracionLibro">
<h5 class="mb-0"><?= lang("Catalogo.configuracionLibro") ?? 'Configuración del libro' ?></h5>
<h5 class="mb-0"><?= lang('Catalogo.configuracionLibro') ?: 'Configuración del libro' ?></h5>
</button>
</h2>
@ -12,276 +13,134 @@
data-bs-parent="#accordionConfiguracionLibro">
<div class="accordion-body">
<!----------------------------------------------------------------------------->
<!-- Alertas + campo oculto -->
<div id="divAlarmasComparador"></div>
<!----------------------------------------------------------------------------->
<input type="hidden" name="comparador_json_data" id="comparador_json_data" class="form-control"
value=""></input>
<input type="hidden" name="comparador_json_data" id="comparador_json_data" value="">
<?php
// 1) TIPO DE IMPRESIÓN + ENCUADERNACIÓN
$tipos = ['negro', 'negrohq', 'color', 'colorhq'];
?>
<div class="divider divider-dark text-start mb-1">
<div class="divider-text">
<h5>
<?= lang("Presupuestos.tipoImpresion") ?>
</h5>
<h5><?= lang('Presupuestos.tipoImpresion') ?></h5>
</div>
</div>
<div class="row px-4 mt-1">
<div class="col-md-12 col-lg-3">
<div class="col-lg-3 col-md-12">
<select id="tipo_impresion" name="tipo_impresion" class="form-control select2bs2"
style="width: 100%;" data-placeholder="<?= lang('Catalogo.seleccionarTipoImpresion') ?>">
style="width:100%" data-placeholder="<?= lang('Catalogo.seleccionarTipoImpresion') ?>">
<option></option>
<?php
$tipos = ['negro', 'negrohq', 'color', 'colorhq'];
foreach ($tipos as $tipo):
?>
<option value="<?= $tipo ?>" <?= $catalogoLibrosEntity->tipo_impresion === $tipo ? 'selected' : '' ?>>
<?= lang("MaquinasTarifasImpresions.$tipo") ?>
<?php foreach ($tipos as $t): ?>
<option value="<?= $t ?>" <?= $catalogoLibrosEntity->tipo_impresion === $t ? 'selected' : '' ?>>
<?= lang("MaquinasTarifasImpresions.$t") ?>
</option>
<?php endforeach; ?>
</select>
</div><!--//.col -->
<div class="col-md-12 col-lg-3">
<select id="encuadernacion" name="encuadernacion_id"
class="form-control select2bs2 warning-change" style="width: 100%;">
</div>
<div class="col-lg-3 col-md-12">
<select id="encuadernacion_id" name="encuadernacion_id"
class="form-control select2bs2 warning-change" style="width:100%">
<option value="<?= $catalogoLibrosEntity->encuadernacion_id ?>" selected>
<?= $catalogoLibrosEntity->encuadernacionName ?>
<?= esc($catalogoLibrosEntity->encuadernacionName) ?>
</option>
</select>
</div><!--//.col -->
</div><!--//.row -->
<!----------------------------------------------------------------------------->
<div class="divider divider-dark text-start mb-1">
<div class="divider-text">
<h5>
<?= lang("Presupuestos.papelesComparadorPresupuestoAdmin") ?>
</h5>
</div>
</div>
<div class="row mb-1">
<div class="col-md-12 col-lg-2 px-1 mb-0">
<p class="mb-0"></p>
</div>
<div class="col-md-12 col-lg-1 px-4 mb-0">
<p class="mb-0">
<?= lang("Presupuestos.numeroPaginas") ?>
</p>
</div>
<div class="col-md-12 col-lg-3 px-4 mb-0">
<p class="mb-0">
<?= lang("Presupuestos.papel") ?>
</p>
</div>
<div class="col-md-12 col-lg-2 px-4 mb-0">
<p class="mb-0">
<?= lang("Presupuestos.gramaje") ?>
</p>
</div>
<div class="col-md-12 col-lg-2 px-4 mb-0">
<p class="mb-0">
<?= "Solapas" ?>
</p>
</div>
<div class="col-md-12 col-lg-2 px-4 mb-0">
<p class="mb-0">
<?= "Acabados" ?>
</p>
</div>
<div>
<hr class="my-1">
<hr class="my-1">
</div>
</div>
<div class="row mt-0 negro-selected">
<div class="col-md-12 col-lg-2 px-4">
<p>
<?= lang('MaquinasTarifasImpresions.negro') ?>
</p>
</div>
<div class="col-md-12 col-lg-1 px-4">
<input type="text" id="negro_paginas" name="negro_paginas" placeholder="0" maxLength="5"
class="form-control comp_negro_items"
value="<?= old('negro_paginas', $catalogoLibrosEntity->negro_paginas) ?>">
</div>
<div class="col-md-12 col-lg-3 px-4">
<select id="negro_papel_id" name="negro_papel_id"
class="form-control select2bs2 comp_negro_items" style="width: 100%;">
<?php if (!is_null($catalogoLibrosEntity->negroPapelName)): ?>
<option value="<?= $catalogoLibrosEntity->negro_papel_id ?>" selected>
<?= esc($catalogoLibrosEntity->negroPapelName) ?>
</option>
<?php endif; ?>
</select>
</div>
<div class="col-md-12 col-lg-2 px-4">
<select id="negro_gramaje" name="negro_gramaje"
class="form-control select2bs2 comp_negro_items" style="width: 100%;">
<option value="<?= $catalogoLibrosEntity->negro_gramaje ?>" selected>
<?= $catalogoLibrosEntity->negro_gramaje ?>
</option>
</select>
</div>
<div class="col-md-12 col-lg-2 px-4"></div>
<div class="col-md-12 col-lg-2 px-4"></div>
<div>
<hr class="my-1">
</div>
</div>
<div class="row color-selected">
<div class="col-md-12 col-lg-2 px-4">
<p>
<?= lang('MaquinasTarifasImpresions.color') ?>
</p>
</div>
<div class="col-md-12 col-lg-1 px-4">
<input type="text" id="color_paginas" name="color_paginas" placeholder="0" maxLength="5"
class="form-control color_items"
value="<?= old('color_paginas', $catalogoLibrosEntity->color_paginas) ?>">
</div>
<div class="col-md-12 col-lg-3 px-4">
<select id="color_papel_id" name="color_papel_id"
class="form-control select2bs2 color_items" style="width: 100%;">
<?php if (!is_null($catalogoLibrosEntity->colorPapelName)): ?>
<option value="<?= $catalogoLibrosEntity->color_papel_id ?>" selected>
<?= esc($catalogoLibrosEntity->colorPapelName) ?>
</option>
<?php endif; ?>
</select>
</div>
<div class="col-md-12 col-lg-2 px-4">
<select id="color_gramaje" name="color_gramaje"
class="form-control select2bs2 color_items" style="width: 100%;">
<option value="<?= $catalogoLibrosEntity->color_gramaje ?>" selected>
<?= $catalogoLibrosEntity->color_gramaje ?>
</option>
</select>
</div>
<div class="col-md-12 col-lg-2 px-4"></div>
<div class="col-md-12 col-lg-2 px-4"></div>
<div>
<hr class="my-1">
</div>
</div>
<div class="row">
<div class="col-md-12 col-lg-2 px-4">
<p>
<?= lang('PapelImpresion.cubierta') ?>
</p>
</div>
<div class="col-md-12 col-lg-1 px-4">
<select id="cubierta_paginas" name="cubierta_paginas"
class="form-control select2bs2 cubierta_items" style="width: 100%;">
<option value="2" <?= $catalogoLibrosEntity->cubierta_paginas == 2 ? 'selected' : '' ?>>
<?= lang('Presupuestos.unaCara') ?>
</option>
<option value="4" <?= $catalogoLibrosEntity->cubierta_paginas == 4 ? 'selected' : '' ?>>
<?= lang('Presupuestos.dosCaras') ?>
</option>
</select>
</div>
<div class="col-md-12 col-lg-3 px-4">
<select id="cubierta_papel_id" name="cubierta_papel_id"
class="form-control select2bs2 cubierta_items" style="width: 100%;">
<?php if (!is_null($catalogoLibrosEntity->cubiertaPapelName)): ?>
<option value="<?= $catalogoLibrosEntity->cubierta_papel_id ?>" selected>
<?= esc($catalogoLibrosEntity->cubiertaPapelName) ?>
</option>
<?php endif; ?>
</select>
</div>
<div class="col-md-12 col-lg-2 px-4">
<select id="cubierta_gramaje" name="cubierta_gramaje"
class="form-control select2bs2 cubierta_items" style="width: 100%;">
<option value="<?= $catalogoLibrosEntity->cubierta_gramaje ?>" selected>
<?= $catalogoLibrosEntity->cubierta_gramaje ?>
</option>
</select>
</div>
<div class="col-md-12 col-lg-2 px-4">
<input type="text" id="cubierta_solapas_ancho" name="cubierta_solapas_ancho" placeholder="0"
maxLength="5" class="form-control cubierta_items"
value="<?= old('cubierta_solapas_ancho', $catalogoLibrosEntity->cubierta_solapas_ancho) ?>">
</div>
<div class="col-md-12 col-lg-2 px-4">
<select id="cubierta_acabado_id" name="cubierta_acabado_id"
class="form-control select2bs2 cubierta_items" style="width: 100%;">
<option value="<?= $catalogoLibrosEntity->cubierta_acabado_id ?>" selected>
<?= $catalogoLibrosEntity->cubiertaAcabadoName ?>
</option>
</select>
</div>
<div>
<hr class="my-1">
</div>
</div>
<?php
$tipo_impresion_id = 0;
if ($tipo_impresion_id != 5 && $tipo_impresion_id != 6 && $tipo_impresion_id != 7 && $tipo_impresion_id != 8 && $tipo_impresion_id != 21): ?>
<div class="row">
<div class="col-md-12 col-lg-2 px-4">
<p>
<?= lang('PapelImpresion.sobrecubierta') ?>
</p>
</div>
<div class="col-md-12 col-lg-1 px-4">
<select id="sobrecubierta_paginas" name="sobrecubierta_paginas" class="form-control select2bs2"
style="width: 100%;">
<option value="0" <?= $catalogoLibrosEntity->sobrecubierta_paginas != 1 ? 'selected' : '' ?>>
<?= lang('Presupuestos.no') ?>
</option>
<option value="1" <?= $catalogoLibrosEntity->sobrecubierta_paginas == 1 ? 'selected' : '' ?>>
<?= lang('Presupuestos.si') ?>
</option>
</select>
</div>
<div class="col-md-12 col-lg-3 px-4">
<select disabled id="sobrecubierta_papel_id" name="sobrecubierta_papel_id"
class="form-control select2bs2 sobrecubierta_items" style="width: 100%;">
<?php if (!is_null($catalogoLibrosEntity->sobrecubiertaPapelName)): ?>
<option value="<?= $catalogoLibrosEntity->sobrecubierta_papel_id ?>" selected>
<?= esc($catalogoLibrosEntity->sobrecubiertaPapelName) ?>
</option>
<?php endif; ?>
// 2) COLUMNAS Y ETIQUETAS COMPARTIDAS
$cols = [2, 2, 2, 2, 2, 2];
$labels = ['', 'numeroPaginas', 'papel', 'gramaje', 'solapas', 'acabados'];
</select>
</div>
<div class="col-md-12 col-lg-2 px-4">
<select disabled id="sobrecubierta_gramaje" name="sobrecubierta_gramaje"
class="form-control select2bs2 sobrecubierta_items" style="width: 100%;">
<option value="<?= $catalogoLibrosEntity->sobrecubierta_gramaje ?>" selected>
<?= $catalogoLibrosEntity->sobrecubierta_gramaje ?>
</option>
</select>
</div>
<div class="col-md-12 col-lg-2 px-4">
<input disabled type="text" id="sobrecubierta_solapas_ancho" name="sobrecubierta_solapas_ancho"
placeholder="0" maxLength="5" class="form-control sobrecubierta_items"
value="<?= old('sobrecubierta_solapas_ancho', $catalogoLibrosEntity->sobrecubierta_solapas_ancho) ?>">
</div>
<div class="col-md-12 col-lg-2 px-4">
<select disabled id="sobrecubierta_acabado_id" name="sobrecubierta_acabado_id"
class="form-control select2bs2 sobrecubierta_items" style="width: 100%;">
<option value="<?= $catalogoLibrosEntity->sobrecubierta_acabado_id ?>" selected>
<?= $catalogoLibrosEntity->sobrecubiertaAcabadoName ?>
</option>
</select>
</div>
<div>
<hr class="my-1">
// Función única para renderizar cualquier fila, con clase opcional
$renderRow = function (array $cellsHtml, string $rowClass = '') use ($cols) {
$classAttr = $rowClass ? " {$rowClass}-line" : '';
echo "<div class=\"row{$classAttr} mb-0\">";
foreach ($cellsHtml as $i => $cell) {
$w = $cols[$i] ?? 2;
echo "<div class=\"col-lg-{$w} col-md-12 px-4 mb-0\">{$cell}</div>";
}
echo '<div><hr class="my-1"></div></div>';
};
?>
<div class="divider divider-dark text-start mb-1">
<div class="divider-text">
<h5><?= lang('Presupuestos.papelesComparadorPresupuestoAdmin') ?></h5>
</div>
</div>
<?php endif; ?>
<!-- 2a) Encabezado -->
<?php
$hdr = [];
foreach ($labels as $lbl) {
$hdr[] = '<p class="mb-0">' . ($lbl ? lang("Presupuestos.$lbl") : '') . '</p>';
}
echo '<div class="row mb-1">';
foreach ($hdr as $i => $html) {
echo '<div class="col-lg-' . $cols[$i] . ' col-md-12 px-4 mb-0">' . $html . '</div>';
}
echo '<div><hr class="my-1"><hr class="my-1"></div></div>';
?>
<!-- 3) Filas dinámicas: negro y color -->
<?php foreach (['negro', 'negro_pod', 'color', 'color_pod'] as $tipo):
$pag = old("{$tipo}_paginas", $catalogoLibrosEntity->{"{$tipo}_paginas"});
$papId = $catalogoLibrosEntity->{"{$tipo}_papel_id"};
$papNm = $catalogoLibrosEntity->{"{$tipo}PapelName"};
$gram = $catalogoLibrosEntity->{"{$tipo}_gramaje"};
$cells = [
'<p>' . lang("MaquinasTarifasImpresions.$tipo") . '</p>',
"<input type=\"text\" id=\"{$tipo}_paginas\" name=\"{$tipo}_paginas\" placeholder=\"0\" maxlength=\"5\" class=\"form-control {$tipo}_items\" value=\"" . esc($pag) . "\">",
"<select id=\"{$tipo}_papel_id\" name=\"{$tipo}_papel_id\" class=\"form-control select2bs2 {$tipo}_items\" style=\"width:100%\">"
. ($papNm ? "<option value=\"" . esc($papId) . "\" selected>" . esc($papNm) . "</option>" : "")
. "</select>",
"<select id=\"{$tipo}_gramaje\" name=\"{$tipo}_gramaje\" class=\"form-control select2bs2 {$tipo}_items\" style=\"width:100%\">"
. "<option value=\"" . esc($gram) . "\" selected>" . esc($gram) . "</option></select>",
'', // solapas
'' // acabados
];
$renderRow($cells, $tipo);
endforeach; ?>
<!-- 4) Cubierta y Sobrecubierta -->
<?php
$especiales = [
'cubierta' => ['faces' => [2 => 'unaCara', 4 => 'dosCaras'], 'disable' => false],
'sobrecubierta' => ['faces' => [0 => 'no', 1 => 'si'], 'disable' => in_array($catalogoLibrosEntity->tipo_impresion_id, [5, 6, 7, 8, 21])]
];
foreach ($especiales as $tipo => $cfg):
$pag = $catalogoLibrosEntity->{"{$tipo}_paginas"};
$papId = $catalogoLibrosEntity->{"{$tipo}_papel_id"};
$papNm = $catalogoLibrosEntity->{"{$tipo}PapelName"};
$gram = $catalogoLibrosEntity->{"{$tipo}_gramaje"};
$sol = old("{$tipo}_solapas_ancho", $catalogoLibrosEntity->{"{$tipo}_solapas_ancho"});
$acId = $catalogoLibrosEntity->{"{$tipo}_acabado_id"};
$acNm = $catalogoLibrosEntity->{"{$tipo}AcabadoName"};
$optPag = '';
foreach ($cfg['faces'] as $v => $lbl) {
$sel = $pag == $v ? ' selected' : '';
$optPag .= "<option value=\"$v\"$sel>" . lang("Presupuestos.$lbl") . "</option>";
}
$cells = [
'<p>' . lang("PapelImpresion.$tipo") . '</p>',
"<select id=\"{$tipo}_paginas\" name=\"{$tipo}_paginas\" class=\"form-control select2bs2\" style=\"width:100%\"" . ($cfg['disable'] ? ' disabled' : '') . ">{$optPag}</select>",
"<select id=\"{$tipo}_papel_id\" name=\"{$tipo}_papel_id\" class=\"form-control select2bs2 {$tipo}_items\" style=\"width:100%\"" . ($cfg['disable'] ? ' disabled' : '') . ">"
. ($papNm ? "<option value=\"" . esc($papId) . "\" selected>" . esc($papNm) . "</option>" : "")
. "</select>",
"<select id=\"{$tipo}_gramaje\" name=\"{$tipo}_gramaje\" class=\"form-control select2bs2 {$tipo}_items\" style=\"width:100%\"" . ($cfg['disable'] ? ' disabled' : '') . ">"
. "<option value=\"" . esc($gram) . "\" selected>" . esc($gram) . "</option></select>",
"<input type=\"text\" id=\"{$tipo}_solapas_ancho\" name=\"{$tipo}_solapas_ancho\" placeholder=\"0\" maxlength=\"5\" class=\"form-control {$tipo}_items\" value=\"" . esc($sol) . "\"" . ($cfg['disable'] ? ' disabled' : '') . ">",
"<select id=\"{$tipo}_acabado_id\" name=\"{$tipo}_acabado_id\" class=\"form-control select2bs2 {$tipo}_items\" style=\"width:100%\"" . ($cfg['disable'] ? ' disabled' : '') . ">"
. "<option value=\"" . esc($acId) . "\" selected>" . esc($acNm) . "</option></select>",
];
$renderRow($cells);
endforeach;
?>
</div>
</div>

View File

@ -10,9 +10,9 @@ class Catalogo {
this.cliente = new ClassSelect($("#cliente_id"), '/catalogo/libros/clientlist', "Seleccione un cliente");
this.tipo_impresion = $("#tipo_impresion");
this.caras_cubierta = $("#compCarasCubierta");
this.paginas_cubierta = $("#cubierta_paginas");
this.encuadernacion = new ClassSelect($("#encuadernacion"), '/importador/getencuadernacion', "Seleccione una encuadernación");
this.encuadernacion = new ClassSelect($("#encuadernacion_id"), '/importador/getencuadernacion', "Seleccione una encuadernación");
this.compPapelNegro = new ClassSelect($("#negro_papel_id"), '/presupuestoadmin/papelgenerico', "Seleccione un papel", false,
{
@ -26,7 +26,7 @@ class Catalogo {
tipo: () => this.tipo_impresion.val().includes('hq') ? 'negrohq' : 'negro',
});
this.compPapelNegroPod = new ClassSelect($("#compPapelNegroPod"), '/presupuestoadmin/papelgenerico', "Seleccione un papel", false,
this.compPapelNegroPod = new ClassSelect($("#negro_pod_papel_id"), '/presupuestoadmin/papelgenerico', "Seleccione un papel", false,
{
tipo_impresion: () => this.encuadernacion.getVal(),
tirada: () => this.tirada_pod,
@ -150,12 +150,13 @@ class Catalogo {
this.cliente.init();
this.tipo_impresion.select2();
this.caras_cubierta.select2();
this.paginas_cubierta.select2();
this.paginasSobrecubierta.select2();
this.encuadernacion.init();
this.compPapelNegro.init();
this.compPapelNegroPod.init();
this.compGramajeNegro.init();
this.compPapelColor.init();
this.compGramajeColor.init();
@ -202,8 +203,8 @@ class Catalogo {
$('.color_items').off('change');
const selValue = this.tipo_impresion.val();
const elements_negro = $('.negro-selected');
const elements_color = $('.color-selected');
const elements_negro = $('.negro-line');
const elements_color = $('.color-line');
if (selValue.includes('color')) {
Array.from(elements_color).forEach(element => {