Register person to subject UI

src/app.module.ts

@@ -7,6 +7,8 @@ import { CursoGIE } from "./model/CursoGIE/cursoGIE.entity";
 import { RegistroGIE } from "./model/RegistroGIE/registroGIE.entity";
 import { PersonController } from "./controller/person/person.controller";
 import { PersonService } from "./controller/person/person.service";
+import { SubjectController } from "./controller/subject/subject.controller";
+import { SubjectService } from "./controller/subject/subject.service";
 
 @Module({
     imports: [
@@ -25,7 +27,7 @@ import { PersonService } from "./controller/person/person.service";
             synchronize: false,
         }),
     ],
-    controllers: [CertificateController, PersonController],
-    providers: [CertificateService, PersonService],
+    controllers: [CertificateController, PersonController, SubjectController],
+    providers: [CertificateService, PersonService, SubjectService],
 })
 export class AppModule {}

src/controller/subject/subject.controller.ts

@@ -0,0 +1,13 @@
+import { Controller, Get } from "@nestjs/common";
+import { SubjectService } from "./subject.service";
+
+@Controller("subject")
+export class SubjectController {
+    constructor(private subjectService: SubjectService) {
+    }
+
+    @Get()
+    async getAll() {
+        return this.subjectService.getAll();
+    }
+}

src/controller/subject/subject.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from "@nestjs/common";
+import { DataSource } from "typeorm";
+import { CursoGIE } from "../../model/CursoGIE/cursoGIE.entity";
+
+@Injectable()
+export class SubjectService {
+    cursoGIERepository;
+
+    constructor(private dataSource: DataSource) {
+        this.cursoGIERepository = dataSource.getRepository(CursoGIE);
+    }
+
+    getAll() {
+        return this.cursoGIERepository.find();
+    }
+}

src/views/Certs.tsx

@@ -1,7 +1,8 @@
-import { createEffect, createSignal } from "solid-js";
+import { createSignal } from "solid-js";
 import { Search } from "./components/Search";
 import { Person } from "../types/Person";
 import { Registers } from "./components/Registers";
+import { NewRegister } from "./components/NewRegister";
 
 export function Certs() {
     const [person, setPerson] = createSignal<Person | null>(null);
@@ -14,6 +15,7 @@ export function Certs() {
             </h1>
             <Search setPerson={setPerson}/>
             <Registers person={person()} />
+            <NewRegister />
         </div>
     );
 }

src/views/components/NewRegister/SearchableSelect.tsx

@@ -0,0 +1,76 @@
+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}) {
+    const [filter, setFilter] = createSignal("");
+    const [selected, setSelected] = createSignal<number | null>(null);
+    const [inputValue, setInputValue] = createSignal("");
+
+    const iHandler = (ev: KeyboardEvent & {currentTarget: HTMLInputElement, target: Element}) => {
+        const inputEl = ev.target as HTMLInputElement;
+        // Clear current selection
+        setSelected(null);
+        setFilter(inputEl.value.toLowerCase());
+    };
+
+    createEffect(() => {
+        props.onChange(selected());
+    });
+
+    const inputElement = (
+        <input
+            id="create-subject"
+            class={`bg-c-background text-c-on-background
+                       ${selected() !== null ? "border-c-green" : "border-c-outline"}
+                       border-2 rounded px-2 py-1
+                       w-full
+                       invalid:border-c-error invalid:text-c-error
+                       focus:border-c-primary outline-none
+                       disabled:opacity-50 disabled:cursor-not-allowed`}
+            type="text"
+            placeholder="Curso"
+            onkeyup={iHandler}
+            value={inputValue()}
+            onchange={(ev) => setInputValue(ev.target.value)}
+            autocomplete="off"
+        />
+    );
+
+    if (!isServer) {
+        (inputElement as HTMLInputElement).addEventListener("keydown", (ev) => {
+            if (ev.code === "Enter") {
+                ev.preventDefault();
+            }
+        });
+    }
+
+    return (
+        <>
+            {inputElement}
+            <br/>
+            <div
+                class="border-c-outline border-2 rounded overflow-y-scroll"
+                style={{"max-height": "12rem", "min-height": "12rem"}}
+            >
+                <For each={props.subjects}>
+                    {(s) => (
+                        <button
+                            class={`w-full text-left py-1 px-2
+                                   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);
+                            }}
+                        >
+                            {s.nombre}
+                        </button>
+                    )}
+                </For>
+            </div>
+        </>
+    );
+}

src/views/components/Registers.tsx

@@ -8,6 +8,7 @@ export function Registers(props: { person: Person | null }) {
 
     createEffect(() => {
         const person = props.person;
+        console.log(`Loading registers for ${person?.nombres}`);
 
         // Load certificates from DB
         loadCertificates();

src/views/components/Search.tsx

@@ -39,6 +39,7 @@ export function Search(props: {setPerson: (p: Person | null) => void}) {
                 console.error(body);
 
                 setWarning("Persona no encontrada. Se debe insertar manualmente sus datos.");
+                props.setPerson(null);
             } else {
                 setError(body);
             }

tailwind.config.js

@@ -21,6 +21,7 @@ module.exports = {
             "c-outline": "var(--c-outline)",
             "c-surface-variant": "var(--c-surface-variant)",
             "c-on-surface-variant": "var(--c-on-surface-variant)",
+            "c-green": "#006b54",
         },
     },
     plugins: [],