[FE] Refactor register list: spinner & error msg

backend/src/controller/register/mod.rs

@@ -1,6 +1,6 @@
 use rocket::{http::Status, serde::json::Json};
 
-use crate::model::register::{Register, RegisterCreate};
+use crate::{model::register::{Register, RegisterCreate}, json_result::JsonResult};
 
 #[options("/register/batch")]
 pub fn options() -> Status {
@@ -27,15 +27,15 @@ pub async fn insert_all(data: Json<Vec<RegisterCreate>>) -> Status {
 }
 
 #[get("/register/<dni>")]
-pub async fn get_by_dni(dni: i32) -> (Status, Json<Vec<Register>>) {
+pub async fn get_by_dni(dni: i32) -> (Status, Json<JsonResult<Vec<Register>>>) {
     let registers = Register::get_by_dni(dni).await;
 
     match registers {
-        Ok(data) => (Status::Ok, Json(data)),
+        Ok(data) => (Status::Ok, JsonResult::ok(data)),
         Err(err) => {
             eprintln!("{:?}", err);
 
-            (Status::InternalServerError, Json(vec![]))
+            (Status::InternalServerError, JsonResult::err(format!("Error recuperando certs de DB")))
         }
     }
 }

frontend/src/certs/Registers/index.tsx

@@ -7,20 +7,40 @@ import { CaretRight } from "../../icons/CaretRight";
 import { RegisterSidebar } from "./RegisterSidebar";
 import { customLabelsMap } from "../../utils/allCustomLabels";
 import { DownloadSimpleIcon } from "../../icons/DownloadSimpleIcon";
+import { backend, wait } from "../../utils/functions";
+import { JsonResult } from "../../types/JsonResult";
+import { LoadingIcon } from "../../icons/LoadingIcon";
 
 export function Registers(props: {person: Person | null, count: number}) {
     const [registers, setRegisters] = createSignal<Array<Register>>([]);
     const [showHidden, setShowHidden] = createSignal(false);
     const [sidebarRegister, setSidebarRegister] = createSignal<Register | null>(null);
+    const [loading, setLoading] = createSignal(false);
+    const [error, setError] = createSignal("");
 
     const loadRegisters = async() => {
-        const person = props.person!;
+        setLoading(true);
+        setError("");
 
-        const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/register/${person.person_dni}`);
-        if (res.ok) {
-            const data = await res.json();
-            setRegisters(data);
-        }
+        const person = props.person!;
+        setRegisters([]);
+
+        if (import.meta.env.DEV) await wait(1500);
+
+        backend.get<JsonResult<Array<Register>>>(`/api/register/${person.person_dni}`)
+            .then((response) => {
+                if (response.status === 200) {
+                    setRegisters(response.data.Ok);
+                } else {
+                    console.error(response.data.Err);
+                    setError(response.data.Err.reason);
+                }
+            })
+            .catch((err) => {
+                console.error(err);
+                setError(`Error fatal: ${err.message}`);
+            })
+            .finally(() => setLoading(false));
     };
 
     createEffect(async() => {
@@ -133,6 +153,16 @@ export function Registers(props: {person: Person | null, count: number}) {
                 )}
             </For>
 
+            <Show when={loading()}>
+                <div class="text-center">
+                    <LoadingIcon class="animate-spin" fill="var(--c-on-surface)" />
+                </div>
+            </Show>
+
+            <Show when={error() !== ""}>
+                <p>Error: {error()}</p>
+            </Show>
+
             <Show when={sidebarRegister() !== null}>
                 <RegisterSidebar
                     register={sidebarRegister()!}

frontend/src/certs/Search/PersonDisplay.tsx

@@ -35,25 +35,25 @@ export function PersonDisplay(props: {person: Person}) {
 
             <div class={"relative max-w-[14rem] mx-auto my-6"}>
                 <CopyButton copyText={namesAndSurnames()}>
-                    <CopyIcon fill="var(--c-on-primary)" />
+                    <CopyIcon fill="var(--c-on-primary-container)" />
                                 &nbsp;
                                 Nombres y <b>Apellidos</b>
                 </CopyButton>
 
                 <CopyButton copyText={surnamesAndNames()}>
-                    <CopyIcon fill="var(--c-on-primary)" />
+                    <CopyIcon fill="var(--c-on-primary-container)" />
                                 &nbsp;
                     <b>Apellidos</b> y Nombres
                 </CopyButton>
 
                 <div class="grid grid-cols-2 gap-2">
                     <CopyButton copyText={surnames()}>
-                        <CopyIcon fill="var(--c-on-primary)" />
+                        <CopyIcon fill="var(--c-on-primary-container)" />
                                     &nbsp;
                         <b>Apellidos</b>
                     </CopyButton>
                     <CopyButton copyText={personNames()}>
-                        <CopyIcon fill="var(--c-on-primary)" />
+                        <CopyIcon fill="var(--c-on-primary-container)" />
                                     &nbsp;
                                     Nombres
                     </CopyButton>

frontend/src/certs/Search/index.tsx

@@ -51,7 +51,7 @@ export function Search(props: {setPerson: (p: Person | null) => void}) {
         setLoading(true);
         setError("");
 
-        await wait(1500);
+        if (import.meta.env.DEV) await wait(1500);
 
         backend.get<JsonResult<Person>>(`/api/person/${dni()}`)
             .then((response) => {
@@ -71,7 +71,7 @@ export function Search(props: {setPerson: (p: Person | null) => void}) {
                 }
             })
             .catch((err) => {
-                setError(`Error inesperado: ${err.message}`);
+                setError(`Error fatal: ${err.message}`);
                 console.error(err);
             })
             .finally(() => {