msaldain
f483058c2c
En ./services/app/ Se sirvierons los HTML de la carpeta /pages. Se crearon los endpoints REST para crear y listar roles, usuarios, categorias, productos.
105 lines
2.7 KiB
HTML
105 lines
2.7 KiB
HTML
<!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>
|