From d49cda6e4e049033ed0ab91f5959e441fed2b19f Mon Sep 17 00:00:00 2001
From: Araozu <fernando@eegsac.com>
Date: Thu, 5 Oct 2023 11:24:55 -0500
Subject: [PATCH] [Classroom][FE] Update UI to include pre-written messages

---
 .../ClassroomUserCourses/Courses.tsx          | 14 ++--
 .../ClassroomUserCourses/Message.tsx          | 67 ++++++++++++++++---
 .../ClassroomUserCourses/index.tsx            | 20 ++++--
 .../OnlineClassroom/ClassroomUserCreation.tsx | 11 ++-
 .../OnlineClassroom/ClassroomVinculation.tsx  | 11 ++-
 frontend/src/OnlineClassroom/index.tsx        | 29 +++++---
 frontend/src/icons/CopyIcon.tsx               | 11 ++-
 frontend/src/types/Person.ts                  |  1 +
 8 files changed, 124 insertions(+), 40 deletions(-)

diff --git a/frontend/src/OnlineClassroom/ClassroomUserCourses/Courses.tsx b/frontend/src/OnlineClassroom/ClassroomUserCourses/Courses.tsx
index 8e4bd24..48e6ada 100644
--- 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)" />
diff --git a/frontend/src/OnlineClassroom/ClassroomUserCourses/Message.tsx b/frontend/src/OnlineClassroom/ClassroomUserCourses/Message.tsx
index 750dea3..a5aad01 100644
--- 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>
diff --git a/frontend/src/OnlineClassroom/ClassroomUserCourses/index.tsx b/frontend/src/OnlineClassroom/ClassroomUserCourses/index.tsx
index e56b7b4..b507a28 100644
--- 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>
     );
 }
diff --git a/frontend/src/OnlineClassroom/ClassroomUserCreation.tsx b/frontend/src/OnlineClassroom/ClassroomUserCreation.tsx
index 8ecabd2..ed0bc51 100644
--- 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);
diff --git a/frontend/src/OnlineClassroom/ClassroomVinculation.tsx b/frontend/src/OnlineClassroom/ClassroomVinculation.tsx
index be78e9a..31e1569 100644
--- 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);
diff --git a/frontend/src/OnlineClassroom/index.tsx b/frontend/src/OnlineClassroom/index.tsx
index 13cab28..4795774 100644
--- 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()}
-                    />
-                </div>
+                <ClassroomUserCourses
+                    userid={person()!.person_classroom_id!}
+                    updateSignal={updateSignal()}
+                    person={person()!}
+                />
             </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");
 
diff --git a/frontend/src/icons/CopyIcon.tsx b/frontend/src/icons/CopyIcon.tsx
index 9a8b68c..e15773d 100644
--- 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>
     );
 }
diff --git a/frontend/src/types/Person.ts b/frontend/src/types/Person.ts
index 94f647f..906f375 100644
--- 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
 }