mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 13:20:43 +00:00
Merge pull request #73 from Kingsrook/feature/CE-1727-mobile-first-uiux
Feature/ce 1727 mobile first uiux
This commit is contained in:
Tim Chamberlain
GitHub
@ -6,7 +6,7 @@
|
||||
"@auth0/auth0-react": "1.10.2",
|
||||
"@emotion/react": "11.7.1",
|
||||
"@emotion/styled": "11.6.0",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.105",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.110",
|
||||
"@mui/icons-material": "5.4.1",
|
||||
"@mui/material": "5.11.1",
|
||||
"@mui/styles": "5.11.1",
|
||||
|
||||
@ -30,14 +30,17 @@ import MDButton from "qqq/components/legacy/MDButton";
|
||||
|
||||
export const standardWidth = "150px";
|
||||
|
||||
const standardML = {xs: 1, md: 3};
|
||||
|
||||
interface QCreateNewButtonProps
|
||||
{
|
||||
tablePath: string;
|
||||
}
|
||||
|
||||
export function QCreateNewButton({tablePath}: QCreateNewButtonProps): JSX.Element
|
||||
{
|
||||
return (
|
||||
<Box display="inline-block" ml={3} mr={0} width={standardWidth}>
|
||||
<Box display="inline-block" ml={standardML} mr={0} width={standardWidth}>
|
||||
<Link to={`${tablePath}/create`}>
|
||||
<MDButton variant="gradient" color="info" fullWidth startIcon={<Icon>add</Icon>}>
|
||||
Create New
|
||||
@ -54,6 +57,7 @@ interface QSaveButtonProps
|
||||
onClickHandler?: any,
|
||||
disabled: boolean
|
||||
}
|
||||
|
||||
QSaveButton.defaultProps = {
|
||||
label: "Save",
|
||||
iconName: "save"
|
||||
@ -62,7 +66,7 @@ QSaveButton.defaultProps = {
|
||||
export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveButtonProps): JSX.Element
|
||||
{
|
||||
return (
|
||||
<Box ml={3} width={standardWidth}>
|
||||
<Box ml={standardML} width={standardWidth}>
|
||||
<MDButton type="submit" variant="gradient" color="info" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}>
|
||||
{label}
|
||||
</MDButton>
|
||||
@ -72,17 +76,18 @@ export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveBu
|
||||
|
||||
interface QDeleteButtonProps
|
||||
{
|
||||
onClickHandler: any
|
||||
disabled?: boolean
|
||||
onClickHandler: any;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
QDeleteButton.defaultProps = {
|
||||
disabled: false
|
||||
};
|
||||
|
||||
export function QDeleteButton({onClickHandler, disabled}: QDeleteButtonProps): JSX.Element
|
||||
{
|
||||
return (
|
||||
<Box ml={3} width={standardWidth}>
|
||||
<Box ml={standardML} width={standardWidth}>
|
||||
<MDButton variant="gradient" color="primary" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>delete</Icon>} disabled={disabled}>
|
||||
Delete
|
||||
</MDButton>
|
||||
@ -93,7 +98,7 @@ export function QDeleteButton({onClickHandler, disabled}: QDeleteButtonProps): J
|
||||
export function QEditButton(): JSX.Element
|
||||
{
|
||||
return (
|
||||
<Box ml={3} width={standardWidth}>
|
||||
<Box ml={standardML} width={standardWidth}>
|
||||
<Link to="edit">
|
||||
<MDButton variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>edit</Icon>}>
|
||||
Edit
|
||||
@ -132,7 +137,7 @@ interface QCancelButtonProps
|
||||
onClickHandler: any;
|
||||
disabled: boolean;
|
||||
label?: string;
|
||||
iconName?: string
|
||||
iconName?: string;
|
||||
}
|
||||
|
||||
export function QCancelButton({
|
||||
@ -140,7 +145,7 @@ export function QCancelButton({
|
||||
}: QCancelButtonProps): JSX.Element
|
||||
{
|
||||
return (
|
||||
<Box ml="auto" width={standardWidth}>
|
||||
<Box ml={standardML} mb={2} width={standardWidth}>
|
||||
<MDButton type="button" variant="outlined" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} onClick={onClickHandler} disabled={disabled}>
|
||||
{label}
|
||||
</MDButton>
|
||||
@ -155,15 +160,15 @@ QCancelButton.defaultProps = {
|
||||
|
||||
interface QSubmitButtonProps
|
||||
{
|
||||
label?: string
|
||||
iconName?: string
|
||||
disabled: boolean
|
||||
label?: string;
|
||||
iconName?: string;
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
export function QSubmitButton({label, iconName, disabled}: QSubmitButtonProps): JSX.Element
|
||||
{
|
||||
return (
|
||||
<Box ml={3} width={standardWidth}>
|
||||
<Box ml={standardML} width={standardWidth}>
|
||||
<MDButton type="submit" variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}>
|
||||
{label}
|
||||
</MDButton>
|
||||
|
||||
@ -172,14 +172,10 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
|
||||
<Grid item xs={12} sm={6} key={fieldName}>
|
||||
{labelElement}
|
||||
<DynamicSelect
|
||||
tableName={field.possibleValueProps.tableName}
|
||||
processName={field.possibleValueProps.processName}
|
||||
possibleValueSourceName={field.possibleValueProps.possibleValueSourceName}
|
||||
fieldName={field.possibleValueProps.fieldName}
|
||||
fieldPossibleValueProps={field.possibleValueProps}
|
||||
isEditable={field.isEditable}
|
||||
fieldLabel=""
|
||||
initialValue={values[fieldName]}
|
||||
initialDisplayValue={field.possibleValueProps.initialDisplayValue}
|
||||
bulkEditMode={bulkEditMode}
|
||||
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
|
||||
otherValues={otherValuesMap}
|
||||
|
||||
@ -40,6 +40,8 @@ interface Props
|
||||
value: any;
|
||||
type: string;
|
||||
isEditable?: boolean;
|
||||
placeholder?: string;
|
||||
backgroundColor?: string;
|
||||
|
||||
[key: string]: any;
|
||||
|
||||
@ -49,7 +51,7 @@ interface Props
|
||||
}
|
||||
|
||||
function QDynamicFormField({
|
||||
label, name, displayFormat, value, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, formFieldObject, ...rest
|
||||
label, name, displayFormat, value, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, placeholder, backgroundColor, formFieldObject, ...rest
|
||||
}: Props): JSX.Element
|
||||
{
|
||||
const [switchChecked, setSwitchChecked] = useState(false);
|
||||
@ -65,18 +67,30 @@ function QDynamicFormField({
|
||||
inputLabelProps.shrink = true;
|
||||
}
|
||||
|
||||
const inputProps = {};
|
||||
const inputProps: any = {};
|
||||
if (displayFormat && displayFormat.startsWith("$"))
|
||||
{
|
||||
// @ts-ignore
|
||||
inputProps.startAdornment = <InputAdornment position="start">$</InputAdornment>;
|
||||
}
|
||||
if (displayFormat && displayFormat.endsWith("%%"))
|
||||
{
|
||||
// @ts-ignore
|
||||
inputProps.endAdornment = <InputAdornment position="end">%</InputAdornment>;
|
||||
}
|
||||
|
||||
if (placeholder)
|
||||
{
|
||||
inputProps.placeholder = placeholder
|
||||
}
|
||||
|
||||
if(backgroundColor)
|
||||
{
|
||||
inputProps.sx = {
|
||||
"&.MuiInputBase-root": {
|
||||
backgroundColor: backgroundColor
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
const handleOnWheel = (e) =>
|
||||
{
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
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 {FieldPossibleValueProps} from "qqq/models/fields/FieldPossibleValueProps";
|
||||
import * as Yup from "yup";
|
||||
|
||||
|
||||
@ -129,18 +130,11 @@ class DynamicFormUtils
|
||||
|
||||
if (effectivelyIsRequired)
|
||||
{
|
||||
if (field.possibleValueSourceName)
|
||||
{
|
||||
////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// the "nullable(true)" here doesn't mean that you're allowed to set the field to null... //
|
||||
// rather, it's more like "null is how empty will be treated" or some-such... //
|
||||
////////////////////////////////////////////////////////////////////////////////////////////
|
||||
return (Yup.string().required(`${field.label} is required.`).nullable(true));
|
||||
}
|
||||
else
|
||||
{
|
||||
return (Yup.string().required(`${field.label} is required.`));
|
||||
}
|
||||
////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// the "nullable(true)" here doesn't mean that you're allowed to set the field to null... //
|
||||
// rather, it's more like "null is how empty will be treated" or some-such... //
|
||||
////////////////////////////////////////////////////////////////////////////////////////////
|
||||
return (Yup.string().required(`${field.label ?? "This field"} is required.`).nullable(true));
|
||||
}
|
||||
return (null);
|
||||
}
|
||||
@ -155,47 +149,49 @@ class DynamicFormUtils
|
||||
{
|
||||
const field = qFields[i];
|
||||
|
||||
if(!dynamicFormFields[field.name])
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
/////////////////////////////////////////
|
||||
// add props for possible value fields //
|
||||
/////////////////////////////////////////
|
||||
if (field.possibleValueSourceName && dynamicFormFields[field.name])
|
||||
if (field.possibleValueSourceName || field.inlinePossibleValueSource)
|
||||
{
|
||||
let initialDisplayValue = null;
|
||||
let props: FieldPossibleValueProps =
|
||||
{
|
||||
isPossibleValue: true,
|
||||
fieldName: field.name,
|
||||
initialDisplayValue: null
|
||||
}
|
||||
|
||||
if (displayValues)
|
||||
{
|
||||
initialDisplayValue = displayValues.get(field.name);
|
||||
props.initialDisplayValue = displayValues.get(field.name);
|
||||
}
|
||||
|
||||
if (tableName)
|
||||
if(field.inlinePossibleValueSource)
|
||||
{
|
||||
dynamicFormFields[field.name].possibleValueProps =
|
||||
{
|
||||
isPossibleValue: true,
|
||||
tableName: tableName,
|
||||
fieldName: field.name,
|
||||
initialDisplayValue: initialDisplayValue,
|
||||
};
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// handle an inline PVS - which is a list of possible value objects //
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
props.possibleValues = field.inlinePossibleValueSource;
|
||||
}
|
||||
else if (tableName)
|
||||
{
|
||||
props.tableName = tableName;
|
||||
}
|
||||
else if (processName)
|
||||
{
|
||||
dynamicFormFields[field.name].possibleValueProps =
|
||||
{
|
||||
isPossibleValue: true,
|
||||
processName: processName,
|
||||
fieldName: field.name,
|
||||
initialDisplayValue: initialDisplayValue,
|
||||
};
|
||||
props.processName = processName;
|
||||
}
|
||||
else
|
||||
{
|
||||
dynamicFormFields[field.name].possibleValueProps =
|
||||
{
|
||||
isPossibleValue: true,
|
||||
initialDisplayValue: initialDisplayValue,
|
||||
fieldName: field.name,
|
||||
possibleValueSourceName: field.possibleValueSourceName
|
||||
};
|
||||
props.possibleValueSourceName = field.possibleValueSourceName;
|
||||
}
|
||||
|
||||
dynamicFormFields[field.name].possibleValueProps = props;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,20 +30,17 @@ import TextField from "@mui/material/TextField";
|
||||
import {ErrorMessage, useFormikContext} from "formik";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
import {FieldPossibleValueProps} from "qqq/models/fields/FieldPossibleValueProps";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import React, {useEffect, useState} from "react";
|
||||
|
||||
interface Props
|
||||
{
|
||||
tableName?: string;
|
||||
processName?: string;
|
||||
fieldName?: string;
|
||||
possibleValueSourceName?: string;
|
||||
fieldPossibleValueProps: FieldPossibleValueProps;
|
||||
overrideId?: string;
|
||||
fieldLabel: string;
|
||||
inForm: boolean;
|
||||
initialValue?: any;
|
||||
initialDisplayValue?: string;
|
||||
initialValues?: QPossibleValue[];
|
||||
onChange?: any;
|
||||
isEditable?: boolean;
|
||||
@ -57,13 +54,8 @@ interface Props
|
||||
}
|
||||
|
||||
DynamicSelect.defaultProps = {
|
||||
tableName: null,
|
||||
processName: null,
|
||||
fieldName: null,
|
||||
possibleValueSourceName: null,
|
||||
inForm: true,
|
||||
initialValue: null,
|
||||
initialDisplayValue: null,
|
||||
initialValues: undefined,
|
||||
onChange: null,
|
||||
isEditable: true,
|
||||
@ -103,8 +95,10 @@ export const getAutocompleteOutlinedStyle = (isDisabled: boolean) =>
|
||||
|
||||
const qController = Client.getInstance();
|
||||
|
||||
function DynamicSelect({tableName, processName, fieldName, possibleValueSourceName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen, useCase}: Props)
|
||||
function DynamicSelect({fieldPossibleValueProps, overrideId, fieldLabel, inForm, initialValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen, useCase}: Props)
|
||||
{
|
||||
const {fieldName, initialDisplayValue, possibleValueSourceName, possibleValues, processName, tableName} = fieldPossibleValueProps;
|
||||
|
||||
const [open, setOpen] = useState(initiallyOpen);
|
||||
const [options, setOptions] = useState<readonly QPossibleValue[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState(null);
|
||||
@ -172,6 +166,35 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
setFieldValueRef = setFieldValue;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
const filterInlinePossibleValues = (searchTerm: string, possibleValues: QPossibleValue[]): QPossibleValue[] =>
|
||||
{
|
||||
return possibleValues.filter(pv => pv.label?.toLowerCase().startsWith(searchTerm));
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
const loadResults = async (): Promise<QPossibleValue[]> =>
|
||||
{
|
||||
if(possibleValues)
|
||||
{
|
||||
return filterInlinePossibleValues(searchTerm, possibleValues)
|
||||
}
|
||||
else
|
||||
{
|
||||
return await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues, useCase);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
useEffect(() =>
|
||||
{
|
||||
if (firstRender)
|
||||
@ -195,7 +218,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
(async () =>
|
||||
{
|
||||
// console.log(`doing a search with ${searchTerm}`);
|
||||
const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues, useCase);
|
||||
const results: QPossibleValue[] = await loadResults();
|
||||
|
||||
if (tableMetaData == null && tableName)
|
||||
{
|
||||
@ -218,7 +241,10 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
};
|
||||
}, [searchTerm]);
|
||||
|
||||
// todo - finish... call it in onOpen?
|
||||
|
||||
/***************************************************************************
|
||||
** todo - finish... call it in onOpen?
|
||||
***************************************************************************/
|
||||
const reloadIfOtherValuesAreChanged = () =>
|
||||
{
|
||||
if (JSON.stringify(Object.fromEntries(otherValues)) != otherValuesWhenResultsWereLoaded)
|
||||
@ -227,8 +253,10 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
{
|
||||
setLoading(true);
|
||||
setOptions([]);
|
||||
|
||||
console.log("Refreshing possible values...");
|
||||
const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues, useCase);
|
||||
const results: QPossibleValue[] = await loadResults();
|
||||
|
||||
setLoading(false);
|
||||
setOptions([...results]);
|
||||
setOtherValuesWhenResultsWereLoaded(JSON.stringify(Object.fromEntries(otherValues)));
|
||||
@ -236,6 +264,10 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
const inputChanged = (event: React.SyntheticEvent, value: string, reason: string) =>
|
||||
{
|
||||
// console.log(`input changed. Reason: ${reason}, setting search term to ${value}`);
|
||||
@ -246,11 +278,19 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
const handleBlur = (x: any) =>
|
||||
{
|
||||
setSearchTerm(null);
|
||||
};
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
const handleChanged = (event: React.SyntheticEvent, value: any | any[], reason: string, details?: string) =>
|
||||
{
|
||||
// console.log("handleChanged. value is:");
|
||||
@ -274,6 +314,10 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
const filterOptions = (options: { id: any; label: string; }[], state: FilterOptionsState<{ id: any; label: string; }>): { id: any; label: string; }[] =>
|
||||
{
|
||||
/////////////////////////////////////////////////////////////////////////////////
|
||||
@ -283,6 +327,10 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
return (options);
|
||||
};
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
// @ts-ignore
|
||||
const renderOption = (props: Object, option: any, {selected}) =>
|
||||
{
|
||||
@ -331,6 +379,10 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
const bulkEditSwitchChanged = () =>
|
||||
{
|
||||
const newSwitchValue = !switchChecked;
|
||||
@ -351,7 +403,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
const autocomplete = (
|
||||
<Box>
|
||||
<Autocomplete
|
||||
id={overrideId ?? fieldName ?? possibleValueSourceName}
|
||||
id={overrideId ?? fieldName ?? possibleValueSourceName ?? "anonymous"}
|
||||
sx={autocompleteSX}
|
||||
open={open}
|
||||
fullWidth
|
||||
@ -431,7 +483,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
inForm &&
|
||||
<Box mt={0.75}>
|
||||
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
|
||||
{!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={fieldName ?? possibleValueSourceName} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
|
||||
{!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={overrideId ?? fieldName ?? possibleValueSourceName ?? "anonymous"} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
|
||||
</MDTypography>
|
||||
</Box>
|
||||
}
|
||||
|
||||
@ -64,13 +64,14 @@ function Footer({company, links}: Props): JSX.Element
|
||||
<Box
|
||||
width="100%"
|
||||
display="flex"
|
||||
flexDirection={{xs: "column", lg: "row"}}
|
||||
flexDirection={{xs: "column", md: "row"}}
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
px={1.5}
|
||||
style={{
|
||||
position: "fixed", bottom: "0px", zIndex: -1, marginBottom: "10px",
|
||||
}}
|
||||
left={{xs: "0", xl: "auto"}}
|
||||
>
|
||||
{
|
||||
href && name &&
|
||||
|
||||
@ -84,7 +84,7 @@ function ProcessSummaryResults({
|
||||
);
|
||||
|
||||
return (
|
||||
<Box m={3} mt={6}>
|
||||
<Box m={{xs: 0, md: 3}} mt={"3rem!important"}>
|
||||
<Grid container>
|
||||
<Grid item xs={0} lg={2} />
|
||||
<Grid item xs={12} lg={8}>
|
||||
|
||||
@ -273,7 +273,7 @@ function ValidationReview({
|
||||
);
|
||||
|
||||
return (
|
||||
<Box m={3}>
|
||||
<Box m={{xs: 0, md: 3}} mt={"3rem!important"}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} lg={6}>
|
||||
<MDTypography color="body" variant="button">
|
||||
|
||||
@ -367,13 +367,11 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
|
||||
) : (
|
||||
<Box width={"100%"}>
|
||||
<DynamicSelect
|
||||
tableName={table.name}
|
||||
fieldName={field.name}
|
||||
fieldPossibleValueProps={{tableName: table.name, fieldName: field.name, initialDisplayValue: selectedPossibleValue?.label}}
|
||||
overrideId={field.name + "-single-" + criteria.id}
|
||||
key={field.name + "-single-" + criteria.id}
|
||||
fieldLabel="Value"
|
||||
initialValue={selectedPossibleValue?.id}
|
||||
initialDisplayValue={selectedPossibleValue?.label}
|
||||
inForm={false}
|
||||
onChange={(value: any) => valueChangeHandler(null, 0, value)}
|
||||
variant="standard"
|
||||
@ -402,8 +400,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
|
||||
}
|
||||
return <Box>
|
||||
<DynamicSelect
|
||||
tableName={table.name}
|
||||
fieldName={field.name}
|
||||
fieldPossibleValueProps={{tableName: table.name, fieldName: field.name, initialDisplayValue: null}}
|
||||
overrideId={field.name + "-multi-" + criteria.id}
|
||||
key={field.name + "-multi-" + criteria.id}
|
||||
isMultiple
|
||||
|
||||
@ -440,10 +440,10 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
|
||||
<Box sx={{height: openTool ? "45%" : "100%"}}>
|
||||
<Grid container alignItems="flex-end">
|
||||
<Box maxWidth={"50%"} minWidth={300}>
|
||||
<DynamicSelect fieldName={"apiName"} initialValue={apiName} initialDisplayValue={apiNameLabel} fieldLabel={"API Name *"} tableName={"scriptRevision"} inForm={false} onChange={changeApiName} useCase="form" />
|
||||
<DynamicSelect fieldPossibleValueProps={{tableName: "scriptRevision", fieldName: "apiName", initialDisplayValue: apiNameLabel}} initialValue={apiName} fieldLabel={"API Name *"} inForm={false} onChange={changeApiName} useCase="form" />
|
||||
</Box>
|
||||
<Box maxWidth={"50%"} minWidth={300} pl={2}>
|
||||
<DynamicSelect fieldName={"apiVersion"} initialValue={apiVersion} initialDisplayValue={apiVersionLabel} fieldLabel={"API Version *"} tableName={"scriptRevision"} inForm={false} onChange={changeApiVersion} useCase="form" />
|
||||
<DynamicSelect fieldPossibleValueProps={{tableName: "scriptRevision", fieldName: "apiVersion", initialDisplayValue: apiVersionLabel}} initialValue={apiVersion} fieldLabel={"API Version *"} inForm={false} onChange={changeApiVersion} useCase="form" />
|
||||
</Box>
|
||||
</Grid>
|
||||
<Box display="flex" sx={{height: "100%"}}>
|
||||
|
||||
@ -391,10 +391,9 @@ export default function ShareModal({open, onClose, tableMetaData, record}: Share
|
||||
<Box display="flex" flexDirection="row" alignItems="center">
|
||||
<Box width="550px" pr={2} mb={-1.5}>
|
||||
<DynamicSelect
|
||||
possibleValueSourceName={shareableTableMetaData.audiencePossibleValueSourceName}
|
||||
fieldPossibleValueProps={{possibleValueSourceName: shareableTableMetaData.audiencePossibleValueSourceName, initialDisplayValue: selectedAudienceOption?.label}}
|
||||
fieldLabel="User or Group" // todo should come from shareableTableMetaData
|
||||
initialValue={selectedAudienceOption?.id}
|
||||
initialDisplayValue={selectedAudienceOption?.label}
|
||||
inForm={false}
|
||||
onChange={handleAudienceChange}
|
||||
useCase="form"
|
||||
|
||||
@ -22,19 +22,25 @@
|
||||
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {Box, Skeleton} from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import parse from "html-react-parser";
|
||||
import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
|
||||
import WidgetBlock from "qqq/components/widgets/WidgetBlock";
|
||||
import React from "react";
|
||||
import ProcessWidgetBlockUtils from "qqq/pages/processes/ProcessWidgetBlockUtils";
|
||||
import React, {useEffect, useState} from "react";
|
||||
|
||||
|
||||
export interface CompositeData
|
||||
{
|
||||
blockId: string;
|
||||
blocks: BlockData[];
|
||||
styleOverrides?: any;
|
||||
layout?: string;
|
||||
overlayHtml?: string;
|
||||
overlayStyleOverrides?: any;
|
||||
modalMode: string;
|
||||
styles?: any;
|
||||
}
|
||||
|
||||
|
||||
@ -42,13 +48,15 @@ interface CompositeWidgetProps
|
||||
{
|
||||
widgetMetaData: QWidgetMetaData;
|
||||
data: CompositeData;
|
||||
actionCallback?: (blockData: BlockData, eventValues?: { [name: string]: any }) => boolean;
|
||||
values?: { [key: string]: any };
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Widget which is a list of Blocks.
|
||||
*******************************************************************************/
|
||||
export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetProps): JSX.Element
|
||||
export default function CompositeWidget({widgetMetaData, data, actionCallback, values}: CompositeWidgetProps): JSX.Element
|
||||
{
|
||||
if (!data || !data.blocks)
|
||||
{
|
||||
@ -74,6 +82,12 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
|
||||
boxStyle.flexWrap = "wrap";
|
||||
boxStyle.gap = "0.5rem";
|
||||
}
|
||||
else if (layout == "FLEX_ROW")
|
||||
{
|
||||
boxStyle.display = "flex";
|
||||
boxStyle.flexDirection = "row";
|
||||
boxStyle.gap = "0.5rem";
|
||||
}
|
||||
else if (layout == "FLEX_ROW_SPACE_BETWEEN")
|
||||
{
|
||||
boxStyle.display = "flex";
|
||||
@ -81,6 +95,14 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
|
||||
boxStyle.justifyContent = "space-between";
|
||||
boxStyle.gap = "0.25rem";
|
||||
}
|
||||
else if (layout == "FLEX_ROW_CENTER")
|
||||
{
|
||||
boxStyle.display = "flex";
|
||||
boxStyle.flexDirection = "row";
|
||||
boxStyle.justifyContent = "center";
|
||||
boxStyle.gap = "0.25rem";
|
||||
boxStyle.flexWrap = "wrap";
|
||||
}
|
||||
else if (layout == "TABLE_SUB_ROW_DETAILS")
|
||||
{
|
||||
boxStyle.display = "flex";
|
||||
@ -105,6 +127,19 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
|
||||
boxStyle = {...boxStyle, ...data.styleOverrides};
|
||||
}
|
||||
|
||||
if (data.styles?.backgroundColor)
|
||||
{
|
||||
boxStyle.backgroundColor = ProcessWidgetBlockUtils.processColorFromStyleMap(data.styles.backgroundColor);
|
||||
}
|
||||
|
||||
if (data.styles?.padding)
|
||||
{
|
||||
boxStyle.paddingTop = data.styles?.padding.top + "px"
|
||||
boxStyle.paddingBottom = data.styles?.padding.bottom + "px"
|
||||
boxStyle.paddingLeft = data.styles?.padding.left + "px"
|
||||
boxStyle.paddingRight = data.styles?.padding.right + "px"
|
||||
}
|
||||
|
||||
let overlayStyle: any = {};
|
||||
|
||||
if (data?.overlayStyleOverrides)
|
||||
@ -112,7 +147,7 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
|
||||
overlayStyle = {...overlayStyle, ...data.overlayStyleOverrides};
|
||||
}
|
||||
|
||||
return (
|
||||
const content = (
|
||||
<>
|
||||
{
|
||||
data?.overlayHtml &&
|
||||
@ -122,7 +157,7 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
|
||||
{
|
||||
data.blocks.map((block: BlockData, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<WidgetBlock widgetMetaData={widgetMetaData} block={block} />
|
||||
<WidgetBlock widgetMetaData={widgetMetaData} block={block} actionCallback={actionCallback} values={values} />
|
||||
</React.Fragment>
|
||||
))
|
||||
}
|
||||
@ -130,4 +165,53 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
|
||||
</>
|
||||
);
|
||||
|
||||
if (data.modalMode)
|
||||
{
|
||||
const [isModalOpen, setIsModalOpen] = useState(values && (values[data.blockId] == true));
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
const controlCallback = (newValue: boolean) =>
|
||||
{
|
||||
setIsModalOpen(newValue);
|
||||
};
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
const modalOnClose = (event: object, reason: string) =>
|
||||
{
|
||||
values[data.blockId] = false;
|
||||
setIsModalOpen(false);
|
||||
actionCallback({blockTypeName: "BUTTON", values: {}}, {controlCode: `hideModal:${data.blockId}`});
|
||||
};
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
// register the control-callback function - so when buttons are clicked, we can be told //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
if (actionCallback)
|
||||
{
|
||||
actionCallback(null, {
|
||||
registerControlCallbackName: data.blockId,
|
||||
registerControlCallbackFunction: controlCallback
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (<Modal open={isModalOpen} onClose={modalOnClose}>
|
||||
<Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%"}}>
|
||||
<Card sx={{my: 5, mx: "auto", p: "1rem", maxWidth: "1024px"}}>
|
||||
{content}
|
||||
</Card>
|
||||
</Box>
|
||||
</Modal>);
|
||||
}
|
||||
else
|
||||
{
|
||||
return content;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -29,6 +29,7 @@ import parse from "html-react-parser";
|
||||
import QContext from "QContext";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
import TabPanel from "qqq/components/misc/TabPanel";
|
||||
import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
|
||||
import BarChart from "qqq/components/widgets/charts/barchart/BarChart";
|
||||
import HorizontalBarChart from "qqq/components/widgets/charts/barchart/HorizontalBarChart";
|
||||
import DefaultLineChart from "qqq/components/widgets/charts/linechart/DefaultLineChart";
|
||||
@ -71,6 +72,9 @@ interface Props
|
||||
childUrlParams?: string;
|
||||
parentWidgetMetaData?: QWidgetMetaData;
|
||||
wrapWidgetsInTabPanels: boolean;
|
||||
actionCallback?: (blockData: BlockData) => boolean;
|
||||
initialWidgetDataList: any[];
|
||||
values?: {[key: string]: any};
|
||||
}
|
||||
|
||||
DashboardWidgets.defaultProps = {
|
||||
@ -82,11 +86,14 @@ DashboardWidgets.defaultProps = {
|
||||
childUrlParams: "",
|
||||
parentWidgetMetaData: null,
|
||||
wrapWidgetsInTabPanels: false,
|
||||
actionCallback: null,
|
||||
initialWidgetDataList: null,
|
||||
values: {}
|
||||
};
|
||||
|
||||
function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, record, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
|
||||
function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, record, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels, actionCallback, initialWidgetDataList, values}: Props): JSX.Element
|
||||
{
|
||||
const [widgetData, setWidgetData] = useState([] as any[]);
|
||||
const [widgetData, setWidgetData] = useState(initialWidgetDataList == null ? [] as any[] : initialWidgetDataList);
|
||||
const [widgetCounter, setWidgetCounter] = useState(0);
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
@ -114,7 +121,15 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(initialWidgetDataList && initialWidgetDataList.length > 0)
|
||||
{
|
||||
// todo actually, should this check each element of the array, down in the loop? yeah, when we need to, do it that way.
|
||||
console.log("We already have initial widget data, so not fetching from backend.");
|
||||
return
|
||||
}
|
||||
|
||||
setWidgetData([]);
|
||||
|
||||
for (let i = 0; i < widgetMetaDataList.length; i++)
|
||||
{
|
||||
const widgetMetaData = widgetMetaDataList[i];
|
||||
@ -563,7 +578,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
|
||||
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
|
||||
labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
|
||||
>
|
||||
<CompositeWidget widgetMetaData={widgetMetaData} data={widgetData[i]} />
|
||||
<CompositeWidget widgetMetaData={widgetMetaData} data={widgetData[i]} actionCallback={actionCallback} values={values} />
|
||||
</Widget>
|
||||
)
|
||||
}
|
||||
|
||||
@ -22,6 +22,9 @@
|
||||
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {Alert, Skeleton} from "@mui/material";
|
||||
import ButtonBlock from "qqq/components/widgets/blocks/ButtonBlock";
|
||||
import AudioBlock from "qqq/components/widgets/blocks/AudioBlock";
|
||||
import InputFieldBlock from "qqq/components/widgets/blocks/InputFieldBlock";
|
||||
import React from "react";
|
||||
import BigNumberBlock from "qqq/components/widgets/blocks/BigNumberBlock";
|
||||
import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
|
||||
@ -32,19 +35,22 @@ import TableSubRowDetailRowBlock from "qqq/components/widgets/blocks/TableSubRow
|
||||
import TextBlock from "qqq/components/widgets/blocks/TextBlock";
|
||||
import UpOrDownNumberBlock from "qqq/components/widgets/blocks/UpOrDownNumberBlock";
|
||||
import CompositeWidget from "qqq/components/widgets/CompositeWidget";
|
||||
import ImageBlock from "./blocks/ImageBlock";
|
||||
|
||||
|
||||
interface WidgetBlockProps
|
||||
{
|
||||
widgetMetaData: QWidgetMetaData;
|
||||
block: BlockData;
|
||||
actionCallback?: (blockData: BlockData, eventValues?: {[name: string]: any}) => boolean;
|
||||
values?: { [key: string]: any };
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Component to render a single Block in the widget framework!
|
||||
*******************************************************************************/
|
||||
export default function WidgetBlock({widgetMetaData, block}: WidgetBlockProps): JSX.Element
|
||||
export default function WidgetBlock({widgetMetaData, block, actionCallback, values}: WidgetBlockProps): JSX.Element
|
||||
{
|
||||
if(!block)
|
||||
{
|
||||
@ -64,7 +70,7 @@ export default function WidgetBlock({widgetMetaData, block}: WidgetBlockProps):
|
||||
if(block.blockTypeName == "COMPOSITE")
|
||||
{
|
||||
// @ts-ignore - special case for composite type block...
|
||||
return (<CompositeWidget widgetMetaData={widgetMetaData} data={block} />);
|
||||
return (<CompositeWidget widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} values={values} />);
|
||||
}
|
||||
|
||||
switch(block.blockTypeName)
|
||||
@ -83,6 +89,14 @@ export default function WidgetBlock({widgetMetaData, block}: WidgetBlockProps):
|
||||
return (<DividerBlock widgetMetaData={widgetMetaData} data={block} />);
|
||||
case "BIG_NUMBER":
|
||||
return (<BigNumberBlock widgetMetaData={widgetMetaData} data={block} />);
|
||||
case "INPUT_FIELD":
|
||||
return (<InputFieldBlock widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} />);
|
||||
case "BUTTON":
|
||||
return (<ButtonBlock widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} />);
|
||||
case "AUDIO":
|
||||
return (<AudioBlock widgetMetaData={widgetMetaData} data={block} />);
|
||||
case "IMAGE":
|
||||
return (<ImageBlock widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} />);
|
||||
default:
|
||||
return (<Alert sx={{m: "0.5rem"}} color="warning">Unsupported block type: {block.blockTypeName}</Alert>)
|
||||
}
|
||||
|
||||
40
src/qqq/components/widgets/blocks/AudioBlock.tsx
Normal file
40
src/qqq/components/widgets/blocks/AudioBlock.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. 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 Box from "@mui/material/Box";
|
||||
import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
|
||||
import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
|
||||
import DumpJsonBox from "qqq/utils/DumpJsonBox";
|
||||
import React from "react";
|
||||
|
||||
/*******************************************************************************
|
||||
** Block that renders ... an audio tag
|
||||
**
|
||||
** <audio src=${path} ${autoPlay} ${showControls} />
|
||||
*******************************************************************************/
|
||||
export default function AudioBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
|
||||
{
|
||||
return (
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
|
||||
<audio src={data.values?.path} autoPlay={data.values?.autoPlay} controls={data.values?.showControls} />
|
||||
</BlockElementWrapper>
|
||||
);
|
||||
}
|
||||
@ -35,6 +35,8 @@ export interface BlockData
|
||||
|
||||
values: any;
|
||||
styles?: any;
|
||||
|
||||
conditional?: string;
|
||||
}
|
||||
|
||||
|
||||
@ -57,5 +59,6 @@ export interface StandardBlockComponentProps
|
||||
{
|
||||
widgetMetaData: QWidgetMetaData;
|
||||
data: BlockData;
|
||||
actionCallback?: (blockData: BlockData, eventValues?: {[name: string]: any}) => boolean;
|
||||
}
|
||||
|
||||
|
||||
86
src/qqq/components/widgets/blocks/ButtonBlock.tsx
Normal file
86
src/qqq/components/widgets/blocks/ButtonBlock.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. 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 Box from "@mui/material/Box";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {standardWidth} from "qqq/components/buttons/DefaultButtons";
|
||||
import MDButton from "qqq/components/legacy/MDButton";
|
||||
import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
|
||||
import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
|
||||
import React from "react";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Block that renders ... a button...
|
||||
**
|
||||
*******************************************************************************/
|
||||
export default function ButtonBlock({widgetMetaData, data, actionCallback}: StandardBlockComponentProps): JSX.Element
|
||||
{
|
||||
const startIcon = data.values.startIcon?.name ? <Icon>{data.values.startIcon.name}</Icon> : null;
|
||||
const endIcon = data.values.endIcon?.name ? <Icon>{data.values.endIcon.name}</Icon> : null;
|
||||
|
||||
function onClick()
|
||||
{
|
||||
if (actionCallback)
|
||||
{
|
||||
actionCallback(data, data.values);
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log("ButtonBlock onClick with no actionCallback present, so, noop");
|
||||
}
|
||||
}
|
||||
|
||||
let buttonVariant: "gradient" | "outlined" | "text" = "gradient";
|
||||
if (data.styles?.format == "outlined")
|
||||
{
|
||||
buttonVariant = "outlined";
|
||||
}
|
||||
else if (data.styles?.format == "text")
|
||||
{
|
||||
buttonVariant = "text";
|
||||
}
|
||||
else if (data.styles?.format == "filled")
|
||||
{
|
||||
buttonVariant = "gradient";
|
||||
}
|
||||
|
||||
// todo - button colors... but to do RGB's, might need to move away from MDButton?
|
||||
|
||||
return (
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
|
||||
<Box mx={1} my={1} minWidth={standardWidth}>
|
||||
<MDButton
|
||||
type="button"
|
||||
variant={buttonVariant}
|
||||
color="dark"
|
||||
size="small"
|
||||
fullWidth
|
||||
startIcon={startIcon}
|
||||
endIcon={endIcon}
|
||||
onClick={onClick}
|
||||
>
|
||||
{data.values.label ?? "Button"}
|
||||
</MDButton>
|
||||
</Box>
|
||||
</BlockElementWrapper>
|
||||
);
|
||||
}
|
||||
59
src/qqq/components/widgets/blocks/ImageBlock.tsx
Normal file
59
src/qqq/components/widgets/blocks/ImageBlock.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. 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 Box from "@mui/material/Box";
|
||||
import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
|
||||
import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
|
||||
import DumpJsonBox from "qqq/utils/DumpJsonBox";
|
||||
import React from "react";
|
||||
|
||||
/*******************************************************************************
|
||||
** Block that renders ... an image tag
|
||||
**
|
||||
** <audio src=${path} ${autoPlay} ${showControls} />
|
||||
*******************************************************************************/
|
||||
export default function AudioBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
|
||||
{
|
||||
let imageStyle: any = {};
|
||||
|
||||
if(data.styles?.width)
|
||||
{
|
||||
imageStyle.width = data.styles?.width;
|
||||
}
|
||||
|
||||
if(data.styles?.height)
|
||||
{
|
||||
imageStyle.height = data.styles?.height;
|
||||
}
|
||||
|
||||
if(data.styles?.bordered)
|
||||
{
|
||||
imageStyle.border = "1px solid #C0C0C0";
|
||||
imageStyle.borderRadius = "0.5rem";
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
|
||||
<img src={data.values?.path} alt={data.values?.alt} style={imageStyle} />
|
||||
</BlockElementWrapper>
|
||||
);
|
||||
}
|
||||
139
src/qqq/components/widgets/blocks/InputFieldBlock.tsx
Normal file
139
src/qqq/components/widgets/blocks/InputFieldBlock.tsx
Normal file
@ -0,0 +1,139 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. 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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import Box from "@mui/material/Box";
|
||||
import QDynamicFormField from "qqq/components/forms/DynamicFormField";
|
||||
import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
|
||||
import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
|
||||
import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
|
||||
import React, {SyntheticEvent, useState} from "react";
|
||||
|
||||
/*******************************************************************************
|
||||
** Block that renders ... a text input
|
||||
**
|
||||
*******************************************************************************/
|
||||
export default function InputFieldBlock({widgetMetaData, data, actionCallback}: StandardBlockComponentProps): JSX.Element
|
||||
{
|
||||
const [blurCount, setBlurCount] = useState(0)
|
||||
|
||||
const fieldMetaData = new QFieldMetaData(data.values.fieldMetaData);
|
||||
const dynamicField = DynamicFormUtils.getDynamicField(fieldMetaData);
|
||||
|
||||
let autoFocus = data.values.autoFocus as boolean
|
||||
let value = data.values.value;
|
||||
if(value == null || value == undefined)
|
||||
{
|
||||
value = "";
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// for an autoFocus field... //
|
||||
// we're finding that if we blur it when clicking an action button, that //
|
||||
// an un-desirable "now it's been touched, so show an error" happens. //
|
||||
// so let us remove the default blur handler, for the first (auto) focus/blur //
|
||||
// cycle, and we seem to have a better time. //
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
let dynamicFormFieldRest: {onBlur?: any, sx?: any} = {}
|
||||
if(autoFocus && blurCount == 0)
|
||||
{
|
||||
dynamicFormFieldRest.onBlur = (event: React.SyntheticEvent) =>
|
||||
{
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
setBlurCount(blurCount + 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
function eventHandler(event: KeyboardEvent)
|
||||
{
|
||||
if(data.values.submitOnEnter && event.key == "Enter")
|
||||
{
|
||||
// @ts-ignore target.value...
|
||||
const inputValue = event.target.value?.trim()
|
||||
|
||||
// todo - make this behavior opt-in for inputBlocks?
|
||||
if(inputValue && `${inputValue}`.startsWith("->"))
|
||||
{
|
||||
const actionCode = inputValue.substring(2);
|
||||
if(actionCallback)
|
||||
{
|
||||
actionCallback(data, {actionCode: actionCode, _fieldToClearIfError: fieldMetaData.name});
|
||||
|
||||
///////////////////////////////////////////////////////
|
||||
// return, so we don't submit the actionCode as text //
|
||||
///////////////////////////////////////////////////////
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if(fieldMetaData.isRequired && inputValue == "")
|
||||
{
|
||||
console.log("input field is required, but missing value, so not submitting");
|
||||
return;
|
||||
}
|
||||
|
||||
if(actionCallback)
|
||||
{
|
||||
console.log("InputFieldBlock calling actionCallback for submitOnEnter");
|
||||
|
||||
let values: {[name: string]: any} = {};
|
||||
values[fieldMetaData.name] = inputValue;
|
||||
|
||||
actionCallback(data, values);
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log("InputFieldBlock was set as submitOnEnter, but no actionCallback was present, so, noop");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const labelElement = <Box fontSize="1rem" fontWeight="500" marginBottom="0.25rem">
|
||||
<label htmlFor={fieldMetaData.name}>{fieldMetaData.label}</label>
|
||||
</Box>
|
||||
|
||||
return (
|
||||
<Box mt="0.5rem">
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
|
||||
<>
|
||||
{labelElement}
|
||||
<QDynamicFormField
|
||||
name={fieldMetaData.name}
|
||||
displayFormat={null}
|
||||
label=""
|
||||
placeholder={data.values?.placeholder}
|
||||
backgroundColor="#FFFFFF"
|
||||
formFieldObject={dynamicField}
|
||||
type={fieldMetaData.type}
|
||||
value={value}
|
||||
autoFocus={autoFocus}
|
||||
onKeyUp={eventHandler}
|
||||
{...dynamicFormFieldRest} />
|
||||
</>
|
||||
</BlockElementWrapper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@ -19,8 +19,12 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import Box from "@mui/material/Box";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
|
||||
import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
|
||||
import ProcessWidgetBlockUtils from "qqq/pages/processes/ProcessWidgetBlockUtils";
|
||||
import React from "react";
|
||||
|
||||
/*******************************************************************************
|
||||
** Block that renders ... just some text.
|
||||
@ -29,9 +33,132 @@ import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockMo
|
||||
*******************************************************************************/
|
||||
export default function TextBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
|
||||
{
|
||||
let color = "rgba(0, 0, 0, 0.87)";
|
||||
if (data.styles?.color)
|
||||
{
|
||||
color = ProcessWidgetBlockUtils.processColorFromStyleMap(data.styles.color);
|
||||
}
|
||||
|
||||
let boxStyle = {};
|
||||
if (data.styles?.format == "alert")
|
||||
{
|
||||
boxStyle =
|
||||
{
|
||||
border: `1px solid ${color}`,
|
||||
background: `${color}40`,
|
||||
padding: "0.5rem",
|
||||
borderRadius: "0.5rem",
|
||||
};
|
||||
}
|
||||
else if (data.styles?.format == "banner")
|
||||
{
|
||||
boxStyle =
|
||||
{
|
||||
background: `${color}40`,
|
||||
padding: "0.5rem",
|
||||
};
|
||||
}
|
||||
|
||||
let fontSize = "1rem";
|
||||
if (data.styles?.size)
|
||||
{
|
||||
switch (data.styles.size.toLowerCase())
|
||||
{
|
||||
case "largest":
|
||||
fontSize = "3rem";
|
||||
break;
|
||||
case "headline":
|
||||
fontSize = "2rem";
|
||||
break;
|
||||
case "title":
|
||||
fontSize = "1.5rem";
|
||||
break;
|
||||
case "body":
|
||||
fontSize = "1rem";
|
||||
break;
|
||||
case "smallest":
|
||||
fontSize = "0.75rem";
|
||||
break;
|
||||
default:
|
||||
{
|
||||
if (data.styles.size.match(/^\d+$/))
|
||||
{
|
||||
fontSize = `${data.styles.size}px`;
|
||||
}
|
||||
else
|
||||
{
|
||||
fontSize = "1rem";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let fontWeight = "400";
|
||||
if (data.styles?.weight)
|
||||
{
|
||||
switch (data.styles.weight.toLowerCase())
|
||||
{
|
||||
case "thin":
|
||||
case "100":
|
||||
fontWeight = "100";
|
||||
break;
|
||||
case "extralight":
|
||||
case "200":
|
||||
fontWeight = "200";
|
||||
break;
|
||||
case "light":
|
||||
case "300":
|
||||
fontWeight = "300";
|
||||
break;
|
||||
case "normal":
|
||||
case "400":
|
||||
fontWeight = "400";
|
||||
break;
|
||||
case "medium":
|
||||
case "500":
|
||||
fontWeight = "500";
|
||||
break;
|
||||
case "semibold":
|
||||
case "600":
|
||||
fontWeight = "600";
|
||||
break;
|
||||
case "bold":
|
||||
case "700":
|
||||
fontWeight = "700";
|
||||
break;
|
||||
case "extrabold":
|
||||
case "800":
|
||||
fontWeight = "800";
|
||||
break;
|
||||
case "black":
|
||||
case "900":
|
||||
fontWeight = "900";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const text = data.values.interpolatedText ?? data.values.text;
|
||||
const lines = text.split("\n");
|
||||
|
||||
const startIcon = data.values.startIcon?.name ? <Icon>{data.values.startIcon.name}</Icon> : null;
|
||||
const endIcon = data.values.endIcon?.name ? <Icon>{data.values.endIcon.name}</Icon> : null;
|
||||
|
||||
return (
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
|
||||
<span style={{fontSize: "1.000rem"}}>{data.values.text}</span>
|
||||
<Box display="inline-block" lineHeight="1.2" sx={boxStyle}>
|
||||
<span style={{fontSize: fontSize, color: color, fontWeight: fontWeight}}>
|
||||
{lines.map((line: string, index: number) =>
|
||||
(
|
||||
<div key={index}>
|
||||
<>
|
||||
{index == 0 && startIcon ? {startIcon} : null}
|
||||
{line}
|
||||
{index == lines.length - 1 && endIcon ? {endIcon} : null}
|
||||
</>
|
||||
</div>
|
||||
))
|
||||
}</span>
|
||||
</Box>
|
||||
</BlockElementWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
38
src/qqq/models/fields/FieldPossibleValueProps.ts
Normal file
38
src/qqq/models/fields/FieldPossibleValueProps.ts
Normal file
@ -0,0 +1,38 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. 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 {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
|
||||
|
||||
/*******************************************************************************
|
||||
** Properties attached to a (formik?) form field, to denote how it behaves as
|
||||
** as related to a possible value source.
|
||||
*******************************************************************************/
|
||||
export interface FieldPossibleValueProps
|
||||
{
|
||||
isPossibleValue?: boolean;
|
||||
possibleValues?: QPossibleValue[];
|
||||
initialDisplayValue: string | null;
|
||||
fieldName?: string;
|
||||
tableName?: string;
|
||||
processName?: string;
|
||||
possibleValueSourceName?: string;
|
||||
}
|
||||
|
||||
@ -29,6 +29,7 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
|
||||
import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
|
||||
import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
|
||||
@ -36,12 +37,14 @@ import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJob
|
||||
import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
|
||||
import {Alert, Box, Button, CircularProgress, Icon, TablePagination} from "@mui/material";
|
||||
import {Alert, Button, CircularProgress, Icon, TablePagination} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Step from "@mui/material/Step";
|
||||
import StepLabel from "@mui/material/StepLabel";
|
||||
import Stepper from "@mui/material/Stepper";
|
||||
import {Theme} from "@mui/material/styles";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
|
||||
import FormData from "form-data";
|
||||
@ -60,8 +63,11 @@ import QRecordSidebar from "qqq/components/misc/RecordSidebar";
|
||||
import {GoogleDriveFolderPickerWrapper} from "qqq/components/processes/GoogleDriveFolderPickerWrapper";
|
||||
import ProcessSummaryResults from "qqq/components/processes/ProcessSummaryResults";
|
||||
import ValidationReview from "qqq/components/processes/ValidationReview";
|
||||
import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
|
||||
import CompositeWidget, {CompositeData} from "qqq/components/widgets/CompositeWidget";
|
||||
import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
|
||||
import BaseLayout from "qqq/layouts/BaseLayout";
|
||||
import ProcessWidgetBlockUtils from "qqq/pages/processes/ProcessWidgetBlockUtils";
|
||||
import {TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT} from "qqq/pages/records/query/RecordQuery";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import TableUtils from "qqq/utils/qqq/TableUtils";
|
||||
@ -89,14 +95,18 @@ const INITIAL_RETRY_MILLIS = 1_500;
|
||||
const RETRY_MAX_MILLIS = 12_000;
|
||||
const BACKOFF_AMOUNT = 1.5;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
// define a function that we can make referenes to, which we'll overwrite //
|
||||
// with formik's setFieldValue function, once we're inside formik. //
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// define some functions that we can make reference to, which we'll overwrite //
|
||||
// with functions from formik, once we're inside formik. //
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
let formikSetFieldValueFunction = (field: string, value: any, shouldValidate?: boolean): void =>
|
||||
{
|
||||
};
|
||||
|
||||
let formikSetTouched = ({}: any, touched: boolean): void =>
|
||||
{
|
||||
};
|
||||
|
||||
const cachedPossibleValueLabels: { [fieldName: string]: { [id: string | number]: string } } = {};
|
||||
|
||||
function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, isReport, recordIds, closeModalHandler, forceReInit, overrideLabel}: Props): JSX.Element
|
||||
@ -120,6 +130,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
const [activeStepIndex, setActiveStepIndex] = useState(0);
|
||||
const [activeStep, setActiveStep] = useState(null as QFrontendStepMetaData);
|
||||
const [newStep, setNewStep] = useState(null);
|
||||
const [stepInstanceCounter, setStepInstanceCounter] = useState(0);
|
||||
const [steps, setSteps] = useState([] as QFrontendStepMetaData[]);
|
||||
const [needInitialLoad, setNeedInitialLoad] = useState(true);
|
||||
const [lastForcedReInit, setLastForcedReInit] = useState(null as number);
|
||||
@ -136,8 +147,10 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
);
|
||||
const [showErrorDetail, setShowErrorDetail] = useState(false);
|
||||
const [showFullHelpText, setShowFullHelpText] = useState(false);
|
||||
const [previouslySeenUpdatedFieldMetaDataMap, setPreviouslySeenUpdatedFieldMetaDataMap] = useState(new Map<string, QFieldMetaData>);
|
||||
|
||||
const [renderedWidgets, setRenderedWidgets] = useState({} as { [step: string]: { [widgetName: string]: any } });
|
||||
const [controlCallbacks, setControlCallbacks] = useState({} as {[name: string]: () => void})
|
||||
|
||||
const {pageHeader, recordAnalytics, setPageHeader, helpHelpActive} = useContext(QContext);
|
||||
|
||||
@ -155,8 +168,30 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const [overrideOnLastStep, setOverrideOnLastStep] = useState(null as boolean);
|
||||
|
||||
const onLastStep = activeStepIndex === steps.length - 2;
|
||||
const noMoreSteps = activeStepIndex === steps.length - 1;
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
// determine if we're on the last-step or not (e.g., to decide "Submit" vs "Next") //
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
let onLastStep = false;
|
||||
if (processMetaData?.stepFlow == "LINEAR" && activeStepIndex === steps.length - 2)
|
||||
{
|
||||
onLastStep = true;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////
|
||||
// determine if any 'next' button appears //
|
||||
////////////////////////////////////////////
|
||||
let noMoreSteps = false;
|
||||
if (processMetaData?.stepFlow == "LINEAR" && activeStepIndex === steps.length - 1)
|
||||
{
|
||||
noMoreSteps = true;
|
||||
}
|
||||
if(processValues["noMoreSteps"])
|
||||
{
|
||||
//////////////////////////////////////////////////////////////////
|
||||
// this, to allow a non-linear process to request this behavior //
|
||||
//////////////////////////////////////////////////////////////////
|
||||
noMoreSteps = true;
|
||||
}
|
||||
|
||||
////////////////
|
||||
// form state //
|
||||
@ -317,13 +352,159 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
queryStringParts.push(`${name}=${encodeURIComponent(processValues[name])}`);
|
||||
}
|
||||
|
||||
let initialWidgetDataList = null;
|
||||
if(processValues[widgetName])
|
||||
{
|
||||
processValues[widgetName].hasPermission = true
|
||||
initialWidgetDataList = [processValues[widgetName]]
|
||||
}
|
||||
|
||||
const renderedWidget = (<Box m={-2}>
|
||||
<DashboardWidgets widgetMetaDataList={[widgetMetaData]} omitWrappingGridContainer={true} childUrlParams={queryStringParts.join("&")} />
|
||||
<DashboardWidgets widgetMetaDataList={[widgetMetaData]} omitWrappingGridContainer={true} childUrlParams={queryStringParts.join("&")} initialWidgetDataList={initialWidgetDataList} values={processValues} actionCallback={blockWidgetActionCallback} />
|
||||
</Box>);
|
||||
renderedWidgets[activeStep.name][widgetName] = renderedWidget;
|
||||
return renderedWidget;
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
function handleControlCode(controlCode: string)
|
||||
{
|
||||
const split = controlCode.split(":", 2);
|
||||
let controlCallbackName: string;
|
||||
let controlCallbackValue: any
|
||||
if(split.length == 2)
|
||||
{
|
||||
if(split[0] == "showModal")
|
||||
{
|
||||
processValues[split[1]] = true
|
||||
controlCallbackName = split[1]
|
||||
controlCallbackValue = true
|
||||
}
|
||||
else if(split[0] == "hideModal")
|
||||
{
|
||||
processValues[split[1]] = false
|
||||
controlCallbackName = split[1]
|
||||
controlCallbackValue = false
|
||||
}
|
||||
else if(split[0] == "toggleModal")
|
||||
{
|
||||
const currentValue = processValues[split[1]]
|
||||
processValues[split[1]] = !!!currentValue;
|
||||
controlCallbackName = split[1]
|
||||
controlCallbackValue = processValues[split[1]]
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log(`Unexpected part[0] (before colon) in controlCode: [${controlCode}]`)
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log(`Expected controlCode to have 2 colon-delimited parts, but was: [${controlCode}]`)
|
||||
}
|
||||
|
||||
if(controlCallbackName && controlCallbacks[controlCallbackName])
|
||||
{
|
||||
// @ts-ignore ... args are hard
|
||||
controlCallbacks[controlCallbackName](controlCallbackValue)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
** callback used by widget blocks, e.g., for input-text-enter-on-submit,
|
||||
** and action buttons.
|
||||
***************************************************************************/
|
||||
function blockWidgetActionCallback(blockData: BlockData, eventValues?: { [name: string]: any }): boolean
|
||||
{
|
||||
console.log(`in blockWidgetActionCallback, called by block: ${JSON.stringify(blockData)}`);
|
||||
|
||||
if(eventValues?.registerControlCallbackName && eventValues?.registerControlCallbackFunction)
|
||||
{
|
||||
controlCallbacks[eventValues.registerControlCallbackName] = eventValues.registerControlCallbackFunction;
|
||||
setControlCallbacks(controlCallbacks)
|
||||
return (true)
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// we don't validate these on the android frontend, and it seems fine - just let the app validate it? //
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// ///////////////////////////////////////////////////////////////////////////////
|
||||
// // if the eventValues included an actionCode - validate it before proceeding //
|
||||
// ///////////////////////////////////////////////////////////////////////////////
|
||||
// if (eventValues && eventValues.actionCode && !ProcessWidgetBlockUtils.isActionCodeValid(eventValues.actionCode, activeStep, processValues))
|
||||
// {
|
||||
// setFormError("Unrecognized action code: " + eventValues.actionCode);
|
||||
// if (eventValues["_fieldToClearIfError"])
|
||||
// {
|
||||
// /////////////////////////////////////////////////////////////////////////////
|
||||
// // if the eventValues included a _fieldToClearIfError, well, then do that. //
|
||||
// /////////////////////////////////////////////////////////////////////////////
|
||||
// formikSetFieldValueFunction(eventValues["_fieldToClearIfError"], "", false);
|
||||
// }
|
||||
// return (false);
|
||||
// }
|
||||
|
||||
let doSubmit = false;
|
||||
if(blockData?.blockTypeName == "BUTTON" && eventValues?.actionCode)
|
||||
{
|
||||
doSubmit = true
|
||||
}
|
||||
else if(blockData?.blockTypeName == "BUTTON" && eventValues?.controlCode)
|
||||
{
|
||||
handleControlCode(eventValues.controlCode);
|
||||
doSubmit = false
|
||||
}
|
||||
else if(blockData?.blockTypeName == "INPUT_FIELD")
|
||||
{
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// if action callback was fired from an input field, assume that means we're good to submit. //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////
|
||||
doSubmit = true
|
||||
}
|
||||
|
||||
//////////////////
|
||||
// ok - submit! //
|
||||
//////////////////
|
||||
if(doSubmit)
|
||||
{
|
||||
handleSubmit(eventValues);
|
||||
return (true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
** in a memoized-fashion (YUNO useMemo?), render a component that is an
|
||||
** adHoc widget (e.g., composite)
|
||||
***************************************************************************/
|
||||
function renderAdHocWidget(componentValues: any, componentIndex: number)
|
||||
{
|
||||
const key = activeStep.name + "-" + stepInstanceCounter + "-" + componentIndex;
|
||||
if (renderedWidgets[key])
|
||||
{
|
||||
return renderedWidgets[key];
|
||||
}
|
||||
|
||||
const widgetMetaData = new QWidgetMetaData({name: "adHoc"});
|
||||
const compositeWidgetData = JSON.parse(JSON.stringify(componentValues)) as CompositeData;
|
||||
compositeWidgetData.styleOverrides = {py: "0.5rem", display: "flex", flexDirection: "column", gap: "0.5rem"};
|
||||
|
||||
ProcessWidgetBlockUtils.dynamicEvaluationOfCompositeWidgetData(compositeWidgetData, processValues);
|
||||
|
||||
renderedWidgets[key] = <Box key={key} pt={2}>
|
||||
<CompositeWidget widgetMetaData={widgetMetaData} data={compositeWidgetData} actionCallback={blockWidgetActionCallback} values={processValues} />
|
||||
</Box>;
|
||||
|
||||
setRenderedWidgets(renderedWidgets);
|
||||
|
||||
return (renderedWidgets[key]);
|
||||
}
|
||||
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
// generate the main form body content for a step //
|
||||
////////////////////////////////////////////////////
|
||||
@ -382,7 +563,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
if (qJobRunning || step === null)
|
||||
{
|
||||
return (
|
||||
<Grid m={3} mt={9} container>
|
||||
<Grid m={3} mt={9} container maxWidth="calc(100% - 3rem)">
|
||||
<Grid item xs={0} lg={3} />
|
||||
<Grid item xs={12} lg={6}>
|
||||
<Card>
|
||||
@ -477,6 +658,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"];
|
||||
const showHelp = helpHelpActive || hasHelpContent(step.helpContents, helpRoles);
|
||||
const formattedHelpContent = <HelpContent helpContents={step.helpContents} roles={helpRoles} helpContentKey={`process:${processName};step:${step?.name}`} />;
|
||||
const isFormatScanner = step?.format?.toLowerCase() == "scanner"
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -485,7 +667,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
// hide label on widgets - the Widget component itself provides the label //
|
||||
// for modals, show the process label, but not for full-screen processes (for them, it is in the breadcrumb) //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
!isWidget &&
|
||||
!isWidget && !isFormatScanner &&
|
||||
<MDTypography variant={isWidget ? "h6" : "h5"} component="div" fontWeight="bold">
|
||||
{(isModal) ? `${overrideLabel ?? process.label}: ` : ""}
|
||||
{step?.label}
|
||||
@ -763,8 +945,29 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.WIDGET && (
|
||||
component.values?.widgetName &&
|
||||
renderWidget(component.values?.widgetName)
|
||||
<>
|
||||
{
|
||||
///////////////////////////////////////////////////
|
||||
// if a widget name is given, render that widget //
|
||||
///////////////////////////////////////////////////
|
||||
component.values?.widgetName &&
|
||||
renderWidget(component.values?.widgetName)
|
||||
}
|
||||
{
|
||||
/////////////////////////////////////////////////////////
|
||||
// if the widget is marked as adHoc, render it as such //
|
||||
/////////////////////////////////////////////////////////
|
||||
component.values?.isAdHocWidget &&
|
||||
renderAdHocWidget(component.values, index)
|
||||
}
|
||||
{
|
||||
////////////////////////////////////////////////
|
||||
// if neither of those, then programmer error //
|
||||
////////////////////////////////////////////////
|
||||
!(component.values?.widgetName || component.values?.isAdHocWidget) &&
|
||||
<Alert severity="error">Error: Component is marked as WIDGET type, but does not specify a <u>widgetName</u>, nor the <u>isAdHocWidget</u> flag.</Alert>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
@ -864,6 +1067,11 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
setActiveStepIndex(newIndex);
|
||||
setOverrideOnLastStep(null);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// reset formik touched data, so a field that's repeated doesn't immediately show a 'dirty' state //
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
formikSetTouched({}, false);
|
||||
|
||||
if (steps)
|
||||
{
|
||||
const activeStep = steps[newIndex];
|
||||
@ -899,7 +1107,17 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
if (doesStepHaveComponent(activeStep, QComponentType.VALIDATION_REVIEW_SCREEN))
|
||||
{
|
||||
addField("doFullValidation", {type: "radio"}, "true", null);
|
||||
setOverrideOnLastStep(false);
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// so - if we're on the validation screen, and we don't have a validationSummary right now, //
|
||||
// and the process supports doing full validation - then the user will choose, via radio, //
|
||||
// if this is the last step or not - and by default that radio will be true, to make this //
|
||||
// NOT the last step - so set this value. //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if(!processValues["validationSummary"] && processValues["supportsFullValidation"])
|
||||
{
|
||||
setOverrideOnLastStep(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (doesStepHaveComponent(activeStep, QComponentType.GOOGLE_DRIVE_SELECT_FOLDER))
|
||||
@ -909,6 +1127,16 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
addField("googleDriveFolderName", {type: "hidden", omitFromQDynamicForm: true}, "", null);
|
||||
}
|
||||
|
||||
if (doesStepHaveComponent(activeStep, QComponentType.WIDGET))
|
||||
{
|
||||
ProcessWidgetBlockUtils.addFieldsForCompositeWidget(activeStep, processValues, (fieldMetaData) =>
|
||||
{
|
||||
const dynamicField = DynamicFormUtils.getDynamicField(fieldMetaData);
|
||||
const validation = DynamicFormUtils.getValidationForField(fieldMetaData);
|
||||
addField(fieldMetaData.name, dynamicField, processValues[fieldMetaData.name], validation)
|
||||
});
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////
|
||||
// if this step has form fields, set up the form //
|
||||
///////////////////////////////////////////////////
|
||||
@ -994,7 +1222,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
setValidationFunction(() => true);
|
||||
}
|
||||
}
|
||||
}, [newStep]);
|
||||
}, [newStep, stepInstanceCounter]); // maybe we could just use stepInstanceCounter...
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// if there are records to load: build a record config, and set the needRecords state flag //
|
||||
@ -1088,6 +1316,47 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
}
|
||||
}, [needRecords]);
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
function updateFieldsInProcess(steps: QFrontendStepMetaData[], updatedFields: Map<string, QFieldMetaData>)
|
||||
{
|
||||
if (updatedFields)
|
||||
{
|
||||
updatedFields.forEach((field) => previouslySeenUpdatedFieldMetaDataMap.set(field.name, field));
|
||||
setPreviouslySeenUpdatedFieldMetaDataMap(previouslySeenUpdatedFieldMetaDataMap);
|
||||
}
|
||||
|
||||
for (let step of steps)
|
||||
{
|
||||
if (step && step.formFields)
|
||||
{
|
||||
for (let i = 0; i < step.formFields.length; i++)
|
||||
{
|
||||
let field = step.formFields[i];
|
||||
if (previouslySeenUpdatedFieldMetaDataMap.has(field.name))
|
||||
{
|
||||
step.formFields[i] = previouslySeenUpdatedFieldMetaDataMap.get(field.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (processValues.inputFieldList)
|
||||
{
|
||||
for (let i = 0; i < processValues.inputFieldList.length; i++)
|
||||
{
|
||||
let field = new QFieldMetaData(processValues.inputFieldList[i]);
|
||||
if (previouslySeenUpdatedFieldMetaDataMap.has(field.name))
|
||||
{
|
||||
processValues.inputFieldList[i] = previouslySeenUpdatedFieldMetaDataMap.get(field.name); // todo - uh, not an object?
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// handle a response from the server - e.g., after starting a backend job, or getting its status/result //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
@ -1112,13 +1381,19 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
// if the process step sent a new frontend-step-list, then refresh what we have in state (constructing new full model objects) //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
let frontendSteps = steps;
|
||||
const updatedFrontendStepList = qJobComplete.updatedFrontendStepList;
|
||||
const updatedFrontendStepList = qJobComplete.processMetaDataAdjustment?.updatedFrontendStepList;
|
||||
if (updatedFrontendStepList)
|
||||
{
|
||||
setSteps(updatedFrontendStepList);
|
||||
frontendSteps = updatedFrontendStepList;
|
||||
setSteps(frontendSteps);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// always merge the new updatedFields map (if there is one) with existing updates and existing fields //
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
updateFieldsInProcess(frontendSteps, qJobComplete.processMetaDataAdjustment?.updatedFields);
|
||||
setSteps(frontendSteps);
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////////
|
||||
// if the next screen has any PVS fields - look up their labels (display values) //
|
||||
///////////////////////////////////////////////////////////////////////////////////
|
||||
@ -1159,7 +1434,9 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
|
||||
setJobUUID(null);
|
||||
setNewStep(nextStepName);
|
||||
setStepInstanceCounter(1 + stepInstanceCounter);
|
||||
setProcessValues(newValues);
|
||||
setRenderedWidgets({});
|
||||
setQJobRunning(null);
|
||||
|
||||
if (formikSetFieldValueFunction)
|
||||
@ -1415,8 +1692,9 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
// handle user submitting the form - which in qqq means moving forward from any screen. //
|
||||
// caller can pass in a map of values to be added to the form data too //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
const handleSubmit = async (values: any, actions: any) =>
|
||||
const handleSubmit = async (values: any) =>
|
||||
{
|
||||
setFormError(null);
|
||||
|
||||
@ -1506,27 +1784,54 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
};
|
||||
|
||||
|
||||
const mainCardStyles: any = {};
|
||||
const formStyles: any = {};
|
||||
mainCardStyles.minHeight = `calc(100vh - ${isModal ? 150 : 400}px)`;
|
||||
if (!processError && (qJobRunning || activeStep === null) && !isModal && !isWidget)
|
||||
if(isWidget)
|
||||
{
|
||||
mainCardStyles.background = "#FFFFFF";
|
||||
mainCardStyles.boxShadow = "none";
|
||||
}
|
||||
if (isWidget)
|
||||
{
|
||||
mainCardStyles.background = "none";
|
||||
mainCardStyles.boxShadow = "none";
|
||||
mainCardStyles.border = "none";
|
||||
mainCardStyles.minHeight = "";
|
||||
mainCardStyles.alignItems = "stretch";
|
||||
mainCardStyles.flexGrow = 1;
|
||||
mainCardStyles.display = "flex";
|
||||
formStyles.display = "flex";
|
||||
formStyles.flexGrow = 1;
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
function makeMainCardStyles(theme: Theme)
|
||||
{
|
||||
const mainCardStyles: any = {};
|
||||
|
||||
if(!isWidget && !isModal)
|
||||
{
|
||||
////////////////////////////////////////////////////////////////
|
||||
// remove margin around card for non-widget, non-modal, small //
|
||||
////////////////////////////////////////////////////////////////
|
||||
mainCardStyles[theme.breakpoints.down("sm")] = {
|
||||
marginLeft: "-1.5rem",
|
||||
marginRight: "-1.5rem",
|
||||
borderRadius: "0"
|
||||
};
|
||||
}
|
||||
|
||||
mainCardStyles.minHeight = `calc(100vh - ${isModal ? 150 : 400}px)`;
|
||||
if (!processError && (qJobRunning || activeStep === null) && !isModal && !isWidget)
|
||||
{
|
||||
mainCardStyles.background = "#FFFFFF";
|
||||
mainCardStyles.boxShadow = "none";
|
||||
}
|
||||
|
||||
if (isWidget)
|
||||
{
|
||||
mainCardStyles.background = "none";
|
||||
mainCardStyles.boxShadow = "none";
|
||||
mainCardStyles.border = "none";
|
||||
mainCardStyles.minHeight = "";
|
||||
mainCardStyles.alignItems = "stretch";
|
||||
mainCardStyles.flexGrow = 1;
|
||||
mainCardStyles.display = "flex";
|
||||
}
|
||||
|
||||
return mainCardStyles
|
||||
}
|
||||
|
||||
let nextButtonLabel = "Next";
|
||||
let nextButtonIcon = "arrow_forward";
|
||||
if (overrideOnLastStep !== null)
|
||||
@ -1552,20 +1857,21 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{({
|
||||
values, errors, touched, isSubmitting, setFieldValue,
|
||||
values, errors, touched, isSubmitting, setFieldValue, setTouched
|
||||
}) =>
|
||||
{
|
||||
///////////////////////////////////////////////////////////////////
|
||||
// once we're in the formik form, use its setFieldValue function //
|
||||
// over top of the default one we created globally //
|
||||
///////////////////////////////////////////////////////////////////
|
||||
//////////////////////////////////////////////////////////////////
|
||||
// once we're in the formik form, capture some of its functions //
|
||||
// over top of the default ones we created globally //
|
||||
//////////////////////////////////////////////////////////////////
|
||||
formikSetFieldValueFunction = setFieldValue;
|
||||
formikSetTouched = setTouched;
|
||||
|
||||
return (
|
||||
<Form style={formStyles} id={formId} autoComplete="off">
|
||||
<Card sx={mainCardStyles}>
|
||||
<Card sx={makeMainCardStyles}>
|
||||
{
|
||||
!isWidget && (
|
||||
!isWidget && processMetaData?.stepFlow == "LINEAR" && (
|
||||
<Box mx={2} mt={-3} sx={{"& .MuiStepper-horizontal": {minHeight: "5rem"}}}>
|
||||
<Stepper activeStep={activeStepIndex} alternativeLabel>
|
||||
{steps.map((step) => (
|
||||
@ -1600,21 +1906,16 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
{/********************************
|
||||
** back &| next/submit buttons **
|
||||
********************************/}
|
||||
<Box mt={6} width="100%" display="flex" justifyContent="space-between" position={isWidget ? "absolute" : "initial"} bottom={isWidget ? "3rem" : "initial"} right={isWidget ? "1.5rem" : "initial"}>
|
||||
<Box mt={3} width="100%" display="flex" justifyContent="space-between" position={isWidget ? "absolute" : "initial"} bottom={isWidget ? "3rem" : "initial"} right={isWidget ? "1.5rem" : "initial"}>
|
||||
{true || activeStepIndex === 0 ? (
|
||||
<Box />
|
||||
) : (
|
||||
<MDButton variant="gradient" color="light" onClick={handleBack}>back</MDButton>
|
||||
)}
|
||||
{processError || qJobRunning || !activeStep ? (
|
||||
{processError || qJobRunning || !activeStep || activeStep?.format?.toLowerCase() == "scanner" ? (
|
||||
<Box />
|
||||
) : (
|
||||
<>
|
||||
{formError && (
|
||||
<MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
|
||||
{formError}
|
||||
</MDTypography>
|
||||
)}
|
||||
{
|
||||
noMoreSteps && <QCancelButton
|
||||
onClickHandler={() => handleCancelClicked(true)}
|
||||
@ -1650,9 +1951,10 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
|
||||
const body = (
|
||||
<Box py={3} mb={20} className="processRun">
|
||||
<Grid container justifyContent="center" alignItems="center" sx={{height: "100%", mt: 8}}>
|
||||
<Grid container justifyContent="center" alignItems="center" mt={{xs: 0, md: 6}} sx={{height: "100%"}}>
|
||||
<Grid item xs={12} lg={10} xl={8}>
|
||||
{form}
|
||||
{formError && <Alert severity="error" onClose={() => setFormError(null)} sx={{position: "fixed", top: "40px", left: "10vw", width: "calc(80vw)", zIndex: "99999"}}>{formError}</Alert>}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
268
src/qqq/pages/processes/ProcessWidgetBlockUtils.tsx
Normal file
268
src/qqq/pages/processes/ProcessWidgetBlockUtils.tsx
Normal file
@ -0,0 +1,268 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. 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 {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
|
||||
import {CompositeData} from "qqq/components/widgets/CompositeWidget";
|
||||
|
||||
/*******************************************************************************
|
||||
** Utility functions used by ProcessRun for working with ad-hoc, block &
|
||||
** composite type widgets.
|
||||
**
|
||||
*******************************************************************************/
|
||||
export default class ProcessWidgetBlockUtils
|
||||
{
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public static isActionCodeValid(actionCode: string, step: QFrontendStepMetaData, processValues: any): boolean
|
||||
{
|
||||
///////////////////////////////////////////////////////////
|
||||
// private recursive function to walk the composite tree //
|
||||
///////////////////////////////////////////////////////////
|
||||
function recursiveIsActionCodeValidForCompositeData(compositeWidgetData: CompositeData): boolean
|
||||
{
|
||||
for (let i = 0; i < compositeWidgetData.blocks.length; i++)
|
||||
{
|
||||
const block = compositeWidgetData.blocks[i];
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// skip the block if it has a 'conditional', which isn't true //
|
||||
////////////////////////////////////////////////////////////////
|
||||
const conditionalFieldName = block.conditional;
|
||||
if (conditionalFieldName)
|
||||
{
|
||||
const value = processValues[conditionalFieldName];
|
||||
if (!value)
|
||||
{
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (block.blockTypeName == "COMPOSITE")
|
||||
{
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// recursive call for composites, but only return if a true is found (in case a subsequent block has a true) //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const isValidForThisBlock = recursiveIsActionCodeValidForCompositeData(block as unknown as CompositeData);
|
||||
if (isValidForThisBlock)
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
// else, continue...
|
||||
}
|
||||
else if (block.blockTypeName == "BUTTON")
|
||||
{
|
||||
//////////////////////////////////////////
|
||||
// look at actionCodes on button blocks //
|
||||
//////////////////////////////////////////
|
||||
if (block.values?.actionCode == actionCode)
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////////////////
|
||||
// if code wasn't found, it is invalid //
|
||||
/////////////////////////////////////////
|
||||
return false;
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////
|
||||
// iterate over all components in the current step //
|
||||
/////////////////////////////////////////////////////
|
||||
for (let i = 0; i < step.components.length; i++)
|
||||
{
|
||||
const component = step.components[i];
|
||||
if (component.type == "WIDGET" && component.values?.isAdHocWidget)
|
||||
{
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// for ad-hoc widget components, check if this actionCode exists on any action-button blocks //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const isValidForThisWidget = recursiveIsActionCodeValidForCompositeData(component.values);
|
||||
if (isValidForThisWidget)
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////
|
||||
// upon fallthrough, it's a false //
|
||||
////////////////////////////////////
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
** perform evaluations on a compositeWidget's data, given current process
|
||||
** values, to do dynamic stuff, like:
|
||||
** - removing fields with un-true conditions
|
||||
***************************************************************************/
|
||||
public static dynamicEvaluationOfCompositeWidgetData(compositeWidgetData: CompositeData, processValues: any)
|
||||
{
|
||||
for (let i = 0; i < compositeWidgetData.blocks.length; i++)
|
||||
{
|
||||
const block = compositeWidgetData.blocks[i];
|
||||
|
||||
////////////////////////////////////////////////////////////////////
|
||||
// if the block has a conditional, evaluate, and remove if untrue //
|
||||
////////////////////////////////////////////////////////////////////
|
||||
const conditionalFieldName = block.conditional;
|
||||
if (conditionalFieldName)
|
||||
{
|
||||
const value = processValues[conditionalFieldName];
|
||||
if (!value)
|
||||
{
|
||||
console.debug(`Splicing away block based on [${conditionalFieldName}]...`);
|
||||
compositeWidgetData.blocks.splice(i, 1);
|
||||
i--;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (block.blockTypeName == "COMPOSITE")
|
||||
{
|
||||
/////////////////////////////////////////
|
||||
// make recursive calls for composites //
|
||||
/////////////////////////////////////////
|
||||
ProcessWidgetBlockUtils.dynamicEvaluationOfCompositeWidgetData(block as unknown as CompositeData, processValues);
|
||||
}
|
||||
else if (block.blockTypeName == "INPUT_FIELD")
|
||||
{
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// for input fields, put the process's value for the field-name into the block's values object as '.value' //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const fieldName = block.values?.fieldMetaData?.name;
|
||||
if (processValues.hasOwnProperty(fieldName))
|
||||
{
|
||||
block.values.value = processValues[fieldName];
|
||||
}
|
||||
}
|
||||
else if (block.blockTypeName == "TEXT")
|
||||
{
|
||||
//////////////////////////////////////////////////////////////////////////////////////
|
||||
// for text-blocks - interpolate ${fieldName} expressions into their process-values //
|
||||
//////////////////////////////////////////////////////////////////////////////////////
|
||||
let text = block.values?.text;
|
||||
if (text)
|
||||
{
|
||||
for (let key of Object.keys(processValues))
|
||||
{
|
||||
text = text.replaceAll("${" + key + "}", processValues[key]);
|
||||
}
|
||||
block.values.interpolatedText = text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
public static addFieldsForCompositeWidget(step: QFrontendStepMetaData, processValues: any, addFieldCallback: (fieldMetaData: QFieldMetaData) => void)
|
||||
{
|
||||
///////////////////////////////////////////////////////////
|
||||
// private recursive function to walk the composite tree //
|
||||
///////////////////////////////////////////////////////////
|
||||
function recursiveHelper(widgetData: CompositeData)
|
||||
{
|
||||
try
|
||||
{
|
||||
for (let block of widgetData.blocks)
|
||||
{
|
||||
if (block.blockTypeName == "COMPOSITE")
|
||||
{
|
||||
recursiveHelper(block as unknown as CompositeData);
|
||||
}
|
||||
else if (block.blockTypeName == "INPUT_FIELD")
|
||||
{
|
||||
const fieldMetaData = new QFieldMetaData(block.values?.fieldMetaData);
|
||||
addFieldCallback(fieldMetaData);
|
||||
}
|
||||
}
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
console.log("Error adding fields for compositeWidget: " + e);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// foreach component, if it's an adhoc widget or a widget w/ its data in the processValues, then, call recursive helper on it //
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
for (let component of step.components)
|
||||
{
|
||||
if (component.type == QComponentType.WIDGET && component.values?.isAdHocWidget)
|
||||
{
|
||||
recursiveHelper(component.values as unknown as CompositeData);
|
||||
}
|
||||
else if (component.type == QComponentType.WIDGET && processValues[component.values?.widgetName])
|
||||
{
|
||||
recursiveHelper(processValues[component.values?.widgetName] as unknown as CompositeData);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
public static processColorFromStyleMap(colorFromStyleMap?: string): string
|
||||
{
|
||||
if (colorFromStyleMap)
|
||||
{
|
||||
switch (colorFromStyleMap.toUpperCase())
|
||||
{
|
||||
case "SUCCESS":
|
||||
return("#2BA83F");
|
||||
case "WARNING":
|
||||
return("#FBA132");
|
||||
case "ERROR":
|
||||
return("#FB4141");
|
||||
case "INFO":
|
||||
return("#458CFF");
|
||||
case "MUTED":
|
||||
return("#7b809a");
|
||||
default:
|
||||
{
|
||||
if (colorFromStyleMap.match(/^[0-9A-F]{6}$/))
|
||||
{
|
||||
return(`#${colorFromStyleMap}`);
|
||||
}
|
||||
else if (colorFromStyleMap.match(/^[0-9A-F]{8}$/))
|
||||
{
|
||||
return(`#${colorFromStyleMap}`);
|
||||
}
|
||||
else
|
||||
{
|
||||
return(colorFromStyleMap);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -779,11 +779,9 @@ function InputPossibleValueSourceSingle(tableName: string, field: QFieldMetaData
|
||||
}}
|
||||
>
|
||||
<DynamicSelect
|
||||
tableName={tableName}
|
||||
fieldName={field.name}
|
||||
fieldPossibleValueProps={{tableName: tableName, fieldName: field.name, initialDisplayValue: selectedPossibleValue?.label}}
|
||||
fieldLabel="Value"
|
||||
initialValue={selectedPossibleValue?.id}
|
||||
initialDisplayValue={selectedPossibleValue?.label}
|
||||
inForm={false}
|
||||
onChange={handleChange}
|
||||
useCase="filter"
|
||||
@ -848,11 +846,9 @@ function InputPossibleValueSourceMultiple(tableName: string, field: QFieldMetaDa
|
||||
}}
|
||||
>
|
||||
<DynamicSelect
|
||||
tableName={tableName}
|
||||
fieldName={field.name}
|
||||
fieldPossibleValueProps={{tableName: tableName, fieldName: field.name, initialDisplayValue: null}}
|
||||
isMultiple={true}
|
||||
fieldLabel="Value"
|
||||
initialValues={selectedPossibleValues}
|
||||
inForm={false}
|
||||
onChange={handleChange}
|
||||
useCase="filter"
|
||||
|
||||
50
src/qqq/utils/DumpJsonBox.tsx
Normal file
50
src/qqq/utils/DumpJsonBox.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. 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 Box from "@mui/material/Box";
|
||||
import React from "react";
|
||||
|
||||
interface DumpJsonBoxProps
|
||||
{
|
||||
data: any;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
/***************************************************************************
|
||||
** Utillity for debugging an object as JSON
|
||||
***************************************************************************/
|
||||
export default function DumpJsonBox({data, title}: DumpJsonBoxProps): JSX.Element
|
||||
{
|
||||
return (
|
||||
<Box border="1px solid gray" my="1rem" borderRadius="0.5rem">
|
||||
{
|
||||
title &&
|
||||
<Box borderBottom="1px solid gray" mb="0.5rem" px="0.25rem" borderRadius="0.5rem 0.5rem 0 0" fontSize="1rem" fontWeight="600kkk" sx={{backgroundColor: "#D0D0D0"}}>
|
||||
{title}
|
||||
</Box>
|
||||
}
|
||||
<Box maxHeight="200px" p="0.25rem" overflow="auto" sx={{whiteSpace: "pre-wrap", fontFamily: "monospace", fontSize: "0.75rem", lineHeight: "1.2"}}>
|
||||
{JSON.stringify(data, null, 3)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@ -57,4 +57,5 @@ module.exports = function (app)
|
||||
app.use("/images", getRequestHandler());
|
||||
app.use("/api*", getRequestHandler());
|
||||
app.use("/*api", getRequestHandler());
|
||||
app.use("/qqq/*", getRequestHandler());
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user