[Classroom][FE] Update UI to include pre-written messages

2023-10-05 11:24:55 -05:00 · 2023-10-05 11:24:55 -05:00 · d49cda6e4e
parent 7a731ddea1
commit d49cda6e4e
8 changed files with 124 additions and 40 deletions
--- a/frontend/src/OnlineClassroom/ClassroomUserCourses/Courses.tsx
+++ b/frontend/src/OnlineClassroom/ClassroomUserCourses/Courses.tsx
@ -1,4 +1,4 @@
-import { For, Show, createEffect, createSignal, onMount } from "solid-js";
+import { For, Show, createEffect, onMount } from "solid-js";
 import { LoadingStatus, backend, useLoading, wait } from "../../utils/functions";
 import { JsonResult } from "../../types/JsonResult";
 import { ClassroomCourse } from "../../types/ClassroomCourse";
@ -7,20 +7,20 @@ import { OutlinedCard } from "../../components/OutlinedCard";
 import { XIcon } from "../../icons/XIcon";
 import { QuestionIcon } from "../../icons/QuestionIcon";

-export function CoursesList(props: {userid: number, updateSignal: number}) {
-    const [courses, setCourses] = createSignal<Array<ClassroomCourse>>([]);
+export function CoursesList(props: {userid: number, updateSignal: number, courses: Array<ClassroomCourse>, setCourses: (c: Array<ClassroomCourse>) => void}) {
+
    const {setError, status, setStatus} = useLoading();

    const loadCourses = async() => {
        setStatus(LoadingStatus.Loading);
        setError("");
-        setCourses([]);
+        props.setCourses([]);

        if (import.meta.env.DEV) await wait(1500);

        backend.get<JsonResult<Array<ClassroomCourse>>>(`/api/classroom/course/${props.userid}`)
            .then((res) => {
-                setCourses(res.data.Ok);
+                props.setCourses(res.data.Ok);
                setStatus(LoadingStatus.Ok);
            })
            .catch((err) => {
@ -58,10 +58,10 @@ export function CoursesList(props: {userid: number, updateSignal: number}) {
                </Show>
            </div>

-            <For each={courses()}>
+            <For each={props.courses}>
                {(c) => <Course course={c} />}
            </For>
-            <Show when={status() === LoadingStatus.Ok && courses().length === 0}>
+            <Show when={status() === LoadingStatus.Ok && props.courses.length === 0}>
                <div class="px-4 pb-2 text-center">
                    <div class="text-center pt-6 pb-4">
                        <QuestionIcon class="scale-[200%]" fill="var(--c-outline)" />
--- a/frontend/src/OnlineClassroom/ClassroomUserCourses/Message.tsx
+++ b/frontend/src/OnlineClassroom/ClassroomUserCourses/Message.tsx
@ -1,9 +1,40 @@
+import { createMemo } from "solid-js";
 import { OutlinedCard } from "../../components/OutlinedCard";
+import { CopyIcon } from "../../icons/CopyIcon";
+import { Person } from "../../types/Person";
+import { ClassroomCourse } from "../../types/ClassroomCourse";

-export function Message() {
-    const message = `
-Buen día estimados,
-Se adjunta...
+export function Message(props: {
+    courses: Array<ClassroomCourse>,
+    person: Person,
+}) {
+    const personMessage = createMemo(() => `
+Estimado/a: ${props.person.person_paternal_surname} ${props.person.person_maternal_surname}, ${props.person.person_names}
+Ha sido registrado a la plataforma EEGSAC VIRTUAL con los siguientes parámetros:
+Nombre de usuario: ${props.person.person_classroom_username ?? "--"}
+Contraseña: ${props.person.person_dni}
+
+Le recordamos que los cursos a los cual accedió son:
+
+${props.courses.map((course) => `- ${course.name}`).join("\n")}
+
+Gracias por registrarse en EEGSAC VIRTUAL.
+El enlace para acceder a la plataforma EEGSAC VIRTUAL es : https://aulavirtual.eegsac.com/
+Para cualquier aclaración no dude en contactar con nosotros.
+Cordialmente
+EEGSAC, Administrador
+Responsable EEGSAC VIRTUAL
+T. (+51) 958 916 210
+Correo electrónico: soporte@eegsac.com
+        `.trim());
+
+    const companyMessage = `
+Buen día estimado,
+Se adjunta la lista de (los) colaboradore(s) y su(s) acceso(s) en la plataforma virtual.
+
+El vínculo para acceder al aula virtual es el siguiente: https://aulavirtual.eegsac.com/ .
+Quedo atenta cualquier duda o consulta.
+Saludos Cordiales!
    `.trim();

    return (
@ -13,25 +44,41 @@ Se adjunta...
            </h2>

            <div>
-                <h3 class="px-4 pt-2 font-bold">Mensaje usuario natural:</h3>
+                <h3 class="px-4 pt-2 font-bold">
+                    <button class="mr-2 hover:bg-c-surface-variant rounded" title="Copiar">
+                        <CopyIcon fill="var(--c-primary)" />
+                    </button>
+                    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"
+                        whitespace-pre-wrap max-h-32 overflow-x-scroll shadow-md"
                    >
-                        {message}
+                        {personMessage()}
                    </pre>
                </div>

-                <h3 class="px-4 pt-2 font-bold">Mensaje empresa:</h3>
+                <h3 class="px-4 font-bold">
+                    <button
+                        class="mr-2 hover:bg-c-surface-variant rounded"
+                        title="Copiar"
+                        onclick={() => {
+                            navigator.clipboard.writeText(companyMessage);
+                        }}
+                    >
+                        <CopyIcon fill="var(--c-primary)" />
+                    </button>
+                    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"
+                        whitespace-pre-wrap max-h-28 overflow-x-scroll shadow-md"
                    >
-                        {message}
+                        {companyMessage}
                    </pre>
                </div>
            </div>
--- a/frontend/src/OnlineClassroom/ClassroomUserCourses/index.tsx
+++ b/frontend/src/OnlineClassroom/ClassroomUserCourses/index.tsx
@ -1,12 +1,22 @@
+import { createSignal } from "solid-js";
+import { ClassroomCourse } from "../../types/ClassroomCourse";
+import { Person } from "../../types/Person";
 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} />
+export function ClassroomUserCourses(props: {userid: number, updateSignal: number, person: Person}) {
+    const [courses, setCourses] = createSignal<Array<ClassroomCourse>>([]);

-            <Message />
+    return (
+        <div class="flex gap-2 flex-wrap">
+            <CoursesList
+                userid={props.userid}
+                updateSignal={props.updateSignal}
+                courses={courses()}
+                setCourses={setCourses}
+            />
+
+            <Message courses={courses()} person={props.person} />
        </div>
    );
 }
--- a/frontend/src/OnlineClassroom/ClassroomUserCreation.tsx
+++ b/frontend/src/OnlineClassroom/ClassroomUserCreation.tsx
@ -10,9 +10,13 @@ import { LoadingIcon } from "../icons/LoadingIcon";
 type PersonLink = {
    person_id: number,
    person_classroom_id: number,
+    person_classroom_username: string,
 };

-export function ClassroomUserCreation(props: {person: Person, onCreate: (classroom_id: number) => void}) {
+export function ClassroomUserCreation(props: {
+    person: Person,
+    onCreate: (classroom_id: number, classroom_username: string) => void,
+}) {
    const [email, setEmail] = createSignal("yuli.palo.apaza@gmail.com");
    const [username, setUsername] = createSignal("USERNAME");
    const {setError, status, setStatus} = useLoading();
@ -54,7 +58,10 @@ export function ClassroomUserCreation(props: {person: Person, onCreate: (classro
            .then((response) => {
                if (response.status === 200) {
                    setStatus(LoadingStatus.Ok);
-                    props.onCreate(response.data.Ok.person_classroom_id);
+                    props.onCreate(
+                        response.data.Ok.person_classroom_id,
+                        response.data.Ok.person_classroom_username,
+                    );
                } else {
                    console.error(response.data);
                    setError(response.data.Err.reason);
--- a/frontend/src/OnlineClassroom/ClassroomVinculation.tsx
+++ b/frontend/src/OnlineClassroom/ClassroomVinculation.tsx
@ -8,7 +8,11 @@ import { For, Show, createSignal, onMount } from "solid-js";
 import { LoadingIcon } from "../icons/LoadingIcon";

 type Status = "Init" | "Ok" | "Loading" | "Error";
-export function ClassroomVinculation(props: {person_surname: string, personId: number, onLink: (classroom_id: number) => void,}) {
+export function ClassroomVinculation(props: {
+    person_surname: string,
+    personId: number,
+    onLink: (classroom_id: number, classroom_username: string) => void,
+}) {
    const [classroomUsers, setClassroomUsers] = createSignal<ClassroomRegistrationUser[]>([]);
    const [error, setError] = createSignal("");
    const [status, setStatus] = createSignal<Status>("Init");
@ -78,7 +82,7 @@ export function ClassroomVinculation(props: {person_surname: string, personId: n

 function ClassroomSingleUser(props: {
    user: ClassroomRegistrationUser,
-    onLink: (classroom_id: number) => void,
+    onLink: (classroom_id: number, classroom_username: string) => void,
    personId: number,
 }) {
    const {setError, status, setStatus} = useLoading();
@ -93,12 +97,13 @@ function ClassroomSingleUser(props: {
            {
                person_id: props.personId,
                person_classroom_id: parseInt(props.user.user_id, 10),
+                person_classroom_username: props.user.username,
            },
        )
            .then((response) => {
                if (response.status === 200) {
                    setStatus(LoadingStatus.Ok);
-                    props.onLink(parseInt(props.user.user_id, 10));
+                    props.onLink(parseInt(props.user.user_id, 10), props.user.username);
                } else {
                    console.error(response.data);
                    setError(response.data.Err.reason);
--- a/frontend/src/OnlineClassroom/index.tsx
+++ b/frontend/src/OnlineClassroom/index.tsx
@ -14,15 +14,23 @@ export function OnlineClassroom() {
    // Used to update ClassroomUserCourses
    const [updateSignal, setUpdateSIgnal] = createSignal(0);

+    const updatePerson = (classroom_id: number, classroom_username: string) => {
+        setPerson((p) => ({
+            ...p!,
+            person_classroom_id: classroom_id,
+            person_classroom_username: classroom_username,
+        }));
+    };
+
    return (
-        <div class="grid grid-cols-[16rem_25rem_1fr]">
+        <div class="grid grid-cols-[16rem_25rem_auto]">
            <Search setPerson={setPerson} />

            <Show when={person() !== null && person()!.person_classroom_id === null}>
                <ClassroomUser
                    person={person()!}
-                    onLink={(classroom_id) => setPerson((p) => ({...p!, person_classroom_id: classroom_id}))}
-                    onCreate={(classroom_id) => setPerson((p) => ({...p!, person_classroom_id: classroom_id}))}
+                    onLink={updatePerson}
+                    onCreate={updatePerson}
                />
            </Show>
            <Show when={person() !== null && person()!.person_classroom_id !== null}>
@ -32,12 +40,11 @@ export function OnlineClassroom() {
                    onSuccess={() => setUpdateSIgnal((s) => s + 1)}
                />

-                <div class="flex">
                <ClassroomUserCourses
                    userid={person()!.person_classroom_id!}
                    updateSignal={updateSignal()}
+                    person={person()!}
                />
-                </div>
            </Show>

        </div>
@ -48,8 +55,8 @@ export function OnlineClassroom() {

 function ClassroomUser(props: {
    person: Person,
-    onLink: (classroom_id: number) => void,
-    onCreate: (classroom_id: number) => void,
+    onLink: (classroom_id: number, classroom_username: string) => void,
+    onCreate: (classroom_id: number, classroom_username: string) => void,
 }) {
    const [active, setActive] = createSignal<TabType>("Vinculate");

--- a/frontend/src/icons/CopyIcon.tsx
+++ b/frontend/src/icons/CopyIcon.tsx
@ -1,5 +1,12 @@
-export function CopyIcon(props: {fill: string}) {
+export function CopyIcon(props: {fill: string, class?: string}) {
    return (
-        <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-6" fill={props.fill} viewBox="0 0 256 256"><path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z" /></svg>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class={`inline-block w-6 ${props.class}`}
+            fill={props.fill}
+            viewBox="0 0 256 256"
+        >
+            <path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z" />
+        </svg>
    );
 }
--- a/frontend/src/types/Person.ts
+++ b/frontend/src/types/Person.ts
@ -6,5 +6,6 @@ export type Person = {
    person_paternal_surname: string
    person_maternal_surname: string
    person_classroom_id: number | null
+    person_classroom_username: string | null
 }