Creado y levantado del workaround

2025-08-25 17:21:27 +00:00
parent f7962f894d
commit 922da441eb
12 changed files with 3121 additions and 0 deletions
@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="es">
+<head>
+  <meta charset="utf-8" />
+  <title>Usuarios</title>
+</head>
+<body>
+  <h1>Usuarios</h1>
+
+  <h2>Crear usuario</h2>
+  <form id="form-usuario">
+    <div>
+      <label>Documento:
+        <input name="documento" type="text" />
+      </label>
+    </div>
+    <div>
+      <label>Nombre:
+        <input name="nombre" type="text" required />
+      </label>
+    </div>
+    <div>
+      <label>Apellido:
+        <input name="apellido" type="text" required />
+      </label>
+    </div>
+    <div>
+      <label>Correo:
+        <input name="correo" type="email" />
+      </label>
+    </div>
+    <div>
+      <label>Teléfono:
+        <input name="telefono" type="text" />
+      </label>
+    </div>
+    <div>
+      <label>Fecha de nacimiento:
+        <input name="fec_nacimiento" type="date" />
+      </label>
+    </div>
+    <button type="submit">Guardar</button>
+  </form>
+
+  <h2>Listado</h2>
+  <button id="btn-recargar">Recargar</button>
+  <table border="1" cellpadding="6">
+    <thead>
+      <tr>
+        <th>ID</th><th>Documento</th><th>Nombre</th><th>Apellido</th>
+        <th>Correo</th><th>Teléfono</th><th>Nacimiento</th><th>Activo</th>
+      </tr>
+    </thead>
+    <tbody id="tbody"></tbody>
+  </table>
+
+  <script>
+    const API = '/api/usuarios';
+
+    async function listar() {
+      const res = await fetch(API);
+      const data = await res.json();
+      const tbody = document.getElementById('tbody');
+      tbody.innerHTML = '';
+      data.forEach(u => {
+        const tr = document.createElement('tr');
+        tr.innerHTML = `
+          <td>${u.id_usuario}</td>
+          <td>${u.documento ?? ''}</td>
+          <td>${u.nombre}</td>
+          <td>${u.apellido}</td>
+          <td>${u.correo ?? ''}</td>
+          <td>${u.telefono ?? ''}</td>
+          <td>${u.fec_nacimiento ? u.fec_nacimiento.substring(0,10) : ''}</td>
+          <td>${u.activo ? 'Sí' : 'No'}</td>
+        `;
+        tbody.appendChild(tr);
+      });
+    }
+
+    document.getElementById('form-usuario').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const fd = new FormData(e.target);
+      const payload = Object.fromEntries(fd.entries());
+      if (payload.fec_nacimiento === '') delete payload.fec_nacimiento;
+      const res = await fetch(API, {
+        method: 'POST',
+        headers: {'Content-Type':'application/json'},
+        body: JSON.stringify(payload)
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(()=>({error:'Error'}));
+        alert('Error: ' + (err.error || res.statusText));
+        return;
+      }
+      e.target.reset();
+      await listar();
+    });
+
+    document.getElementById('btn-recargar').addEventListener('click', listar);
+    listar();
+  </script>
+</body>
+</html>