104 lines
3.8 KiB
TypeScript
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>
|
|
);
|
|
}
|