From c6b77b446d22cebb5275f089f7853b164b00e781 Mon Sep 17 00:00:00 2001 From: Araozu Date: Sat, 2 Sep 2023 18:49:13 -0500 Subject: [PATCH] [FE] Include custom labels in registration --- .../certs/NewRegister/CustomLabelSelect.tsx | 38 +++++++------- .../certs/NewRegister/ManualRegistration.tsx | 50 +++++++++++++------ .../src/certs/NewRegister/RegisterPresets.tsx | 12 ++++- .../src/certs/NewRegister/RegisterPreview.tsx | 16 ++++-- frontend/src/certs/NewRegister/index.tsx | 11 ++-- frontend/src/utils/allCustomLabels.ts | 2 +- 6 files changed, 86 insertions(+), 43 deletions(-) diff --git a/frontend/src/certs/NewRegister/CustomLabelSelect.tsx b/frontend/src/certs/NewRegister/CustomLabelSelect.tsx index 6d4ad25..9e05272 100644 --- a/frontend/src/certs/NewRegister/CustomLabelSelect.tsx +++ b/frontend/src/certs/NewRegister/CustomLabelSelect.tsx @@ -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(null); + const [selected, setSelected] = createSignal(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 ( - <> +
setInputValue(ev.target.value)} @@ -86,25 +85,26 @@ export function CustomLabelSelect(props: {
- {(s) => ( + {([, label]) => ( )}
- +
); } diff --git a/frontend/src/certs/NewRegister/ManualRegistration.tsx b/frontend/src/certs/NewRegister/ManualRegistration.tsx index 28a31cc..77e310d 100644 --- a/frontend/src/certs/NewRegister/ManualRegistration.tsx +++ b/frontend/src/certs/NewRegister/ManualRegistration.tsx @@ -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; -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(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 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 ( <>
@@ -63,18 +86,17 @@ export function ManualRegistration(props: {personId: number | null, onAdd: (v: [ /> -
- - +
+
diff --git a/frontend/src/certs/NewRegister/RegisterPresets.tsx b/frontend/src/certs/NewRegister/RegisterPresets.tsx index f5c5568..b5f6cf0 100644 --- a/frontend/src/certs/NewRegister/RegisterPresets.tsx +++ b/frontend/src/certs/NewRegister/RegisterPresets.tsx @@ -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>} { }; } -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("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); diff --git a/frontend/src/certs/NewRegister/RegisterPreview.tsx b/frontend/src/certs/NewRegister/RegisterPreview.tsx index 2085325..dfe7937 100644 --- a/frontend/src/certs/NewRegister/RegisterPreview.tsx +++ b/frontend/src/certs/NewRegister/RegisterPreview.tsx @@ -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, 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

Confirmar registro

- {([courseId, date]) => } + {({courseId, date, customLabel}) => ( + + )}
diff --git a/frontend/src/utils/allCustomLabels.ts b/frontend/src/utils/allCustomLabels.ts index 2f5a2cb..e18fd04 100644 --- a/frontend/src/utils/allCustomLabels.ts +++ b/frontend/src/utils/allCustomLabels.ts @@ -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) => { const map: CustomLabelsMap = {};