[FE] Certificate: Sort by date. Improve course search field.

src/controller/batch_certs/BatchCerts.template.ts

@@ -9,6 +9,7 @@ export function template(ssr: string): string {
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link rel="stylesheet" href="/static/styles.css?t=${Date.now()}" />
+      <link rel="icon" type="image/png" href="/static/favicon.png">
       <!-- Phosphor icons -->
       <link
         rel="stylesheet"

src/controller/certificate/certificate.template.ts

@@ -8,6 +8,7 @@ export function template(ssr: string): string {
       <title>Registrar certificados - EEGSAC</title>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link rel="icon" type="image/png" href="/static/favicon.png">
       <link rel="stylesheet" href="/static/styles.css?t=${Date.now()}" />
       <!-- Phosphor icons -->
       <link

src/views/BatchCerts.tsx

@@ -1,10 +1,13 @@
-import { createSignal } from "solid-js";
+import { createSignal, onMount } from "solid-js";
 import { DniTable } from "./AulaVirtual/DniTable";
 import { Dnis } from "./AulaVirtual/Dnis";
+import { ensureColors } from "./components/colors";
 
 export function CertsBatch() {
     const [dniGroups, setDniGroups] = createSignal<Array<string>>([]);
 
+    onMount(ensureColors);
+
     return (
         <div>
             <h1 class="px-4 py-2 text-2xl font-bold">

src/views/components/NewRegister/SearchableSelect.tsx

@@ -15,7 +15,14 @@ export function SearchableSelect(props: {
         const inputEl = ev.target as HTMLInputElement;
         // Clear current selection
         setSelected(null);
-        setFilter(inputEl.value.toLowerCase());
+
+        let filter: string = inputEl.value.toLowerCase();
+        filter = filter.replace("á", "a");
+        filter = filter.replace("é", "e");
+        filter = filter.replace("í", "i");
+        filter = filter.replace("ó", "o");
+        filter = filter.replace("ú", "u");
+        setFilter(filter);
     };
 
     createEffect(() => {
@@ -58,6 +65,21 @@ export function SearchableSelect(props: {
         });
     }
 
+    const filteredOptions = () => {
+        const filterText = filter();
+
+        return props.subjects.filter((subject) => {
+            let subjectText = subject.nombre.toLowerCase();
+            subjectText = subjectText.replace("á", "a");
+            subjectText = subjectText.replace("é", "e");
+            subjectText = subjectText.replace("í", "i");
+            subjectText = subjectText.replace("ó", "o");
+            subjectText = subjectText.replace("ú", "u");
+
+            return selected() === null && subjectText.indexOf(filterText) !== -1;
+        });
+    };
+
     return (
         <>
             {inputElement}
@@ -65,15 +87,14 @@ export function SearchableSelect(props: {
             <div
                 class="border-c-outline border-2 rounded overflow-y-scroll h-[18rem]"
             >
-                <For each={props.subjects}>
+                <For each={filteredOptions()}>
                     {(s) => (
                         <button
-                            class={`w-full text-left py-1 px-2
+                            class="w-full text-left py-1 px-2
-                                   hover:bg-c-primary-container hover:text-c-on-primary-container
+                                   hover:bg-c-primary-container hover:text-c-on-primary-container"
-                                   ${s.nombre.toLowerCase().indexOf(filter()) !== -1 && selected() === null ? "block" : "hidden"}`}
                             onclick={(ev) => {
                                 ev.preventDefault();
-                                console.log("Click! :D");
+
                                 setSelected(s.id);
                                 setInputValue(s.nombre);
                             }}

src/views/components/Registers.tsx

@@ -1,4 +1,4 @@
-import { Show, createEffect, createSignal, For, JSX } from "solid-js";
+import { Show, createEffect, createSignal, For, JSX, createMemo } from "solid-js";
 import { Person } from "../../types/Person";
 import { RegisterReturn } from "../../types/RegisterReturn";
 
@@ -33,6 +33,8 @@ export function Registers(props: { person: Person | null, lastUpdate: number })
         setLoading(false);
     };
 
+    const sortedRegisters = createMemo(() => registers().sort((r1, r2) => ((r1.fecha_inscripcion < r2.fecha_inscripcion) ? 1 : -1)));
+
     return (
         <div class="p-4">
             <h2 class="mb-4 font-bold text-xl">2. Revisar registros actuales</h2>
@@ -105,7 +107,7 @@ export function Registers(props: { person: Person | null, lastUpdate: number })
                             </thead>
 
                             <tbody>
-                                <For each={registers().sort((r1, r2) => ((r1.fecha_actual < r2.fecha_actual) ? 1 : -1))}>
+                                <For each={sortedRegisters()}>
                                     {(register) => <Register cert={register} onUpdate={loadCertificates} />}
                                 </For>
                             </tbody>