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

[Classroom][FE] Improve UI for courses list, messages

Browse Source
This commit is contained in:
Araozu 2023-10-04 21:11:00 -05:00
parent 968b69dfa6
commit 7a731ddea1
10 changed files with 110 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/online_classroom/create_user.rs
View File

@ -107,7 +107,7 @@ Content-Disposition: form-data; name="firstname"
-----------------------------83919643214156711801978607619 -----------------------------83919643214156711801978607619
Content-Disposition: form-data; name="official_code" Content-Disposition: form-data; name="official_code"
{password}
-----------------------------83919643214156711801978607619 -----------------------------83919643214156711801978607619
Content-Disposition: form-data; name="email" Content-Disposition: form-data; name="email"

2
frontend/index.html
View File

@ -9,7 +9,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inconsolata&family=Inter&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inconsolata&family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
</head> </head>
<body> <body>

2
frontend/src/OnlineClassroom/ClassroomRegistration.tsx
View File

@ -13,7 +13,7 @@ export function ClassroomRegistration(props: {
return ( return (
<div class="h-screen overflow-y-scroll"> <div class="h-screen overflow-y-scroll">
<FilledCard class="border border-c-outline overflow-hidden"> <FilledCard class="border border-c-outline overflow-hidden">
<h2 class="p-3 font-bold text-xl">Registrar cursos</h2> <h2 class="p-3 font-bold text-xl">Inscribir en Aula Virtual</h2>
<div class="bg-c-surface p-4 h-[23rem]"> <div class="bg-c-surface p-4 h-[23rem]">
<ManualClassroomRegistration <ManualClassroomRegistration

47
frontend/src/OnlineClassroom/ClassroomUserCourses.tsx → frontend/src/OnlineClassroom/ClassroomUserCourses/Courses.tsx
View File

@ -1,10 +1,13 @@
import { For, Show, createEffect, createSignal, onMount } from "solid-js"; import { For, Show, createEffect, createSignal, onMount } from "solid-js";
import { LoadingStatus, backend, useLoading, wait } from "../utils/functions"; import { LoadingStatus, backend, useLoading, wait } from "../../utils/functions";
import { JsonResult } from "../types/JsonResult"; import { JsonResult } from "../../types/JsonResult";
import { ClassroomCourse } from "../types/ClassroomCourse"; import { ClassroomCourse } from "../../types/ClassroomCourse";
import { LoadingIcon } from "../icons/LoadingIcon"; import { LoadingIcon } from "../../icons/LoadingIcon";
import { OutlinedCard } from "../../components/OutlinedCard";
import { XIcon } from "../../icons/XIcon";
import { QuestionIcon } from "../../icons/QuestionIcon";
export function ClassroomUserCourses(props: {userid: number, updateSignal: number}) { export function CoursesList(props: {userid: number, updateSignal: number}) {
const [courses, setCourses] = createSignal<Array<ClassroomCourse>>([]); const [courses, setCourses] = createSignal<Array<ClassroomCourse>>([]);
const {setError, status, setStatus} = useLoading(); const {setError, status, setStatus} = useLoading();
@ -18,7 +21,6 @@ export function ClassroomUserCourses(props: {userid: number, updateSignal: numbe
backend.get<JsonResult<Array<ClassroomCourse>>>(`/api/classroom/course/${props.userid}`) backend.get<JsonResult<Array<ClassroomCourse>>>(`/api/classroom/course/${props.userid}`)
.then((res) => { .then((res) => {
setCourses(res.data.Ok); setCourses(res.data.Ok);
setStatus(LoadingStatus.Ok); setStatus(LoadingStatus.Ok);
}) })
.catch((err) => { .catch((err) => {
@ -39,9 +41,9 @@ export function ClassroomUserCourses(props: {userid: number, updateSignal: numbe
}); });
return ( return (
<div class="w-full"> <OutlinedCard class="w-[24rem] h-[26.5rem] overflow-hidden">
<h2 class="text-2xl"> <h2 class="text-xl p-3 bg-c-surface-variant text-c-on-surface-variant">
Cursos matriculados: Cursos matriculados
</h2> </h2>
<div class="py-2 text-center"> <div class="py-2 text-center">
@ -57,11 +59,34 @@ export function ClassroomUserCourses(props: {userid: number, updateSignal: numbe
</div> </div>
<For each={courses()}> <For each={courses()}>
{(c) => (<p>{c.name}</p>)} {(c) => <Course course={c} />}
</For> </For>
<Show when={status() === LoadingStatus.Ok && courses().length === 0}> <Show when={status() === LoadingStatus.Ok && courses().length === 0}>
<p>Esta persona no está matriculada en ningún curso</p> <div class="px-4 pb-2 text-center">
<div class="text-center pt-6 pb-4">
<QuestionIcon class="scale-[200%]" fill="var(--c-outline)" />
</div>
<p>No está matriculado a ningun curso.</p>
</div>
</Show> </Show>
</OutlinedCard>
);
}
function Course(props: {course: ClassroomCourse}) {
return (
<div
class="px-4 py-3 transition-colors
grid grid-cols-[auto_2rem] gap-2
hover:bg-c-surface-variant hover:text-c-on-surface-variant"
>
<p>{props.course.name}</p>
<button
class="disabled:opacity-50 disabled:cursor-not-allowed"
disabled
>
<XIcon fill="var(--c-error)" />
</button>
</div> </div>
); );
} }

40
frontend/src/OnlineClassroom/ClassroomUserCourses/Message.tsx Normal file
View File

@ -0,0 +1,40 @@
import { OutlinedCard } from "../../components/OutlinedCard";
export function Message() {
const message = `
Buen día estimados,
Se adjunta...
`.trim();
return (
<OutlinedCard class="w-[24rem] h-[26.5rem] overflow-hidden">
<h2 class="text-xl p-3 bg-c-surface-variant text-c-on-surface-variant">
Generar mensajes
</h2>
<div>
<h3 class="px-4 pt-2 font-bold">Mensaje usuario natural:</h3>
<div class="p-4">
<pre
class="w-full p-2 bg-c-surface text-c-on-surface
border border-c-outline rounded font-mono text-sm
whitespace-pre-wrap"
>
{message}
</pre>
</div>
<h3 class="px-4 pt-2 font-bold">Mensaje empresa:</h3>
<div class="p-4">
<pre
class="w-full p-2 bg-c-surface text-c-on-surface
border border-c-outline rounded font-mono text-sm
whitespace-pre-wrap"
>
{message}
</pre>
</div>
</div>
</OutlinedCard>
);
}

12
frontend/src/OnlineClassroom/ClassroomUserCourses/index.tsx Normal file
View File

@ -0,0 +1,12 @@
import { CoursesList } from "./Courses";
import { Message } from "./Message";
export function ClassroomUserCourses(props: {userid: number, updateSignal: number}) {
return (
<div class="flex gap-2">
<CoursesList userid={props.userid} updateSignal={props.updateSignal} />
<Message />
</div>
);
}

1
frontend/src/OnlineClassroom/ClassroomUserCreation.tsx
View File

@ -53,7 +53,6 @@ export function ClassroomUserCreation(props: {person: Person, onCreate: (classro
}) })
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
alert("Usuario creado con éxito");
setStatus(LoadingStatus.Ok); setStatus(LoadingStatus.Ok);
props.onCreate(response.data.Ok.person_classroom_id); props.onCreate(response.data.Ok.person_classroom_id);
} else { } else {

10
frontend/src/OnlineClassroom/index.tsx
View File

@ -32,10 +32,12 @@ export function OnlineClassroom() {
onSuccess={() => setUpdateSIgnal((s) => s + 1)} onSuccess={() => setUpdateSIgnal((s) => s + 1)}
/> />
<ClassroomUserCourses <div class="flex">
userid={person()!.person_classroom_id!} <ClassroomUserCourses
updateSignal={updateSignal()} userid={person()!.person_classroom_id!}
/> updateSignal={updateSignal()}
/>
</div>
</Show> </Show>
</div> </div>

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

@ -30,7 +30,7 @@ export function NewRegister(props: {
return ( return (
<div class="h-screen overflow-y-scroll"> <div class="h-screen overflow-y-scroll">
<FilledCard class="border border-c-outline overflow-hidden"> <FilledCard class="border border-c-outline overflow-hidden">
<h2 class="p-3 font-bold text-xl">Agregar certs</h2> <h2 class="p-3 font-bold text-xl">Registrar certificados</h2>
<RegisterTabs active={active()} setActive={setActive} /> <RegisterTabs active={active()} setActive={setActive} />

12
frontend/src/components/OutlinedCard.tsx Normal file
View File

@ -0,0 +1,12 @@
import type { JSX } from "solid-js";
export function OutlinedCard(props: {children?: Array<JSX.Element> | JSX.Element, class?: string}) {
return (
<div class={`bg-c-surface text-c-on-surface rounded-xl m-2
border border-c-outline
shadow ${props.class ?? ""}`}
>
{props.children}
</div>
);
}