[FE][Certs] Integrate cert generator

frontend/src/certGenerator/index.ts

@@ -22,15 +22,19 @@ async function download(document: Document, filename: string = "filename.docx")
     saveAs(blob, filename);
 }
 
-const certGeneratorGenerator = <T>(generatorFn: (options: CertData<T>) => Promise<Document>) => (options: CertData<T>, filename: string) => {
+const certGeneratorGenerator = <T>(generatorFn: (options: CertData<T>) => Promise<Document>) => (filename: string, options: CertData<T>) => {
     generatorFn(options)
         .then((doc) => {
             download(doc, filename);
         });
 };
 
-export const certGenerator = Object.freeze({
-    matpel1: (options: CertData<null>, filename: string) => {
+type CertGenObj = {
+    [key: string]: (filename: string, options: CertData<null>) => void
+}
+
+export const certGenerator: CertGenObj = Object.freeze({
+    matpel1: (filename: string, options: CertData<null>) => {
         const options_f: CertData<Matpel> = {
             ...options,
             matpel: Matpel._1,
@@ -40,7 +44,7 @@ export const certGenerator = Object.freeze({
                 download(doc, filename);
             });
     },
-    matpel2: (options: CertData<null>, filename: string) => {
+    matpel2: (filename: string, options: CertData<null>) => {
         const options_f: CertData<Matpel> = {
             ...options,
             matpel: Matpel._2,
@@ -50,7 +54,7 @@ export const certGenerator = Object.freeze({
                 download(doc, filename);
             });
     },
-    matpel3: (options: CertData<null>, filename: string) => {
+    matpel3: (filename: string, options: CertData<null>) => {
         const options_f: CertData<Matpel> = {
             ...options,
             matpel: Matpel._3,
@@ -61,7 +65,7 @@ export const certGenerator = Object.freeze({
             });
     },
     manejoDefensivo: certGeneratorGenerator(manejoDefensivoCert),
-    mecanicaBasica: certGeneratorGenerator(mecanicaBasicaCert),
+    "Mec. Basica": certGeneratorGenerator(mecanicaBasicaCert),
     "4x4": certGeneratorGenerator(_4X4Cert),
     segOpMaqPes: certGeneratorGenerator(segOpMaqPesCert),
     supervisorEscolta: certGeneratorGenerator(supervisorEscolta),

frontend/src/certs/Registers/index.tsx

@@ -3,6 +3,7 @@ import { DownloadIcon } from "../../icons/DownloadIcon";
 import { Person } from "../../types/Person";
 import { Register } from "../../types/Register";
 import { courseMap } from "../../utils/allCourses";
+import { certGenerator } from "../../certGenerator";
 
 export function Registers(props: {person: Person | null}) {
     const [registers, setRegisters] = createSignal<Array<Register>>([]);
@@ -31,16 +32,22 @@ export function Registers(props: {person: Person | null}) {
             </h3>
             <div class="flex flex-wrap justify-start gap-2">
                 <For each={registers()}>
-                    {(register) => <RegisterEl register={register} />}
+                    {(register) => <RegisterEl register={register} person={props.person!} />}
                 </For>
             </div>
         </div>
     );
 }
 
-function RegisterEl(props: {register: Register}) {
-    const displayDate = () => {
+function RegisterEl(props: {register: Register, person: Person}) {
+
+    const dateComponents = () => {
         const [, year, month, day] = /(\d{4})-(\d{2})-(\d{2})/.exec(props.register.register_display_date) ?? [];
+        return {year, month, day};
+    };
+
+    const displayDate = () => {
+        const {year, month, day} = dateComponents();
         return `${day}/${month}/${year}`;
     };
 
@@ -49,9 +56,38 @@ function RegisterEl(props: {register: Register}) {
         return course?.course_name ?? "Curso no encontrado";
     };
 
+    const genCert = () => {
+        const courseN = courseName();
+        const person = props.person;
+        const register = props.register;
+
+        const generator = certGenerator[courseN];
+        if (generator === undefined) {
+            console.error(`Generator function with key \`${courseN}\` not found`);
+            return;
+        }
+
+        const {year, month, day} = dateComponents();
+        const personFullName = `${person.person_names} ${person.person_paternal_surname} ${person.person_maternal_surname}`;
+
+        generator(`${courseN} - ${personFullName}.docx`, {
+            matpel: null,
+            personFullName,
+            personDni: person.person_dni.toString(),
+            certCode: register.register_code.toString().padStart(4, "0"),
+            certYear: year,
+            certMonth: month,
+            certDay: day,
+            certIId: register.register_code,
+        });
+    };
+
     return (
         <div class="inline-block w-[12rem] p-1 border border-c-outline rounded-md">
-            <button class="rounded-full bg-c-primary-container hover:bg-c-primary transition-colors h-12 w-12">
+            <button
+                onclick={genCert}
+                class="rounded-full bg-c-primary-container hover:bg-c-primary transition-colors h-12 w-12"
+            >
                 <DownloadIcon fill="var(--c-on-primary-container)" />
             </button>
             <div class="inline-block h-12 w-32 pl-2 align-middle">