eeg_certs/frontend/src/OnlineClassroom/index.tsx

104 lines
3.8 KiB
TypeScript

import { Show, createSignal } from "solid-js";
import { Search } from "../certs/Search";
import { Person } from "../types/Person";
import { FilledCard } from "../components/FilledCard";
import { ClassroomUserCreation } from "./ClassroomUserCreation";
import { ClassroomVinculation } from "./ClassroomVinculation";
import { ClassroomUserCourses } from "./ClassroomUserCourses";
import { ClassroomRegistration } from "./ClassroomRegistration";
type TabType = "Vinculate" | "Create";
export function OnlineClassroom() {
const [person, setPerson] = createSignal<Person | null>(null);
// Used to update ClassroomUserCourses
const [updateSignal, setUpdateSIgnal] = createSignal(0);
return (
<div class="grid grid-cols-[16rem_25rem_1fr]">
<Search setPerson={setPerson} />
<Show when={person() !== null && person()!.person_classroom_id === null}>
<ClassroomUser
person={person()!}
onLink={(classroom_id) => setPerson((p) => ({...p!, person_classroom_id: classroom_id}))}
onCreate={(classroom_id) => setPerson((p) => ({...p!, person_classroom_id: classroom_id}))}
/>
</Show>
<Show when={person() !== null && person()!.person_classroom_id !== null}>
<ClassroomRegistration
surname_first_letter={person()?.person_paternal_surname[0] ?? ""}
userId={person()?.person_classroom_id ?? null}
onSuccess={() => setUpdateSIgnal((s) => s + 1)}
/>
<ClassroomUserCourses
userid={person()!.person_classroom_id!}
updateSignal={updateSignal()}
/>
</Show>
</div>
);
}
function ClassroomUser(props: {
person: Person,
onLink: (classroom_id: number) => void,
onCreate: (classroom_id: number) => void,
}) {
const [active, setActive] = createSignal<TabType>("Vinculate");
return (
<div>
<FilledCard class="border border-c-outline overflow-hidden">
<h2 class="p-3 font-bold text-xl">
Persona no vinculada:
</h2>
<ClassroomTabs active={active()} setActive={setActive} />
<div class="bg-c-surface">
<Show when={active() === "Vinculate"}>
<ClassroomVinculation
person_surname={`${props.person.person_paternal_surname} ${props.person.person_maternal_surname}`}
personId={props.person.person_id}
onLink={props.onLink}
/>
</Show>
<Show when={active() === "Create"}>
<ClassroomUserCreation
person={props.person}
onCreate={props.onCreate}
/>
</Show>
</div>
</FilledCard>
</div>
);
}
function ClassroomTabs(props: {active: TabType, setActive: (v: TabType) => void}) {
const presetsClasses = () => ((props.active === "Vinculate") ? "font-bold border-c-primary" : "border-c-transparent");
const manualClasses = () => ((props.active === "Create") ? "font-bold border-c-primary" : "border-c-transparent");
return (
<div class="grid grid-cols-2">
<button
class={`py-2 border-b-4 ${presetsClasses()}`}
onclick={() => props.setActive("Vinculate")}
>
Buscar
</button>
<button
class={`py-2 border-b-4 ${manualClasses()}`}
onclick={() => props.setActive("Create")}
>
Crear
</button>
</div>
);
}