[Classroom][FE] Fixes #5 Don't show duplicate entries

This commit is contained in:
Araozu 2023-10-06 10:53:54 -05:00
parent b72026a93f
commit d30a75697b
2 changed files with 19 additions and 12 deletions

View File

@ -8,7 +8,7 @@ export function ClassroomRegistration(props: {
surname_first_letter: string, userId: number | null, surname_first_letter: string, userId: number | null,
onSuccess: () => void, onSuccess: () => void,
}) { }) {
const [selections, setSelections] = createSignal<Array<ClassroomCourseValue>>([]); const [selections, setSelections] = createSignal<Set<ClassroomCourseValue>>(new Set());
return ( return (
<div class="h-screen overflow-y-scroll"> <div class="h-screen overflow-y-scroll">
@ -17,7 +17,7 @@ export function ClassroomRegistration(props: {
<div class="bg-c-surface p-4 h-[23rem]"> <div class="bg-c-surface p-4 h-[23rem]">
<ManualClassroomRegistration <ManualClassroomRegistration
onAdd={(x) => setSelections((s) => ([...s, x]))} onAdd={(x) => setSelections((s) => new Set([...s, x]))}
/> />
</div> </div>
</FilledCard> </FilledCard>
@ -26,9 +26,14 @@ export function ClassroomRegistration(props: {
surname_first_letter={props.surname_first_letter} surname_first_letter={props.surname_first_letter}
userId={props.userId} userId={props.userId}
selections={selections()} selections={selections()}
deleteRegister={(course_key) => setSelections((course) => course.filter((v) => v !== course_key))} deleteRegister={(course_key) => {
setSelections((prevSet) => {
prevSet.delete(course_key as ClassroomCourseValue);
return new Set(prevSet);
});
}}
onSuccess={() => { onSuccess={() => {
setSelections([]); setSelections(new Set<ClassroomCourseValue>());
props.onSuccess(); props.onSuccess();
}} }}
/> />

View File

@ -10,7 +10,7 @@ import { AxiosError } from "axios";
export function ClassroomRegistrationPreview(props: { export function ClassroomRegistrationPreview(props: {
surname_first_letter: string, surname_first_letter: string,
userId: number | null, userId: number | null,
selections: Array<ClassroomCourseValue>, selections: Set<ClassroomCourseValue>,
deleteRegister: (k: string) => void, deleteRegister: (k: string) => void,
onSuccess: () => void, onSuccess: () => void,
}) { }) {
@ -27,7 +27,7 @@ export function ClassroomRegistrationPreview(props: {
backend.post<JsonResult<null>>(`/api/classroom/course/${props.userId}`, { backend.post<JsonResult<null>>(`/api/classroom/course/${props.userId}`, {
surname_first_letter: "A", surname_first_letter: "A",
courses: props.selections, courses: [...props.selections.values()],
}) })
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
@ -35,25 +35,27 @@ export function ClassroomRegistrationPreview(props: {
props.onSuccess(); props.onSuccess();
} else { } else {
console.error(response.data); console.error(response.data);
setError(response.data.Err.reason); setError(response.data.Error.reason);
setStatus(LoadingStatus.Error); setStatus(LoadingStatus.Error);
} }
}) })
.catch((err: AxiosError<JsonResult<null>>) => { .catch((err: AxiosError<JsonResult<null>>) => {
console.error(err); console.error(err);
if (err.response?.data?.Err?.reason) { if (err.response?.data?.Error?.reason) {
setError(err.response.data.Err.reason); setError(err.response.data.Error.reason);
} }
setStatus(LoadingStatus.Error); setStatus(LoadingStatus.Error);
}); });
}; };
const selections = createMemo(() => [...props.selections]);
return ( return (
<FilledCard class="border border-c-outline overflow-hidden"> <FilledCard class="border border-c-outline overflow-hidden">
<h2 class="p-4 font-bold text-xl">Confirmar registro</h2> <h2 class="p-4 font-bold text-xl">Confirmar registro</h2>
<div class="bg-c-surface p-4"> <div class="bg-c-surface p-4">
<For each={props.selections}> <For each={selections()}>
{(course_key) => ( {(course_key) => (
<div class="grid grid-cols-[auto_1.5rem] py-1 px-2 rounded-md border border-c-outline my-1"> <div class="grid grid-cols-[auto_1.5rem] py-1 px-2 rounded-md border border-c-outline my-1">
<span class="font-mono"> <span class="font-mono">
@ -73,7 +75,7 @@ export function ClassroomRegistrationPreview(props: {
class="bg-c-primary text-c-on-primary px-4 py-2 rounded-full cursor-pointer mt-4 class="bg-c-primary text-c-on-primary px-4 py-2 rounded-full cursor-pointer mt-4
disabled:opacity-50 disabled:cursor-not-allowed relative" disabled:opacity-50 disabled:cursor-not-allowed relative"
type="button" type="button"
disabled={props.userId === null || props.selections.length === 0 || loading()} disabled={props.userId === null || selections().length === 0 || loading()}
onclick={submit} onclick={submit}
> >
<span <span
@ -86,7 +88,7 @@ export function ClassroomRegistrationPreview(props: {
/> />
</span> </span>
<span class="ml-6"> <span class="ml-6">
Matricular en {props.selections.length} cursos Matricular en {selections().length} cursos
</span> </span>
</button> </button>
</div> </div>