fernando/eeg_certs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FE] Include custom labels in registration

Browse Source
This commit is contained in:
Araozu 2023-09-02 18:49:13 -05:00
parent b24f969cec
commit c6b77b446d
6 changed files with 86 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/certs/NewRegister/CustomLabelSelect.tsx
View File

@ -1,18 +1,18 @@
import { createEffect, createSignal, For, onMount } from "solid-js";
import { allCourses } from "../../utils/allCourses";
import { customLabelsMap } from "../../utils/allCustomLabels";
export function CustomLabelSelect(props: {
onChange: (id: number | null) => void,
onChange: (value: string) => void,
count: number
}) {
const [filter, setFilter] = createSignal("");
const [selected, setSelected] = createSignal<number | null>(null);
const [selected, setSelected] = createSignal<boolean>(false);
const [inputValue, setInputValue] = createSignal("");
const iHandler = (ev: KeyboardEvent & {currentTarget: HTMLInputElement, target: Element}) => {
const inputEl = ev.target as HTMLInputElement;
// Clear current selection
setSelected(null);
setSelected(false);
let filter: string = inputEl.value.toLowerCase();
filter = filter.replace("á", "a");
@ -24,7 +24,7 @@ export function CustomLabelSelect(props: {
};
createEffect(() => {
props.onChange(selected());
props.onChange(inputValue());
});
createEffect(() => {
@ -33,7 +33,7 @@ export function CustomLabelSelect(props: {
const _count = props.count;
setFilter("");
setSelected(null);
setSelected(false);
setInputValue("");
});
@ -51,32 +51,31 @@ export function CustomLabelSelect(props: {
const filteredOptions = () => {
const filterText = filter();
return allCourses().filter((course) => {
let courseText = course.course_name.toLowerCase();
return Object.entries(customLabelsMap()).filter(([, label]) => {
let courseText = label.custom_label_value.toLowerCase();
courseText = courseText.replace("á", "a");
courseText = courseText.replace("é", "e");
courseText = courseText.replace("í", "i");
courseText = courseText.replace("ó", "o");
courseText = courseText.replace("ú", "u");
return selected() === null && courseText.indexOf(filterText) !== -1;
return !selected() && courseText.indexOf(filterText) !== -1;
});
};
return (
<>
<div class="relative">
<input
id="create-subject"
ref={inputElement}
class={`bg-c-background text-c-on-background
${selected() !== null ? "border-c-green" : "border-c-outline"}
class={`bg-c-background text-c-on-background border-c-outline
border-2 rounded-tl rounded-tr px-2 py-1
w-full
invalid:border-c-error invalid:text-c-error
focus:border-c-primary outline-none
disabled:opacity-50 disabled:cursor-not-allowed`}
type="text"
placeholder="Curso"
placeholder="Denominación"
onkeyup={iHandler}
value={inputValue()}
onchange={(ev) => setInputValue(ev.target.value)}
@ -86,25 +85,26 @@ export function CustomLabelSelect(props: {
<br />
<div
class="border-c-outline border-l-2 border-b-2 border-r-2
rounded-bl rounded-br overflow-y-scroll h-[10rem]"
rounded-bl rounded-br overflow-y-scroll h-[4rem]
absolute w-full"
>
<For each={filteredOptions()}>
{(s) => (
{([, label]) => (
<button
class="w-full text-left py-1 px-2
hover:bg-c-primary-container hover:text-c-on-primary-container"
onclick={(ev) => {
ev.preventDefault();
setSelected(s.course_id);
setInputValue(s.course_name);
setSelected(true);
setInputValue(label.custom_label_value);
}}
>
{s.course_name}
{label.custom_label_value}
</button>
)}
</For>
</div>
</>
</div>
);
}

40
frontend/src/certs/NewRegister/ManualRegistration.tsx
View File

@ -1,16 +1,23 @@
import { JSX, createSignal } from "solid-js";
import { JSX, Show, createSignal } from "solid-js";
import { SearchableSelect } from "./SearchableSelect";
import { CustomLabelSelect } from "./CustomLabelSelect";
import { courseMap } from "../../utils/allCourses";
import { RegistrationPreview } from ".";
type HTMLEventFn = JSX.EventHandlerUnion<HTMLFormElement, Event & {
submitter: HTMLElement;
}>;
export function ManualRegistration(props: {personId: number | null, onAdd: (v: [number, string]) => void}) {
export function ManualRegistration(props: {
personId: number | null,
onAdd: (v: RegistrationPreview) => void
}) {
// Used to update SearchableSelect.tsx manually
const [count, setCount] = createSignal(0);
const [error, setError] = createSignal("");
const [selectedCourseId, seSelectedCourseId] = createSignal<number | null>(null);
const [customLabel, setCustomLabel] = createSignal("");
let datePicker: HTMLInputElement | undefined;
@ -38,11 +45,27 @@ export function ManualRegistration(props: {personId: number | null, onAdd: (v: [
return;
}
props.onAdd([subject, date]);
const data: RegistrationPreview = {
courseId: subject,
date,
customLabel: customLabel(),
};
props.onAdd(data);
// This is used to update & refresh the <SearchableSelect> component
setCount((x) => x + 1);
};
const courseHasCustomLabel = () => {
const courseId = selectedCourseId();
if (courseId === null) {
return false;
}
const course = courseMap()[courseId];
return course?.course_has_custom_label === true;
};
return (
<>
<form onsubmit={register}>
@ -63,18 +86,17 @@ export function ManualRegistration(props: {personId: number | null, onAdd: (v: [
/>
<label for="create-date" class="absolute -top-2 left-2 text-xs bg-c-surface px-1">Fecha</label>
</div>
<Show when={courseHasCustomLabel()}>
<div class="relative">
<input
id="create-date"
class="bg-c-surface text-c-on-surface border border-c-outline rounded-lg p-2 font-mono w-full
disabled:opacity-50 disabled:cursor-not-allowed"
type="text"
disabled
<CustomLabelSelect
onChange={setCustomLabel}
count={count()}
/>
<label for="create-date" class="absolute -top-2 left-2 text-xs bg-c-surface px-1">
Denominación
</label>
</div>
</Show>
</div>
<div>

12
frontend/src/certs/NewRegister/RegisterPresets.tsx
View File

@ -2,6 +2,7 @@ import { Accessor, For, createSignal } from "solid-js";
import { Chip } from "../../components/Chip";
import { getCourseMemo } from "../../utils/allCourses";
import { Course } from "../../types/Course";
import { RegistrationPreview } from ".";
type PresetName = "None" | "2 Matpel" | "3 Matpel" | "4 Escolta" | "MD, 2 Matpel" | "3 4x4" | "2 4x4";
@ -39,7 +40,10 @@ function genPresets(): {[k: string]: Array<Accessor<Course | null>>} {
};
}
export function RegisterPresets(props: {disableCreation: boolean, onAdd: (v: [number, string]) => void}) {
export function RegisterPresets(props: {
disableCreation: boolean,
onAdd: (v: RegistrationPreview) => void
}) {
let datePicker: HTMLInputElement | undefined;
const [selectedPreset, setSelectedPreset] = createSignal<PresetName>("None");
const [error, setError] = createSignal("");
@ -78,7 +82,11 @@ export function RegisterPresets(props: {disableCreation: boolean, onAdd: (v: [nu
const dateYYYYMMDD = currentDate.toISOString().split("T")[0];
// Add
props.onAdd([courseId, dateYYYYMMDD]);
props.onAdd({
courseId,
date: dateYYYYMMDD,
customLabel: "",
});
// Substract current date for the next course
currentDate.setDate(currentDate.getDate() - courseDuration);

16
frontend/src/certs/NewRegister/RegisterPreview.tsx
View File

@ -3,6 +3,7 @@ import { For } from "solid-js";
import { XIcon } from "../../icons/XIcon";
import { allCourses } from "../../utils/allCourses";
import { RegisterBatchCreate } from "../../types/Register";
import { RegistrationPreview } from ".";
function isoDateToLocalDate(date: string): string {
@ -10,9 +11,9 @@ function isoDateToLocalDate(date: string): string {
return `${day}/${month}`;
}
export function RegisterPreview(props: {selections: Array<[number, string]>, personId: number | null, onDelete: (v: number) => void, onRegister: () => void}) {
export function RegisterPreview(props: {selections: Array<RegistrationPreview>, personId: number | null, onDelete: (v: number) => void, onRegister: () => void}) {
const submit = async() => {
const registers: RegisterBatchCreate = props.selections.map(([courseId, date]) => ({
const registers: RegisterBatchCreate = props.selections.map(({courseId, date}) => ({
person_id: props.personId!,
course_id: courseId,
date,
@ -34,7 +35,14 @@ export function RegisterPreview(props: {selections: Array<[number, string]>, per
<h2 class="p-4 font-bold text-xl">Confirmar registro</h2>
<div class="bg-c-surface p-4">
<For each={props.selections}>
{([courseId, date]) => <Register courseId={courseId} date={date} onDelete={props.onDelete} />}
{({courseId, date, customLabel}) => (
<Register
courseId={courseId}
date={date}
onDelete={props.onDelete}
customLabel={customLabel}
/>
)}
</For>
<button
@ -51,7 +59,7 @@ export function RegisterPreview(props: {selections: Array<[number, string]>, per
);
}
function Register(props: {courseId: number, date: string, onDelete: (v: number) => void}) {
function Register(props: {courseId: number, date: string, customLabel: string, onDelete: (v: number) => void}) {
const courseName = () => {
const courses = allCourses();
return courses.find((course) => course.course_id === props.courseId)?.course_name ?? `Curso invalido! (${props.courseId})`;

11
frontend/src/certs/NewRegister/index.tsx
View File

@ -5,15 +5,20 @@ import { RegisterPresets } from "./RegisterPresets";
import { ManualRegistration } from "./ManualRegistration";
type TabType = "Presets" | "Manual";
export type RegistrationPreview = {
courseId: number,
date: string,
customLabel: string,
}
export function NewRegister(props: {
personId: number | null,
onSuccess: () => void,
}) {
const [active, setActive] = createSignal<TabType>("Presets");
const [selections, setSelections] = createSignal<Array<[number, string]>>([]);
const [selections, setSelections] = createSignal<Array<RegistrationPreview>>([]);
const onRegister = () => {
setSelections([]);
@ -46,7 +51,7 @@ export function NewRegister(props: {
<RegisterPreview
selections={selections()}
personId={props.personId}
onDelete={(deleteId) => setSelections((s) => [...s.filter(([id]) => id !== deleteId)])}
onDelete={(deleteId) => setSelections((s) => [...s.filter((obj) => obj.courseId !== deleteId)])}
onRegister={onRegister}
/>
</div>

2
frontend/src/utils/allCustomLabels.ts
View File

@ -7,7 +7,7 @@ export const [customLabelsMap, setCustomLabelsMap] = createSignal<{[k: number]:
(() => {
// Get all labels from the API
fetch(`${import.meta.env.VITE_BACKEND_URL}/api/labels`)
fetch(`${import.meta.env.VITE_BACKEND_URL}/api/label`)
.then((res) => res.json())
.then((data: Array<CustomLabel>) => {
const map: CustomLabelsMap = {};