function UserPage
This commit is contained in:
@@ -0,0 +1,174 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie";
|
||||
import { envConfig } from "@/app/lib/config";
|
||||
|
||||
interface Perfil {
|
||||
id_perfil: number;
|
||||
perfil: string;
|
||||
}
|
||||
|
||||
interface Usuario {
|
||||
id_usuario: number;
|
||||
nombre: string;
|
||||
apellido_paterno: string;
|
||||
apellido_materno: string;
|
||||
usuario: string;
|
||||
activo: number;
|
||||
descripcion: string;
|
||||
perfil: Perfil;
|
||||
}
|
||||
|
||||
export default function UserPage() {
|
||||
|
||||
const [usuarios, setUsuarios] = useState<Usuario[]>([]);
|
||||
const [perfiles, setPerfiles] = useState<Perfil[]>([]);
|
||||
|
||||
const [nombre, setNombre] = useState("");
|
||||
const [apellidoPaterno, setApellidoPaterno] = useState("");
|
||||
const [apellidoMaterno, setApellidoMaterno] = useState("");
|
||||
const [usuario, setUsuario] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [descripcion, setDescripcion] = useState("");
|
||||
const [idPerfil, setIdPerfil] = useState<number | "">("");
|
||||
const [activo, setActivo] = useState(true);
|
||||
|
||||
const API = `${envConfig.apiUrl}/user`;
|
||||
const token = Cookies.get("token");
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
|
||||
const obtenerUsuarios = async () => {
|
||||
try {
|
||||
const res = await axios.get(API, { headers });
|
||||
setUsuarios(res.data);
|
||||
} catch (error) {
|
||||
console.error("Error al obtener usuarios", error);
|
||||
}
|
||||
};
|
||||
|
||||
const obtenerPerfiles = async () => {
|
||||
try {
|
||||
const res = await axios.get(`${API}/perfil`, { headers });
|
||||
setPerfiles(res.data);
|
||||
} catch (error) {
|
||||
console.error("Error al obtener perfiles", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
obtenerUsuarios();
|
||||
obtenerPerfiles();
|
||||
}, []);
|
||||
|
||||
const crearUsuario = async () => {
|
||||
|
||||
if (!nombre || !apellidoPaterno || !usuario || !password || !idPerfil) {
|
||||
alert("Todos los campos obligatorios deben llenarse.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await axios.post(
|
||||
`${API}/create`,
|
||||
{
|
||||
nombre,
|
||||
apellido_paterno: apellidoPaterno,
|
||||
apellido_materno: apellidoMaterno,
|
||||
usuario,
|
||||
password,
|
||||
descripcion,
|
||||
activo: activo ? 1 : 0,
|
||||
id_perfil: idPerfil,
|
||||
},
|
||||
{ headers }
|
||||
);
|
||||
|
||||
limpiarFormulario();
|
||||
obtenerUsuarios();
|
||||
} catch (error) {
|
||||
console.error("Error al crear usuario", error);
|
||||
}
|
||||
};
|
||||
|
||||
const limpiarFormulario = () => {
|
||||
setNombre("");
|
||||
setApellidoPaterno("");
|
||||
setApellidoMaterno("");
|
||||
setUsuario("");
|
||||
setPassword("");
|
||||
setDescripcion("");
|
||||
setIdPerfil("");
|
||||
setActivo(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 style={{ color: "rgb(3, 1, 72)" }}>CREAR USUARIO</h1>
|
||||
|
||||
<div style={{ marginBottom: "15px" }}>
|
||||
|
||||
<input placeholder="Nombre" value={nombre} onChange={(e) => setNombre(e.target.value)} />
|
||||
|
||||
<input placeholder="Apellido Paterno" value={apellidoPaterno} onChange={(e) => setApellidoPaterno(e.target.value)} />
|
||||
|
||||
<input placeholder="Apellido Materno" value={apellidoMaterno} onChange={(e) => setApellidoMaterno(e.target.value)} />
|
||||
|
||||
<input placeholder="Usuario" value={usuario} onChange={(e) => setUsuario(e.target.value)} />
|
||||
|
||||
<input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
|
||||
|
||||
<input placeholder="Descripción" value={descripcion} onChange={(e) => setDescripcion(e.target.value)} />
|
||||
|
||||
<select value={idPerfil} onChange={(e) => setIdPerfil(Number(e.target.value))}>
|
||||
<option value="">Seleccione Perfil</option>
|
||||
{perfiles.map((p) => (
|
||||
<option key={p.id_perfil} value={p.id_perfil}>
|
||||
{p.perfil}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<label>
|
||||
Activo
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={activo}
|
||||
onChange={(e) => setActivo(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button onClick={crearUsuario}>
|
||||
Crear Usuario
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ overflow: "auto", maxHeight: "350px" }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Nombre</th>
|
||||
<th>Usuario</th>
|
||||
<th>Perfil</th>
|
||||
<th>Activo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{usuarios.map((u) => (
|
||||
<tr key={u.id_usuario}>
|
||||
<td>{u.id_usuario}</td>
|
||||
<td>{u.nombre} {u.apellido_paterno}</td>
|
||||
<td>{u.usuario}</td>
|
||||
<td>{u.perfil?.perfil}</td>
|
||||
<td>{u.activo === 1 ? "Sí" : "No"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Generated
+18
@@ -693,6 +693,7 @@
|
||||
"version": "2.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
|
||||
"integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
@@ -732,6 +733,7 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -752,6 +754,7 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -772,6 +775,7 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -792,6 +796,7 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -812,6 +817,7 @@
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -832,6 +838,7 @@
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -852,6 +859,7 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -872,6 +880,7 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -892,6 +901,7 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -912,6 +922,7 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -932,6 +943,7 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -952,6 +964,7 @@
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -972,6 +985,7 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -1841,6 +1855,7 @@
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"engines": {
|
||||
@@ -1851,6 +1866,7 @@
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
||||
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
@@ -2200,6 +2216,7 @@
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
|
||||
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true
|
||||
},
|
||||
@@ -2246,6 +2263,7 @@
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"engines": {
|
||||
|
||||
@@ -42,6 +42,7 @@ export async function proxy(request: NextRequest) {
|
||||
"/Monitor",
|
||||
"/ActivosMantenimiento",
|
||||
"/Periodo",
|
||||
"/Usuarios",
|
||||
];
|
||||
|
||||
if (role === 5 && !onlyImpresiones.includes(pathname)) {
|
||||
@@ -67,6 +68,7 @@ export const config = {
|
||||
matcher: [
|
||||
"/",
|
||||
"/Reportes",
|
||||
"/Usuarios",
|
||||
"/Periodo",
|
||||
"/Monitor",
|
||||
"/QuitarSancion",
|
||||
|
||||
Reference in New Issue
Block a user