Agregar posibilidad de maximizar y minimizar los horarios y el horario personal

src/ContenedorHorarios/BotonMaxMin.tsx

@@ -0,0 +1,39 @@
+import { css } from "aphrodite";
+import { estilosGlobales } from "../Estilos";
+import { EstadoLayout } from "./ContenedorHorarios";
+
+interface BotonMaxMinProps {
+    fnMaximizar: () => void,
+    fnMinimizar: () => void,
+    estadoActualLayout: () => EstadoLayout, // El nombre del estado actual del layout
+    estadoLayoutMax: EstadoLayout // El nombre del estado en el cual el componente esta maximizado
+}
+
+export function BotonMaxMin(props: BotonMaxMinProps) {
+    const horariosMax = () => props.estadoActualLayout() === props.estadoLayoutMax;
+
+    const tituloBoton = () => horariosMax() ? "Minimizar" : "Maximizar";
+    const iconoBoton = () => horariosMax() ? "ph-arrows-in" : "ph-arrows-out";
+
+    const funcionBoton = () => {
+        const estaMaximizado = horariosMax();
+        if (estaMaximizado) {
+            props.fnMinimizar();
+        } else {
+            props.fnMaximizar();
+        }
+    };
+
+    return <div title={tituloBoton()}
+                onClick={funcionBoton}
+                className={css(
+                    estilosGlobales.contenedor,
+                    estilosGlobales.inlineBlock,
+                    estilosGlobales.contenedorCursor,
+                    estilosGlobales.contenedorCursorSoft,
+                    estilosGlobales.contenedorPhospor
+                )}
+    >
+        <i className={css(estilosGlobales.botonPhospor) + " " + iconoBoton()}/>
+    </div>
+}

src/ContenedorHorarios/ContenedorHorarios.tsx

