funcionabilidad de botones componentes y arreglos
This commit is contained in:
@@ -1,108 +1,111 @@
|
||||
// 1. Definimos la interfaz que describe las props del componente
|
||||
export interface DatosEquipo {
|
||||
titulo: string; // El título que aparecerá como label
|
||||
opcion: string[]; // Lista de opciones para el select
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
|
||||
interface DatosEquipo {
|
||||
titulo: string;
|
||||
opcion: string[];
|
||||
}
|
||||
|
||||
// 2. Ya no necesitas tener "DatosOpciones" dentro de este archivo
|
||||
// porque el componente debe ser reutilizable, no fijo.
|
||||
// Lista de programas disponibles
|
||||
const programas = [
|
||||
"3D MAX STUDIO 2014",
|
||||
"ADOBE CREATIVE SUITE",
|
||||
"ARCHICAD 20",
|
||||
"AUDACITY -win - 2.0",
|
||||
"AUTOCAD",
|
||||
"CODE-BLOCKS",
|
||||
"COREL DRAW",
|
||||
"DEV-C++",
|
||||
"EVIEWS Enterprise",
|
||||
"Google Earth",
|
||||
"INTERNERT",
|
||||
"MAPLE",
|
||||
"MATHEMATICA",
|
||||
"MATLAB",
|
||||
"Maxima",
|
||||
"miktex",
|
||||
"NETBEANS",
|
||||
"OFFICE 2016",
|
||||
"PSeint",
|
||||
"R 3.0.1",
|
||||
"R Studio",
|
||||
"SPPS Statiscs",
|
||||
"STATA 13",
|
||||
"STATGRAOHICS Centurion XVI",
|
||||
];
|
||||
|
||||
// Mapear cada equipo a sus programas (checkboxes que deberían seleccionarse)
|
||||
const caracteristicasPorEquipo: Record<string, string[]> = {
|
||||
"Equipo 1": ["3D MAX STUDIO 2014", "AUTOCAD", "MATLAB"],
|
||||
"Equipo 2": ["ADOBE CREATIVE SUITE", "COREL DRAW", "R Studio"],
|
||||
"Equipo 3": ["ARCHICAD 20", "EVIEWS Enterprise", "SPPS Statiscs"],
|
||||
"Equipo 4": ["MATHEMATICA", "MAPLE", "Maxima"],
|
||||
// Agrega más equipos según necesites
|
||||
};
|
||||
|
||||
// 3. Recibimos las props como un objeto con estructura DatosEquipo
|
||||
function ProgramSelector({ titulo, opcion }: DatosEquipo) {
|
||||
// Estado del equipo seleccionado
|
||||
const [equipoSeleccionado, setEquipoSeleccionado] = useState("");
|
||||
// Estado de los checkboxes (programas)
|
||||
const [checkboxes, setCheckboxes] = useState<Record<string, boolean>>(
|
||||
programas.reduce((acc, prog) => ({ ...acc, [prog]: false }), {})
|
||||
);
|
||||
|
||||
// Función al cambiar el select
|
||||
const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const equipo = e.target.value;
|
||||
setEquipoSeleccionado(equipo);
|
||||
|
||||
// Actualizar checkboxes según características del equipo
|
||||
const nuevosCheckboxes: Record<string, boolean> = {};
|
||||
programas.forEach((prog) => {
|
||||
nuevosCheckboxes[prog] =
|
||||
caracteristicasPorEquipo[equipo]?.includes(prog) || false;
|
||||
});
|
||||
setCheckboxes(nuevosCheckboxes);
|
||||
};
|
||||
|
||||
// Guardar cambios (ejemplo)
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Equipo:", equipoSeleccionado);
|
||||
console.log(
|
||||
"Programas seleccionados:",
|
||||
Object.keys(checkboxes).filter((p) => checkboxes[p])
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<form className="form-container">
|
||||
{/* Label dinámico con el título que recibimos */}
|
||||
<label>{titulo}</label>
|
||||
<form className="form-container" onSubmit={handleSubmit}>
|
||||
<label>{titulo}</label>
|
||||
<select value={equipoSeleccionado} onChange={handleChangeEquipo}>
|
||||
<option value="">-- Selecciona un equipo --</option>
|
||||
{opcion.map((eq, i) => (
|
||||
<option key={i} value={eq}>
|
||||
{eq}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Renderizamos UN solo <select> con varias <option> */}
|
||||
<select>
|
||||
{opcion.map((op, index) => (
|
||||
<option key={index} value={op}>
|
||||
{op}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="checkbox-grid">
|
||||
{programas.map((prog) => (
|
||||
<label key={prog}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checkboxes[prog]}
|
||||
onChange={() =>
|
||||
setCheckboxes({ ...checkboxes, [prog]: !checkboxes[prog] })
|
||||
}
|
||||
/>
|
||||
{prog}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Lista de checkboxes (esto lo podrías optimizar igual con .map) */}
|
||||
<div className="checkbox-grid">
|
||||
<label>
|
||||
<input type="checkbox" /> 3D MAX STUDIO 2014
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> ADOBE CREATIVE SUITE
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> ARCHICAD 20
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> AUDACITY -win - 2.0
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> AUTOCAD
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> CODE-BLOCKS
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> COREL DRAW
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> DEV-C++
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> EVIEWS Enterprise
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> Google Earth
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> INTERNERT
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> MAPLE
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> MATHEMATICA
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> MATLAB
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> Maxima
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> miktex
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> NETBEANS
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> OFFICE 2016
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> PSeint
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> R 3.0.1
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> R Studio
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> SPPS Statiscs
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> STATA 13
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> STATGRAOHICS Centurion XVI
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button className="button buttonSearch">Guardar cambios</button>
|
||||
</form>
|
||||
</div>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Guardar cambios
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user