[Certs] Create person in FE & BE

backend/src/controller/person/mod.rs

@@ -2,6 +2,7 @@ use reqwest::Client;
 use rocket::http::Status;
 use rocket::serde::json::Json;
 
+use crate::model::person::PersonCreate;
 use crate::model::reniec_person::ReniecPerson;
 use crate::{db, model::person::Person};
 
@@ -94,3 +95,20 @@ pub async fn get_by_dni(dni: i32) -> (Status, Json<Person>) {
     // Return error
     (Status::NotFound, Json(Person::default()))
 }
+
+#[options("/person")]
+pub fn options() -> Status {
+    Status::Ok
+}
+
+#[post("/person", format = "json", data = "<person>")]
+pub async fn create_person(person: Json<PersonCreate>) -> Status {
+    match person.create().await {
+        Ok(_) => Status::Created,
+        Err(reason) => {
+            eprintln!("Error creating person: {:?}", reason);
+
+            Status::InternalServerError
+        }
+    }
+}

backend/src/main.rs

@@ -40,6 +40,8 @@ async fn rocket() -> _ {
         "/api",
         routes![
             controller::person::get_by_dni,
+            controller::person::options,
+            controller::person::create_person,
             controller::course::get_all,
             controller::register::insert_all,
             controller::register::options,

backend/src/model/person.rs

@@ -1,4 +1,6 @@
-use serde::Serialize;
+use serde::{Serialize, Deserialize};
+
+use crate::db;
 
 #[derive(Serialize, Clone)]
 pub struct Person {
@@ -33,3 +35,30 @@ impl Person {
         }
     }
 }
+
+
+
+
+#[derive(Deserialize)]
+pub struct PersonCreate {
+    pub person_dni: String,
+    pub person_names: String,
+    pub person_paternal_surname: String,
+    pub person_maternal_surname: String,
+}
+
+impl PersonCreate {
+    pub async fn create(&self) -> Result<(), sqlx::Error> {
+        let db = db();
+
+        sqlx::query!("INSERT INTO person (person_dni, person_names, person_paternal_surname, person_maternal_surname) VALUES (?, ?, ?, ?)", 
+            self.person_dni, 
+            self.person_names, 
+            self.person_paternal_surname, 
+            self.person_maternal_surname)
+            .execute(db)
+            .await?;
+        
+        Ok(())
+    }
+}

frontend/src/certs/Search.tsx

@@ -1,287 +0,0 @@
-import { Show, createEffect, createSignal } from "solid-js";
-import { JSX } from "solid-js/jsx-runtime";
-import QR from "qrcode";
-import { CopyIcon } from "../icons/CopyIcon";
-import { XIcon } from "../icons/XIcon";
-import { Person } from "../types/Person";
-
-type HTMLButtonEvent = JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
-
-/*
-    Form that retrieves a user from the DB given an ID
-*/
-export function Search(props: {setPerson: (p: Person | null) => void}) {
-    const [dni, setDni] = createSignal("");
-    const [loading, setLoading] = createSignal(false);
-    const [error, setError] = createSignal("");
-    const [qrBase64, setQrBase64] = createSignal<string | null>(null);
-    const [person, setPerson] = createSignal<Person | null>(null);
-
-    // Update QR and automatically search when DNI is changed
-    createEffect(() => {
-        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;
-                }
-
-                setQrBase64(res);
-            });
-        } else {
-            setQrBase64(null);
-            setPerson(null);
-            props.setPerson(null);
-        }
-    });
-
-    /*
-      Get the user data from the DB
-    */
-    const search = async() => {
-        setLoading(true);
-        setError("");
-
-        try {
-            const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/person/${dni()}`);
-            const body = await response.json();
-
-            if (response.ok) {
-                setPerson(body);
-                props.setPerson(body);
-            } else if (response.status === 404) {
-                console.error(body);
-
-                setError("No encontrado. Ingresar datos manualmente.");
-                props.setPerson(null);
-            } else {
-                setError(body);
-            }
-        } catch (e) {
-            setError(JSON.stringify(e));
-        }
-
-        setLoading(false);
-    };
-
-    const namesAndSurnames = () => {
-        const p = person();
-        if (p === null) {
-            return "";
-        }
-        return `${p.person_names} ${p.person_paternal_surname} ${p.person_maternal_surname}`;
-    };
-
-    const surnamesAndNames = () => {
-        const p = person();
-        if (p === null) {
-            return "";
-        }
-        return `${p.person_paternal_surname} ${p.person_maternal_surname} ${p.person_names}`;
-    };
-
-    const surnames = () => {
-        const p = person();
-        if (p === null) {
-            return "";
-        }
-        return `${p.person_paternal_surname} ${p.person_maternal_surname}`;
-    };
-
-    const personNames = () => {
-        const p = person();
-        if (p === null) {
-            return "";
-        }
-        return p.person_names;
-    };
-
-    return (
-        <div>
-            <div class="text-center">
-                <div class="my-4 inline-block w-[10rem] h-[10rem] rounded-lg bg-c-surface-variant overflow-hidden">
-                    <img class={`${qrBase64() === null ? "hidden" : ""} inline-block w-[10rem] h-[10rem]`} src={qrBase64() ?? ""} />
-                </div>
-            </div>
-            <div>
-                <form onSubmit={(ev) => ev.preventDefault()} class="px-4">
-                    <InputBox dni={dni()} setDni={setDni} loading={loading()} />
-                </form>
-
-                <p
-                    class="relative max-w-[14rem] mx-auto p-1 text-c-error text-sm select-none"
-                    style={{opacity: error() === "" ? "0" : "1"}}
-                >
-                    Error: {error()}
-                </p>
-
-
-                <div class={`${person() === null ? "opacity-50 cursor-not-allowed" : ""}`}>
-                    <MaterialLabel text={person()?.person_paternal_surname ?? ""} resource="Apellido Paterno" />
-                    <MaterialLabel text={person()?.person_maternal_surname ?? ""} resource="Apellido Materno" />
-                    <MaterialLabel text={personNames()} resource="Nombres" />
-
-                    <Show when={person() !== null}>
-                        <div class={"relative max-w-[14rem] mx-auto my-6"}>
-                            <CopyButton copyText={namesAndSurnames()}>
-                                <CopyIcon fill="var(--c-on-primary)" />
-                                &nbsp;
-                                Nombres y <b>Apellidos</b>
-                            </CopyButton>
-
-                            <CopyButton copyText={surnamesAndNames()}>
-                                <CopyIcon fill="var(--c-on-primary)" />
-                                &nbsp;
-                                <b>Apellidos</b> y Nombres
-                            </CopyButton>
-
-                            <div class="grid grid-cols-2 gap-2">
-                                <CopyButton copyText={surnames()}>
-                                    <CopyIcon fill="var(--c-on-primary)" />
-                                    &nbsp;
-                                    <b>Apellidos</b>
-                                </CopyButton>
-                                <CopyButton copyText={personNames()}>
-                                    <CopyIcon fill="var(--c-on-primary)" />
-                                    &nbsp;
-                                    Nombres
-                                </CopyButton>
-                            </div>
-                        </div>
-                    </Show>
-                </div>
-
-                {/*
-                <Show when={warning() !== ""}>
-                    <RegisterPerson dni={dni()} onSuccess={search} />
-                </Show>
-                */}
-            </div>
-        </div>
-    );
-}
-
-function InputBox(props: {
-    loading: boolean,
-    dni: string,
-    setDni: (v: string) => void,
-}) {
-    let inputElement: HTMLInputElement | undefined;
-
-    const copyToClipboard: HTMLButtonEvent = (ev) => {
-        ev.preventDefault();
-
-        if (props.dni.length === 8) {
-            navigator.clipboard.writeText(props.dni);
-        }
-    };
-
-    const clearDni: HTMLButtonEvent = (ev) => {
-        ev.preventDefault();
-
-        props.setDni("");
-        (inputElement as HTMLInputElement).focus();
-    };
-
-    return (
-        <div class="relative max-w-[14rem] mx-auto">
-            <input
-                ref={inputElement}
-                id="search-dni"
-                class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1 w-full
-                        invalid:border-c-error invalid:text-c-error
-                        focus:border-c-primary outline-none font-mono
-                        disabled:opacity-50 disabled:cursor-not-allowed"
-                type="text"
-                minLength={8}
-                maxLength={8}
-                pattern="[0-9]{8}"
-                placeholder="Número de DNI"
-                value={props.dni}
-                required
-                onInput={(e) => props.setDni(e.target.value)}
-                disabled={props.loading}
-            />
-
-
-            <label for="search-dni" class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">DNI</label>
-            <button
-                type="button"
-                class="absolute top-1 right-8 rounded hover:bg-c-surface-variant"
-                onclick={copyToClipboard}
-            >
-                <CopyIcon fill="var(--c-on-surface)" />
-            </button>
-            <button
-                type="button"
-                class="absolute top-1 right-1 rounded hover:bg-c-surface-variant"
-                onclick={clearDni}
-            >
-                <XIcon fill="var(--c-on-surface)" />
-            </button>
-        </div>
-    );
-}
-
-
-function MaterialLabel(props: {text: string, resource: string}) {
-    const copyToClipboard: HTMLButtonEvent = (ev) => {
-        ev.preventDefault();
-
-        if (props.text !== "") {
-            navigator.clipboard.writeText(props.text);
-        }
-    };
-
-    return (
-        <div class="relative max-w-[14rem] mx-auto my-6">
-            <label for="search-dni" class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">
-                {props.resource}
-            </label>
-            <span
-                class="bg-c-background text-c-on-background border-c-outline
-                border-2 rounded px-2 py-1 w-full inline-block font-mono
-                disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-                {props.text}
-                <span class="select-none">&nbsp;</span>
-            </span>
-
-            <button
-                type="button"
-                class="absolute top-1 right-1 rounded hover:bg-c-surface-variant"
-                onclick={copyToClipboard}
-            >
-                <CopyIcon fill="var(--c-on-surface)" />
-            </button>
-        </div>
-    );
-}
-
-function CopyButton(props: {copyText: string, children: Array<JSX.Element> | JSX.Element}) {
-    const [successAnimation, setSuccessAnimation] = createSignal(false);
-
-    const onclick = () => {
-        if (props.copyText !== "") {
-            navigator.clipboard.writeText(props.copyText);
-            setSuccessAnimation(true);
-            setTimeout(() => setSuccessAnimation(false), 500);
-        }
-    };
-
-    return (
-        <button
-            onclick={onclick}
-            class={
-                `${successAnimation() ? "bg-c-success text-c-on-success" : "bg-c-primary-container text-c-on-primary-container"
-                } rounded-lg transition-colors py-1 my-1 relative overflow-hidden inline-block w-full`
-            }
-        >
-            {props.children}
-        </button>
-    );
-}
-

frontend/src/certs/Search/CopyButton.tsx

@@ -0,0 +1,25 @@
+import { JSX, createSignal } from "solid-js";
+
+export function CopyButton(props: {copyText: string, children: Array<JSX.Element> | JSX.Element}) {
+    const [successAnimation, setSuccessAnimation] = createSignal(false);
+
+    const onclick = () => {
+        if (props.copyText !== "") {
+            navigator.clipboard.writeText(props.copyText);
+            setSuccessAnimation(true);
+            setTimeout(() => setSuccessAnimation(false), 500);
+        }
+    };
+
+    return (
+        <button
+            onclick={onclick}
+            class={
+                `${successAnimation() ? "bg-c-success text-c-on-success" : "bg-c-primary-container text-c-on-primary-container"
+                } rounded-lg transition-colors py-1 my-1 relative overflow-hidden inline-block w-full`
+            }
+        >
+            {props.children}
+        </button>
+    );
+}

frontend/src/certs/Search/PersonDisplay.tsx

@@ -0,0 +1,102 @@
+import { JSX } from "solid-js";
+import { CopyIcon } from "../../icons/CopyIcon";
+import { Person } from "../../types/Person";
+import { CopyButton } from "./CopyButton";
+
+type HTMLButtonEvent = JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
+
+export function PersonDisplay(props: {person: Person}) {
+    const namesAndSurnames = () => {
+        const p = props.person;
+        return `${p.person_names} ${p.person_paternal_surname} ${p.person_maternal_surname}`;
+    };
+
+    const surnamesAndNames = () => {
+        const p = props.person;
+        return `${p.person_paternal_surname} ${p.person_maternal_surname} ${p.person_names}`;
+    };
+
+    const surnames = () => {
+        const p = props.person;
+        return `${p.person_paternal_surname} ${p.person_maternal_surname}`;
+    };
+
+    const personNames = () => {
+        const p = props.person;
+        return p.person_names;
+    };
+
+    return (
+        <div>
+            <MaterialLabel text={props.person.person_paternal_surname} resource="Apellido Paterno" />
+            <MaterialLabel text={props.person.person_maternal_surname} resource="Apellido Materno" />
+            <MaterialLabel text={personNames()} resource="Nombres" />
+
+
+            <div class={"relative max-w-[14rem] mx-auto my-6"}>
+                <CopyButton copyText={namesAndSurnames()}>
+                    <CopyIcon fill="var(--c-on-primary)" />
+                                &nbsp;
+                                Nombres y <b>Apellidos</b>
+                </CopyButton>
+
+                <CopyButton copyText={surnamesAndNames()}>
+                    <CopyIcon fill="var(--c-on-primary)" />
+                                &nbsp;
+                    <b>Apellidos</b> y Nombres
+                </CopyButton>
+
+                <div class="grid grid-cols-2 gap-2">
+                    <CopyButton copyText={surnames()}>
+                        <CopyIcon fill="var(--c-on-primary)" />
+                                    &nbsp;
+                        <b>Apellidos</b>
+                    </CopyButton>
+                    <CopyButton copyText={personNames()}>
+                        <CopyIcon fill="var(--c-on-primary)" />
+                                    &nbsp;
+                                    Nombres
+                    </CopyButton>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+
+function MaterialLabel(props: {text: string, resource: string}) {
+    const copyToClipboard: HTMLButtonEvent = (ev) => {
+        ev.preventDefault();
+
+        if (props.text !== "") {
+            navigator.clipboard.writeText(props.text);
+        }
+    };
+
+    return (
+        <div class="relative max-w-[14rem] mx-auto my-6">
+            <label class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">
+                {props.resource}
+            </label>
+            <span
+                class="bg-c-background text-c-on-background border-c-outline
+                border-2 rounded px-2 py-1 w-full inline-block font-mono
+                disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+                {props.text}
+                <span class="select-none">&nbsp;</span>
+            </span>
+
+            <button
+                type="button"
+                class="absolute top-1 right-1 rounded hover:bg-c-surface-variant"
+                onclick={copyToClipboard}
+            >
+                <CopyIcon fill="var(--c-on-surface)" />
+            </button>
+        </div>
+    );
+}
+
+
+

frontend/src/certs/Search/PersonRegister.tsx

@@ -0,0 +1,111 @@
+import { createSignal } from "solid-js";
+
+export function PersonRegister(props: {dni: string, onRegister: () => void}) {
+    const [paternalSurname, setPaternalSurname] = createSignal("");
+    const [maternalSurname, setMaternalSurname] = createSignal("");
+    const [names, setNames] = createSignal("");
+    const [loading, setLoading] = createSignal(false);
+
+    const register = async() => {
+        setLoading(true);
+
+        const paternal = paternalSurname();
+        const maternal = maternalSurname();
+        const name = names();
+
+        if (paternal === "" || maternal === "" || name === "") {
+            return;
+        }
+
+        const data = {
+            person_dni: props.dni,
+            person_names: name.toUpperCase(),
+            person_paternal_surname: paternal.toUpperCase(),
+            person_maternal_surname: maternal.toUpperCase(),
+        };
+
+        const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/person`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(data),
+        });
+
+        if (response.ok) {
+            props.onRegister();
+        }
+
+        setLoading(false);
+    };
+
+    return (
+        <div class="relative max-w-[14rem] mx-auto">
+            <form
+                onSubmit={(ev) => {
+                    ev.preventDefault();
+                    register();
+                }}
+            >
+                <MaterialInput
+                    name="Apellido paterno"
+                    value={paternalSurname()}
+                    setValue={(v) => setPaternalSurname(v.toUpperCase())}
+                    loading={loading()}
+                />
+                <MaterialInput
+                    name="Apellido materno"
+                    value={maternalSurname()}
+                    setValue={(v) => setMaternalSurname(v.toUpperCase())}
+                    loading={loading()}
+                />
+                <MaterialInput
+                    name="Nombres"
+                    value={names()}
+                    setValue={(v) => setNames(v.toUpperCase())}
+                    loading={loading()}
+                />
+
+                <button
+                    class="bg-c-primary text-c-on-primary px-4 py-2 rounded-full cursor-pointer
+                                        disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    Registrar
+                </button>
+            </form>
+        </div>
+    );
+}
+
+function MaterialInput(props: {
+    name: string,
+    loading: boolean,
+    value: string,
+    setValue: (v: string) => void,
+}) {
+    let inputElement: HTMLInputElement | undefined;
+
+    return (
+        <div class="relative my-6">
+            <input
+                ref={inputElement}
+                id="search-dni"
+                class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1 w-full
+                        invalid:border-c-error invalid:text-c-error
+                        focus:border-c-primary outline-none font-mono
+                        disabled:opacity-50 disabled:cursor-not-allowed"
+                type="text"
+                placeholder={props.name}
+                value={props.value}
+                required
+                onInput={(e) => props.setValue(e.target.value)}
+                disabled={props.loading}
+            />
+
+
+            <label for="search-dni" class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">
+                {props.name}
+            </label>
+        </div>
+    );
+}

