[Classroom][FE] Improve UI for courses list, messages
This commit is contained in:
Araozu
parent
968b69dfa6
commit
7a731ddea1
@ -107,7 +107,7 @@ Content-Disposition: form-data; name="firstname"
|
||||
-----------------------------83919643214156711801978607619
|
||||
Content-Disposition: form-data; name="official_code"
|
||||
|
||||
|
||||
{password}
|
||||
-----------------------------83919643214156711801978607619
|
||||
Content-Disposition: form-data; name="email"
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<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>
|
||||
<body>
|
||||
|
||||
@ -13,7 +13,7 @@ export function ClassroomRegistration(props: {
|
||||
return (
|
||||
<div class="h-screen overflow-y-scroll">
|
||||
<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]">
|
||||
<ManualClassroomRegistration
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import { For, Show, createEffect, createSignal, onMount } from "solid-js";
|
||||
import { LoadingStatus, backend, useLoading, wait } from "../utils/functions";
|
||||
import { JsonResult } from "../types/JsonResult";
|
||||
import { ClassroomCourse } from "../types/ClassroomCourse";
|
||||
import { LoadingIcon } from "../icons/LoadingIcon";
|
||||
import { LoadingStatus, backend, useLoading, wait } from "../../utils/functions";
|
||||
import { JsonResult } from "../../types/JsonResult";
|
||||
import { ClassroomCourse } from "../../types/ClassroomCourse";
|
||||
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 {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}`)
|
||||
.then((res) => {
|
||||
setCourses(res.data.Ok);
|
||||
|
||||
setStatus(LoadingStatus.Ok);
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -39,9 +41,9 @@ export function ClassroomUserCourses(props: {userid: number, updateSignal: numbe
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="w-full">
|
||||
<h2 class="text-2xl">
|
||||
Cursos matriculados:
|
||||
<OutlinedCard class="w-[24rem] h-[26.5rem] overflow-hidden">
|
||||
<h2 class="text-xl p-3 bg-c-surface-variant text-c-on-surface-variant">
|
||||
Cursos matriculados
|
||||
</h2>
|
||||
|
||||
<div class="py-2 text-center">
|
||||
@ -57,11 +59,34 @@ export function ClassroomUserCourses(props: {userid: number, updateSignal: numbe
|
||||
</div>
|
||||
|
||||
<For each={courses()}>
|
||||
{(c) => (<p>{c.name}</p>)}
|
||||
{(c) => <Course course={c} />}
|
||||
</For>
|
||||
<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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@ -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
12
frontend/src/OnlineClassroom/ClassroomUserCourses/index.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -53,7 +53,6 @@ export function ClassroomUserCreation(props: {person: Person, onCreate: (classro
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status === 200) {
|
||||
alert("Usuario creado con éxito");
|
||||
setStatus(LoadingStatus.Ok);
|
||||
props.onCreate(response.data.Ok.person_classroom_id);
|
||||
} else {
|
||||
|
||||
@ -32,10 +32,12 @@ export function OnlineClassroom() {
|
||||
onSuccess={() => setUpdateSIgnal((s) => s + 1)}
|
||||
/>
|
||||
|
||||
<ClassroomUserCourses
|
||||
userid={person()!.person_classroom_id!}
|
||||
updateSignal={updateSignal()}
|
||||
/>
|
||||
<div class="flex">
|
||||
<ClassroomUserCourses
|
||||
userid={person()!.person_classroom_id!}
|
||||
updateSignal={updateSignal()}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
</div>
|
||||
|
||||
@ -30,7 +30,7 @@ export function NewRegister(props: {
|
||||
return (
|
||||
<div class="h-screen overflow-y-scroll">
|
||||
<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} />
|
||||
|
||||
|
||||
12
frontend/src/components/OutlinedCard.tsx
Normal file
12
frontend/src/components/OutlinedCard.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user