[Classroom][FE] Fixes #5 Don't show duplicate entries
This commit is contained in:
parent
b72026a93f
commit
d30a75697b
@ -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();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user