From ca149399c425239fa18204eec4c14528d4cc621d Mon Sep 17 00:00:00 2001 From: Araozu Date: Thu, 18 Mar 2021 19:51:35 -0500 Subject: [PATCH] Agregar propiedades a DataProcesada para permitir seleccionar grupos en la Tabla.tsx --- src/ContenedorHorarios/ContenedorHorarios.tsx | 1 + src/ContenedorHorarios/MiHorario.tsx | 5 +- src/ContenedorHorarios/Tabla.tsx | 49 ++++++++++++++----- src/ContenedorHorarios/Tabla/CeldaFila.tsx | 20 ++++++-- src/ContenedorHorarios/Tabla/FilaTabla.tsx | 4 +- src/types/DatosHorario.ts | 4 +- 6 files changed, 64 insertions(+), 19 deletions(-) diff --git a/src/ContenedorHorarios/ContenedorHorarios.tsx b/src/ContenedorHorarios/ContenedorHorarios.tsx index 8cd4cf5..56fc0dd 100755 --- a/src/ContenedorHorarios/ContenedorHorarios.tsx +++ b/src/ContenedorHorarios/ContenedorHorarios.tsx @@ -124,6 +124,7 @@ export function ContenedorHorarios() { setEstadoLayout={setEstadoLayout} cursosUsuario={cursosUsuario} fnAgregarCurso={agregarCursoUsuario} + setCursosUsuarios={setCursosUsuarios} />
diff --git a/src/ContenedorHorarios/MiHorario.tsx b/src/ContenedorHorarios/MiHorario.tsx index e8950e7..9cfb0c2 100755 --- a/src/ContenedorHorarios/MiHorario.tsx +++ b/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 } 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} />
diff --git a/src/ContenedorHorarios/Tabla.tsx b/src/ContenedorHorarios/Tabla.tsx index 172ce24..d39b630 100755 --- a/src/ContenedorHorarios/Tabla.tsx +++ b/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; + +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 } 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 {hora => { - return + return }} }); diff --git a/src/ContenedorHorarios/Tabla/CeldaFila.tsx b/src/ContenedorHorarios/Tabla/CeldaFila.tsx index f68ee0a..3aaa6f8 100755 --- a/src/ContenedorHorarios/Tabla/CeldaFila.tsx +++ b/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
- {({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 fnOnMouseEnter(id)} onMouseLeave={fnOnMouseLeave} + onClick={fnSeleccionar} > {txt} ; diff --git a/src/ContenedorHorarios/Tabla/FilaTabla.tsx b/src/ContenedorHorarios/Tabla/FilaTabla.tsx index a30fe32..591c306 100755 --- a/src/ContenedorHorarios/Tabla/FilaTabla.tsx +++ b/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({ diff --git a/src/types/DatosHorario.ts b/src/types/DatosHorario.ts index 53f3529..29c2c88 100755 --- a/src/types/DatosHorario.ts +++ b/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 }[] } } \ No newline at end of file