From 36cff473efe2fc1d4d4b4494ee550c8715c95812 Mon Sep 17 00:00:00 2001 From: Araozu Date: Mon, 12 Jun 2023 22:08:21 -0500 Subject: [PATCH] [FE] Begin work on a new batch mode --- esbuild-prod.js | 67 ++++++--------- esbuild.js | 81 +++++++------------ src/app.module.ts | 9 ++- .../batch_certs/BatchCerts.controller.ts | 13 +++ .../batch_certs/BatchCerts.template.ts | 28 +++++++ src/views/AulaVirtual.tsx | 1 - src/views/AulaVirtual/DniEntry.tsx | 43 ++++++++++ src/views/AulaVirtual/DniGroup.tsx | 23 ++++++ src/views/AulaVirtual/DniTable.tsx | 14 ++++ src/views/AulaVirtual/Dnis.tsx | 52 ++++++++++++ src/views/BatchCerts.tsx | 17 ++++ src/views/Certs.tsx | 4 +- src/views/hydration/hydration_batch_mode.ts | 11 +++ 13 files changed, 265 insertions(+), 98 deletions(-) create mode 100644 src/controller/batch_certs/BatchCerts.controller.ts create mode 100644 src/controller/batch_certs/BatchCerts.template.ts create mode 100644 src/views/AulaVirtual/DniEntry.tsx create mode 100644 src/views/AulaVirtual/DniGroup.tsx create mode 100644 src/views/AulaVirtual/DniTable.tsx create mode 100644 src/views/AulaVirtual/Dnis.tsx create mode 100644 src/views/BatchCerts.tsx create mode 100644 src/views/hydration/hydration_batch_mode.ts diff --git a/esbuild-prod.js b/esbuild-prod.js index 78934f6..c0575ab 100644 --- a/esbuild-prod.js +++ b/esbuild-prod.js @@ -4,6 +4,29 @@ const path = require("path"); const fs = require("fs"); const { glob } = require("glob"); +const buildHydration = (path) => { + build({ + platform: "browser", + entryPoints: [ + path, + ], + bundle: true, + minify: true, + sourcemap: false, + logLevel: "info", + plugins: [ + solidPlugin({ + solid: { + generate: "dom", + hydratable: true, + }, + }) + ], + outdir: "static", + format: "cjs", + }); +} + (async() => { const files = await glob("dist/**/*.jsx"); @@ -26,44 +49,6 @@ const { glob } = require("glob"); }); })(); -build({ - platform: "browser", - entryPoints: [ - "src/views/hydration.ts", - ], - bundle: true, - minify: true, - sourcemap: false, - logLevel: "info", - plugins: [ - solidPlugin({ - solid: { - generate: "dom", - hydratable: true, - }, - }) - ], - outdir: "static", - format: "cjs", -}); - -build({ - platform: "browser", - entryPoints: [ - "src/views/hydration/hydration_aulavirtual.ts", - ], - bundle: true, - minify: true, - sourcemap: false, - logLevel: "info", - plugins: [ - solidPlugin({ - solid: { - generate: "dom", - hydratable: true, - }, - }) - ], - outdir: "static", - format: "cjs", -}); +buildHydration("src/views/hydration.ts"); +buildHydration("src/views/hydration/hydration_aulavirtual.ts"); +buildHydration("src/views/hydration/hydration_batch_mode.ts"); diff --git a/esbuild.js b/esbuild.js index 0b644c6..2230adc 100644 --- a/esbuild.js +++ b/esbuild.js @@ -1,9 +1,32 @@ -const { build, context } = require("esbuild"); +const { context } = require("esbuild"); const { solidPlugin } = require("esbuild-plugin-solid"); -const path = require("path"); -const fs = require("fs"); const { glob } = require("glob"); +const genHydration = (path) => async () => { + const ctx = await context({ + platform: "browser", + entryPoints: [ + path, + ], + bundle: true, + minify: false, + logLevel: "info", + plugins: [ + solidPlugin({ + solid: { + generate: "dom", + hydratable: true, + }, + }) + ], + outdir: "static", + format: "cjs", + }); + + await ctx.watch(); + console.log("Watching hydration script..."); +}; + /** * Compile JSX files */ @@ -34,52 +57,6 @@ const { glob } = require("glob"); /** * Generate hydration script */ -(async () => { - const ctx = await context({ - platform: "browser", - entryPoints: [ - "src/views/hydration.ts", - ], - bundle: true, - minify: false, - logLevel: "info", - plugins: [ - solidPlugin({ - solid: { - generate: "dom", - hydratable: true, - }, - }) - ], - outdir: "static", - format: "cjs", - }); - - await ctx.watch(); - console.log("Watching hydration script..."); -})(); - -(async () => { - const ctx = await context({ - platform: "browser", - entryPoints: [ - "src/views/hydration/hydration_aulavirtual.ts", - ], - bundle: true, - minify: false, - logLevel: "info", - plugins: [ - solidPlugin({ - solid: { - generate: "dom", - hydratable: true, - }, - }) - ], - outdir: "static", - format: "cjs", - }); - - await ctx.watch(); - console.log("Watching hydration script..."); -})(); +(genHydration("src/views/hydration.ts"))(); +(genHydration("src/views/hydration/hydration_aulavirtual.ts"))(); +(genHydration("src/views/hydration/hydration_batch_mode.ts"))(); diff --git a/src/app.module.ts b/src/app.module.ts index 0f0b46a..9621f59 100644 --- a/src/app.module.ts +++ b/src/app.module.ts @@ -11,6 +11,7 @@ import { SubjectController } from "./controller/subject/subject.controller"; import { SubjectService } from "./controller/subject/subject.service"; import * as dotenv from "dotenv"; import { AulaVirtualController } from "./controller/aulavirtual/aulavirtual.controller"; +import { BatchCertController } from "./controller/batch_certs/BatchCerts.controller"; // Must be done before initializing DB. console.log(dotenv.config()); @@ -45,7 +46,13 @@ const db = process.env.MY_SQL_DB; synchronize: false, }), ], - controllers: [CertificateController, PersonController, SubjectController, AulaVirtualController], + controllers: [ + CertificateController, + PersonController, + SubjectController, + AulaVirtualController, + BatchCertController, + ], providers: [CertificateService, PersonService, SubjectService], }) export class AppModule {} diff --git a/src/controller/batch_certs/BatchCerts.controller.ts b/src/controller/batch_certs/BatchCerts.controller.ts new file mode 100644 index 0000000..b0298a0 --- /dev/null +++ b/src/controller/batch_certs/BatchCerts.controller.ts @@ -0,0 +1,13 @@ +import { Controller, Get } from "@nestjs/common"; +import { renderToString } from "solid-js/web"; +import { CertsBatch } from "src/views/BatchCerts"; +import { template } from "./BatchCerts.template"; + +@Controller("batch-certs") +export class BatchCertController { + @Get() + entry(): string { + const html = renderToString(CertsBatch); + return template(html); + } +} diff --git a/src/controller/batch_certs/BatchCerts.template.ts b/src/controller/batch_certs/BatchCerts.template.ts new file mode 100644 index 0000000..8b23cdf --- /dev/null +++ b/src/controller/batch_certs/BatchCerts.template.ts @@ -0,0 +1,28 @@ +import { generateHydrationScript } from "solid-js/web"; + +export function template(ssr: string): string { + return ` + + + + Batch Certs - EEGSAC + + + + + + ${generateHydrationScript()} + + +
+ ${ssr} +
+ + + +`; +} diff --git a/src/views/AulaVirtual.tsx b/src/views/AulaVirtual.tsx index ec7878f..ae9ee40 100644 --- a/src/views/AulaVirtual.tsx +++ b/src/views/AulaVirtual.tsx @@ -1,4 +1,3 @@ -import { Hydration } from "solid-js/web"; export function AulaVirtual() { return ( diff --git a/src/views/AulaVirtual/DniEntry.tsx b/src/views/AulaVirtual/DniEntry.tsx new file mode 100644 index 0000000..ca46a76 --- /dev/null +++ b/src/views/AulaVirtual/DniEntry.tsx @@ -0,0 +1,43 @@ +import { createSignal, onMount } from "solid-js"; +import { Person } from "src/types/Person"; + +export function DniEntry(props: {dni: string}) { + const [person, setPerson] = createSignal(null); + + onMount(async() => { + try { + const response = await fetch(`/person/${props.dni}`); + const body = await response.json(); + if (response.ok) { + setPerson(body); + } else if (response.status === 404) { + console.error(body); + + // setWarning("Persona no encontrada. Se debe insertar manualmente sus datos."); + + setPerson(null); + } else { + // setError(body); + } + } catch (e) { + // setError(JSON.stringify(e)); + } + }); + + return ( +
+
+ {props.dni} +
+
+ {person()?.apellidoPaterno ?? "..."} +
+
+ {person()?.apellidoMaterno ?? "..."} +
+
+ {person()?.nombres ?? "..."} +
+
+ ); +} diff --git a/src/views/AulaVirtual/DniGroup.tsx b/src/views/AulaVirtual/DniGroup.tsx new file mode 100644 index 0000000..4e29273 --- /dev/null +++ b/src/views/AulaVirtual/DniGroup.tsx @@ -0,0 +1,23 @@ +import { For } from "solid-js"; +import { DniEntry } from "./DniEntry"; + +export function DniGroup(props: {group: string}) { + const dnis = () => [...props.group.matchAll(/\d+/g)]; + + return ( +
+

DNI Group

+ +
+
DNI
+
Apellido Paterno
+
Apellido Materno
+
Nombres
+
+ + + {(dni) => } + +
+ ); +} diff --git a/src/views/AulaVirtual/DniTable.tsx b/src/views/AulaVirtual/DniTable.tsx new file mode 100644 index 0000000..0c32700 --- /dev/null +++ b/src/views/AulaVirtual/DniTable.tsx @@ -0,0 +1,14 @@ +import { For } from "solid-js"; +import { DniGroup } from "./DniGroup"; + +export function DniTable(props: {dniGroups: Array}) { + return ( +
+

2. Revisar grupos

+ + + {(g) => } + +
+ ); +} diff --git a/src/views/AulaVirtual/Dnis.tsx b/src/views/AulaVirtual/Dnis.tsx new file mode 100644 index 0000000..3f1cdb9 --- /dev/null +++ b/src/views/AulaVirtual/Dnis.tsx @@ -0,0 +1,52 @@ +import { createSignal, JSX } from "solid-js"; + +type HTMLEventFn = JSX.EventHandlerUnion; + +export function Dnis(props: {addDniGroup: (v: string) => void}) { + const [dnis, setDnis] = createSignal(""); + + const agregarGrupo: HTMLEventFn = (ev) => { + ev.preventDefault(); + + props.addDniGroup(dnis()); + setDnis(""); + }; + + return ( +
+

1. Crear grupos de DNIs

+

+ Inserta dnis separados por comas, espacios, etc. Los DNIs se separan con + la expresión /\d+/g. +

+ +
+ setDnis(e.target.value)} + /> + +
+ + +
+
+ ); +} diff --git a/src/views/BatchCerts.tsx b/src/views/BatchCerts.tsx new file mode 100644 index 0000000..be5386d --- /dev/null +++ b/src/views/BatchCerts.tsx @@ -0,0 +1,17 @@ +import { createSignal } from "solid-js"; +import { DniTable } from "./AulaVirtual/DniTable"; +import { Dnis } from "./AulaVirtual/Dnis"; + +export function CertsBatch() { + const [dniGroups, setDniGroups] = createSignal>([]); + + return ( +
+

+ Batch mode +

+ setDniGroups((x) => [...x, s])} /> + +
+ ); +} diff --git a/src/views/Certs.tsx b/src/views/Certs.tsx index ef4bdb8..15f46cf 100644 --- a/src/views/Certs.tsx +++ b/src/views/Certs.tsx @@ -10,9 +10,7 @@ export function Certs() { return (
-

+

Registrar certificado

diff --git a/src/views/hydration/hydration_batch_mode.ts b/src/views/hydration/hydration_batch_mode.ts new file mode 100644 index 0000000..a0018b4 --- /dev/null +++ b/src/views/hydration/hydration_batch_mode.ts @@ -0,0 +1,11 @@ +/** + * This file generates a hidration script, which must + * then be sent to the client. + */ + +import {hydrate} from "solid-js/web"; +import { CertsBatch } from "../BatchCerts"; + +const root = document.getElementById("root")!; + +hydrate(CertsBatch, root);