extract, comma seperated list fields in Joi & genericField

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

@@ -2,18 +2,25 @@ import Joi from "@stirling-tools/joi";
 import { Fragment } from "react";
 
 interface GenericFieldProps {
-    fieldName: string
-    joiDefinition: Joi.Description;
+    fieldName: string,
+    joiDefinition: Joi.Description
+}
+
+interface Flags {
+    label: string,
+    description: string,
 }
   
 export function GenericField({ fieldName, joiDefinition }: GenericFieldProps) {
+    const flags = joiDefinition.flags as Flags;
+
     switch (joiDefinition.type) {
         case "number":
             var validValues = joiDefinition.allow;
-            if(validValues) { // Restrained text input
+            if(validValues) { // Restrained number input
                 return (
                     <Fragment>
-                        <label htmlFor={fieldName}>{fieldName}:</label>
+                        <label htmlFor={fieldName}>{flags.label}:</label>
                         <input type="number" list={fieldName} name={fieldName}/>
                         <datalist id={fieldName}>
                             {joiDefinition.allow.map((e: string) => {
@@ -24,17 +31,22 @@ export function GenericField({ fieldName, joiDefinition }: GenericFieldProps) {
                     </Fragment>
                 );
             }
-            else {
-                // TODO: Implement unrestrained text input
-                return (<pre>{JSON.stringify(joiDefinition, null, 2)}</pre>)
+            else { // Unrestrained number input
+                // TODO: Check if integer or not.
+                return (
+                    <Fragment>
+                        <label htmlFor={fieldName}>{flags.label}:</label>
+                        <input type="number" list={fieldName} name={fieldName}/>
+                        <br/>
+                    </Fragment>
+                );
             }
             break;
         case "string":
-            var validValues = joiDefinition.allow;
-            if(validValues) { // Restrained text input
+            if(joiDefinition.allow) { // Restrained text input
                 return (
                     <Fragment>
-                        <label htmlFor={fieldName}>{fieldName}:</label>
+                        <label htmlFor={fieldName}>{flags.label}:</label>
                         <input type="text" list={fieldName} name={fieldName}/>
                         <datalist id={fieldName}>
                             {joiDefinition.allow.map((e: string) => {
@@ -47,11 +59,38 @@ export function GenericField({ fieldName, joiDefinition }: GenericFieldProps) {
             }
             else {
                 // TODO: Implement unrestrained text input
-                return (<pre>{JSON.stringify(joiDefinition, null, 2)}</pre>)
+                return (<div>string, unrestrained text input is not implemented</div>)
+            }
+            break;
+        case "comma_array":
+            if(joiDefinition.items.length == 1) {
+                const item: Joi.Description = joiDefinition.items[0];
+
+                if(item.type == "number") {
+                    if(item.rules.length == 1) {
+                        return (
+                            <Fragment>
+                                <label htmlFor={fieldName}>{flags.label}:</label>
+                                <input type="text" pattern="(\d+)(,\s*\d+)*" list={fieldName} name={fieldName}/>
+                                <br/>
+                            </Fragment>
+                        );
+                    }
+                    else {
+                        return (<div>comma_array, item rules are empty or bigger than one, this is not implemented.</div>);
+                    }
+                }
+                else {
+                    return (<div>comma_array, other types than numbers are not implemented yet.</div>);
+                }
+            }
+            else {
+                // TODO: Implement multiple items if necessary
+                return (<div>comma_array, joi items are empty or bigger than one, this is not implemented</div>);
             }
             break;
-            
         default:
-            return (<div>Field "{fieldName}": <br /> requested type "{joiDefinition.type}" not found</div>)
+            console.log(joiDefinition);
+            return (<div>GenericField.tsx: <br/> "{fieldName}": requested type "{joiDefinition.type}" not found. Check console for further info.</div>)
     }
 }

client-tauri/src/pages/Dynamic.tsx

@@ -30,6 +30,8 @@ function Dynamic() {
             LoadingModule.then((Module) => {
                 const Operator = Module[capitalizeFirstLetter(selectedValue)];
                 const description = Operator.schema.describe();
+                console.log(Operator.schema);
+                console.log(description);
 
                 activeOperator.current = Operator;
                 // This will update children