[FE][Classroom] Fixes #32: Use fullname for searching for existing classroom accounts

frontend/src/App.tsx

@@ -5,7 +5,6 @@ import { NavRail } from "./components/NavRail";
 import { OnlineClassroom } from "./OnlineClassroom";
 import { Scans } from "./Scans";
 import { Reports } from "./Reports";
-import { genMachineryCarnet } from "./carnetGenerator/machinery";
 
 const App: Component = () => (
     <div class="grid grid-cols-[5rem_auto]">
@@ -22,22 +21,9 @@ const App: Component = () => (
 
 
 function Builder() {
-    const svgRaw = genMachineryCarnet({
-        fullname: "FERNANDO ENRIQUE ARAOZ MORALES",
-        dni: "74059695",
-        code: "0123",
-        expiryMonth: "NOVIEMBRE",
-        expiryYear: "2023",
-        qrBase64: "",
-        certName: "RETROEXCAVADORA",
-        certCustomLabel: "246D3 CAT",
-    });
-
     return (
         <div>
             <p>En construccion</p>
-            <p>:D</p>
-            <div innerHTML={svgRaw} />
         </div>
     );
 }

frontend/src/OnlineClassroom/ClassroomVinculation.tsx

@@ -4,12 +4,12 @@ import { JsonResult } from "../types/JsonResult";
 import { XcircleIcon } from "../icons/XCircleIcon";
 import { LoadingStatus, backend, useLoading, wait } from "../utils/functions";
 import { LinkIcon } from "../icons/LinkIcon";
-import { For, Show, createSignal, onMount } from "solid-js";
+import { For, Show, createMemo, createSignal, onMount } from "solid-js";
 import { LoadingIcon } from "../icons/LoadingIcon";
 import { AxiosError } from "axios";
 
 export function ClassroomVinculation(props: {
-    person_surname: string,
+    person_fullname: string,
     personId: number,
     onLink: (classroom_id: number, classroom_username: string) => void,
 }) {
@@ -20,7 +20,7 @@ export function ClassroomVinculation(props: {
         setClassroomUsers([]);
         setStatus(LoadingStatus.Loading);
 
-        backend.get<JsonResult<Array<ClassroomRegistrationUser>>>(`/api/classroom/users/${encodeURIComponent(props.person_surname)}`)
+        backend.get<JsonResult<Array<ClassroomRegistrationUser>>>(`/api/classroom/users/${encodeURIComponent(props.person_fullname)}`)
             .then((response) => {
                 if (response.status === 200) {
                     setClassroomUsers(response.data.Ok);
@@ -66,6 +66,7 @@ export function ClassroomVinculation(props: {
                     {(u) => (
                         <ClassroomSingleUser
                             user={u}
+                            expectedName={props.person_fullname}
                             personId={props.personId}
                             onLink={props.onLink}
                         />
@@ -89,6 +90,7 @@ export function ClassroomVinculation(props: {
 
 function ClassroomSingleUser(props: {
     user: ClassroomRegistrationUser,
+    expectedName: string,
     onLink: (classroom_id: number, classroom_username: string) => void,
     personId: number,
 }) {
@@ -124,13 +126,28 @@ function ClassroomSingleUser(props: {
             });
     };
 
+    const namesMatch = createMemo(() => {
+        const expected = props.expectedName.toUpperCase().split(" ");
+        const actual = `${props.user.name} ${props.user.surname}`.toUpperCase().split(" ");
+
+        for (let i = 0; i < expected.length; i += 1) {
+            if (expected[i] !== actual[i]) {
+                return false;
+            }
+        }
+
+        return true;
+    });
+
     return (
         <div
             class="hover:bg-c-surface-variant hover:text-c-on-surface-variant transition-colors
                     grid grid-cols-[auto_3rem] gap-4"
         >
             <div class="pl-4 py-2">
-                {props.user.name} {props.user.surname}
+                <span class={namesMatch() ? "" : "text-c-error font-bold"}>
+                    {props.user.name} {props.user.surname}
+                </span>
                 <br />
                 <div class="grid grid-cols-[auto_10rem]">
                     <span class="font-mono">

frontend/src/OnlineClassroom/index.tsx

@@ -71,7 +71,7 @@ function ClassroomUser(props: {
                 <div class="bg-c-surface">
                     <Show when={active() === "Vinculate"}>
                         <ClassroomVinculation
-                            person_surname={`${props.person.person_paternal_surname} ${props.person.person_maternal_surname}`}
+                            person_fullname={`${props.person.person_names} ${props.person.person_paternal_surname} ${props.person.person_maternal_surname}`}
                             personId={props.person.person_id}
                             onLink={props.onLink}
                         />