[FE][Certs] Minimal delete register

frontend/src/certs/Registers/RegisterSidebar.tsx

@@ -0,0 +1,59 @@
+import { Register } from "../../types/Register";
+import { formatDate } from "../../utils/functions";
+
+export function RegisterSidebar(props: {register: Register, close: () => void, onDelete: () => void}) {
+    const deleteRegister = async() => {
+
+        const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/register/${props.register.register_id}`,{
+            method: "DELETE",
+        });
+
+        if (res.ok) {
+            props.onDelete();
+            props.close();
+        }
+    };
+
+    return (
+        <div class="absolute top-0 bg-c-surface-variant right-0
+                    py-4 px-6 w-[20rem]
+                    shadow-md rounded-lg"
+        >
+            <p class="text-xl mb-8">Detalles del certificado</p>
+
+            <p class="underline text-lg">Curso</p>
+            <p class="mb-4">Matpel 2</p>
+
+            <p class="underline text-lg">Código del certificado</p>
+            <p class="mb-4">{props.register.register_code}</p>
+
+            <p class="underline text-lg">Fecha de creación</p>
+            <p class="mb-4">{formatDate(props.register.register_creation_date)}</p>
+
+            <p class="underline text-lg">Fecha del certificado</p>
+            <p class="mb-4">{formatDate(props.register.register_display_date)}</p>
+
+            <p class="underline text-lg">Denominacion</p>
+            <p class="mb-4">{props.register.register_custom_label}</p>
+
+            <p class="underline text-lg">¿Es cert. sin firmas?</p>
+            <p class="mb-8">{props.register.register_is_preview ? "Si" : "No"}</p>
+
+            <button
+                class="bg-c-error text-c-on-error px-4 py-2 rounded-full cursor-pointer
+                        disabled:opacity-50 disabled:cursor-not-allowed"
+                onclick={deleteRegister}
+            >
+                Eliminar cert.
+            </button>
+            <button
+                class="ml-2 border border-c-outline bg-c-on-primary text-c-primary
+                        px-4 py-2 rounded-full cursor-pointer
+                        disabled:opacity-50 disabled:cursor-not-allowed"
+                onclick={props.close}
+            >
+                Volver
+            </button>
+        </div>
+    );
+}

frontend/src/certs/Registers/index.tsx

@@ -5,10 +5,22 @@ import { Register } from "../../types/Register";
 import { courseMap } from "../../utils/allCourses";
 import { certGenerator } from "../../certGenerator";
 import { CaretRight } from "../../icons/CaretRight";
+import { RegisterSidebar } from "./RegisterSidebar";
 
 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 loadRegisters = async() => {
+        const person = props.person!;
+
+        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);
+        }
+    };
 
     createEffect(async() => {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -19,13 +31,7 @@ export function Registers(props: {person: Person | null, count: number}) {
             return;
         }
 
-        const person = props.person;
+        loadRegisters();
-
-        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);
-        }
     });
 
     // All registers sorted by year, and an indicator of whether there's register older
@@ -68,7 +74,7 @@ export function Registers(props: {person: Person | null, count: number}) {
     const inputCheck = () => setShowHidden((x) => !x);
 
     return (
-        <div class="m-4 p-4 rounded-md">
+        <div class="m-4 p-4 rounded-md relative">
             <h3 class="text-xl font-medium">
                 {props.person?.person_names}&nbsp;
                 {props.person?.person_paternal_surname}&nbsp;
@@ -76,10 +82,10 @@ export function Registers(props: {person: Person | null, count: number}) {
 
                 <Show when={registerSortedList()[1]}>
                     &nbsp;&nbsp;&nbsp;|
-                    <input type="checkbox" class="ml-4 mr-2" checked oninput={inputCheck} />
+                    <input id={`person_${props.person?.person_id ?? "_"}`} type="checkbox" class="ml-4 mr-2" checked oninput={inputCheck} />
-                    <span class="text-sm">
+                    <label for={`person_${props.person?.person_id ?? "_"}`} class="text-sm">
                         Ocultar cert. anteriores a {new Date().getFullYear() - 1}
-                    </span>
+                    </label>
                 </Show>
             </h3>
 
@@ -87,16 +93,30 @@ export function Registers(props: {person: Person | null, count: number}) {
                 {(year) => (
                     <div class="flex flex-wrap justify-start gap-2 my-6">
                         <For each={year}>
-                            {(register) => <RegisterEl register={register} person={props.person!} />}
+                            {(register) => (
+                                <RegisterEl
+                                    register={register}
+                                    person={props.person!}
+                                    onClick={() => setSidebarRegister(register)}
+                                />
+                            )}
                         </For>
                     </div>
                 )}
             </For>
+
+            <Show when={sidebarRegister() !== null}>
+                <RegisterSidebar
+                    register={sidebarRegister()!}
+                    close={() => setSidebarRegister(null)}
+                    onDelete={loadRegisters}
+                />
+            </Show>
         </div>
     );
 }
 
-function RegisterEl(props: {register: Register, person: Person}) {
+function RegisterEl(props: {register: Register, person: Person, onClick: () => void}) {
 
     const dateComponents = () => {
         const [, year, month, day] = /(\d{4})-(\d{2})-(\d{2})/.exec(props.register.register_display_date) ?? [];
@@ -172,6 +192,7 @@ function RegisterEl(props: {register: Register, person: Person}) {
             <button
                 class="hover:bg-c-surface-variant rounded-md transition-colors"
                 title="Más opciones"
+                onclick={props.onClick}
             >
                 <CaretRight fill="var(--c-primary)" size={20} />
             </button>

frontend/src/utils/functions.ts

@@ -0,0 +1,7 @@
+
+
+// YYYY-MM-DD to DD/MM/YYYY
+export function formatDate(date: string): string {
+    const [year, month, day] = date.split("-");
+    return `${day}/${month}/${year}`;
+}