frontend/src/certs/Search/index.tsx

@@ -0,0 +1,173 @@
+import { Show, createEffect, createSignal } from "solid-js";
+import { JSX } from "solid-js/jsx-runtime";
+import QR from "qrcode";
+import { CopyIcon } from "../../icons/CopyIcon";
+import { XIcon } from "../../icons/XIcon";
+import { Person } from "../../types/Person";
+import { PersonDisplay } from "./PersonDisplay";
+import { PersonRegister } from "./PersonRegister";
+
+type HTMLButtonEvent = JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
+
+/*
+    Form that retrieves a user from the DB given an ID
+*/
+export function Search(props: {setPerson: (p: Person | null) => void}) {
+    const [dni, setDni] = createSignal("");
+    const [loading, setLoading] = createSignal(false);
+    const [error, setError] = createSignal("");
+    const [qrBase64, setQrBase64] = createSignal<string | null>(null);
+    const [person, setPerson] = createSignal<Person | null>(null);
+    const [manualCreate, setManualCreate] = createSignal(false);
+
+    // Update QR and automatically search when DNI is changed
+    createEffect(() => {
+        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;
+                }
+
+                setQrBase64(res);
+            });
+        } else {
+            setQrBase64(null);
+            setPerson(null);
+            props.setPerson(null);
+        }
+    });
+
+    /*
+      Get the user data from the DB
+    */
+    const search = async() => {
+        setLoading(true);
+        setError("");
+
+        try {
+            const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/person/${dni()}`);
+            const body = await response.json();
+
+            if (response.ok) {
+                setPerson(body);
+                props.setPerson(body);
+                setManualCreate(false);
+            } else if (response.status === 404) {
+                console.error(body);
+
+                setError("No encontrado. Ingresar datos manualmente.");
+                setManualCreate(true);
+                props.setPerson(null);
+            } else {
+                setError(body);
+                setManualCreate(false);
+            }
+        } catch (e) {
+            setError(JSON.stringify(e));
+        }
+
+        setLoading(false);
+    };
+
+
+
+    return (
+        <div>
+            <div class="text-center">
+                <div class="my-4 inline-block w-[10rem] h-[10rem] rounded-lg bg-c-surface-variant overflow-hidden">
+                    <img class={`${qrBase64() === null ? "hidden" : ""} inline-block w-[10rem] h-[10rem]`} src={qrBase64() ?? ""} />
+                </div>
+            </div>
+            <div>
+                <form onSubmit={(ev) => ev.preventDefault()} class="px-4">
+                    <InputBox value={dni()} setValue={setDni} loading={loading()} />
+                </form>
+
+                <p
+                    class="relative max-w-[14rem] mx-auto p-1 text-c-error text-sm select-none"
+                    style={{opacity: error() === "" ? "0" : "1"}}
+                >
+                    Error: {error()}
+                </p>
+
+
+                <Show when={person() !== null}>
+                    <PersonDisplay person={person()!} />
+                </Show>
+                <Show when={manualCreate()}>
+                    <PersonRegister dni={dni()} onRegister={search} />
+                </Show>
+
+            </div>
+        </div>
+    );
+}
+
+
+function InputBox(props: {
+    loading: boolean,
+    value: string,
+    setValue: (v: string) => void,
+}) {
+    let inputElement: HTMLInputElement | undefined;
+
+    const copyToClipboard: HTMLButtonEvent = (ev) => {
+        ev.preventDefault();
+
+        if (props.value.length === 8) {
+            navigator.clipboard.writeText(props.value);
+        }
+    };
+
+    const clearDni: HTMLButtonEvent = (ev) => {
+        ev.preventDefault();
+
+        props.setValue("");
+        (inputElement as HTMLInputElement).focus();
+    };
+
+    return (
+        <div class="relative max-w-[14rem] mx-auto">
+            <input
+                ref={inputElement}
+                id="search-dni"
+                class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1 w-full
+                        invalid:border-c-error invalid:text-c-error
+                        focus:border-c-primary outline-none font-mono
+                        disabled:opacity-50 disabled:cursor-not-allowed"
+                type="text"
+                minLength={8}
+                maxLength={8}
+                pattern="[0-9]{8}"
+                placeholder="Número de DNI"
+                value={props.value}
+                required
+                onInput={(e) => props.setValue(e.target.value)}
+                disabled={props.loading}
+            />
+
+
+            <label for="search-dni" class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">DNI</label>
+            <button
+                type="button"
+                class="absolute top-1 right-8 rounded hover:bg-c-surface-variant"
+                onclick={copyToClipboard}
+            >
+                <CopyIcon fill="var(--c-on-surface)" />
+            </button>
+            <button
+                type="button"
+                class="absolute top-1 right-1 rounded hover:bg-c-surface-variant"
+                onclick={clearDni}
+            >
+                <XIcon fill="var(--c-on-surface)" />
+            </button>
+        </div>
+    );
+}
+
+