Initial commit
This commit is contained in:
Lizandro Guarnizo
@@ -0,0 +1,289 @@
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user