mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
Add support for onLoad and onChange form adjusters, plus isHidden attribute on fields
This commit is contained in:
@ -20,15 +20,21 @@
|
||||
*/
|
||||
|
||||
import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import Box from "@mui/material/Box";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import {useFormikContext} from "formik";
|
||||
import QDynamicFormField from "qqq/components/forms/DynamicFormField";
|
||||
import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
|
||||
import DynamicSelect from "qqq/components/forms/DynamicSelect";
|
||||
import FileInputField from "qqq/components/forms/FileInputField";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
import HelpContent from "qqq/components/misc/HelpContent";
|
||||
import React from "react";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import React, {useEffect, useState} from "react";
|
||||
|
||||
const qController = Client.getInstance();
|
||||
|
||||
interface Props
|
||||
{
|
||||
@ -43,7 +49,12 @@ interface Props
|
||||
|
||||
function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHandler, record, helpRoles, helpContentKeyPrefix}: Props): JSX.Element
|
||||
{
|
||||
const {formFields, values, errors, touched} = formData;
|
||||
const {formFields: origFormFields, errors, touched} = formData;
|
||||
const {setFieldValue, values} = useFormikContext<Record<string, any>>();
|
||||
|
||||
const [formAdjustmentCounter, setFormAdjustmentCounter] = useState(0)
|
||||
|
||||
const [formFields, setFormFields] = useState(origFormFields as {[key: string]: any});
|
||||
|
||||
const bulkEditSwitchChanged = (name: string, value: boolean) =>
|
||||
{
|
||||
@ -51,6 +62,204 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
|
||||
};
|
||||
|
||||
|
||||
/////////////////////////////////////////
|
||||
// run on-load handlers if we have any //
|
||||
/////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
for (let fieldName in formFields)
|
||||
{
|
||||
const field = formFields[fieldName];
|
||||
|
||||
const materialDashboardFieldMetaData = field.fieldMetaData?.supplementalFieldMetaData?.get("materialDashboard");
|
||||
if(materialDashboardFieldMetaData?.onLoadFormAdjuster)
|
||||
{
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// todo consider cases with multiple - do they need to list a sequenceNo? do they need to run serially? //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
considerRunningFormAdjuster("onLoad", fieldName, values[fieldName]);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
const handleFieldChange = async (fieldName: string, newValue: any) =>
|
||||
{
|
||||
const field = formFields[fieldName];
|
||||
if (!field)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// map possible-value objects to ids - also capture their labels... //
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
let actualNewValue = newValue;
|
||||
let possibleValueLabel: string = null;
|
||||
if (field.possibleValueProps)
|
||||
{
|
||||
actualNewValue = newValue ? newValue.id : null;
|
||||
possibleValueLabel = newValue ? newValue.label : null;
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// make sure formik has the value - and that we capture the possible-value label if needed //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////
|
||||
setFieldValue(fieldName, actualNewValue);
|
||||
if (field.possibleValueProps)
|
||||
{
|
||||
field.possibleValueProps.initialDisplayValue = possibleValueLabel;
|
||||
}
|
||||
|
||||
///////////////////////////////////////////
|
||||
// run onChange adjuster if there is one //
|
||||
///////////////////////////////////////////
|
||||
considerRunningFormAdjuster("onChange", fieldName, actualNewValue);
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
const considerRunningFormAdjuster = async (event: "onChange" | "onLoad", fieldName: string, newValue: any) =>
|
||||
{
|
||||
const field = formFields[fieldName];
|
||||
if (!field)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
const materialDashboardFieldMetaData = field.fieldMetaData?.supplementalFieldMetaData?.get("materialDashboard");
|
||||
const adjuster = event == "onChange" ? materialDashboardFieldMetaData?.onChangeFormAdjuster : materialDashboardFieldMetaData?.onLoadFormAdjuster;
|
||||
if (!adjuster)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`Running form adjuster for field ${fieldName} ${event} (value is: ${newValue})`);
|
||||
|
||||
//////////////////////////////////////////////////////////////////
|
||||
// disable fields temporarily while waiting on backend response //
|
||||
//////////////////////////////////////////////////////////////////
|
||||
const fieldNamesToTempDisable: string[] = materialDashboardFieldMetaData?.fieldsToDisableWhileRunningAdjusters ?? []
|
||||
const previousIsEditableValues: {[key: string]: boolean} = {};
|
||||
if(fieldNamesToTempDisable.length > 0)
|
||||
{
|
||||
for (let oldFieldName in formFields)
|
||||
{
|
||||
if (fieldNamesToTempDisable.indexOf(oldFieldName) > -1)
|
||||
{
|
||||
previousIsEditableValues[oldFieldName] = formFields[oldFieldName].isEditable;
|
||||
formFields[oldFieldName].isEditable = false;
|
||||
}
|
||||
}
|
||||
|
||||
setFormAdjustmentCounter(formAdjustmentCounter + 1);
|
||||
setFormFields({...formFields});
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
// build request to backend for field adjustments //
|
||||
////////////////////////////////////////////////////
|
||||
const postBody = new FormData();
|
||||
postBody.append("event", event);
|
||||
postBody.append("fieldName", fieldName);
|
||||
postBody.append("newValue", newValue);
|
||||
postBody.append("allValues", JSON.stringify(values));
|
||||
const response = await qController.axiosRequest(
|
||||
{
|
||||
method: "post",
|
||||
url: `/material-dashboard-backend/form-adjuster/${encodeURIComponent(materialDashboardFieldMetaData.formAdjusterIdentifier)}/${event}`,
|
||||
data: postBody,
|
||||
headers: qController.defaultMultipartFormDataHeaders()
|
||||
});
|
||||
console.log("Form adjuster response: " + JSON.stringify(response));
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
// un-disable any temp disabled fields from above //
|
||||
////////////////////////////////////////////////////
|
||||
if(fieldNamesToTempDisable.length > 0)
|
||||
{
|
||||
for (let oldFieldName in formFields)
|
||||
{
|
||||
if (fieldNamesToTempDisable.indexOf(oldFieldName) > -1)
|
||||
{
|
||||
formFields[oldFieldName].isEditable = previousIsEditableValues[oldFieldName];
|
||||
}
|
||||
}
|
||||
setFormFields({...formFields});
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////
|
||||
// replace field definitions, if we have updates //
|
||||
///////////////////////////////////////////////////
|
||||
const updatedFields: { [fieldName: string]: QFieldMetaData } = response.updatedFieldMetaData;
|
||||
if(updatedFields)
|
||||
{
|
||||
for (let updatedFieldName in updatedFields)
|
||||
{
|
||||
const updatedField = new QFieldMetaData(updatedFields[updatedFieldName]);
|
||||
const dynamicField = DynamicFormUtils.getDynamicField(updatedField); // todo dynamicallyDisabledFields? second param...
|
||||
|
||||
const dynamicFieldInObject: any = {};
|
||||
dynamicFieldInObject[updatedFieldName] = dynamicField;
|
||||
let tableName = null;
|
||||
let processName = null;
|
||||
let displayValues = new Map();
|
||||
|
||||
DynamicFormUtils.addPossibleValueProps(dynamicFieldInObject, [updatedFields[updatedFieldName]], tableName, processName, displayValues);
|
||||
for (let oldFieldName in formFields)
|
||||
{
|
||||
if (oldFieldName == updatedFieldName)
|
||||
{
|
||||
formFields[updatedFieldName] = dynamicField;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setFormAdjustmentCounter(formAdjustmentCounter + 2);
|
||||
setFormFields({...formFields});
|
||||
}
|
||||
|
||||
/////////////////////////
|
||||
// update field values //
|
||||
/////////////////////////
|
||||
const updatedFieldValues: {[fieldName: string]: any} = response?.updatedFieldValues ?? {};
|
||||
for (let fieldNameToUpdate in updatedFieldValues)
|
||||
{
|
||||
setFieldValue(fieldNameToUpdate, updatedFieldValues[fieldNameToUpdate]);
|
||||
///////////////////////////////////////////////////////////////////////////////////////
|
||||
// todo - track if a pvs field gets a value, but not a display value, and fetch it?? //
|
||||
///////////////////////////////////////////////////////////////////////////////////////
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////
|
||||
// set display values in PVS's if we have them //
|
||||
/////////////////////////////////////////////////
|
||||
const updatedFieldDisplayValues: {[fieldName: string]: any} = response?.updatedFieldDisplayValues ?? {};
|
||||
for (let fieldNameToUpdate in updatedFieldDisplayValues)
|
||||
{
|
||||
const fieldToUpdate = formFields[fieldNameToUpdate];
|
||||
if(fieldToUpdate?.possibleValueProps)
|
||||
{
|
||||
fieldToUpdate.possibleValueProps.initialDisplayValue = updatedFieldDisplayValues[fieldNameToUpdate];
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////
|
||||
// clear field values if we have them //
|
||||
////////////////////////////////////////
|
||||
const fieldsToClear: string[] = response?.fieldsToClear ?? [];
|
||||
for (let fieldToClear of fieldsToClear)
|
||||
{
|
||||
setFieldValue(fieldToClear, "");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box lineHeight={0}>
|
||||
@ -68,6 +277,8 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
|
||||
return null;
|
||||
}
|
||||
|
||||
const display = field.fieldMetaData?.isHidden ? "none" : "initial";
|
||||
|
||||
if (values[fieldName] === undefined)
|
||||
{
|
||||
values[fieldName] = "";
|
||||
@ -100,7 +311,7 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid item lg={itemLG} xs={itemXS} sm={itemSM} flexDirection="column" key={fieldName}>
|
||||
<Grid item lg={itemLG} xs={itemXS} sm={itemSM} flexDirection="column" key={fieldName + "-" + formAdjustmentCounter}>
|
||||
{labelElement}
|
||||
<FileInputField field={field} record={record} errorMessage={errors[fieldName]} />
|
||||
</Grid>
|
||||
@ -119,7 +330,7 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
|
||||
});
|
||||
|
||||
return (
|
||||
<Grid item lg={itemLG} xs={itemXS} sm={itemSM} key={fieldName}>
|
||||
<Grid item display={display} lg={itemLG} xs={itemXS} sm={itemSM} key={fieldName + "-" + formAdjustmentCounter}>
|
||||
{labelElement}
|
||||
<DynamicSelect
|
||||
fieldPossibleValueProps={field.possibleValueProps}
|
||||
@ -130,6 +341,7 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
|
||||
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
|
||||
otherValues={otherValuesMap}
|
||||
useCase="form"
|
||||
onChange={(newValue: any) => handleFieldChange(fieldName, newValue)}
|
||||
/>
|
||||
{formattedHelpContent}
|
||||
</Grid>
|
||||
@ -140,7 +352,7 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
|
||||
// everything else!! //
|
||||
///////////////////////
|
||||
return (
|
||||
<Grid item lg={itemLG} xs={itemXS} sm={itemSM} key={fieldName}>
|
||||
<Grid item display={display} lg={itemLG} xs={itemXS} sm={itemSM} key={fieldName + "-" + formAdjustmentCounter}>
|
||||
{labelElement}
|
||||
<QDynamicFormField
|
||||
id={field.name}
|
||||
@ -155,6 +367,7 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
|
||||
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
|
||||
success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
|
||||
formFieldObject={field}
|
||||
onChangeCallback={(newValue) => handleFieldChange(fieldName, newValue)}
|
||||
/>
|
||||
{formattedHelpContent}
|
||||
</Grid>
|
||||
|
||||
Reference in New Issue
Block a user