swetalert usuarios
This commit is contained in:
+141
-135
@@ -4,171 +4,177 @@ import { useState, useEffect } from "react";
|
|||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import Cookies from "js-cookie";
|
import Cookies from "js-cookie";
|
||||||
import { envConfig } from "@/app/lib/config";
|
import { envConfig } from "@/app/lib/config";
|
||||||
|
import Swal from "sweetalert2";
|
||||||
|
|
||||||
interface Perfil {
|
interface Perfil {
|
||||||
id_perfil: number;
|
id_perfil: number;
|
||||||
perfil: string;
|
perfil: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Usuario {
|
interface Usuario {
|
||||||
id_usuario: number;
|
id_usuario: number;
|
||||||
nombre: string;
|
nombre: string;
|
||||||
apellido_paterno: string;
|
apellido_paterno: string;
|
||||||
apellido_materno: string;
|
apellido_materno: string;
|
||||||
usuario: string;
|
usuario: string;
|
||||||
activo: number;
|
activo: number;
|
||||||
descripcion: string;
|
descripcion: string;
|
||||||
perfil: Perfil;
|
perfil: Perfil;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function UserPage() {
|
export default function UserPage() {
|
||||||
|
|
||||||
const [usuarios, setUsuarios] = useState<Usuario[]>([]);
|
const [usuarios, setUsuarios] = useState<Usuario[]>([]);
|
||||||
const [perfiles, setPerfiles] = useState<Perfil[]>([]);
|
const [perfiles, setPerfiles] = useState<Perfil[]>([]);
|
||||||
|
|
||||||
const [nombre, setNombre] = useState("");
|
const [nombre, setNombre] = useState("");
|
||||||
const [apellidoPaterno, setApellidoPaterno] = useState("");
|
const [apellidoPaterno, setApellidoPaterno] = useState("");
|
||||||
const [apellidoMaterno, setApellidoMaterno] = useState("");
|
const [apellidoMaterno, setApellidoMaterno] = useState("");
|
||||||
const [usuario, setUsuario] = useState("");
|
const [usuario, setUsuario] = useState("");
|
||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
const [descripcion, setDescripcion] = useState("");
|
const [descripcion, setDescripcion] = useState("");
|
||||||
const [idPerfil, setIdPerfil] = useState<number | "">("");
|
const [idPerfil, setIdPerfil] = useState<number | "">("");
|
||||||
const [activo, setActivo] = useState(true);
|
const [activo, setActivo] = useState(true);
|
||||||
|
|
||||||
const API = `${envConfig.apiUrl}/user`;
|
const API = `${envConfig.apiUrl}/user`;
|
||||||
const token = Cookies.get("token");
|
const token = Cookies.get("token");
|
||||||
const headers = { Authorization: `Bearer ${token}` };
|
const headers = { Authorization: `Bearer ${token}` };
|
||||||
|
|
||||||
const obtenerUsuarios = async () => {
|
const obtenerUsuarios = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await axios.get(API, { headers });
|
const res = await axios.get(API, { headers });
|
||||||
setUsuarios(res.data);
|
setUsuarios(res.data);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error al obtener usuarios", error);
|
console.error("Error al obtener usuarios", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const obtenerPerfiles = async () => {
|
const obtenerPerfiles = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await axios.get(`${API}/perfil`, { headers });
|
const res = await axios.get(`${API}/perfil`, { headers });
|
||||||
setPerfiles(res.data);
|
setPerfiles(res.data);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error al obtener perfiles", error);
|
console.error("Error al obtener perfiles", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
obtenerUsuarios();
|
obtenerUsuarios();
|
||||||
obtenerPerfiles();
|
obtenerPerfiles();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const crearUsuario = async () => {
|
const crearUsuario = async () => {
|
||||||
|
|
||||||
if (!nombre || !apellidoPaterno || !usuario || !password || !idPerfil) {
|
if (!nombre || !apellidoPaterno || !usuario || !password || !idPerfil) {
|
||||||
alert("Todos los campos obligatorios deben llenarse.");
|
|
||||||
return;
|
Swal.fire({
|
||||||
}
|
title: "Todos los campos obligatorios deben llenarse.!",
|
||||||
|
icon: "error",
|
||||||
|
draggable: true
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await axios.post(
|
await axios.post(
|
||||||
`${API}/create`,
|
`${API}/create`,
|
||||||
{
|
{
|
||||||
nombre,
|
nombre,
|
||||||
apellido_paterno: apellidoPaterno,
|
apellido_paterno: apellidoPaterno,
|
||||||
apellido_materno: apellidoMaterno,
|
apellido_materno: apellidoMaterno,
|
||||||
usuario,
|
usuario,
|
||||||
password,
|
password,
|
||||||
descripcion,
|
descripcion,
|
||||||
activo: activo ? 1 : 0,
|
activo: activo ? 1 : 0,
|
||||||
id_perfil: idPerfil,
|
id_perfil: idPerfil,
|
||||||
},
|
},
|
||||||
{ headers }
|
{ headers }
|
||||||
);
|
);
|
||||||
|
|
||||||
limpiarFormulario();
|
limpiarFormulario();
|
||||||
obtenerUsuarios();
|
obtenerUsuarios();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error al crear usuario", error);
|
console.error("Error al crear usuario", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const limpiarFormulario = () => {
|
const limpiarFormulario = () => {
|
||||||
setNombre("");
|
setNombre("");
|
||||||
setApellidoPaterno("");
|
setApellidoPaterno("");
|
||||||
setApellidoMaterno("");
|
setApellidoMaterno("");
|
||||||
setUsuario("");
|
setUsuario("");
|
||||||
setPassword("");
|
setPassword("");
|
||||||
setDescripcion("");
|
setDescripcion("");
|
||||||
setIdPerfil("");
|
setIdPerfil("");
|
||||||
setActivo(true);
|
setActivo(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h1 style={{ color: "rgb(3, 1, 72)" }}>CREAR USUARIO</h1>
|
<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))}>
|
<select value={idPerfil} onChange={(e) => setIdPerfil(Number(e.target.value))}>
|
||||||
<option value="">Seleccione Perfil</option>
|
<option value="">Seleccione Perfil</option>
|
||||||
{perfiles.map((p) => (
|
{perfiles.map((p) => (
|
||||||
<option key={p.id_perfil} value={p.id_perfil}>
|
<option key={p.id_perfil} value={p.id_perfil}>
|
||||||
{p.perfil}
|
{p.perfil}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label>
|
<label>
|
||||||
Activo
|
Activo
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={activo}
|
checked={activo}
|
||||||
onChange={(e) => setActivo(e.target.checked)}
|
onChange={(e) => setActivo(e.target.checked)}
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<button onClick={crearUsuario}>
|
<button onClick={crearUsuario}>
|
||||||
Crear Usuario
|
Crear Usuario
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ overflow: "auto", maxHeight: "350px" }}>
|
<div style={{ overflow: "auto", maxHeight: "350px" }}>
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>ID</th>
|
<th>ID</th>
|
||||||
<th>Nombre</th>
|
<th>Nombre</th>
|
||||||
<th>Usuario</th>
|
<th>Usuario</th>
|
||||||
<th>Perfil</th>
|
<th>Perfil</th>
|
||||||
<th>Activo</th>
|
<th>Activo</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{usuarios.map((u) => (
|
{usuarios.map((u) => (
|
||||||
<tr key={u.id_usuario}>
|
<tr key={u.id_usuario}>
|
||||||
<td>{u.id_usuario}</td>
|
<td>{u.id_usuario}</td>
|
||||||
<td>{u.nombre} {u.apellido_paterno}</td>
|
<td>{u.nombre} {u.apellido_paterno}</td>
|
||||||
<td>{u.usuario}</td>
|
<td>{u.usuario}</td>
|
||||||
<td>{u.perfil?.perfil}</td>
|
<td>{u.perfil?.perfil}</td>
|
||||||
<td>{u.activo === 1 ? "Sí" : "No"}</td>
|
<td>{u.activo === 1 ? "Sí" : "No"}</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user