From 56126eb670f8792398f24fd9453af19d9f0c393c Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Sat, 19 Nov 2022 20:55:27 -0500
Subject: [PATCH] added some more widget types to the form builder. w/ burnettk

---
 spiffworkflow-frontend/src/interfaces.ts      |  2 +
 .../src/routes/JsonSchemaFormBuilder.tsx      | 61 +++++++++++++++++--
 2 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/spiffworkflow-frontend/src/interfaces.ts b/spiffworkflow-frontend/src/interfaces.ts
index 3f86d999..f4540f4f 100644
--- a/spiffworkflow-frontend/src/interfaces.ts
+++ b/spiffworkflow-frontend/src/interfaces.ts
@@ -107,4 +107,6 @@ export interface FormField {
   id: string;
   title: string;
   required: boolean;
+  type: string;
+  enum: string[];
 }
diff --git a/spiffworkflow-frontend/src/routes/JsonSchemaFormBuilder.tsx b/spiffworkflow-frontend/src/routes/JsonSchemaFormBuilder.tsx
index 7f0cb674..c97e959a 100644
--- a/spiffworkflow-frontend/src/routes/JsonSchemaFormBuilder.tsx
+++ b/spiffworkflow-frontend/src/routes/JsonSchemaFormBuilder.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 // @ts-ignore
-import { Button, ButtonSet, Form, Stack, TextInput } from '@carbon/react';
+import { Button, Select, SelectItem, TextInput } from '@carbon/react';
 import { useParams } from 'react-router-dom';
 import { FormField } from '../interfaces';
 import { modifyProcessModelPath, slugifyString } from '../helpers';
@@ -8,18 +8,25 @@ import HttpService from '../services/HttpService';
 
 export default function JsonSchemaFormBuilder() {
   const params = useParams();
+  const formFieldTypes = ['textbox', 'checkbox', 'select'];
+
   const [formTitle, setFormTitle] = useState<string>('');
   const [formDescription, setFormDescription] = useState<string>('');
   const [formId, setFormId] = useState<string>('');
   const [formFields, setFormFields] = useState<FormField[]>([]);
   const [showNewFormField, setShowNewFormField] = useState<boolean>(false);
+  const [formFieldSelectOptions, setFormFieldSelectOptions] =
+    useState<string>('');
   const [formIdHasBeenUpdatedByUser, setFormIdHasBeenUpdatedByUser] =
     useState<boolean>(false);
   const [formFieldIdHasBeenUpdatedByUser, setFormFieldIdHasBeenUpdatedByUser] =
     useState<boolean>(false);
+  const [showFormFieldSelectTextField, setShowFormFieldSelectTextField] =
+    useState<boolean>(false);
 
   const [formFieldId, setFormFieldId] = useState<string>('');
   const [formFieldTitle, setFormFieldTitle] = useState<string>('');
+  const [formFieldType, setFormFieldType] = useState<string>('');
 
   const modifiedProcessModelId = modifyProcessModelPath(
     `${params.process_model_id}`
@@ -34,11 +41,21 @@ export default function JsonSchemaFormBuilder() {
       properties: {},
       required: [],
     };
+
     formFields.forEach((formField: FormField) => {
-      (formJson.properties as any)[formField.id] = {
-        type: 'string',
+      let jsonSchemaFieldType = 'string';
+      if (formField.type === 'checkbox') {
+        jsonSchemaFieldType = 'boolean';
+      }
+      const formJsonObject: any = {
+        type: jsonSchemaFieldType,
         title: formField.title,
       };
+
+      if (formField.type === 'select') {
+        formJsonObject.enum = formField.enum;
+      }
+      (formJson.properties as any)[formField.id] = formJsonObject;
     });
 
     return JSON.stringify(formJson, null, 2);
@@ -70,11 +87,13 @@ export default function JsonSchemaFormBuilder() {
     setFormTitle(newFormTitle);
   };
 
-  const createNewFormField = () => {
+  const addFormField = () => {
     const newFormField: FormField = {
       id: formFieldId,
       title: formFieldTitle,
       required: false,
+      type: formFieldType,
+      enum: formFieldSelectOptions.split(','),
     };
 
     setFormFieldIdHasBeenUpdatedByUser(false);
@@ -82,6 +101,16 @@ export default function JsonSchemaFormBuilder() {
     setFormFields([...formFields, newFormField]);
   };
 
+  const handleFormFieldTypeChange = (event: any) => {
+    setFormFieldType(event.srcElement.value);
+
+    if (event.srcElement.value === 'select') {
+      setShowFormFieldSelectTextField(true);
+    } else {
+      setShowFormFieldSelectTextField(false);
+    }
+  };
+
   const newFormFieldComponent = () => {
     if (showNewFormField) {
       return (
@@ -105,7 +134,26 @@ export default function JsonSchemaFormBuilder() {
               setFormFieldId(event.srcElement.value);
             }}
           />
-          <Button onClick={createNewFormField}>Add Field</Button>
+          <Select
+            id="form-field-type"
+            labelText="Type"
+            onChange={handleFormFieldTypeChange}
+          >
+            {formFieldTypes.map((fft: string) => {
+              return <SelectItem text={fft} value={fft} />;
+            })}
+          </Select>
+          {showFormFieldSelectTextField ? (
+            <TextInput
+              id="json-form-field-select-options"
+              name="select-options"
+              labelText="Select Options"
+              onChange={(event: any) => {
+                setFormFieldSelectOptions(event.srcElement.value);
+              }}
+            />
+          ) : null}
+          <Button onClick={addFormField}>Add Field</Button>
         </>
       );
     }
@@ -184,6 +232,9 @@ export default function JsonSchemaFormBuilder() {
           onClick={() => {
             setFormFieldId('');
             setFormFieldTitle('');
+            setFormFieldType('');
+            setFormFieldSelectOptions('');
+            setShowFormFieldSelectTextField(false);
             setShowNewFormField(true);
           }}
         >