289 lines
14 KiB
HTML
289 lines
14 KiB
HTML
<!-- Container Principal -->
|
|
<div x-data="modals" @keydown.escape="closeModal" class="bg-white rounded-lg shadow">
|
|
<div class="container mx-auto p-6 w-full">
|
|
<div class="w-full ">
|
|
<h1 class="text-2xl font-bold mb-4">Registrar PQR</h1>
|
|
<div class="justify-between w-full md:flex mb-4">
|
|
<p class="text-sm text-center md:text-left">Petición, Queja o Reclamo</p>
|
|
</div>
|
|
|
|
<!-- Contenedor de Notificación -->
|
|
<div x-show="mensaje" x-transition
|
|
class="fixed top-0 left-1/2 transform -translate-x-1/2 mt-4 bg-green-500 text-white px-4 py-2 rounded shadow z-50">
|
|
<p x-text="mensaje"></p>
|
|
</div>
|
|
|
|
<!-- Agregar el GIF de carga -->
|
|
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-50 justify-center items-center">
|
|
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
|
|
</div>
|
|
<!-- Contenedor con Flex para Formulario e Información -->
|
|
<div class="flex flex-col md:flex-row md:space-x-8">
|
|
<!-- Contenedor del Formulario -->
|
|
<div class=" p-6 rounded-lg border w-full shadow ">
|
|
<h2 class="text-xl font-bold mb-2">Agregar registro</h2>
|
|
<form @submit.prevent="submitAdd" class="text-sm">
|
|
<div class="md:flex justify-between w-full md:space-x-2">
|
|
<div class="w-full" x-init="newUsuario = '{{ .user.NombreUsuario }}'">
|
|
<label class="block mt-4 mb-2" for="addUsuario">Usuario</label>
|
|
<input type="text" id="addUsuario" x-model="newUsuario" placeholder="Usuario"
|
|
class="border border-gray-300 rounded w-full p-2" required disabled>
|
|
</div>
|
|
<div class="w-full">
|
|
<label class="block mt-4 mb-2" for="addNombre">Nombre</label>
|
|
<input type="text" id="addNombre" x-model="newNombre" placeholder="Nombre"
|
|
class="border border-gray-300 rounded w-full p-2" required>
|
|
</div>
|
|
</div>
|
|
<div class="md:flex justify-between w-full md:space-x-2">
|
|
<div class="w-full">
|
|
<label class="block mt-4 mb-2" for="addCedula">Cédula</label>
|
|
<input type="number" id="addCedula" x-model="newCedula" placeholder="Cédula"
|
|
class="border border-gray-300 rounded w-full p-2" required>
|
|
</div>
|
|
<div class="w-full">
|
|
<label class="block mt-4 mb-2" for="addTelefono">Teléfono</label>
|
|
<input type="number" id="addTelefono" x-model="newTelefono" placeholder="Teléfono"
|
|
class="border border-gray-300 rounded w-full p-2" required>
|
|
</div>
|
|
</div>
|
|
<div class="md:flex justify-between w-full md:space-x-2">
|
|
<div class="w-full">
|
|
<label class="block mt-4 mb-2" for="addDepartamento">Departamento</label>
|
|
<input type="text" id="addDepartamento" x-model="newDepartamento"
|
|
placeholder="Departamento" class="border border-gray-300 rounded w-full p-2"
|
|
required>
|
|
</div>
|
|
<div class="w-full">
|
|
<label class="block mt-4 mb-2" for="addCiudad">Ciudad</label>
|
|
<input type="text" id="addCiudad" x-model="newCiudad" placeholder="Ciudad"
|
|
class="border border-gray-300 rounded w-full p-2" required>
|
|
</div>
|
|
</div>
|
|
<label class="block mt-4 mb-2" for="addDireccion">Dirección</label>
|
|
<input type="text" id="addDireccion" x-model="newDireccion" placeholder="Dirección"
|
|
class="border border-gray-300 rounded w-full p-2" required>
|
|
<div class="md:flex justify-between w-full md:space-x-2">
|
|
<div class="w-full">
|
|
<label class="block mt-4 mb-2" for="addBarrio">Barrio</label>
|
|
<input type="text" id="addBarrio" x-model="newBarrio" placeholder="Barrio"
|
|
class="border border-gray-300 rounded w-full p-2" required>
|
|
</div>
|
|
<div class="w-full">
|
|
<label class="block mt-4 mb-2" for="addPqrsEmail">Email</label>
|
|
<input type="email" id="addPqrsEmail" x-model="newPqrsEmail" placeholder="Email"
|
|
class="border border-gray-300 rounded w-full p-2" required>
|
|
</div>
|
|
</div>
|
|
<label class="block mt-4 mb-2" for="addSolicitud">Solicitud</label>
|
|
<select id="addSolicitud" x-model="newSolicitud"
|
|
class="border border-gray-300 rounded w-full p-2" required>
|
|
<option value="">Seleccione una opción</option>
|
|
<option value="P">Petición</option>
|
|
<option value="Q">Queja</option>
|
|
<option value="R">Reclamo</option>
|
|
<option value="R">Recursos</option>
|
|
</select>
|
|
|
|
<label class="block mt-4 mb-2" for="addDescripcion">Descripción</label>
|
|
<textarea id="addDescripcion" x-model="newDescripcion" placeholder="Descripción"
|
|
class="border border-gray-300 rounded w-full p-2" required></textarea>
|
|
|
|
<div class="mt-4">
|
|
<label class="block mb-2" for="addImagen">Imagen (opcional)</label>
|
|
<input type="file" id="addImagen" @change="handleImageUpload" accept=".jpg,.jpeg,.png,.pdf"
|
|
class="border border-gray-300 rounded w-full p-2">
|
|
<div class="mt-2" x-show="previewImage || previewPdf">
|
|
<!-- Previsualización de imagen -->
|
|
<img x-show="previewImage" :src="previewImage" alt="Vista previa de imagen"
|
|
class="max-w-full max-h-32 rounded shadow">
|
|
<!-- Previsualización de PDF -->
|
|
<iframe x-show="previewPdf" :src="previewPdf"
|
|
class="w-full h-32 border rounded"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" id="addIsAcept" x-model="newIsAcept" class="mr-2">
|
|
Acepto ser notificado en conformidad con el artículo 56 de la ley 1437 del 2011 a mi correo electrónico con la
|
|
respuesta a mi solicitud.
|
|
</label>
|
|
</div>
|
|
|
|
<div class="mt-4 flex justify-between">
|
|
<button type="submit" class="bg-[#8eb02f] text-white px-4 py-2 rounded">Enviar</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Contenedor de Información -->
|
|
<div class="bg-gray-100 border p-6 rounded-lg h-auto w-full mt-8 md:mt-0 my-auto ">
|
|
<h2 class="text-xl font-bold mb-4">Información sobre PQR</h2>
|
|
<p class="mb-4"><strong>Señor usuario:</strong> Gases del Oriente SA ESP ha dispuesto esta oficina
|
|
virtual para facilitar y agilizar sus peticiones, quejas y reclamos, de una manera rápida y
|
|
sencilla. Es importante que comprenda los siguientes conceptos para tramitar una PQR:</p>
|
|
|
|
<p class="mt-4"><strong>Petición:</strong> Es cualquier solicitud que hace un usuario relacionado
|
|
con el servicio de Gas Natural, puede ser un cambio de suscriptor, actualización de dirección,
|
|
duplicado de facturas, etc.</p>
|
|
|
|
<p class="mt-4"><strong>Queja:</strong> Cualquier expresión verbal o escrita referente a un mal
|
|
comportamiento de algún funcionario o inconformidad en la forma en que se presta el servicio de
|
|
Gas Natural.</p>
|
|
|
|
<p class="mt-4"><strong>Reclamo:</strong> Requerimiento mediante el cual el usuario manifiesta su
|
|
inconformidad por algún valor facturado.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alpine.js Script -->
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('modals', () => ({
|
|
addModal: false,
|
|
editModal: false,
|
|
viewModal: false,
|
|
showConfirmModal: false,
|
|
mensaje: '',
|
|
|
|
newUsuario: '',
|
|
newNombre: '',
|
|
newCedula: '',
|
|
newSolicitud: '',
|
|
newDepartamento: '',
|
|
newCiudad: '',
|
|
newDireccion: '',
|
|
newTelefono: '',
|
|
newBarrio: '',
|
|
newPqrsEmail: '',
|
|
newDescripcion: '',
|
|
newNotas: '',
|
|
newRevisado: false,
|
|
|
|
Usuario: '',
|
|
Nombre: '',
|
|
Cedula: '',
|
|
Solicitud: '',
|
|
Departamento: '',
|
|
Ciudad: '',
|
|
Direccion: '',
|
|
Telefono: '',
|
|
Barrio: '',
|
|
PqrsEmail: '',
|
|
Descripcion: '',
|
|
Notas: '',
|
|
Revisado: false,
|
|
|
|
previewImage: null,
|
|
previewPdf: null,
|
|
newImagen: null,
|
|
newIsAcept: false,
|
|
|
|
Id: null,
|
|
deleteId: null,
|
|
loading: false,
|
|
totalRecords: 0, // Agregar esta línea
|
|
isLoading: false,
|
|
|
|
//CERRAR MODALES
|
|
closeModal() {
|
|
this.addModal = false;
|
|
this.editModal = false;
|
|
this.viewModal = false;
|
|
this.showConfirmModal = false;
|
|
},
|
|
//CREAR
|
|
submitAdd() {
|
|
this.loading = true;
|
|
fetch('/app/pqr', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
usuario: this.newUsuario,
|
|
nombre: this.newNombre,
|
|
cedula: this.newCedula,
|
|
solicitud: this.newSolicitud,
|
|
departamento: this.newDepartamento,
|
|
ciudad: this.newCiudad,
|
|
direccion: this.newDireccion,
|
|
telefono: this.newTelefono,
|
|
barrio: this.newBarrio,
|
|
pqremail: this.newPqrsEmail,
|
|
descripcion: this.newDescripcion,
|
|
notas: this.newNotas,
|
|
revisado: this.newRevisado,
|
|
imagen: this.newImagen || null,
|
|
is_acept: this.newIsAcept || false
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(() => {
|
|
// Limpiar los campos después de guardar
|
|
this.newNombre = '';
|
|
this.newCedula = '';
|
|
this.newSolicitud = '';
|
|
this.newDepartamento = '';
|
|
this.newCiudad = '';
|
|
this.newDireccion = '';
|
|
this.newTelefono = '';
|
|
this.newBarrio = '';
|
|
this.newPqrsEmail = '';
|
|
this.newDescripcion = '';
|
|
this.newNotas = '';
|
|
this.newRevisado = '';
|
|
this.mensaje = 'Registro guardado exitosamente';
|
|
this.newImagen = null,
|
|
this.newIsAcept = false
|
|
this.closeModal();
|
|
|
|
|
|
// Mostrar el mensaje de notificación durante unos segundos
|
|
setTimeout(() => {
|
|
this.mensaje = ''; // Borrar el mensaje después de 3 segundos
|
|
}, 3000);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
this.mensaje = error;
|
|
// Mostrar el mensaje de error durante unos segundos
|
|
setTimeout(() => {
|
|
this.mensaje = ''; // Borrar el mensaje después de 3 segundos
|
|
}, 3000);
|
|
})
|
|
.finally(() => {
|
|
this.loading = false; // Ocultar el GIF de carga
|
|
});
|
|
},
|
|
handleImageUpload(event) {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
const validFormats = ["image/jpeg", "image/png", "application/pdf"];
|
|
if (!validFormats.includes(file.type)) {
|
|
alert("Solo se aceptan archivos en formato JPG, PNG o PDF.");
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
if (file.type === "application/pdf") {
|
|
this.previewPdf = e.target.result;
|
|
this.previewImage = null; // Limpiar vista previa de imagen
|
|
} else {
|
|
this.previewImage = e.target.result;
|
|
this.previewPdf = null; // Limpiar vista previa de PDF
|
|
}
|
|
this.newImagen = e.target.result; // Base64 de la imagen o PDF
|
|
};
|
|
reader.readAsDataURL(file);
|
|
},
|
|
|
|
}));
|
|
});
|
|
</script>
|
|
</div> |