Agregar propiedades a DataProcesada para permitir seleccionar grupos en la Tabla.tsx

src/ContenedorHorarios/ContenedorHorarios.tsx

@@ -124,6 +124,7 @@ export function ContenedorHorarios() {
                        setEstadoLayout={setEstadoLayout}
                        cursosUsuario={cursosUsuario}
                        fnAgregarCurso={agregarCursoUsuario}
+                       setCursosUsuarios={setCursosUsuarios}
             />
         </div>
         <div>

src/ContenedorHorarios/MiHorario.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, css } from "aphrodite";
 import { Tabla } from "./Tabla";
 import { mostrarDescansos } from "../Store";
 import { EstadoLayout } from "./ContenedorHorarios";
-import { Switch, Match, For, createMemo, createSignal } from "solid-js";
+import { Switch, Match, For, createMemo, createSignal, SetStateFunction } from "solid-js";
 import { BotonMaxMin } from "./BotonMaxMin";
 import { BotonIcono } from "./BotonIcono";
 import { Curso, Cursos, ListaCursosUsuario } from "../types/DatosHorario";
@@ -14,6 +14,7 @@ interface MiHorarioProps {
     setEstadoLayout: (v: EstadoLayout) => EstadoLayout,
     cursosUsuario: ListaCursosUsuario,
     fnAgregarCurso: (c: Curso) => void,
+    setCursosUsuarios: SetStateFunction<ListaCursosUsuario>
 }
 
 const e = StyleSheet.create({
@@ -32,6 +33,7 @@ const e = StyleSheet.create({
 export function MiHorario(props: MiHorarioProps) {
     const [idHover, setIdHover] = createSignal("");
 
+    // Simplificar para mantener reactividad (?)
     const datosMiHorario = createMemo(() => {
         const obj: Cursos = {};
         props.cursosUsuario.cursos.forEach(x => {
@@ -112,6 +114,7 @@ export function MiHorario(props: MiHorarioProps) {
                            version={1}
                            idHover={idHover}
                            setIdHover={setIdHover}
+                           setCursosUsuarios={props.setCursosUsuarios}
                     />
                 </div>
 

src/ContenedorHorarios/Tabla.tsx

@@ -1,7 +1,7 @@
 import { StyleSheet, css } from "aphrodite";
-import { createMemo, createSignal, For } from "solid-js";
+import { createMemo, createSignal, For, SetStateFunction } from "solid-js";
 import { estilosGlobales } from "../Estilos";
-import { Cursos, Curso } from "../types/DatosHorario";
+import { Cursos, Curso, ListaCursosUsuario } from "../types/DatosHorario";
 import { Dia, dias, horas } from "../Store";
 import { DataProcesada } from "../types/DatosHorario";
 import { FilaTabla } from "./Tabla/FilaTabla";
@@ -81,16 +81,24 @@ const e = StyleSheet.create({
     }
 });
 
-const procesarAnio = (data: Cursos, anio: string, version: number) => {
+type FnSetCursosUsuarios = SetStateFunction<ListaCursosUsuario>;
+
+const procesarAnio = (data: Cursos, anio: string, version: number, setCursosUsuarios: FnSetCursosUsuarios) => {
     const obj: DataProcesada = {};
 
-    for (const [, curso] of Object.entries(data)) {
+    for (const cursoKey in data) {
+        const curso = data[cursoKey];
         if (curso.oculto) continue;
 
         const nombreAbreviado = curso.abreviado;
 
-        for (const [grupoStr, grupo] of Object.entries(curso.Teoria)) {
-            for (const hora of grupo.Horas) {
+        for (const grupoStr in curso.Teoria) {
+            const grupo = curso.Teoria[grupoStr];
+            if (!grupo) continue;
+
+            for (const horaKey in grupo.Horas) {
+                const hora = grupo.Horas[horaKey];
+
                 const dia = hora.substring(0, 2);
                 const horas = hora.substring(2, 4);
                 const minutos = hora.substr(4);
@@ -110,12 +118,20 @@ const procesarAnio = (data: Cursos, anio: string, version: number) => {
                 obj[horaCompleta][dia].push({
                     id,
                     txt: `${nombreAbreviado} ${grupoStr}`,
-                    esLab: false
+                    esLab: false,
+                    seleccionado: grupo.seleccionado,
+                    fnSeleccionar: () => {
+                        // setCursosUsuarios("cursos", );
+                        console.log(":D");
+                    }
                 });
             }
         }
 
-        for (const [grupoStr, grupo] of Object.entries(curso.Laboratorio ?? {})) {
+        for (const grupoStr in curso.Laboratorio) {
+            const grupo = curso.Teoria[grupoStr];
+            if (!grupo) continue;
+
             for (const hora of grupo.Horas) {
                 const dia = hora.substring(0, 2);
                 const horas = hora.substring(2, 4);
@@ -136,7 +152,11 @@ const procesarAnio = (data: Cursos, anio: string, version: number) => {
                 obj[horaCompleta][dia].push({
                     id,
                     txt: `${nombreAbreviado} L${grupoStr}`,
-                    esLab: true
+                    esLab: true,
+                    seleccionado: grupo.seleccionado,
+                    fnSeleccionar: () => {
+                        console.log(":D (lab)");
+                    }
                 });
             }
         }
@@ -150,12 +170,13 @@ interface Props {
     anio: string,
     version: number,
     idHover: () => string,
-    setIdHover: (v: string) => string
+    setIdHover: (v: string) => string,
+    setCursosUsuarios: SetStateFunction<ListaCursosUsuario>
 }
 
 export function Tabla(props: Props) {
     const anio = () => props.anio.substring(0, props.anio.indexOf(" "));
-    const data = createMemo(() => procesarAnio(props.data, anio(), props.version));
+    const data = createMemo(() => procesarAnio(props.data, anio(), props.version, props.setCursosUsuarios));
     const idHover = props.idHover;
     const setIdHover = props.setIdHover;
 
@@ -164,7 +185,11 @@ export function Tabla(props: Props) {
         props.data;
         return <For each={horas}>
             {hora => {
-                return <FilaTabla data={data()} hora={hora} idHover={idHover} setIdHover={setIdHover}/>
+                return <FilaTabla data={data()}
+                                  hora={hora}
+                                  idHover={idHover}
+                                  setIdHover={setIdHover}
+                />
             }}
         </For>
     });

src/ContenedorHorarios/Tabla/CeldaFila.tsx

@@ -1,7 +1,8 @@
 import { StyleSheet, css } from "aphrodite";
 import { estilosGlobales } from "../../Estilos";
-import { For, createSignal, createMemo } from "solid-js";
+import { For, createSignal, createMemo, createEffect, SetStateFunction } from "solid-js";
 import { Dia } from "../../Store";
+import { ListaCursosUsuario } from "../../types/DatosHorario";
 
 const e = StyleSheet.create({
     celdaComun: {
@@ -70,7 +71,9 @@ interface Props {
     datos: {
         id: string,
         txt: string,
-        esLab: boolean
+        esLab: boolean,
+        seleccionado: boolean,
+        fnSeleccionar: () => void
     }[],
     idHover: () => string,
     setIdHover: (v: string) => string,
@@ -89,9 +92,19 @@ export function CeldaFila(props: Props) {
 
     return <div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
         <For each={datos}>
-            {({id, txt, esLab}) => {
+            {datos => {
+                const id = datos.id;
+                const txt = datos.txt;
+                const esLab = datos.esLab;
+                const fnSeleccionar = datos.fnSeleccionar;
+
                 const [estabaResaltado, setEstabaResaltado] = createSignal(false);
 
+                createEffect(() => {
+                    const seleccionado = datos.seleccionado;
+                    console.log("Cambiado \"seleccionado\":", seleccionado);
+                });
+
                 const clases = createMemo(
                     () => {
                         const clases = [e.celdaCurso, esLab ? e.celdaCursoLab : e.celdaCursoTeoria];
@@ -116,6 +129,7 @@ export function CeldaFila(props: Props) {
                 return <span className={clases()}
                              onMouseEnter={() => fnOnMouseEnter(id)}
                              onMouseLeave={fnOnMouseLeave}
+                             onClick={fnSeleccionar}
                 >
                     {txt}
                 </span>;

src/ContenedorHorarios/Tabla/FilaTabla.tsx

@@ -1,9 +1,9 @@
 import { StyleSheet, css } from "aphrodite";
 import { estilosGlobales } from "../../Estilos";
-import { For, createSignal, createMemo, createState, createEffect, State } from "solid-js";
+import { For, createSignal, createMemo, createState, createEffect, State, SetStateFunction } from "solid-js";
 import { Dia, dias } from "../../Store";
 import { CeldaFila } from "./CeldaFila";
-import { DataProcesada } from "../../types/DatosHorario";
+import { DataProcesada, ListaCursosUsuario } from "../../types/DatosHorario";
 import { coloresBorde, diaANum } from "../Tabla";
 
 const e = StyleSheet.create({

src/types/DatosHorario.ts

@@ -68,7 +68,9 @@ export interface DataProcesada {
         [dia: string]: {
             id: string,
             txt: string,
-            esLab: boolean
+            esLab: boolean,
+            seleccionado: boolean,
+            fnSeleccionar: () => void
         }[]
     }
 }