81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
import { createSignal, Show } from "solid-js";
|
|
import { FilledCard } from "../../components/FilledCard";
|
|
import { RegisterPreview } from "./RegisterPreview";
|
|
import { RegisterPresets } from "./RegisterPresets";
|
|
import { ManualRegistration } from "./ManualRegistration";
|
|
|
|
|
|
|
|
type TabType = "Presets" | "Manual";
|
|
|
|
export function NewRegister(props: {
|
|
personId: number | null,
|
|
onSuccess: () => void,
|
|
}) {
|
|
const [active, setActive] = createSignal<TabType>("Presets");
|
|
const [selections, setSelections] = createSignal<Array<[number, string]>>([]);
|
|
|
|
const onRegister = () => {
|
|
setSelections([]);
|
|
props.onSuccess();
|
|
};
|
|
|
|
return (
|
|
<div class="h-screen overflow-y-scroll">
|
|
<FilledCard class="border border-c-outline overflow-hidden">
|
|
<h2 class="p-3 font-bold text-xl">Agregar certs</h2>
|
|
|
|
<RegisterTabs active={active()} setActive={setActive} />
|
|
|
|
<div class="bg-c-surface p-4 h-[22rem]">
|
|
<Show when={active() === "Presets"}>
|
|
<RegisterPresets
|
|
onAdd={(v) => setSelections((x) => [...x, v])}
|
|
disableCreation={props.personId === null}
|
|
/>
|
|
</Show>
|
|
<Show when={active() === "Manual"}>
|
|
<ManualRegistration
|
|
personId={props.personId}
|
|
onAdd={(v) => setSelections((x) => [...x, v])}
|
|
/>
|
|
</Show>
|
|
</div>
|
|
</FilledCard>
|
|
|
|
<RegisterPreview
|
|
selections={selections()}
|
|
personId={props.personId}
|
|
onDelete={(deleteId) => setSelections((s) => [...s.filter(([id]) => id !== deleteId)])}
|
|
onRegister={onRegister}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
function RegisterTabs(props: {active: TabType, setActive: (v: TabType) => void}) {
|
|
const presetsClasses = () => ((props.active === "Presets") ? "font-bold border-c-primary" : "border-c-transparent");
|
|
const manualClasses = () => ((props.active === "Manual") ? "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("Presets")}
|
|
>
|
|
Presets
|
|
</button>
|
|
<button
|
|
class={`py-2 border-b-4 ${manualClasses()}`}
|
|
onclick={() => props.setActive("Manual")}
|
|
>
|
|
Manual
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
|