[FE] Batch mode: Show recent certificates (1y)

src/controller/batch_certs/BatchCerts.controller.ts

@@ -3,7 +3,7 @@ import { renderToString } from "solid-js/web";
 import { CertsBatch } from "src/views/BatchCerts";
 import { template } from "./BatchCerts.template";
 
-@Controller("batch-certs")
+@Controller("batch-mode")
 export class BatchCertController {
     @Get()
     entry(): string {

src/views/AulaVirtual/DniEntry.tsx

@@ -1,6 +1,7 @@
-import { createSignal, Match, onMount, Show, Switch } from "solid-js";
+import { createMemo, createSignal, For, Match, onMount, Show, Switch } from "solid-js";
 import { Person } from "src/types/Person";
 import { DniRegister } from "./DniEntry/DniRegister";
+import { RegisterReturn } from "src/types/RegisterReturn";
 
 /**
  * Sample data
@@ -27,9 +28,11 @@ enum Status {
     Error,
 }
 
-export function DniEntry(props: {dni: string}) {
+export function DniEntry(props: {dni: string, remove: (_: string) => void}) {
     const [person, setPerson] = createSignal<Person | null>(null);
     const [status, setStatus] = createSignal<Status>(Status.Empty);
+    const [certificates, setCertificates] = createSignal<Array<RegisterReturn>>([]);
+    const [certStatus, setCertStatus] = createSignal<Status>(Status.Empty);
 
     const loadPerson = async() => {
         setStatus(Status.Loading);
@@ -40,7 +43,7 @@ export function DniEntry(props: {dni: string}) {
             if (response.ok) {
                 setPerson(body);
                 setStatus(Status.Ok);
-
+                loadCertificates();
             } else if (response.status === 404) {
                 console.error(body);
                 setStatus(Status.Error);
@@ -58,6 +61,23 @@ export function DniEntry(props: {dni: string}) {
 
     onMount(loadPerson);
 
+    const loadCertificates = async() => {
+        setCertStatus(Status.Loading);
+
+        try {
+            const response = await fetch(`/certificate/${props.dni}`);
+            if (response.ok) {
+                const body = await response.json();
+                setCertificates(body);
+                setCertStatus(Status.Ok);
+            } else {
+                setCertStatus(Status.Error);
+            }
+        } catch (e) {
+            setCertStatus(Status.Error);
+        }
+    };
+
     return (
         <>
             <Show when={status() !== Status.Error}>
@@ -96,11 +116,24 @@ export function DniEntry(props: {dni: string}) {
                             <div class="text-center">
                                 <button
                                     class={"rounded-full px-2 hover:bg-c-error first:text-c-error first:hover:text-c-on-error"}
+                                    onclick={() => props.remove(props.dni)}
                                 >
                                     <i class="ph ph-x"></i>
                                 </button>
                             </div>
-                            <div class="border-l"></div>
+                            <div class="border-l font-mono">
+                                <Switch>
+                                    <Match when={certStatus() === Status.Loading}>
+                                        <p>Loading...</p>
+                                    </Match>
+                                    <Match when={certStatus() === Status.Ok}>
+                                        <CertArray array={certificates()} />
+                                    </Match>
+                                    <Match when={certStatus() === Status.Error}>
+                                        <p class="text-c-error">Error loading certificates.</p>
+                                    </Match>
+                                </Switch>
+                            </div>
                         </Match>
 
                     </Switch>
@@ -113,3 +146,31 @@ export function DniEntry(props: {dni: string}) {
         </>
     );
 }
+
+function CertArray(props: {array: Array<RegisterReturn>}) {
+    const filtered = createMemo(() => {
+        const nowMs = Date.now();
+        return props.array.filter((cert) => {
+            const date = new Date(cert.fecha_inscripcion);
+            const ms = date.getTime();
+
+            const difference = nowMs - ms;
+
+            return difference < (1000 * 60 * 60 * 24 * 366);
+        });
+    });
+
+    return (
+        <div class="font-mono">
+            [
+            <For each={filtered()}>
+                {(cert) => (
+                    <span class="mr-4">
+                        {cert.curso_nombre} {cert.fecha_inscripcion}
+                    </span>
+                )}
+            </For>
+            ]
+        </div>
+    );
+}

src/views/AulaVirtual/DniGroup.tsx

@@ -1,10 +1,16 @@
-import { For } from "solid-js";
+import { For, createSignal, onMount } from "solid-js";
 import { DniEntry } from "./DniEntry";
 
 export function DniGroup(props: {group: string, index: number}) {
-    const dnis = () => [...props.group.matchAll(/\d+/g)];
+    const [dnis, setDnis] = createSignal<Array<string>>([]);
 
-    console.log("Loading group...");
+    onMount(() => {
+        setDnis([...props.group.matchAll(/\d+/g)].map((x) => x.toString()));
+    });
+
+    const removeDni = (dni: string) => {
+        setDnis((prev) => prev.filter((x) => x !== dni));
+    };
 
     return (
         <div class=" grid-cols-[53rem_auto] gap-2 my-8">
@@ -19,7 +25,7 @@ export function DniGroup(props: {group: string, index: number}) {
                 </div>
 
                 <For each={dnis()}>
-                    {(dni) => <DniEntry dni={dni.toString()} />}
+                    {(dni) => <DniEntry dni={dni} remove={removeDni} />}
                 </For>
             </div>