394 lines
13 KiB
TypeScript
394 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import Select from "react-select"
|
|
import { useEffect, useState } from "react"
|
|
import styles from "./Reporte.module.css"
|
|
import axios from "axios"
|
|
|
|
import Antiguedad from "./Graficas/Antiguedad"
|
|
import Procesador from "./Graficas/Procesador"
|
|
import SistemaOperativo from "./Graficas/SistemaOperativo"
|
|
import Uso from "./Graficas/Uso"
|
|
|
|
import Cookies from "js-cookie";
|
|
import TableAntiguedad from "./Tablas/Antiguedad"
|
|
const api_url = process.env.NEXT_PUBLIC_API_URL;
|
|
|
|
type AdscripcionOption = {
|
|
id_adscripcion: string
|
|
adscripcion: string
|
|
}
|
|
|
|
type UsoOption = {
|
|
id_uso: string
|
|
tipo_uso: string
|
|
}
|
|
|
|
type SoOption = {
|
|
id_sistema_operativo: string
|
|
sistema_operativo: string
|
|
}
|
|
|
|
type ProcesadorOption = {
|
|
id_procesador: string
|
|
procesador: string
|
|
}
|
|
|
|
type AntiguedadOption = {
|
|
antiguedad: string
|
|
}
|
|
|
|
export default function Reporte() {
|
|
|
|
const [adscripciones, setAdscripciones] = useState<AdscripcionOption[]>([])
|
|
const [adscripcionesSeleccionadas, setAdscripcionesSeleccionadas] = useState<AdscripcionOption[]>([])
|
|
|
|
const [procesadores, setProcesadores] = useState<ProcesadorOption[]>([])
|
|
const [procesadorSeleccionado, setProcesadorSeleccionado] = useState<ProcesadorOption[]>([])
|
|
|
|
const [sistemasOperativos, setSistemasOperativos] = useState<SoOption[]>([])
|
|
const [soSeleccionado, setSoSeleccionado] = useState<SoOption[]>([])
|
|
|
|
const [usos, setUsos] = useState<UsoOption[]>([{ id_uso: "0", tipo_uso: "Todos" }])
|
|
const [usoSeleccionado, setUsoSeleccionado] = useState<UsoOption[]>([])
|
|
|
|
const [antiguedad, setAntiguedad] = useState<AntiguedadOption[]>([{ antiguedad: "Todos" }, { antiguedad: "Menor a 2 años" }, { antiguedad: "Entre 2 y 3 años" }, { antiguedad: "Entre 4 y 5 años" }, { antiguedad: "Mayor a 6 años" }])
|
|
const [antiguedadSeleccionada, setAntiguedadSeleccionada] = useState<AntiguedadOption[]>([])
|
|
|
|
const [filtros, setFiltros] = useState<any>(null)
|
|
const [filtrosTable, setFiltrosTable] = useState<any>(null)
|
|
|
|
useEffect(() => {
|
|
|
|
const cargarDatos = async () => {
|
|
const token = Cookies.get("token");
|
|
const headers = { Authorization: `Bearer ${token}` };
|
|
const [
|
|
adscripcionRes,
|
|
procesadorRes,
|
|
usoRes,
|
|
soRes,
|
|
] = await Promise.all([
|
|
axios.get(`${api_url}/equipos/adscripciones`, { headers }),
|
|
axios.get(`${api_url}/equipos/procesador-tipo-equipos`, { headers }),
|
|
axios.get(`${api_url}/equipos/usos`, { headers }),
|
|
axios.get(`${api_url}/equipos/sistemas-operativos`, { headers }),
|
|
])
|
|
|
|
setAdscripciones([
|
|
{ id_adscripcion: "0", adscripcion: "Todos" },
|
|
...adscripcionRes.data
|
|
])
|
|
|
|
setProcesadores([
|
|
{ id_procesador: "0", procesador: "Todos" },
|
|
...procesadorRes.data
|
|
])
|
|
|
|
setUsos([
|
|
{ id_uso: "0", tipo_uso: "Todos" },
|
|
...usoRes.data
|
|
])
|
|
|
|
setSistemasOperativos([
|
|
{ id_sistema_operativo: "0", sistema_operativo: "Todos" },
|
|
...soRes.data
|
|
])
|
|
}
|
|
|
|
cargarDatos()
|
|
|
|
}, [])
|
|
|
|
function agregar<T>(option: T | null, lista: T[], setLista: (v: T[]) => void, key: keyof T) {
|
|
|
|
if (!option) return
|
|
|
|
const existe = lista.some((item) => item[key] === option[key])
|
|
|
|
if (!existe) {
|
|
setLista([...lista, option])
|
|
}
|
|
|
|
}
|
|
|
|
function eliminar<T>(id: string, lista: T[], setLista: (v: T[]) => void, key: keyof T) {
|
|
|
|
setLista(
|
|
lista.filter((item) => item[key] !== id)
|
|
)
|
|
|
|
}
|
|
|
|
const generarReporte = () => {
|
|
|
|
const limpiar = (arr: string[]) => {
|
|
if (arr.includes("0")) return []
|
|
return arr
|
|
}
|
|
|
|
const filtrosTable = {
|
|
adscripciones: adscripcionesSeleccionadas.map(a => String(a.id_adscripcion)),
|
|
procesadores: procesadorSeleccionado.map(p => String(p.id_procesador)),
|
|
sistemas: soSeleccionado.map(s => String(s.id_sistema_operativo)),
|
|
usos: usoSeleccionado.map(u => String(u.id_uso)),
|
|
antiguedad: antiguedadSeleccionada.map(u => String(u.antiguedad))
|
|
}
|
|
|
|
const filtros = {
|
|
adscripciones: limpiar(adscripcionesSeleccionadas.map(a => String(a.id_adscripcion))),
|
|
procesadores: limpiar(procesadorSeleccionado.map(p => String(p.id_procesador))),
|
|
sistemas: limpiar(soSeleccionado.map(s => String(s.id_sistema_operativo))),
|
|
usos: limpiar(usoSeleccionado.map(u => String(u.id_uso))),
|
|
antiguedad: limpiar(antiguedadSeleccionada.map(a => String(a.antiguedad)))
|
|
}
|
|
|
|
setFiltros(filtros)
|
|
setFiltrosTable(filtrosTable)
|
|
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.container}>
|
|
|
|
<section className={styles.filtro}>
|
|
|
|
{/* ADSCRIPCION */}
|
|
|
|
<div className={styles.containerSelection}>
|
|
<label className={styles.adscripcion}>Adscripción</label>
|
|
|
|
<Select
|
|
options={adscripciones}
|
|
getOptionLabel={(o) => o.adscripcion}
|
|
getOptionValue={(o) => o.id_adscripcion}
|
|
onChange={(o) => agregar(o, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
|
|
/>
|
|
|
|
<div className={styles.lista}>
|
|
|
|
{adscripcionesSeleccionadas.map((a) => (
|
|
|
|
<div key={a.id_adscripcion} className={styles.chip}>
|
|
|
|
<span>{a.adscripcion}</span>
|
|
|
|
<button
|
|
className={styles.remove}
|
|
onClick={() => eliminar(a.id_adscripcion, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
|
|
>
|
|
✕
|
|
</button>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
{/* PROCESADOR */}
|
|
|
|
<div className={styles.containerSelection}>
|
|
|
|
<label className={styles.adscripcion}>Procesador</label>
|
|
|
|
<Select
|
|
options={procesadores}
|
|
getOptionLabel={(o) => o.procesador}
|
|
getOptionValue={(o) => o.id_procesador}
|
|
onChange={(o) =>
|
|
agregar(o, procesadorSeleccionado, setProcesadorSeleccionado, "id_procesador")
|
|
}
|
|
/>
|
|
|
|
<div className={styles.lista}>
|
|
|
|
{procesadorSeleccionado.map((p) => (
|
|
|
|
<div key={p.id_procesador} className={styles.chip}>
|
|
|
|
<span>{p.procesador}</span>
|
|
|
|
<button
|
|
className={styles.remove}
|
|
onClick={() =>
|
|
eliminar(p.id_procesador, procesadorSeleccionado, setProcesadorSeleccionado, "id_procesador")
|
|
}
|
|
>
|
|
✕
|
|
</button>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* SISTEMA OPERATIVO */}
|
|
|
|
<div className={styles.containerSelection}>
|
|
|
|
<label className={styles.adscripcion}>Sistema Operativo</label>
|
|
|
|
<Select
|
|
options={sistemasOperativos}
|
|
getOptionLabel={(o) => o.sistema_operativo}
|
|
getOptionValue={(o) => o.id_sistema_operativo}
|
|
onChange={(o) =>
|
|
agregar(o, soSeleccionado, setSoSeleccionado, "id_sistema_operativo")
|
|
}
|
|
/>
|
|
|
|
<div className={styles.lista}>
|
|
|
|
{soSeleccionado.map((s) => (
|
|
|
|
<div key={s.id_sistema_operativo} className={styles.chip}>
|
|
|
|
<span>{s.sistema_operativo}</span>
|
|
|
|
<button
|
|
className={styles.remove}
|
|
onClick={() =>
|
|
eliminar(s.id_sistema_operativo, soSeleccionado, setSoSeleccionado, "id_sistema_operativo")
|
|
}
|
|
>
|
|
✕
|
|
</button>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
{/* USO */}
|
|
|
|
<div className={styles.containerSelection}>
|
|
|
|
<label className={styles.adscripcion}>Uso</label>
|
|
|
|
<Select
|
|
options={usos}
|
|
getOptionLabel={(o) => o.tipo_uso}
|
|
getOptionValue={(o) => o.id_uso}
|
|
onChange={(o) =>
|
|
agregar(o, usoSeleccionado, setUsoSeleccionado, "id_uso")
|
|
}
|
|
/>
|
|
|
|
<div className={styles.lista}>
|
|
|
|
{usoSeleccionado.map((u) => (
|
|
|
|
<div key={u.id_uso} className={styles.chip}>
|
|
|
|
<span>{u.tipo_uso}</span>
|
|
|
|
<button
|
|
className={styles.remove}
|
|
onClick={() =>
|
|
eliminar(u.id_uso, usoSeleccionado, setUsoSeleccionado, "id_uso")
|
|
}
|
|
>
|
|
✕
|
|
</button>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.containerSelection}>
|
|
|
|
<label className={styles.adscripcion}>Antiguedad</label>
|
|
|
|
<Select
|
|
options={antiguedad}
|
|
getOptionLabel={(o) => o.antiguedad}
|
|
getOptionValue={(o) => o.antiguedad}
|
|
onChange={(o) =>
|
|
agregar(o, antiguedadSeleccionada, setAntiguedadSeleccionada, "antiguedad")
|
|
}
|
|
/>
|
|
|
|
<div className={styles.lista}>
|
|
|
|
{antiguedadSeleccionada.map((p) => (
|
|
|
|
<div key={p.antiguedad} className={styles.chip}>
|
|
|
|
<span>{p.antiguedad}</span>
|
|
|
|
<button
|
|
className={styles.remove}
|
|
onClick={() =>
|
|
eliminar(p.antiguedad, antiguedadSeleccionada, setAntiguedadSeleccionada, "antiguedad")
|
|
}
|
|
>
|
|
✕
|
|
</button>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
<button
|
|
className={styles.button}
|
|
onClick={generarReporte}
|
|
>
|
|
Buscar
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
<section className={styles.graficas}>
|
|
|
|
<Antiguedad
|
|
filtros={filtros}
|
|
/>
|
|
|
|
<Uso
|
|
filtros={filtros}
|
|
/>
|
|
|
|
<Procesador
|
|
filtros={filtros}
|
|
/>
|
|
|
|
<SistemaOperativo
|
|
filtros={filtros}
|
|
/>
|
|
|
|
<TableAntiguedad filtros={filtros} count={true} />
|
|
<TableAntiguedad filtros={filtrosTable} count={false} />
|
|
|
|
</section>
|
|
|
|
|
|
</>
|
|
)
|
|
|
|
}
|