crud-js

<div class="container">


    <h3>Solicitudes: <?php echo $carpeta["carpeta"];?></h3>
    <form action="" id="formSolicitud">
 
    <input type="hidden" name="carpeta" id="carpeta" value="<?php echo $carpeta["carpeta"];?>">
    <div class="row align-items-center">
        <!-- Campos ocultos para enviar el id al servidor -->
        <div class="col-2">
            <div class="form-group">
                <label for="registro">Presenta:</label>
                <input type="text" name="registro" class="form-control inputstl" placeholder="Carpeta Judicial">
            </div>
        </div>
        <div class="col-3">
            <div class="form-group">
                <label for="solicitud">Solicitud:</label>
                <input type="text" name="solicitud" class="form-control inputstl" placeholder="Carpeta Judicial">
            </div>
        </div>
        <div class="col-2">
            <div class="form-group">
                <label for="f_registro">Fecha registro:</label>
                <input type="date" name="f_registro" class="form-control inputstl" id="Iv_complementaria" placeholder="Carpeta Judicial" aria-invalid="true">
            </div>
        </div>
        <div class="col-2">
            <div class="form-group">
                <label for="comentario">Plazo/Comentario :</label>
                <input type="text" name="comentario" class="form-control inputstl" id="I_complementaria" placeholder="Carpeta Judicial" aria-invalid="true">
            </div>
        </div>
        <div class="col-2">
            <div class="form-group">
                <label for="f_vence">Fecha vence:</label>
                <input type="date" name="f_vence" class="form-control inputstl" id="f_vence" placeholder="Carpeta Judicial" aria-invalid="true">
            </div>
        </div>
        <div class="col-1">
            <div class="form-group">
                <label for="pdf">PDF :</label>
                <input type="text" name="pdf" class="form-control inputstl" id="Iv_complementaria" placeholder="Carpeta Judicial" aria-invalid="true">
            </div>
        </div>
        <div>
            <div class="form-group mt-2">
                <button type="button" class="btn btn-success" id="guardarSolicitudBtn1" >Guardar</button>
            </div>
   
        </div>
    </div>
</form>
       
    <input type="hidden" name="carpeta" id="inputCarpeta" value="<?php echo $carpeta["carpeta"];?>">
    <table id="solicitudtabla" class="table">
        <thead class="thead-dark">
            <tr>
                <th>Id</th>
                <th>Carpeta</th>
                <th>Registro</th>
                <th>Solicitud</th>
                <th>Fecha de Registro</th>
                <th>Comentario</th>
                <th>Fecha de Vencimiento</th>
                <th>Estado</th>
                <th>Resolvio</th>
                <th>Fecha de Contesto</th>
            </tr>
        </thead>
        <tbody id="tablaBody"></tbody>
    </table>

 <!-- Modal para la edición -->
<!-- Modal -->
<div class="modal fade" id="modalEditar" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="id-edit"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="formularioEditar">
      <div class="modal-body">

   
                        <input type="hidden" name="id" id="editId">
                        <div class="form-group">
                            <label for="editRegistro">Resolvio:</label>
                            <input type="text" class="form-control" id="resolvio" name="resolvio">
                        </div>
                        <div class="form-group">
                            <label for="editRegistro">Resolvio:</label>
                            <input type="date" class="form-control" id="f_contesto" name="f_contesto">
                        </div>

                     
                 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Guardar Cambios</button>
      </div>
      </form>
    </div>
  </div>
