[FE][Scans] Improve UI to display relevant information

frontend/src/Scans/ScansList.tsx

@@ -1,16 +1,39 @@
-import { For, createMemo } from "solid-js";
+import { For, Show, createMemo } from "solid-js";
 import { ScanData, ScanResult } from ".";
 import { FilledButton } from "../components/FilledButton";
 import { FilledCard } from "../components/FilledCard";
 import { LoadingIcon } from "../icons/LoadingIcon";
 import { PDFIcon } from "../icons/PDFIcon";
 import { LoadingStatus, useLoading } from "../utils/functions";
+import { QuestionIcon } from "../icons/QuestionIcon";
 
 export function ScansList(props: {scanData: ScanData | null}) {
     const {status, setStatus, error, setError} = useLoading();
 
     const loading = createMemo(() => status() === LoadingStatus.Loading);
 
+    const empty = createMemo(() => props.scanData?.Ok.length === 0);
+
+    const entriesCount = createMemo(() => {
+        if (props.scanData === null) return [0, 0];
+
+        let fullCount = 0;
+        let partialCount = 0;
+        let invalidCount = 0;
+
+        for (const [, result] of props.scanData.Ok) {
+            if ("Full" in result) {
+                fullCount += 1;
+            } else if ("Partial" in result) {
+                partialCount += 1;
+            } else {
+                invalidCount += 1;
+            }
+        }
+
+        return [fullCount, partialCount, invalidCount];
+    });
+
     const convertScans = () => {
         setStatus(LoadingStatus.Loading);
 
@@ -43,39 +66,56 @@ export function ScansList(props: {scanData: ScanData | null}) {
     };
 
     return (
+        <>
+            <Show when={props.scanData !== null}>
                 <FilledCard class="border border-c-outline overflow-hidden">
                     <h1 class="p-3 font-medium text-xl">
                         Escaneos detectados
                     </h1>
 
                     <div class="bg-c-surface py-2">
-                <For each={props.scanData?.Ok ?? []}>
+                        <Show when={empty()}>
-                    {([path, result]) => (
+                            <div class="px-4 pb-2">
-                        <p class="py-1 px-4 hover:bg-c-surface-variant transition-colors">
+                                <div class="text-center pt-6 pb-4">
-                            <span class="font-mono">
+                                    <QuestionIcon class="scale-[200%]" fill="var(--c-outline)" />
-                                {path.substring(path.lastIndexOf("/") + 1)}
+                                </div>
-                            </span>
+                                <p>No se encontraron archivos que cumplan con los parámetros.</p>
+                            </div>
+                        </Show>
+
+                        <Show when={!empty()}>
+                            <div class="px-4">
+                            Se detectaron:
                                 <br />
-                            {dataFromScanResult(result)}
+                                <p>
+                                    - <span class="font-mono">{entriesCount()[0]}</span> archivos
+                                    con QR (nombres y curso)
+                                </p>
+                                <p>
+                                    - <span class="font-mono">{entriesCount()[1]}</span> archivos
+                                    con QR (solo nombres)
+                                </p>
+                                <p>
+                                    - <span class="font-mono">{entriesCount()[2]}</span> archivos sin QR
                                 </p>
-                    )}
-                </For>
                             </div>
 
-            <p class="p-4">
+                        </Show>
-                        - Al convertir los escaneos a PDF se eliminan los archivos JPG.
+                    </div>
+
+                    <p class="px-4 pt-4">
+                        El sig. botón:
                         <br />
-                        - Solo se convertiran los escaneos mostrados en esta lista.
+                        - Convierte los escaneos con QR por completo (1), (2), (3) y (4).
                         <br />
-                        - En la lista se muestran los nombres originales de los archivos.
+                        - Convierte los escaneos sin QR solo en (1), (2) y (3). Se debe realizar
-                        Sin embargo, en el disco se cambiaron de nombre para asegurarse de
+                        (4) manualmente.
-                        que solo 1 persona pueda transformarlos a la vez.
                     </p>
 
                     <div class="relative mx-4 mb-4">
                         <FilledButton
                             onClick={convertScans}
-                    disabled={loading()}
+                            disabled={loading() || empty()}
                         >
                             <span
                                 class="absolute top-[1.35rem] left-2"
@@ -101,6 +141,8 @@ export function ScansList(props: {scanData: ScanData | null}) {
                         </FilledButton>
                     </div>
                 </FilledCard>
+            </Show>
+        </>
     );
 }
 

frontend/src/Scans/index.tsx

@@ -47,6 +47,30 @@ export function Scans() {
     return (
         <div class="grid grid-cols-[25rem_25rem_auto]">
             <div>
+                <FilledCard>
+                    <h1 class="py-2 px-4 font-medium text-xl mb-2">
+                        Escaneos
+                    </h1>
+                    <div class="px-4 pb-4">
+                        Esta sección del sistema realiza lo siguiente:
+                        <br />
+                        (1) Detecta el código QR en los escaneos
+                        <br />
+                        (2) Rota el escaneo a posición horizontal
+                        <br />
+                        (3) Convierte los escaneos a PDF
+                        <br />
+                        (4) Coloca el nombre correcto al PDF según el formato:
+                        <br />
+                        <code class="border border-c-outline rounded p-1 bg-c-background">
+                            &lt;NOMBRES&gt; &lt;APELLIDOS&gt; - &lt;CURSO&gt;.pdf
+                        </code>
+                        <hr class="my-2" />
+                        Si el sistema no detecta el código QR, se debe realizar el
+                        paso (4) manualmente.
+                    </div>
+                </FilledCard>
+
                 <FilledCard>
                     <h1 class="py-2 px-4 font-medium text-xl mb-2">
                         Parámetros de detección
@@ -99,6 +123,8 @@ export function Scans() {
                     </div>
                 </FilledCard>
 
+            </div>
+            <div>
                 <FilledCard>
                     <h1 class="py-2 px-4 font-medium text-xl mb-2">
                         Detectar escaneos
@@ -107,7 +133,7 @@ export function Scans() {
                         <p>
                             El siguiente botón detectará los archivos
                             que cumplen con los parámetros de detección
-                            en la carpeta <code>ESCANEOS</code>, y los mostrará en una lista.
+                            en la carpeta <code>ESCANEOS</code>, y mostrará los resultados abajo.
                         </p>
 
 
@@ -141,8 +167,7 @@ export function Scans() {
                         </div>
                     </div>
                 </FilledCard>
-            </div>
+
-            <div>
                 <ScansList scanData={scanData()} />
             </div>
         </div>