Adding test mode to assocaited record screens; code editor as an adornment type for forms

This commit is contained in:
2022-11-10 11:55:02 -06:00
parent 5843a00892
commit b3a131a64f
11 changed files with 600 additions and 163 deletions

View File

@ -158,6 +158,7 @@ function QDynamicForm(props: Props): JSX.Element
bulkEditMode={bulkEditMode}
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
formFieldObject={field}
/>
</Grid>
);

View File

@ -19,6 +19,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import * as Yup from "yup";
@ -73,6 +74,17 @@ class DynamicFormUtils
fieldType = "text";
}
let more: any = {};
if (field.hasAdornment(AdornmentType.CODE_EDITOR))
{
fieldType = "ace";
const values = field.getAdornment(AdornmentType.CODE_EDITOR).values;
if (values.has("languageMode"))
{
more.languageMode = values.get("languageMode");
}
}
let label = field.label ? field.label : field.name;
label += field.isRequired ? " *" : "";
@ -84,6 +96,7 @@ class DynamicFormUtils
type: fieldType,
displayFormat: field.displayFormat,
// todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
...more
});
}

View File

@ -22,8 +22,9 @@
import {InputAdornment, InputLabel} from "@mui/material";
import Box from "@mui/material/Box";
import Switch from "@mui/material/Switch";
import {ErrorMessage, Field, useFormikContext} from "formik";
import React, {SyntheticEvent, useState} from "react";
import {ErrorMessage, Field, FieldProps, useFormikContext} from "formik";
import React, {useState} from "react";
import AceEditor from "react-ace";
import QBooleanFieldSwitch from "qqq/components/QDynamicFormField/QBooleanFieldSwitch";
import MDBox from "qqq/components/Temporary/MDBox";
import MDInput from "qqq/components/Temporary/MDInput";
@ -43,14 +44,15 @@ interface Props
bulkEditMode?: boolean;
bulkEditSwitchChangeHandler?: any;
formFieldObject: any; // is the type returned by DynamicFormUtils.getDynamicField
}
function QDynamicFormField({
label, name, displayFormat, value, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, ...rest
label, name, displayFormat, value, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, formFieldObject, ...rest
}: Props): JSX.Element
{
const [ switchChecked, setSwitchChecked ] = useState(false);
const [ isDisabled, setIsDisabled ] = useState(!isEditable || bulkEditMode);
const [switchChecked, setSwitchChecked] = useState(false);
const [isDisabled, setIsDisabled] = useState(!isEditable || bulkEditMode);
const {setFieldValue} = useFormikContext();
@ -82,15 +84,50 @@ function QDynamicFormField({
}
};
let field;
let getsBulkEditHtmlLabel = true;
if (type === "checkbox")
{
getsBulkEditHtmlLabel = false;
field = (<QBooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} />);
}
else if (type === "ace")
{
let mode = "text";
if(formFieldObject && formFieldObject.languageMode)
{
mode = formFieldObject.languageMode;
}
const field = () =>
(type == "checkbox" ?
<QBooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} /> :
getsBulkEditHtmlLabel = false;
field = (
<>
<InputLabel shrink={true}>{label}</InputLabel>
<AceEditor
mode={mode}
theme="github"
name="editor"
editorProps={{$blockScrolling: true}}
onChange={(value: string, event: any) =>
{
setFieldValue(name, value, false);
}}
width="100%"
height="300px"
value={value}
style={{border: "1px solid gray"}}
/>
</>
);
}
else
{
field = (
<>
<Field {...rest} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="standard" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled}
onKeyPress={(e: any) =>
{
if(e.key === "Enter")
if (e.key === "Enter")
{
e.preventDefault();
}
@ -103,10 +140,16 @@ function QDynamicFormField({
</MDBox>
</>
);
}
const bulkEditSwitchChanged = () =>
{
const newSwitchValue = !switchChecked;
setBulkEditSwitch(!switchChecked);
};
const setBulkEditSwitch = (value: boolean) =>
{
const newSwitchValue = value;
setSwitchChecked(newSwitchValue);
setIsDisabled(!newSwitchValue);
bulkEditSwitchChangeHandler(name, newSwitchValue);
@ -124,13 +167,13 @@ function QDynamicFormField({
/>
</Box>
<Box width="100%" sx={{background: (type == "checkbox" && isDisabled) ? "#f0f2f5!important" : "initial"}}>
{/* for checkboxes, if we put the whole thing in a label, we get bad overly aggressive toggling of the outer switch... */}
{(type == "checkbox" ?
field() :
<label htmlFor={`bulkEditSwitch-${name}`}>
{field()}
</label>
)}
{
getsBulkEditHtmlLabel
? (<label htmlFor={`bulkEditSwitch-${name}`}>
{field}
</label>)
: <div onClick={() => setBulkEditSwitch(true)}>{field}</div>
}
</Box>
</Box>
);
@ -139,7 +182,7 @@ function QDynamicFormField({
{
return (
<MDBox mb={1.5}>
{field()}
{field}
</MDBox>
);
}