mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 13:20:43 +00:00
Adding test mode to assocaited record screens; code editor as an adornment type for forms
This commit is contained in:
@ -158,6 +158,7 @@ function QDynamicForm(props: Props): JSX.Element
|
||||
bulkEditMode={bulkEditMode}
|
||||
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
|
||||
success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
|
||||
formFieldObject={field}
|
||||
/>
|
||||
</Grid>
|
||||
);
|
||||
|
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
Reference in New Issue
Block a user