From acb29940fc21a6b7f253ad4a978514d34c726c7f Mon Sep 17 00:00:00 2001 From: Araozu Date: Fri, 25 Aug 2023 10:34:33 -0500 Subject: [PATCH] [FE][Certs] Improve UI elements --- backend/.gitignore | 1 + frontend/.vscode/settings.json | 5 + frontend/src/certs/Registers.tsx | 24 ++++ frontend/src/certs/Search.tsx | 185 +++++++++++++--------------- frontend/src/certs/index.tsx | 3 +- frontend/src/components/NavRail.tsx | 2 - frontend/src/icons/DownloadIcon.tsx | 2 +- frontend/src/types/Person.tsx | 9 ++ 8 files changed, 127 insertions(+), 104 deletions(-) create mode 100644 backend/.gitignore create mode 100644 frontend/.vscode/settings.json create mode 100644 frontend/src/certs/Registers.tsx create mode 100644 frontend/src/types/Person.tsx diff --git a/backend/.gitignore b/backend/.gitignore new file mode 100644 index 0000000..1de5659 --- /dev/null +++ b/backend/.gitignore @@ -0,0 +1 @@ +target \ No newline at end of file diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json new file mode 100644 index 0000000..dc8891d --- /dev/null +++ b/frontend/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + } +} \ No newline at end of file diff --git a/frontend/src/certs/Registers.tsx b/frontend/src/certs/Registers.tsx new file mode 100644 index 0000000..f3efe4f --- /dev/null +++ b/frontend/src/certs/Registers.tsx @@ -0,0 +1,24 @@ +import { DownloadIcon } from "../icons/DownloadIcon"; + +export function Registers() { + return ( +
+

+ SUMA BERNAL, MAIKOL +

+ +
+
+ +
+

Matpel 2

+

12/08/2023 - 6486

+
+
+ +
+
+ ); +} diff --git a/frontend/src/certs/Search.tsx b/frontend/src/certs/Search.tsx index 0c38a07..006052f 100644 --- a/frontend/src/certs/Search.tsx +++ b/frontend/src/certs/Search.tsx @@ -1,20 +1,12 @@ -import { createEffect, createSignal, Show } from "solid-js"; +import { Show, createEffect, createSignal } from "solid-js"; import { JSX } from "solid-js/jsx-runtime"; -// import { Person } from "../../types/Person"; -// import { RegisterPerson } from "./Search/RegisterPerson"; import QR from "qrcode"; import { CopyIcon } from "../icons/CopyIcon"; -import { MagnifyingGlassIcon } from "../icons/MagnifyingGlassIcon"; import { XIcon } from "../icons/XIcon"; +import { Person } from "../types/Person"; -type HTMLEventFn = JSX.EventHandlerUnion; type HTMLButtonEvent = JSX.EventHandlerUnion; -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type Person = any; - /* Form that retrieves a user from the DB given an ID */ @@ -22,16 +14,16 @@ export function Search(props: {setPerson: (p: Person | null) => void}) { const [dni, setDni] = createSignal(""); const [loading, setLoading] = createSignal(false); const [error, setError] = createSignal(""); - const [warning, setWarning] = createSignal(""); const [qrBase64, setQrBase64] = createSignal(null); - const [persona, setPersona] = createSignal(null); + const [person, setPerson] = createSignal(null); - // Update QR + // Update QR and automatically search when DNI is changed createEffect(() => { - if (dni() !== "") { - // Old URL: https://www.eegsac.com/alumnoscertificados.php?DNI=${dni()} - // New URL: https://eegsac.com/certificado/${dni()} - QR.toDataURL(`https://eegsac.com/certificado/${dni()}`, {margin: 1}, (err, res) => { + const dniT = dni(); + + if (dniT.length >= 8) { + search(); + QR.toDataURL(`https://eegsac.com/certificado/${dniT}`, {margin: 1}, (err, res) => { if (err) { console.error("Error creating QR code"); return; @@ -39,32 +31,28 @@ export function Search(props: {setPerson: (p: Person | null) => void}) { setQrBase64(res); }); + } else { + setQrBase64(null); } }); /* Get the user data from the DB */ - const searchDNI: HTMLEventFn = (ev) => { - ev.preventDefault(); - search(); - }; - const search = async() => { setLoading(true); setError(""); - setWarning(""); try { - const response = await fetch(`/person/${dni()}`); + const response = await fetch(`/api/person/${dni()}`); const body = await response.json(); if (response.ok) { - setPersona(body); + setPerson(body); props.setPerson(body); } else if (response.status === 404) { console.error(body); - setWarning("Persona no encontrada. Se debe insertar manualmente sus datos."); + setError("No encontrado. Ingresar datos manualmente."); props.setPerson(null); } else { setError(body); @@ -76,36 +64,36 @@ export function Search(props: {setPerson: (p: Person | null) => void}) { setLoading(false); }; - const nombresYApellidos = () => { - const p = persona(); + const namesAndSurnames = () => { + const p = person(); if (p === null) { return ""; } - return `${p.nombres} ${p.apellidoPaterno} ${p.apellidoMaterno}`; + return `${p.person_names} ${p.person_paternal_surname} ${p.person_maternal_surname}`; }; - const apellidosYNombres = () => { - const p = persona(); + const surnamesAndNames = () => { + const p = person(); if (p === null) { return ""; } - return `${p.apellidoPaterno} ${p.apellidoMaterno} ${p.nombres}`; + return `${p.person_paternal_surname} ${p.person_maternal_surname} ${p.person_names}`; }; - const apellidos = () => { - const p = persona(); + const surnames = () => { + const p = person(); if (p === null) { return ""; } - return `${p.apellidoPaterno} ${p.apellidoMaterno}`; + return `${p.person_paternal_surname} ${p.person_maternal_surname}`; }; - const nombres = () => { - const p = persona(); + const personNames = () => { + const p = person(); if (p === null) { return ""; } - return p.nombres; + return p.person_names; }; return ( @@ -116,59 +104,58 @@ export function Search(props: {setPerson: (p: Person | null) => void}) {
-
+ ev.preventDefault()} class="px-4">

- Error: -
- {error()} + Error: {error()}

-
-
- - - +
+ + + -
- - -   - Nombres y Apellidos - - - - -   - Apellidos y Nombres - - -
- + +
+   - Apellidos + Nombres y Apellidos - + +   - Nombres + Apellidos y Nombres + +
+ + +   + Apellidos + + + +   + Nombres + +
-
+
+ {/* - {/* - */} + */}
); @@ -179,24 +166,7 @@ function InputBox(props: { dni: string, setDni: (v: string) => void, }) { - const inputElement = ( - props.setDni(e.target.value)} - disabled={props.loading} - /> - ); + let inputElement: HTMLInputElement | undefined; const copyToClipboard: HTMLButtonEvent = (ev) => { ev.preventDefault(); @@ -215,13 +185,26 @@ function InputBox(props: { return (
- {inputElement} - - + props.setDni(e.target.value)} + disabled={props.loading} + /> + + +