mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
407 lines
17 KiB
TypeScript
407 lines
17 KiB
TypeScript
/*
|
|
* QQQ - Low-code Application Framework for Engineers.
|
|
* Copyright (C) 2021-2022. Kingsrook, LLC
|
|
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
|
* contact@kingsrook.com
|
|
* https://github.com/Kingsrook/
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* 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 {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 Client from "qqq/utils/qqq/Client";
|
|
import React, {useEffect, useState} from "react";
|
|
|
|
const qController = Client.getInstance();
|
|
|
|
interface Props
|
|
{
|
|
formLabel?: string;
|
|
formData: any;
|
|
bulkEditMode?: boolean;
|
|
bulkEditSwitchChangeHandler?: any;
|
|
record?: QRecord;
|
|
helpRoles?: string[];
|
|
helpContentKeyPrefix?: string;
|
|
}
|
|
|
|
function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHandler, record, helpRoles, helpContentKeyPrefix}: Props): JSX.Element
|
|
{
|
|
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) =>
|
|
{
|
|
bulkEditSwitchChangeHandler(name, value);
|
|
};
|
|
|
|
|
|
/////////////////////////////////////////
|
|
// 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}>
|
|
<MDTypography variant="h5">{formLabel}</MDTypography>
|
|
</Box>
|
|
<Box mt={1.625}>
|
|
<Grid container lg={12} display="flex" spacing={3}>
|
|
{formFields
|
|
&& Object.keys(formFields).length > 0
|
|
&& Object.keys(formFields).map((fieldName: any) =>
|
|
{
|
|
const field = formFields[fieldName];
|
|
if (field.omitFromQDynamicForm)
|
|
{
|
|
return null;
|
|
}
|
|
|
|
const display = field.fieldMetaData?.isHidden ? "none" : "initial";
|
|
|
|
if (values[fieldName] === undefined)
|
|
{
|
|
values[fieldName] = "";
|
|
}
|
|
|
|
let formattedHelpContent = <HelpContent helpContents={field?.fieldMetaData?.helpContents} roles={helpRoles} helpContentKey={`${helpContentKeyPrefix ?? ""}field:${fieldName}`} />;
|
|
if (formattedHelpContent)
|
|
{
|
|
formattedHelpContent = <Box color="#757575" fontSize="0.875rem" mt="-0.25rem">{formattedHelpContent}</Box>;
|
|
}
|
|
|
|
const labelElement = <DynamicFormFieldLabel name={field.name} label={field.label} />;
|
|
|
|
let itemLG = (field?.fieldMetaData?.gridColumns && field?.fieldMetaData?.gridColumns > 0) ? field.fieldMetaData.gridColumns : 6;
|
|
let itemXS = 12;
|
|
let itemSM = 6;
|
|
|
|
/////////////
|
|
// files!! //
|
|
/////////////
|
|
if (field.type === "file")
|
|
{
|
|
const fileUploadAdornment = field.fieldMetaData?.getAdornment(AdornmentType.FILE_UPLOAD);
|
|
const width = fileUploadAdornment?.values?.get("width") ?? "half";
|
|
|
|
if (width == "full")
|
|
{
|
|
itemSM = 12;
|
|
itemLG = 12;
|
|
}
|
|
|
|
return (
|
|
<Grid item lg={itemLG} xs={itemXS} sm={itemSM} flexDirection="column" key={fieldName + "-" + formAdjustmentCounter}>
|
|
{labelElement}
|
|
<FileInputField field={field} record={record} errorMessage={errors[fieldName]} />
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
///////////////////////
|
|
// possible values!! //
|
|
///////////////////////
|
|
else if (field.possibleValueProps)
|
|
{
|
|
const otherValuesMap = field.possibleValueProps.otherValues ?? new Map<string, any>();
|
|
Object.keys(values).forEach((key) =>
|
|
{
|
|
otherValuesMap.set(key, values[key]);
|
|
});
|
|
|
|
return (
|
|
<Grid item display={display} lg={itemLG} xs={itemXS} sm={itemSM} key={fieldName + "-" + formAdjustmentCounter}>
|
|
{labelElement}
|
|
<DynamicSelect
|
|
fieldPossibleValueProps={field.possibleValueProps}
|
|
isEditable={field.isEditable}
|
|
fieldLabel=""
|
|
initialValue={values[fieldName]}
|
|
bulkEditMode={bulkEditMode}
|
|
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
|
|
otherValues={otherValuesMap}
|
|
useCase="form"
|
|
onChange={(newValue: any) => handleFieldChange(fieldName, newValue)}
|
|
/>
|
|
{formattedHelpContent}
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
///////////////////////
|
|
// everything else!! //
|
|
///////////////////////
|
|
return (
|
|
<Grid item display={display} lg={itemLG} xs={itemXS} sm={itemSM} key={fieldName + "-" + formAdjustmentCounter}>
|
|
{labelElement}
|
|
<QDynamicFormField
|
|
id={field.name}
|
|
type={field.type}
|
|
label=""
|
|
isEditable={field.isEditable}
|
|
name={fieldName}
|
|
displayFormat={field.displayFormat}
|
|
value={values[fieldName]}
|
|
error={errors[fieldName] && touched[fieldName]}
|
|
bulkEditMode={bulkEditMode}
|
|
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
|
|
success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
|
|
formFieldObject={field}
|
|
onChangeCallback={(newValue) => handleFieldChange(fieldName, newValue)}
|
|
/>
|
|
{formattedHelpContent}
|
|
</Grid>
|
|
);
|
|
})}
|
|
</Grid>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
QDynamicForm.defaultProps = {
|
|
formLabel: undefined,
|
|
bulkEditMode: false,
|
|
helpRoles: ["ALL_SCREENS"],
|
|
bulkEditSwitchChangeHandler: () =>
|
|
{
|
|
},
|
|
};
|
|
|
|
|
|
interface DynamicFormFieldLabelProps
|
|
{
|
|
name: string;
|
|
label: string;
|
|
}
|
|
|
|
export function DynamicFormFieldLabel({name, label}: DynamicFormFieldLabelProps): JSX.Element
|
|
{
|
|
return (<Box fontSize="1rem" fontWeight="500" marginBottom="0.25rem">
|
|
<label htmlFor={name}>{label}</label>
|
|
</Box>);
|
|
}
|
|
|
|
|
|
export default QDynamicForm;
|