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(''); const [formDescription, setFormDescription] = useState(''); const [formId, setFormId] = useState(''); const [formFields, setFormFields] = useState([]); const [showNewFormField, setShowNewFormField] = useState(false); + const [formFieldSelectOptions, setFormFieldSelectOptions] = + useState(''); const [formIdHasBeenUpdatedByUser, setFormIdHasBeenUpdatedByUser] = useState(false); const [formFieldIdHasBeenUpdatedByUser, setFormFieldIdHasBeenUpdatedByUser] = useState(false); + const [showFormFieldSelectTextField, setShowFormFieldSelectTextField] = + useState(false); const [formFieldId, setFormFieldId] = useState(''); const [formFieldTitle, setFormFieldTitle] = useState(''); + const [formFieldType, setFormFieldType] = useState(''); 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); }} /> - + + {showFormFieldSelectTextField ? ( + { + setFormFieldSelectOptions(event.srcElement.value); + }} + /> + ) : null} + ); } @@ -184,6 +232,9 @@ export default function JsonSchemaFormBuilder() { onClick={() => { setFormFieldId(''); setFormFieldTitle(''); + setFormFieldType(''); + setFormFieldSelectOptions(''); + setShowFormFieldSelectTextField(false); setShowNewFormField(true); }} >