swetalert usuarios
This commit is contained in:
+141
-135
@@ -4,171 +4,177 @@ import { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie";
|
||||
import { envConfig } from "@/app/lib/config";
|
||||
import Swal from "sweetalert2";
|
||||
|
||||
interface Perfil {
|
||||
id_perfil: number;
|
||||
perfil: string;
|
||||
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;
|
||||
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 [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 [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 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 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);
|
||||
}
|
||||
};
|
||||
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();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
obtenerUsuarios();
|
||||
obtenerPerfiles();
|
||||
}, []);
|
||||
|
||||
const crearUsuario = async () => {
|
||||
const crearUsuario = async () => {
|
||||
|
||||
if (!nombre || !apellidoPaterno || !usuario || !password || !idPerfil) {
|
||||
alert("Todos los campos obligatorios deben llenarse.");
|
||||
return;
|
||||
}
|
||||
if (!nombre || !apellidoPaterno || !usuario || !password || !idPerfil) {
|
||||
|
||||
Swal.fire({
|
||||
title: "Todos los campos obligatorios deben llenarse.!",
|
||||
icon: "error",
|
||||
draggable: true
|
||||
});
|
||||
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 }
|
||||
);
|
||||
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);
|
||||
}
|
||||
};
|
||||
limpiarFormulario();
|
||||
obtenerUsuarios();
|
||||
} catch (error) {
|
||||
console.error("Error al crear usuario", error);
|
||||
}
|
||||
};
|
||||
|
||||
const limpiarFormulario = () => {
|
||||
setNombre("");
|
||||
setApellidoPaterno("");
|
||||
setApellidoMaterno("");
|
||||
setUsuario("");
|
||||
setPassword("");
|
||||
setDescripcion("");
|
||||
setIdPerfil("");
|
||||
setActivo(true);
|
||||
};
|
||||
const limpiarFormulario = () => {
|
||||
setNombre("");
|
||||
setApellidoPaterno("");
|
||||
setApellidoMaterno("");
|
||||
setUsuario("");
|
||||
setPassword("");
|
||||
setDescripcion("");
|
||||
setIdPerfil("");
|
||||
setActivo(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 style={{ color: "rgb(3, 1, 72)" }}>CREAR USUARIO</h1>
|
||||
return (
|
||||
<div>
|
||||
<h1 style={{ color: "rgb(3, 1, 72)" }}>CREAR USUARIO</h1>
|
||||
|
||||
<div style={{ marginBottom: "15px" }}>
|
||||
<div style={{ marginBottom: "15px" }}>
|
||||
|
||||
<input placeholder="Nombre" value={nombre} onChange={(e) => setNombre(e.target.value)} />
|
||||
<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 Paterno" value={apellidoPaterno} onChange={(e) => setApellidoPaterno(e.target.value)} />
|
||||
|
||||
<input placeholder="Apellido Materno" value={apellidoMaterno} onChange={(e) => setApellidoMaterno(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 placeholder="Usuario" value={usuario} onChange={(e) => setUsuario(e.target.value)} />
|
||||
|
||||
<input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(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)} />
|
||||
<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>
|
||||
<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>
|
||||
<label>
|
||||
Activo
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={activo}
|
||||
onChange={(e) => setActivo(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button onClick={crearUsuario}>
|
||||
Crear Usuario
|
||||
</button>
|
||||
</div>
|
||||
<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 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>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user