</div>




    </div>
    <script>
        const tablaBody = document.getElementById('tablaBody');
        const modalEditar = document.getElementById('modalEditar');
        const formularioEditar = document.getElementById('formularioEditar');
    datos=[];
    // Variable para almacenar temporalmente el id
    let idSeleccionado;
       
    optenerDatos();//Optemos los datos-const datos = [{id: 1, carpeta: 'Registro 1', registro: 'a', solicitud: 2, f_registro: 'Registro 2', comentario: 'a', f_vence: 'a', Estado: 'a', resolvio: 'a', f_contesto: 'f_contesto'}];
    function optenerDatos() {
        // Obtener el valor del input
        var valorCarpeta = document.getElementById("inputCarpeta").value;
        // Imprimir el valor en la consola
        console.log("Valor de la carpeta:", valorCarpeta);

        //const datos = [{id: 1, carpeta: 'Registro 1', registro: 'a', solicitud: 2, f_registro: 'Registro 2', comentario: 'a', f_vence: 'a', Estado: 'a', resolvio: 'a', f_contesto: 'f_contesto'}];
        fetch(`http://localhost/api/0-solicitud_tabla.php?carpeta=${valorCarpeta}`)
       .then(res => res.json())
     .then(data => {
        //console.log(data.result);
        datos=data.result;
       // console.log("datos", datos)
        pintarTabla(datos);//Pintamos la tabla
       });
    }


    function pintarTabla(datos) {
        // Actualizar la tabla después de guardar los datos exitosamente $('#solicitudtabla').DataTable().ajax.reload();

        let tablaHTML = '';

        for (let dato of datos) {
       
            tablaHTML += `
                <tr>
                    <td>${dato.id}</td>
                    <td>${dato.carpeta}</td>
                    <td>${dato.registro || ''}</td>
                    <td>${dato.solicitud || ''}</td>
                    <td>${dato.f_registro || ''}</td>
                    <td>${dato.comentario || ''}</td>
                    <td>${dato.f_vence || ''}</td>
                    <td>
                            <button class="btn btn-primary" onclick="abrirModalEditar(${dato.id})">Editar</button>
                    </td>
                    <td>${dato.resolvio || ''}</td>
                    <td>${dato.f_contesto || ''}</td>
                </tr>
            `;
        };
   
        // Insertar el HTML generado en el documento
        tablaBody.innerHTML = tablaHTML;
    }

    function abrirModalEditar(idEditar) {
        //Verificamos que se ejecute la funcion con el valor id console.log(idEditar);
        //Transformamos id a string  //const id = idEditar.toString();
        document.getElementById("formularioEditar").reset();
        const id = parseInt(idEditar);
        document.getElementById("id-edit").textContent=id;
        // Buscar el dato correspondiente al ID  console.log("id",id); console.log("datos-abrirmodal",datos);     console.log("dato-id",dato.id);
     
        const dato = datos.find(item => item.id === id);//
   
        idSeleccionado=dato.id;
       
        // Mostrar la modal
         const modalElement = document.getElementById("modalEditar");
        const modal = new bootstrap.Modal(modalElement);
        modal.show();
       
    }
     
    formularioEditar.addEventListener('submit', function(event) {
       
        event.preventDefault();
        //obtenemos los datos del formulario
        const datosFormulario = new FormData(document.getElementById('formularioEditar'));
        console.log([...datosFormulario.entries()]);
        // console.log("le pegue",dato.id);
        // Añade el id a los datos del formulario antes de enviarlo
        datosFormulario.append('id', idSeleccionado);


        fetch(`http://localhost/api/0-solicitud_tabla.php`,{
        method:'POST',
        body:datosFormulario,
        })
        .then(res=>res.json())
        .then(data=>{
            //console.log(data);
            optenerDatos();
        })
        .catch(error => {
        console.error('Error:', error);
        // Manejar el error
        });
       
        // Restablece el formulario y cierra la modal
        formularioEditar.reset();
         
        $(modalEditar).modal('hide');
       // optenerDatos();
    });
     //formulario uno

     const formSolicitud = document.getElementById('formSolicitud');
    document.getElementById('guardarSolicitudBtn1').addEventListener('click', function(event) {
 
        event.preventDefault(event);
        //registros.push(nuevoRegistro);
        guardarSolicitud();
        // mostrarRegistros();
        formSolicitud.reset();
    });

    function guardarSolicitud() {
        // Obtener los valores del formulario
        const datos = new FormData(document.getElementById('formSolicitud'));
       // console.log([...datos.entries()]);
       
        //Solicitud al servidor-registros.push(nuevoRegistro);
        fetch('http://localhost/api/0-solicitud.php', {
            method: 'POST',
            body: datos,
        })
        .then(res => res.json())
        .then(data => {
            console.log(data);
            console.log(data.status);
             
            if (data.status === 'Correcto2') {
                Swal.fire({
                    title: 'Éxito',
                    text: 'Datos guardados exitosamente',
                    confirmButtonColor: '#3085d6',
                });

            }
           //  optenerDatos();


        })
        .catch(error => {
            console.error('Error al procesar la solicitud:', error);
            // Aquí puedes manejar el error de manera adecuada, ya sea mostrando un mensaje al usuario o realizando otra acción.
       
        });
    }




    </script>


