Create registers in UI

src/views/Certs.tsx

@@ -6,6 +6,8 @@ import { NewRegister } from "./components/NewRegister";
 
 export function Certs() {
     const [person, setPerson] = createSignal<Person | null>(null);
+    const [lastUpdate, setLastUpdate] = createSignal(0);
+
     return (
         <div>
             <h1
@@ -14,8 +16,11 @@ export function Certs() {
                 Registrar certificado
             </h1>
             <Search setPerson={setPerson}/>
-            <Registers person={person()} />
+            <Registers person={person()} lastUpdate={lastUpdate()} />
-            <NewRegister personId={person()?.id ?? -1} />
+            <NewRegister
+                personId={person()?.id ?? -1}
+                onSuccess={() => setLastUpdate((x) => x + 1)}
+            />
         </div>
     );
 }

src/views/components/NewRegister/SearchableSelect.tsx

@@ -2,7 +2,11 @@ import { createEffect, createMemo, createSignal, For, JSX, Show } from "solid-js
 import type {CursoGIE} from "../../../model/CursoGIE/cursoGIE.entity";
 import { isServer } from "solid-js/web";
 
-export function SearchableSelect(props: {subjects: Array<CursoGIE>, onChange: (id: number | null) => void}) {
+export function SearchableSelect(props: {
+    subjects: Array<CursoGIE>,
+    onChange: (id: number | null) => void,
+    count: number
+}) {
     const [filter, setFilter] = createSignal("");
     const [selected, setSelected] = createSignal<number | null>(null);
     const [inputValue, setInputValue] = createSignal("");
@@ -18,16 +22,25 @@ export function SearchableSelect(props: {subjects: Array<CursoGIE>, onChange: (i
         props.onChange(selected());
     });
 
+    createEffect(() => {
+        // Makes reactivity happen
+        console.log(props.count);
+
+        setFilter("");
+        setSelected(null);
+        setInputValue("");
+    });
+
     const inputElement = (
         <input
             id="create-subject"
             class={`bg-c-background text-c-on-background
-                       ${selected() !== null ? "border-c-green" : "border-c-outline"}
+                    ${selected() !== null ? "border-c-green" : "border-c-outline"}
-                       border-2 rounded px-2 py-1
+                    border-2 rounded px-2 py-1
-                       w-full
+                    w-full
-                       invalid:border-c-error invalid:text-c-error
+                    invalid:border-c-error invalid:text-c-error
-                       focus:border-c-primary outline-none
+                    focus:border-c-primary outline-none
-                       disabled:opacity-50 disabled:cursor-not-allowed`}
+                    disabled:opacity-50 disabled:cursor-not-allowed`}
             type="text"
             placeholder="Curso"
             onkeyup={iHandler}

src/views/components/Registers.tsx

@@ -2,13 +2,16 @@ import { Show, createEffect, createSignal, For } from "solid-js";
 import { Person } from "../../types/Person";
 import { RegisterReturn } from "../../types/RegisterReturn";
 
-export function Registers(props: { person: Person | null }) {
+export function Registers(props: { person: Person | null, lastUpdate: number }) {
     const [loading, setLoading] = createSignal(false);
     const [registers, setRegisters] = createSignal<Array<RegisterReturn>>([]);
 
     createEffect(() => {
         const person = props.person;
-        console.log(`Loading registers for ${person?.nombres}`);
+        const lastUpdate = props.lastUpdate;
+        // This comment is important, it retrieves
+        // certificates from DB on any change
+        console.log(`Loading registers for ${person?.nombres} (update ${lastUpdate})`);
 
         // Load certificates from DB
         loadCertificates();