GenericFields

client-tauri/src/components/fields/BuildFields.tsx

@@ -1,15 +1,31 @@
 import Joi from "@stirling-tools/joi";
-
+import { GenericField } from "./GenericField";
+import React from "react";
 
 interface BuildFieldsProps {
     /** The text to display inside the button */
     schemaDescription: Joi.Description | undefined;
+    onSubmit: React.FormEventHandler<HTMLFormElement>;
 }
-  
 
-export function BuildFields({ schemaDescription }: BuildFieldsProps) {
+export function BuildFields({ schemaDescription, onSubmit }: BuildFieldsProps) {
     console.log("Render Build Fields", schemaDescription);
+    const label = (schemaDescription?.flags as any)?.label
+    const description = (schemaDescription?.flags as any)?.description;
+    const values = (schemaDescription?.keys as any)?.values.keys as { [key: string]: Joi.Description};
     return (
-      <div>Description: {(schemaDescription?.flags as any)?.description}</div>
+        <div>
+            <h3>{label}</h3>
+            {description}
+            <hr />
+            <form onSubmit={(e) => { onSubmit(e); e.preventDefault(); }}>
+            {
+                values ? Object.keys(values).map((key, i) => {  
+                    return (<GenericField key={key} fieldName={key} joiDefinition={values[key]} />) 
+                }) : undefined
+            }
+                <input type="submit" value="Submit" />
+            </form>
+        </div>
     );
 }

client-tauri/src/components/fields/GenericField.tsx

@@ -0,0 +1,57 @@
+import Joi from "@stirling-tools/joi";
+import { Fragment } from "react";
+
+interface GenericFieldProps {
+    fieldName: string
+    joiDefinition: Joi.Description;
+}
+  
+export function GenericField({ fieldName, joiDefinition }: GenericFieldProps) {
+    switch (joiDefinition.type) {
+        case "number":
+            var validValues = joiDefinition.allow;
+            if(validValues) { // Restrained text input
+                return (
+                    <Fragment>
+                        <label htmlFor={fieldName}>{fieldName}:</label>
+                        <input type="number" list={fieldName} name={fieldName}/>
+                        <datalist id={fieldName}>
+                            {joiDefinition.allow.map((e: string) => {
+                                return (<option key={e} value={e}/>)
+                            })}
+                        </datalist>
+                        <br/>
+                    </Fragment>
+                );
+            }
+            else {
+                // TODO: Implement unrestrained text input
+                return (<pre>{JSON.stringify(joiDefinition, null, 2)}</pre>)
+            }
+            break;
+        case "string":
+            var validValues = joiDefinition.allow;
+            if(validValues) { // Restrained text input
+                return (
+                    <Fragment>
+                        <label htmlFor={fieldName}>{fieldName}:</label>
+                        <input type="text" list={fieldName} name={fieldName}/>
+                        <datalist id={fieldName}>
+                            {joiDefinition.allow.map((e: string) => {
+                                return (<option key={e} value={e}/>)
+                            })}
+                        </datalist>
+                        <br/>
+                    </Fragment>
+                );
+            }
+            else {
+                // TODO: Implement unrestrained text input
+                return (<pre>{JSON.stringify(joiDefinition, null, 2)}</pre>)
+            }
+            break;
+            
+        default:
+            return (<div>Field "{fieldName}": <br /> requested type "{joiDefinition.type}" not found</div>)
+    }
+}