GenericFields

client-tauri/src/pages/Dynamic.tsx

@@ -1,16 +1,20 @@
 import { Link } from "react-router-dom";
 
-import { BaseSyntheticEvent, createContext, useState } from "react";
+import { BaseSyntheticEvent, createContext, useRef, useState } from "react";
 import { Operator } from "@stirling-pdf/shared-operations/src/functions";
 import i18next from "i18next";
 import Joi from "@stirling-tools/joi";
 import { BuildFields } from "../components/fields/BuildFields";
+import { listOperatorNames } from "@stirling-pdf/shared-operations/src/workflow/operatorAccessor";
+import { PdfFile, RepresentationType } from "@stirling-pdf/shared-operations/src/wrappers/PdfFile";
+import { Action } from "@stirling-pdf/shared-operations/declarations/Action";
+import { JoiPDFFileSchema } from "@stirling-pdf/shared-operations/src/wrappers/PdfFileJoi";
 
 function Dynamic() {
     const [schemaDescription, setSchemaDescription] = useState<Joi.Description>();
 
-
-    const operators = ["impose"]; // TODO: Make this dynamic
+    const operators = listOperatorNames();
+    const activeOperator = useRef<typeof Operator>();
 
     function selectionChanged(s: BaseSyntheticEvent) {
         const selectedValue = s.target.value;
@@ -19,7 +23,7 @@ function Dynamic() {
             return;
         }
 
-        i18next.loadNamespaces("impose", (err, t) => {
+        i18next.loadNamespaces(selectedValue, (err, t) => {
             if (err) throw err;
 
             const LoadingModule = import(`@stirling-pdf/shared-operations/src/functions/${selectedValue}`) as Promise<{ [key: string]: typeof Operator }>;
@@ -27,12 +31,77 @@ function Dynamic() {
                 const Operator = Module[capitalizeFirstLetter(selectedValue)];
                 const description = Operator.schema.describe();
 
-                setSchemaDescription(description); // This will update children
-                console.log(description);
+                activeOperator.current = Operator;
+                // This will update children
+                setSchemaDescription(description);
             });
         });
     }
 
+    function formDataToObject(formData: FormData): Record<string, string> {
+        const result: Record<string, string> = {};
+      
+        formData.forEach((value, key) => {
+          result[key] = value.toString();
+        });
+      
+        return result;
+    }
+
+    async function handleSubmit(e: BaseSyntheticEvent) {
+        if(!activeOperator.current) {
+            throw new Error("Please select an Operator in the Dropdown");
+        }
+
+        const formData = new FormData(e.target);
+        
+        const action: Action = {type: activeOperator.current.constructor.name, values: formDataToObject(formData)};
+
+        // Validate PDF File
+
+        // Createing the pdffile before validation because joi cant handle it for some reason and I can't fix the underlying issue / I want to make progress, wasted like 3 hours on this already. TODO: The casting should be done in JoiPDFFileSchema.ts if done correctly...
+        const files = (document.getElementById("pdfFile") as HTMLInputElement).files;
+        const inputs: PdfFile[] = [];
+
+        if(files) {
+            const filesArray: File[] = Array.from(files as any);
+            for (let i = 0; i < files.length; i++) {
+                const file = filesArray[i];
+                if(file) {
+                    console.log(new Uint8Array(await file.arrayBuffer()));
+                    inputs.push(new PdfFile(
+                        file.name.replace(/\.[^/.]+$/, ""), // Strip Extension
+                        new Uint8Array(await file.arrayBuffer()),
+                        RepresentationType.Uint8Array
+                    ));
+                }
+                else
+                    throw new Error("This should not happen. Contact maintainers.");
+            }
+        }
+
+        const pdfValidationResults = await JoiPDFFileSchema.validate(inputs);
+        if(pdfValidationResults.error) {
+            console.log({error: "PDF validation failed", details: pdfValidationResults.error.message});
+        }
+        const pdfFiles: PdfFile[] = pdfValidationResults.value;
+
+        // Validate Action Values
+        const actionValidationResults = activeOperator.current.schema.validate({input: pdfFiles, values: action.values});
+
+        if(actionValidationResults.error) {
+            console.log({error: "Value validation failed", details: actionValidationResults.error.message});
+            return;
+        }
+        
+        action.values = pdfValidationResults.value.values;
+        const operation = new activeOperator.current(action);
+        
+        operation.run(pdfValidationResults.value, (progress) => {}).then(pdfFiles => {
+            console.log("Done");
+        });
+    };
+
     function capitalizeFirstLetter(string: String) {
         return string.charAt(0).toUpperCase() + string.slice(1);
     }
@@ -46,17 +115,14 @@ function Dynamic() {
             <select id="pdfOptions" onChange={selectionChanged}>
                 <option value="none">none</option>
                 { operators.map((operator, i) => {
-                    return (<option value={operator}>{operator}</option>)
+                    return (<option key={operator} value={operator}>{operator}</option>)
                 }) }
             </select>
 
             <div id="values">
-                <BuildFields schemaDescription={schemaDescription}></BuildFields>
+                <BuildFields schemaDescription={schemaDescription} onSubmit={handleSubmit}></BuildFields>
             </div>
 
-            <br />
-            <button id="processButton">Process process file with current settings</button>
-
             <p>
                 <Link to="/">Go back home...</Link>
             </p>