<script>
    $(document).ready(function() {
        $('#solicitudtabla').DataTable({
            "order": [
                [4, "desc"]
            ],
            pageLength: 4,
            lengthMenu: [
                [4, 10, 20, -1],
                [4, 10, 20, 'Todos']
            ],
            columnDefs: [{
                orderable: false,
                targets: -1
            }],
            dom: '<"row"<"col-sm-1 col-md-1"l><"col-sm-7 col-md-7"f><"col-sm-4 col-md-4"<"dt-buttons btn-group flex-wrap"B>>>t<"row"<"col-sm-12 col-md-3"p><"col-sm-12 col-md-7"i>>',

// Corregir el nombre del objeto a "buttons"buttons:-- botones:
            botones: [{
                    text: 'csv',
                    extend: 'csvHtml5',
                },
                {
                    texto: 'excel',
                    extensión: 'excelHtml5',
                },
                {
                    texto: 'pdf',
                    extensión: 'pdfHtml5',
                },

            ]
        });
    });
</script>

Comentarios

Publicar un comentario

Entradas populares de este blog

API Web Crypto,

 I have digital signature certificates efirma de sat mexico. I want an app to load the .key certificate and convert it to pem format. Once you convert it, display it in a textarea using the Web Crypto API. Tengo certificados de firma digital efirma de sat mexico. Quiero una aplicación que cargue el certificado .key y lo convierta a formato pem. Una vez que lo convierta, lo muestre en un área de texto utilizando la API Web Crypto. ChatGPT Plus ChatGPT To convert a .key certificate to PEM format using the Web Crypto API, you can use the following steps: Load the .key certificate file using the FileReader API. Here's an example code snippet to achieve that: javascript Copiar código const fileInput = document . querySelector ( 'input[type="file"]' ); const reader = new FileReader (); reader. onload = () => { const keyData = reader. result ; // Code to convert the key data to PEM format }; reader. readAsText (fileInput. files [ 0 ]); Convert the key dat...
Leer más

React Events

 Reaccionar eventos Al igual que los eventos HTML DOM, React puede realizar acciones basadas en eventos del usuario.React tiene los mismos eventos que HTML: hacer clic, cambiar, pasar el mouse, etc. Agregar eventos Los eventos de React están escritos en la sintaxis de camelCase: onClick en lugar de onclick . Los controladores de eventos de React están escritos entre llaves: onClick={shoot} en lugar de onclick="shoot()" . React: <button onClick={shoot}>Take the Shot!</button> Html: <button onclick="shoot()">Take the Shot!</button> Coloque la shootfunción dentro del Footballcomponente: function Football() {   const shoot = () => {     alert("Great Shot!");   }   return (     <button onClick={shoot}>Take the shot!</button>   ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Football />); Pasar argumentos Para pasar un argumento a un controlador de eventos, use una...
Leer más

firmas digitales integradas en PDFs

 Para las firmas digitales integradas en PDFs, el proceso es un poco diferente al de simplemente manejar archivos y firmas por separado. Aquí te explico en detalle cómo se realiza y cómo el receptor obtiene la clave pública del firmante. Funcionamiento de las Firmas Digitales Integradas en PDFs Firmante : El firmante utiliza un software que soporta firmas digitales en PDF (como Adobe Acrobat, por ejemplo) para firmar el documento PDF. Este software inserta la firma digital en el PDF y también incluye el certificado digital del firmante dentro del archivo PDF. Receptor : El receptor abre el documento PDF utilizando un software compatible con firmas digitales (Adobe Acrobat Reader, por ejemplo). Este software extrae la firma digital y el certificado digital del firmante del PDF. Pasos Detallados Firma del Documento PDF : El documento PDF es firmado utilizando la clave privada del firmante. Se genera un hash del contenido del PDF. El hash es cifrado utilizando la clave privada del fir...
Leer más