Aprobación de Agencias
This commit is contained in:
@@ -28,8 +28,11 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Choices.js CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
|
||||
<!-- SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<!-- Animate.css para animaciones adicionales -->
|
||||
@@ -67,6 +70,51 @@
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
|
||||
.btn-animated:hover::before { left: 100%; }
|
||||
.form-label { font-weight: 500; }
|
||||
/* ========== ANIMACIONES PARA INPUTS TEXTO ========== */
|
||||
.form-control:not(.no-animation) { transition: all 0.3s ease; border: 2px solid #dee2e6; position: relative; }
|
||||
.form-control:not(.no-animation):focus { border-color: #0d6efd; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25), 0 0 20px rgba(13, 110, 253, 0.3); transform: translateY(-2px); }
|
||||
.form-control:not(.no-animation):not(:placeholder-shown) { /*border-color: #198754; background-color: #f8fff9;*/ }
|
||||
.form-control:not(.no-animation).shake { animation: shake 0.5s ease-in-out; }
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-5px); }
|
||||
75% { transform: translateX(5px); }
|
||||
}
|
||||
/* Floating labels para inputs texto */
|
||||
.form-floating-custom { position: relative; margin-bottom: 1.5rem; }
|
||||
.form-floating-custom .form-control { padding: 1rem 0.75rem 0.5rem 0.75rem; height: auto; }
|
||||
.form-floating-custom .form-label { position: absolute; top: 0.75rem; left: 0.75rem; transition: all 0.3s ease; pointer-events: none; color: #6c757d; z-index: 2; }
|
||||
.form-floating-custom .form-control:focus ~ .form-label,
|
||||
.form-floating-custom .form-control:not(:placeholder-shown) ~ .form-label { top: 0.25rem; font-size: 0.75rem; color: #0d6efd; font-weight: 600; }
|
||||
.input-pulse:hover:not(.no-animation) { animation: inputPulse 0.6s ease-in-out; }
|
||||
@keyframes inputPulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.02); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
.input-gradient:not(.no-animation) { position: relative; overflow: hidden; }
|
||||
.input-gradient:not(.no-animation)::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(13, 110, 253, 0.3), transparent); transition: left 0.5s; pointer-events: none; z-index: 1; }
|
||||
.input-gradient:not(.no-animation):focus::before { left: 100%; }
|
||||
.form-control.valid:not(.no-animation) { /*border-color: #198754; background: linear-gradient(45deg, #fff, #f8fff9);*/ animation: successGlow 1s ease-in-out; }
|
||||
@keyframes successGlow {
|
||||
0% { box-shadow: 0 0 5px rgba(25, 135, 84, 0.5); }
|
||||
50% { box-shadow: 0 0 20px rgba(25, 135, 84, 0.8); }
|
||||
100% { box-shadow: 0 0 5px rgba(25, 135, 84, 0.5); }
|
||||
}
|
||||
/* Animación para los campos del formulario */
|
||||
.form-group-animated { opacity: 0; transform: translateY(20px); animation: slideUp 0.6s ease-out forwards; }
|
||||
.form-group-animated:nth-child(1) { animation-delay: 0.1s; }
|
||||
.form-group-animated:nth-child(2) { animation-delay: 0.2s; }
|
||||
.form-group-animated:nth-child(3) { animation-delay: 0.3s; }
|
||||
.form-group-animated:nth-child(4) { animation-delay: 0.4s; }
|
||||
.form-group-animated:nth-child(5) { animation-delay: 0.5s; }
|
||||
.form-group-animated:nth-child(6) { animation-delay: 0.6s; }
|
||||
.form-group-animated:nth-child(7) { animation-delay: 0.7s; }
|
||||
.form-group-animated:nth-child(8) { animation-delay: 0.8s; }
|
||||
.form-group-animated:nth-child(9) { animation-delay: 0.9s; }
|
||||
.form-group-animated:nth-child(10) { animation-delay: 1.0s; }
|
||||
@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -87,23 +135,23 @@
|
||||
<h4 class="mb-4 animate__animated animate__fadeInDown title_glow">➕ Alta de Producto Frecuente</h4>
|
||||
<div class="card p-4 shadow-sm bg-white card-hover position-relative h-auto">
|
||||
<form id="altaProductoFrecuenteForm" action="/IMPORTADORES/productos_frecuentes/guardar" method="POST">
|
||||
<div class="row g-3">
|
||||
<div class="row g-3 form-group-animated">
|
||||
<!-- Sinónimo, Fracción, NICO -->
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 form-group-animated">
|
||||
<label for="sinonimo" class="form-label">Sinónimo *</label>
|
||||
<input type="text" id="sinonimo" name="sinonimo" class="form-control" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 form-group-animated">
|
||||
<label for="fraccion" class="form-label">Fracción *</label>
|
||||
<input type="text" id="fraccion" name="fraccion" class="form-control" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 form-group-animated">
|
||||
<label for="nico" class="form-label">NICO *</label>
|
||||
<input type="text" id="nico" name="nico" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<!-- Número de Parte / Proveedor -->
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-6 form-group-animated">
|
||||
<label for="numero_parte" class="form-label">Número de Parte</label>
|
||||
<input type="text" id="numero_parte" name="numero_parte" class="form-control">
|
||||
</div>
|
||||
@@ -115,7 +163,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Descripción -->
|
||||
<div class="col-12">
|
||||
<div class="col-12 form-group-animated">
|
||||
<label for="descripcion" class="form-label">Descripción</label>
|
||||
<textarea id="descripcion" name="descripcion" class="form-control" rows="2"></textarea>
|
||||
</div>
|
||||
@@ -135,7 +183,7 @@
|
||||
</select>
|
||||
</div>
|
||||
<!-- Uso de la Mercancía -->
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 form-group-animated">
|
||||
<label for="uso_mercancia" class="form-label">Uso de la Mercancía</label>
|
||||
<input type="text" id="uso_mercancia" name="uso_mercancia" class="form-control">
|
||||
</div>
|
||||
@@ -174,29 +222,28 @@
|
||||
|
||||
<!-- Criterio Preferencia / Tipo Mercancía -->
|
||||
<div class="col-md-6">
|
||||
<label for="criterio_preferencia" class="form-label">Criterio Preferencia</label>
|
||||
<!-- Agrega `disabled` al select de criterio -->
|
||||
<select id="criterio_preferencia" name="criterio_preferencia" class="form-select searchable" disabled>
|
||||
<option value="">-- Selecciona --</option>
|
||||
<?php foreach($criterios as $val => $lab): ?>
|
||||
<option value="<?= $val ?>"><?= htmlspecialchars($lab) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="criterio_preferencia" class="form-label">Criterio Preferencia</label>
|
||||
<!-- Agrega `disabled` al select de criterio -->
|
||||
<select id="criterio_preferencia" name="criterio_preferencia" class="form-select searchable" disabled>
|
||||
<option value="">-- Selecciona --</option>
|
||||
<?php foreach($criterios as $val => $lab): ?>
|
||||
<option value="<?= $val ?>"><?= htmlspecialchars($lab) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6 form-group-animated">
|
||||
<label for="tipo_mercancia" class="form-label">Tipo de Mercancía</label>
|
||||
<input type="text" id="tipo_mercancia" name="tipo_mercancia" class="form-control">
|
||||
</div>
|
||||
|
||||
<!-- Checkboxes -->
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 form-group-animated">
|
||||
<div class="form-check mt-2">
|
||||
<input class="form-check-input" type="checkbox" id="certificado_origen" name="certificado_origen" value="1">
|
||||
<label class="form-check-label" for="certificado_origen">Certificado de Origen</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-3 form-group-animated">
|
||||
<div class="form-check mt-2">
|
||||
<input class="form-check-input" type="checkbox" id="documento_en_original" name="documento_en_original" value="1">
|
||||
<label class="form-check-label" for="documento_en_original">Documento en Original</label>
|
||||
@@ -209,7 +256,7 @@
|
||||
<input type="hidden" name="frecuencia_uso" value="1">
|
||||
|
||||
<!-- Botones -->
|
||||
<div class="col-12 text-end mt-4">
|
||||
<div class="col-12 text-end mt-4 form-group-animated">
|
||||
<button type="submit" class="btn btn-primary mt-auto w-auto btn-animated">Guardar Producto</button>
|
||||
<a href="/IMPORTADORES/productos_frecuentes" class="btn btn-secondary ms-2 mt-auto w-auto btn-animated">Cancelar</a>
|
||||
</div>
|
||||
@@ -218,10 +265,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- Choices.js JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function fetchJsonOrThrow(url) {
|
||||
@@ -247,7 +296,7 @@
|
||||
])
|
||||
.then(([provData, umcData, paisData]) => {
|
||||
// Proveedores
|
||||
const provSel = document.getElementById('proveedor');
|
||||
const provSel = document.getElementById('proveedor');
|
||||
provSel.innerHTML = '<option value="">-- Selecciona Proveedor --</option>';
|
||||
provData.results.forEach(item => {
|
||||
const o = document.createElement('option');
|
||||
@@ -255,7 +304,7 @@
|
||||
provSel.appendChild(o);
|
||||
});
|
||||
// Unidades de Medida
|
||||
const umcSel = document.getElementById('umc_id');
|
||||
const umcSel = document.getElementById('umc_id');
|
||||
umcSel.innerHTML = '<option value="">-- Selecciona UMC --</option>';
|
||||
umcData.results.forEach(item => {
|
||||
const o = document.createElement('option');
|
||||
@@ -263,13 +312,14 @@
|
||||
umcSel.appendChild(o);
|
||||
});
|
||||
// Países
|
||||
const poSel = document.getElementById('pais_origen_destino');
|
||||
const pcSel = document.getElementById('pais_comprador_vendedor');
|
||||
const poSel = document.getElementById('pais_origen_destino');
|
||||
const pcSel = document.getElementById('pais_comprador_vendedor');
|
||||
poSel.innerHTML = pcSel.innerHTML = '<option value="">-- Selecciona País --</option>';
|
||||
paisData.results.forEach(item => {
|
||||
[poSel, pcSel].forEach(sel => {
|
||||
const o = document.createElement('option');
|
||||
o.value = item.id; o.textContent = item.text;
|
||||
const o = document.createElement('option');
|
||||
o.value = item.id;
|
||||
o.textContent = item.text;
|
||||
sel.appendChild(o);
|
||||
});
|
||||
});
|
||||
@@ -284,25 +334,26 @@
|
||||
});
|
||||
});
|
||||
|
||||
// Después de inicializar Choices.js:
|
||||
const prefEl = document.getElementById('preferencia');
|
||||
const critEl = document.getElementById('criterio_preferencia');
|
||||
const critChoice = critEl._choices;
|
||||
// Después de inicializar Choices.js:
|
||||
const prefEl = document.getElementById('preferencia');
|
||||
const critEl = document.getElementById('criterio_preferencia');
|
||||
const critChoice = critEl._choices;
|
||||
|
||||
function updateCriterio() {
|
||||
if (prefEl.value === 'PROSEC') {
|
||||
critEl.disabled = false;
|
||||
critChoice.enable();
|
||||
} else {
|
||||
critChoice.removeActiveItems();
|
||||
critChoice.disable();
|
||||
critEl.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
prefEl.addEventListener('change', updateCriterio);
|
||||
updateCriterio();
|
||||
if (critChoice) {
|
||||
function updateCriterio() {
|
||||
if (prefEl.value === 'PROSEC') {
|
||||
critEl.disabled = false;
|
||||
critChoice.enable();
|
||||
} else {
|
||||
critChoice.removeActiveItems();
|
||||
critChoice.disable();
|
||||
critEl.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
prefEl.addEventListener('change', updateCriterio);
|
||||
updateCriterio();
|
||||
}
|
||||
|
||||
})
|
||||
.catch(err => {
|
||||
@@ -315,7 +366,67 @@ updateCriterio();
|
||||
});
|
||||
});
|
||||
|
||||
// Script para manejar las animaciones de validación
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const inputs = document.querySelectorAll('input.form-control, select.form_select');
|
||||
const selects = document.querySelectorAll('select.form_select');
|
||||
|
||||
inputs.forEach(input => {
|
||||
// Validación en tiempo real
|
||||
input.addEventListener('input', function() {
|
||||
if (this.checkValidity()) {
|
||||
this.classList.remove('shake');
|
||||
this.classList.add('valid');
|
||||
} else {
|
||||
this.classList.remove('valid');
|
||||
}
|
||||
});
|
||||
|
||||
// Efecto shake en campos inválidos
|
||||
input.addEventListener('invalid', function() {
|
||||
this.classList.add('shake');
|
||||
setTimeout(() => {
|
||||
this.classList.remove('shake');
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
|
||||
// Configurar selects
|
||||
selects.forEach(select => {
|
||||
select.addEventListener('change', function() {
|
||||
updateSelectState(this);
|
||||
});
|
||||
updateSelectState(select);
|
||||
});
|
||||
|
||||
function updateSelectState(select) {
|
||||
select.setAttribute('value', select.value);
|
||||
|
||||
if (select.value && select.value !== '') {
|
||||
select.classList.add('valid');
|
||||
select.classList.remove('invalid');
|
||||
} else {
|
||||
select.classList.remove('valid');
|
||||
if (select.hasAttribute('required') && select.closest('form')?.classList.contains('was-validated')) {
|
||||
select.classList.add('invalid');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Validación del formulario
|
||||
document.getElementById('altaProductoFrecuenteForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let isValid = true;
|
||||
inputs.forEach(input => {
|
||||
if (!input.checkValidity()) {
|
||||
input.classList.add('shake');
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -28,8 +28,8 @@
|
||||
.card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important; }
|
||||
.btn-pulse { animation: pulse 2s infinite; }
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
.fade-in-up { animation: fadeInUp 0.8s ease-out; }
|
||||
@@ -171,10 +171,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$(document).ready(function () {
|
||||
$('#tablaProductosFrecuentes').DataTable({
|
||||
language: {
|
||||
url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/es-ES.json'
|
||||
url: 'https://cdn.datatables.net/plug-ins/1.13.4/i18n/es-ES.json'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user