@@ -32,7 +32,7 @@ export function ContenedorHorarios() {
                 break;
             }
             case "MaxPersonal": {
-                templateColumns = "40% 60%";
+                templateColumns = "auto 4rem";
                 break;
             }
             case "Normal": {
@@ -58,11 +58,11 @@ export function ContenedorHorarios() {
 
     return <div className={css(e().contenedor)}>
         <div>
-            <MiHorario estadoLayout={estadoLayout()}/>
+            <MiHorario estadoLayout={estadoLayout()} setEstadoLayout={setEstadoLayout}/>
         </div>
         <div>
             <Show when={datosCargados()}>
-                <Horarios data={datos()!!} setEstadoLayout={setEstadoLayout}/>
+                <Horarios data={datos()!!} estadoLayout={estadoLayout()} setEstadoLayout={setEstadoLayout}/>
             </Show>
         </div>
     </div>;

src/ContenedorHorarios/Horarios.tsx

@@ -5,46 +5,16 @@ import { estilosGlobales } from "../Estilos";
 import { Tabla } from "./Tabla";
 import { Cursos } from "./Cursos";
 import { EstadoLayout } from "./ContenedorHorarios";
+import { BotonMaxMin } from "./BotonMaxMin";
+import { Switch, Match } from "solid-js";
 
-const maximizarHorario = (setEstadoLayout: (v: EstadoLayout) => EstadoLayout) => {
+interface HorariosProps {
-    setEstadoLayout("MaxHorarios");
+    data: DatosHorario,
-};
+    estadoLayout: EstadoLayout,
-
+    setEstadoLayout: (v: EstadoLayout) => EstadoLayout
-const minimizarHorario = (setEstadoLayout: (v: EstadoLayout) => EstadoLayout) => {
-    setEstadoLayout("Normal");
-};
-
-function BotonExpandirOcultar(props: { setEstadoLayout: (v: EstadoLayout) => EstadoLayout }) {
-    const [horariosMax, setHorariosMax] = createSignal(false);
-
-    const tituloBoton = () => horariosMax() ? "Minimizar horario" : "Maximizar horario";
-    const iconoBoton = () => horariosMax() ? "ph-arrows-in" : "ph-arrows-out";
-
-    const funcionBoton = () => {
-        const estaMaximizado = horariosMax();
-        setHorariosMax(!estaMaximizado);
-        if (estaMaximizado) {
-            minimizarHorario(props.setEstadoLayout);
-        } else {
-            maximizarHorario(props.setEstadoLayout);
-        }
-    };
-
-    return <div title={tituloBoton()}
-                onClick={funcionBoton}
-                className={css(
-                    estilosGlobales.contenedor,
-                    estilosGlobales.inlineBlock,
-                    estilosGlobales.contenedorCursor,
-                    estilosGlobales.contenedorCursorSoft,
-                    estilosGlobales.contenedorPhospor
-                )}
-    >
-        <i className={css(estilosGlobales.botonPhospor) + " " + iconoBoton()}/>
-    </div>
 }
 
-export function Horarios(props: { data: DatosHorario, setEstadoLayout: (v: EstadoLayout) => EstadoLayout }) {
+export function Horarios(props: HorariosProps) {
 
     const [anioActual, setAnioActual] = createSignal("1er año");
 
@@ -71,16 +41,38 @@ export function Horarios(props: { data: DatosHorario, setEstadoLayout: (v: Estad
         return props.data.años[anioActual()];
     });
 
+    const fnMaximizar = () => props.setEstadoLayout("MaxHorarios");
+    const fnMinimizar = () => props.setEstadoLayout("Normal");
+    const estadoActualLayout = () => props.estadoLayout;
+
     return <div>
-        {elAnios}
+        <Switch>
-        |
+            <Match when={props.estadoLayout === "Normal" || props.estadoLayout === "MaxHorarios"}>
-        <BotonExpandirOcultar setEstadoLayout={props.setEstadoLayout}/>
+                {elAnios}
-        <br/>
+                |
-        <div className={css(estilosGlobales.contenedor)}>
+                <BotonMaxMin
-            <Tabla data={dataTabla()} version={props.data.version} anio={anioActual()}/>
+                    fnMaximizar={fnMaximizar}
-        </div>
+                    fnMinimizar={fnMinimizar}
-        <div>
+                    estadoActualLayout={estadoActualLayout}
-            <Cursos dataAnio={dataTabla()}/>
+                    estadoLayoutMax={"MaxHorarios"}
-        </div>
+                />
+                <br/>
+                <div className={css(estilosGlobales.contenedor)}>
+                    <Tabla data={dataTabla()} version={props.data.version} anio={anioActual()}/>
+                </div>
+                <div>
+                    <Cursos dataAnio={dataTabla()}/>
+                </div>
+            </Match>
+            <Match when={props.estadoLayout === "MaxPersonal"}>
+                <BotonMaxMin
+                    fnMaximizar={fnMaximizar}
+                    fnMinimizar={fnMinimizar}
+                    estadoActualLayout={estadoActualLayout}
+                    estadoLayoutMax={"MaxHorarios"}
+                />
+            </Match>
+        </Switch>
+
     </div>;
 }

src/ContenedorHorarios/MiHorario.tsx

@@ -1,11 +1,17 @@
 import { estilosGlobales } from "../Estilos";
 import { StyleSheet, css } from "aphrodite";
 import { Tabla } from "./Tabla";
-import { mostrarDescansos, setMostrarDescansos } from "../Store";
+import { mostrarDescansos } from "../Store";
 import { EstadoLayout } from "./ContenedorHorarios";
 import { Switch, Match } from "solid-js";
+import { BotonMaxMin } from "./BotonMaxMin";
 
-export function MiHorario(props: { estadoLayout: EstadoLayout }) {
+interface MiHorarioProps {
+    estadoLayout: EstadoLayout,
+    setEstadoLayout: (v: EstadoLayout) => EstadoLayout
+}
+
+export function MiHorario(props: MiHorarioProps) {
     const e = StyleSheet.create({
         horario: {},
         boton: {
@@ -19,17 +25,18 @@ export function MiHorario(props: { estadoLayout: EstadoLayout }) {
         }
     });
 
-    const iconoBoton = () => props.estadoLayout === "Normal" ? "ph-arrows-in" : "ph-arrows-out";
-
     const claseBotonMostrarDescansos = () =>
         mostrarDescansos()
             ? "ph-check " + css(e.boton)
             : "ph-circle " + css(e.boton);
 
-    return <div>
+    const fnMaximizar = () => props.setEstadoLayout("MaxPersonal");
+    const fnMinimizar = () => props.setEstadoLayout("Normal");
+    const estadoActualLayout = () => props.estadoLayout;
 
+    return <div>
         <Switch>
-            <Match when={props.estadoLayout === "Normal"}>
+            <Match when={props.estadoLayout === "Normal" || props.estadoLayout === "MaxPersonal"}>
                 <div>
                     <div className={css(
                         estilosGlobales.inlineBlock,
@@ -37,6 +44,13 @@ export function MiHorario(props: { estadoLayout: EstadoLayout }) {
                     )}>
                         Mi horario
                     </div>
+                    |
+                    <BotonMaxMin
+                        fnMaximizar={fnMaximizar}
+                        fnMinimizar={fnMinimizar}
+                        estadoActualLayout={estadoActualLayout}
+                        estadoLayoutMax={"MaxPersonal"}
+                    />
                     {/*
                         <div
                             className={css(
@@ -62,20 +76,13 @@ export function MiHorario(props: { estadoLayout: EstadoLayout }) {
                 </div>
             </Match>
             <Match when={props.estadoLayout === "MaxHorarios"}>
-                <div
+                <BotonMaxMin
-                     className={css(
+                    fnMaximizar={fnMaximizar}
-                         estilosGlobales.contenedor,
+                    fnMinimizar={fnMinimizar}
-                         estilosGlobales.inlineBlock,
+                    estadoActualLayout={estadoActualLayout}
-                         estilosGlobales.contenedorCursor,
+                    estadoLayoutMax={"MaxPersonal"}
-                         estilosGlobales.contenedorCursorSoft,
+                />
-                         estilosGlobales.contenedorPhospor
-                     )}
-                >
-                    <i className={css(estilosGlobales.botonPhospor) + " " + iconoBoton()}/>
-                </div>
             </Match>
         </Switch>
-
-
     </div>;
 }