QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 12:50:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merged feature/CE-1068-add-basic-functionality-of into integration/sprint-41

Browse Source
This commit is contained in:
darin.kelkhoff
2024-04-30 11:45:38 -05:00
parent 38b8f47409 13d7cc6825
commit 010f80def3
30 changed files with 1042 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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.97",
"@kingsrook/qqq-frontend-core": "1.0.99",
"@mui/icons-material": "5.4.1",
"@mui/material": "5.11.1",
"@mui/styles": "5.11.1",

35
src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardTableMetaData.java
View File

@ -134,17 +134,36 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
for(FieldRule fieldRule : CollectionUtils.nonNullList(fieldRules))
{
qInstanceValidator.assertCondition(fieldRule.getTrigger() != null, prefix + "has a fieldRule without a trigger");
qInstanceValidator.assertCondition(fieldRule.getAction() != null, prefix + "has a fieldRule without an action");
validateFieldRule(qInstance, tableMetaData, qInstanceValidator, fieldRule, prefix);
}
}
if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getSourceField()), prefix + "has a fieldRule without a sourceField"))
{
qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getSourceField()), prefix + "has a fieldRule with an unrecognized sourceField: " + fieldRule.getSourceField());
}
if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getTargetField()), prefix + "has a fieldRule without a targetField"))
/*******************************************************************************
**
*******************************************************************************/
static void validateFieldRule(QInstance qInstance, QTableMetaData tableMetaData, QInstanceValidator qInstanceValidator, FieldRule fieldRule, String prefix)
{
qInstanceValidator.assertCondition(fieldRule.getTrigger() != null, prefix + "has a fieldRule without a trigger");
qInstanceValidator.assertCondition(fieldRule.getAction() != null, prefix + "has a fieldRule without an action");
if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getSourceField()), prefix + "has a fieldRule without a sourceField"))
{
qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getSourceField()), prefix + "has a fieldRule with an unrecognized sourceField: " + fieldRule.getSourceField());
}
if(StringUtils.hasContent(fieldRule.getTargetField()))
{
qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getTargetField()), prefix + "has a fieldRule with an unrecognized targetField: " + fieldRule.getTargetField());
}
if(StringUtils.hasContent(fieldRule.getTargetWidget()))
{
if(qInstanceValidator.assertCondition(qInstance.getWidget(fieldRule.getTargetWidget()) != null, prefix + "has a widgetRule with an unrecognized targetWidget: " + fieldRule.getTargetWidget()))
{
qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getTargetField()), prefix + "has a fieldRule with an unrecognized targetField: " + fieldRule.getTargetField());
qInstanceValidator.assertCondition(CollectionUtils.nonNullList(tableMetaData.getSections()).stream().anyMatch(s -> fieldRule.getTargetWidget().equals(s.getWidgetName())),
prefix + "has a widgetRule with a targetWidget which is not used in any sections on the table");
}
}
}

33
src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/fieldrules/FieldRule.java
View File

@ -38,6 +38,8 @@ public class FieldRule implements Serializable
private FieldRuleAction action;
private String targetField;
private String targetWidget;
/*******************************************************************************
@ -162,4 +164,35 @@ public class FieldRule implements Serializable
return (this);
}
/*******************************************************************************
** Getter for targetWidget
*******************************************************************************/
public String getTargetWidget()
{
return (this.targetWidget);
}
/*******************************************************************************
** Setter for targetWidget
*******************************************************************************/
public void setTargetWidget(String targetWidget)
{
this.targetWidget = targetWidget;
}
/*******************************************************************************
** Fluent setter for targetWidget
*******************************************************************************/
public FieldRule withTargetWidget(String targetWidget)
{
this.targetWidget = targetWidget;
return (this);
}
}

3
src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/fieldrules/FieldRuleAction.java
View File

@ -27,5 +27,6 @@ package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
*******************************************************************************/
public enum FieldRuleAction
{
CLEAR_TARGET_FIELD
CLEAR_TARGET_FIELD,
RELOAD_WIDGET
}

10
src/qqq/components/forms/DynamicFormUtils.ts
View File

@ -175,7 +175,7 @@ class DynamicFormUtils
initialDisplayValue: initialDisplayValue,
};
}
else
else if(processName)
{
dynamicFormFields[field.name].possibleValueProps =
{
@ -184,6 +184,14 @@ class DynamicFormUtils
initialDisplayValue: initialDisplayValue,
};
}
else
{
dynamicFormFields[field.name].possibleValueProps =
{
isPossibleValue: true,
initialDisplayValue: initialDisplayValue,
};
}
}
}
}

68
src/qqq/components/forms/EntityForm.tsx
View File

@ -43,6 +43,7 @@ import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
import MDTypography from "qqq/components/legacy/MDTypography";
import HelpContent from "qqq/components/misc/HelpContent";
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
import DynamicFormWidget from "qqq/components/widgets/misc/DynamicFormWidget";
import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget";
import RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
import ReportSetupWidget from "qqq/components/widgets/misc/ReportSetupWidget";
@ -409,6 +410,19 @@ function EntityForm(props: Props): JSX.Element
/>
}
if(widgetMetaData.type == "dynamicForm")
{
return <DynamicFormWidget
key={formValues["savedReportId"]} // todo - pull this from the metaData (could do so above too...)
isEditable={true}
widgetMetaData={widgetMetaData}
widgetData={widgetData}
recordValues={formValues}
record={record}
onSaveCallback={setFormFieldValuesFromWidget}
/>
}
return (<Box>Unsupported widget type: {widgetMetaData.type}</Box>)
}
@ -482,7 +496,7 @@ function EntityForm(props: Props): JSX.Element
return (true);
}
if(widget.type == "reportSetup" || widget.type == "pivotTableSetup")
if(widget.type == "reportSetup" || widget.type == "pivotTableSetup" || widget.type == "dynamicForm")
{
return (true);
}
@ -706,7 +720,8 @@ function EntityForm(props: Props): JSX.Element
else
{
const widgetMetaData = metaData.widgets.get(section.widgetName);
const widgetData = await qController.widget(widgetMetaData.name, props.id ? `${tableMetaData.primaryKeyField}=${props.id}` : "");
const widgetData = await qController.widget(widgetMetaData.name, makeQueryStringWithIdAndObject(tableMetaData, defaultValues));
newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData);
newChildListWidgetData[section.widgetName] = widgetData;
}
@ -966,6 +981,51 @@ function EntityForm(props: Props): JSX.Element
};
/*******************************************************************************
**
*******************************************************************************/
function makeQueryStringWithIdAndObject(tableMetaData: QTableMetaData, object: {[key: string]: any})
{
const queryParamsArray: string[] = [];
if(props.id)
{
queryParamsArray.push(`${tableMetaData.primaryKeyField}=${encodeURIComponent(props.id)}`)
}
if(object)
{
for (let key in object)
{
queryParamsArray.push(`${key}=${encodeURIComponent(object[key])}`)
}
}
return (queryParamsArray.join("&"));
}
/*******************************************************************************
**
*******************************************************************************/
async function reloadWidget(widgetName: string, additionalQueryParamsForWidget: {[key: string]: any })
{
const widgetData = await qController.widget(widgetName, makeQueryStringWithIdAndObject(tableMetaData, additionalQueryParamsForWidget));
const widgetMetaData = metaData.widgets.get(widgetName);
/////////////////////////////////////////////////////////////////////////////////////////////////////
// todo - rename this - it holds all widget dta, not just child-lists. also, the type is wrong... //
/////////////////////////////////////////////////////////////////////////////////////////////////////
const newChildListWidgetData: { [name: string]: ChildRecordListData } = Object.assign({}, childListWidgetData);
newChildListWidgetData[widgetName] = widgetData;
setChildListWidgetData(newChildListWidgetData);
const newRenderedWidgetSections = Object.assign({}, renderedWidgetSections);
newRenderedWidgetSections[widgetName] = getWidgetSection(widgetMetaData, widgetData);
setRenderedWidgetSections(newRenderedWidgetSections);
forceUpdate();
}
/*******************************************************************************
** process a form-field having a changed value (e.g., apply field rules).
*******************************************************************************/
@ -981,6 +1041,10 @@ function EntityForm(props: Props): JSX.Element
console.log(`Clearing value from [${fieldRule.targetField}] due to change in [${fieldName}]`);
valueChangesToMake[fieldRule.targetField] = null;
break;
case FieldRuleAction.RELOAD_WIDGET:
const additionalQueryParamsForWidget: {[key: string]: any} = {};
additionalQueryParamsForWidget[fieldRule.sourceField] = newValue;
reloadWidget(fieldRule.targetWidget, additionalQueryParamsForWidget);
}
}
}

66
src/qqq/components/query/AssignFilterVariable.tsx Normal file
View File

@ -0,0 +1,66 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2023. 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 {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
import Box from "@mui/material/Box";
import Icon from "@mui/material/Icon";
import Tooltip from "@mui/material/Tooltip";
import CriteriaDateField from "qqq/components/query/CriteriaDateField";
import React, {SyntheticEvent, useState} from "react";
export type Expression = FilterVariableExpression;
interface AssignFilterButtonProps
{
valueIndex: number;
field: QFieldMetaData;
valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
}
CriteriaDateField.defaultProps = {
valueIndex: 0,
label: "Value",
idPrefix: "value-"
};
export default function AssignFilterVariable({valueIndex, field, valueChangeHandler}: AssignFilterButtonProps): JSX.Element
{
const [isValueAVariable, setIsValueAVariable] = useState(false);
const handleVariableButtonOnClick = () =>
{
setIsValueAVariable(!isValueAVariable);
const expression = new FilterVariableExpression({fieldName: field.name, valueIndex: valueIndex});
valueChangeHandler(null, valueIndex, expression);
};
return <Box display="flex" alignItems="flex-end">
<Box>
<Tooltip title={`Use a variable as the value for the ${field.name} field`} placement="bottom">
<Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={handleVariableButtonOnClick}>functions</Icon>
</Tooltip>
</Box>
</Box>;
}

4
src/qqq/components/query/BasicAndAdvancedQueryControls.tsx
View File

@ -114,7 +114,7 @@ export function getCurrentSortIndicator(queryFilter: QQueryFilter, tableMetaData
*******************************************************************************/
const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryControlsProps, ref) =>
{
const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode} = props;
const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode, queryScreenUsage} = props;
/////////////////////
// state variables //
@ -682,6 +682,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
criteriaParam={getQuickCriteriaParam(fieldName)}
fieldMetaData={field}
defaultOperator={defaultOperator}
queryScreenUsage={queryScreenUsage}
handleRemoveQuickFilterField={null} />);
})
}
@ -701,6 +702,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
criteriaParam={getQuickCriteriaParam(fieldName)}
fieldMetaData={field}
defaultOperator={defaultOperator}
queryScreenUsage={queryScreenUsage}
handleRemoveQuickFilterField={handleRemoveQuickFilterField} />);
})
}

37
src/qqq/components/query/CriteriaDateField.tsx
View File

@ -21,6 +21,7 @@
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
import {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
import {NowWithOffsetExpression, NowWithOffsetOperator, NowWithOffsetUnit} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression";
import {ThisOrLastPeriodExpression, ThisOrLastPeriodOperator, ThisOrLastPeriodUnit} from "@kingsrook/qqq-frontend-core/lib/model/query/ThisOrLastPeriodExpression";
@ -34,14 +35,14 @@ import MenuItem from "@mui/material/MenuItem";
import {styled} from "@mui/material/styles";
import TextField from "@mui/material/TextField";
import Tooltip, {tooltipClasses, TooltipProps} from "@mui/material/Tooltip";
import React, {SyntheticEvent, useEffect, useReducer, useState} from "react";
import AdvancedDateTimeFilterValues from "qqq/components/query/AdvancedDateTimeFilterValues";
import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
import {EvaluatedExpression} from "qqq/components/query/EvaluatedExpression";
import {makeTextField} from "qqq/components/query/FilterCriteriaRowValues";
import React, {SyntheticEvent, useReducer, useState} from "react";
export type Expression = NowWithOffsetExpression | ThisOrLastPeriodExpression | NowExpression;
export type Expression = NowWithOffsetExpression | ThisOrLastPeriodExpression | NowExpression | FilterVariableExpression;
interface CriteriaDateFieldProps
@ -52,6 +53,7 @@ interface CriteriaDateFieldProps
field: QFieldMetaData;
criteria: QFilterCriteriaWithId;
valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
allowVariables?: boolean;
}
CriteriaDateField.defaultProps = {
@ -60,19 +62,30 @@ CriteriaDateField.defaultProps = {
idPrefix: "value-"
};
export default function CriteriaDateField({valueIndex, label, idPrefix, field, criteria, valueChangeHandler}: CriteriaDateFieldProps): JSX.Element
export const NoWrapTooltip = styled(({className, children, ...props}: TooltipProps) => (
<Tooltip {...props} classes={{popper: className}}>{children}</Tooltip>
))({
[`& .${tooltipClasses.tooltip}`]: {
whiteSpace: "nowrap"
},
});
export default function CriteriaDateField({valueIndex, label, idPrefix, field, criteria, valueChangeHandler, allowVariables}: CriteriaDateFieldProps): JSX.Element
{
const [relativeDateTimeOpen, setRelativeDateTimeOpen] = useState(false);
const [relativeDateTimeMenuAnchorElement, setRelativeDateTimeMenuAnchorElement] = useState(null);
const [forceAdvancedDateTimeDialogOpen, setForceAdvancedDateTimeDialogOpen] = useState(false)
const [forceAdvancedDateTimeDialogOpen, setForceAdvancedDateTimeDialogOpen] = useState(false);
const [, forceUpdate] = useReducer((x) => x + 1, 0);
const openRelativeDateTimeMenu = (event: React.MouseEvent<HTMLElement>) =>
{
setRelativeDateTimeOpen(true);
setRelativeDateTimeMenuAnchorElement(event.currentTarget);
};
const closeRelativeDateTimeMenu = () =>
{
setRelativeDateTimeOpen(false);
setRelativeDateTimeMenuAnchorElement(null);
};
@ -137,20 +150,12 @@ export default function CriteriaDateField({valueIndex, label, idPrefix, field, c
const isExpression = criteria.values && criteria.values[valueIndex] && criteria.values[valueIndex].type;
const currentExpression = isExpression ? criteria.values[valueIndex] : null;
const NoWrapTooltip = styled(({className, children, ...props}: TooltipProps) => (
<Tooltip {...props} classes={{popper: className}}>{children}</Tooltip>
))({
[`& .${tooltipClasses.tooltip}`]: {
whiteSpace: "nowrap"
},
});
const tooltipMenuItemFromExpression = (valueIndex: number, tooltipPlacement: "left" | "right", expression: Expression) =>
{
let startOfPrefix = "";
if(expression.type == "ThisOrLastPeriod")
if (expression.type == "ThisOrLastPeriod")
{
if(field.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
if (field.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
{
startOfPrefix = "start of ";
}
@ -194,14 +199,14 @@ export default function CriteriaDateField({valueIndex, label, idPrefix, field, c
return <Box display="flex" alignItems="flex-end">
{
isExpression ? makeDateTimeExpressionTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
: makeTextField(field, criteria, valueChangeHandler, valueIndex, label, idPrefix)
: makeTextField(field, criteria, valueChangeHandler, valueIndex, label, idPrefix, allowVariables)
}
<Box>
<Tooltip title={`Choose a common relative ${field.type == QFieldType.DATE ? "date" : "date-time"} expression`} placement="bottom">
<Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={openRelativeDateTimeMenu}>date_range</Icon>
</Tooltip>
<Menu
open={relativeDateTimeMenuAnchorElement}
open={relativeDateTimeOpen}
anchorEl={relativeDateTimeMenuAnchorElement}
transformOrigin={{horizontal: "left", vertical: "top"}}
onClose={closeRelativeDateTimeMenu}

16
src/qqq/components/query/CustomColumnsPanel.tsx
View File

@ -21,7 +21,9 @@
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {Box, FormControlLabel, FormGroup} from "@mui/material";
import {FormControlLabel, FormGroup} from "@mui/material";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton";
@ -56,7 +58,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
const someRef = createRef();
const textRef = useRef(null);
const [didInitialFocus, setDidInitialFocus] = useState(false)
const [didInitialFocus, setDidInitialFocus] = useState(false);
const [openGroups, setOpenGroups] = useState(props.initialOpenedGroups || {});
const openGroupsBecauseOfFilter = {} as { [name: string]: boolean };
@ -71,9 +73,9 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
console.log(`Open groups: ${JSON.stringify(openGroups)}`);
if(!didInitialFocus)
if (!didInitialFocus)
{
if(textRef.current)
if (textRef.current)
{
textRef.current.select();
setDidInitialFocus(true);
@ -189,11 +191,11 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
///////////////////////////////////////////////////////////////////////////////////////////////////////
// always sort columns by label. note, in future may offer different sorts - here's where to do it. //
///////////////////////////////////////////////////////////////////////////////////////////////////////
const sortedColumns = [... columns];
const sortedColumns = [...columns];
sortedColumns.sort((a, b): number =>
{
return a.headerName.localeCompare(b.headerName);
})
});
for (let i = 0; i < sortedColumns.length; i++)
{
@ -361,7 +363,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
const changeFilterText = (newValue: string) =>
{
setFilterText(newValue);
props.filterTextChanger(newValue)
props.filterTextChanger(newValue);
};
const filterTextChanged = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>

7
src/qqq/components/query/EvaluatedExpression.tsx
View File

@ -21,9 +21,9 @@
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import React, {useEffect, useState} from "react";
import {Expression} from "qqq/components/query/CriteriaDateField";
import ValueUtils from "qqq/utils/qqq/ValueUtils";
import React, {useEffect, useState} from "react";
/*******************************************************************************
** Helper component to show value inside tooltips that ticks up every second.
@ -57,6 +57,11 @@ const HOUR_MS = 60 * 60 * 1000;
const DAY_MS = 24 * 60 * 60 * 1000;
const evaluateExpression = (time: Date, field: QFieldMetaData, expression: Expression): string =>
{
if (expression.type == "FilterVariableExpression")
{
return (expression.toString());
}
let rs: Date = null;
if (expression.type == "NowWithOffset")
{

33
src/qqq/components/query/FilterCriteriaRow.tsx
View File

@ -72,7 +72,7 @@ export const getValueModeRequiredCount = (valueMode: ValueMode): number =>
case ValueMode.PVS_MULTI:
return (null);
}
}
};
export interface OperatorOption
{
@ -183,7 +183,7 @@ export const getOperatorOptions = (tableMetaData: QTableMetaData, fieldName: str
}
return (operatorOptions);
}
};
interface FilterCriteriaRowProps
@ -200,10 +200,9 @@ interface FilterCriteriaRowProps
}
FilterCriteriaRow.defaultProps =
{
};
{};
export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValue?: OperatorOption): {criteriaIsValid: boolean, criteriaStatusTooltip: string}
export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValue?: OperatorOption): { criteriaIsValid: boolean, criteriaStatusTooltip: string }
{
let criteriaIsValid = true;
let criteriaStatusTooltip = "This condition is fully defined and is part of your filter.";
@ -213,7 +212,7 @@ export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValu
return (value === null || value == undefined || String(value).trim() === "");
}
if(!criteria)
if (!criteria)
{
criteriaIsValid = false;
criteriaStatusTooltip = "This condition is not defined.";
@ -284,7 +283,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
let defaultFieldValue;
let field = null;
let fieldTable = null;
if(criteria && criteria.fieldName)
if (criteria && criteria.fieldName)
{
[field, fieldTable] = FilterUtils.getField(tableMetaData, criteria.fieldName);
if (field && fieldTable)
@ -303,9 +302,9 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
let newOperatorSelectedValue = operatorOptions.filter(option =>
{
if(option.value == criteria.operator)
if (option.value == criteria.operator)
{
if(option.implicitValues)
if (option.implicitValues)
{
return (JSON.stringify(option.implicitValues) == JSON.stringify(criteria.values));
}
@ -316,7 +315,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
}
return (false);
})[0];
if(newOperatorSelectedValue?.label !== operatorSelectedValue?.label)
if (newOperatorSelectedValue?.label !== operatorSelectedValue?.label)
{
setOperatorSelectedValue(newOperatorSelectedValue);
setOperatorInputValue(newOperatorSelectedValue?.label);
@ -379,12 +378,12 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
{
criteria.operator = newValue ? newValue.value : null;
if(newValue)
if (newValue)
{
setOperatorSelectedValue(newValue);
setOperatorInputValue(newValue.label);
if(newValue.implicitValues)
if (newValue.implicitValues)
{
criteria.values = newValue.implicitValues;
}
@ -393,15 +392,15 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
// we've seen cases where switching operators can sometimes put a null in as the first value... //
// that just causes a bad time (e.g., null pointers in Autocomplete), so, get rid of that. //
//////////////////////////////////////////////////////////////////////////////////////////////////
if(criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
if (criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
{
criteria.values = [];
}
if(newValue.valueMode && !newValue.implicitValues)
if (newValue.valueMode && !newValue.implicitValues)
{
const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
if(requiredValueCount != null && criteria.values.length > requiredValueCount)
if (requiredValueCount != null && criteria.values.length > requiredValueCount)
{
criteria.values.splice(requiredValueCount);
}
@ -424,12 +423,12 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
// @ts-ignore
const value = newValue !== undefined ? newValue : event ? event.target.value : null;
if(!criteria.values)
if (!criteria.values)
{
criteria.values = [];
}
if(valueIndex == "all")
if (valueIndex == "all")
{
criteria.values = value;
}

101
src/qqq/components/query/FilterCriteriaRowValues.tsx
View File

@ -23,19 +23,23 @@
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
import Autocomplete from "@mui/material/Autocomplete";
import Box from "@mui/material/Box";
import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton";
import InputAdornment from "@mui/material/InputAdornment/InputAdornment";
import TextField from "@mui/material/TextField";
import React, {SyntheticEvent, useReducer} from "react";
import DynamicSelect from "qqq/components/forms/DynamicSelect";
import CriteriaDateField from "qqq/components/query/CriteriaDateField";
import AssignFilterVariable from "qqq/components/query/AssignFilterVariable";
import CriteriaDateField, {NoWrapTooltip} from "qqq/components/query/CriteriaDateField";
import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
import {EvaluatedExpression} from "qqq/components/query/EvaluatedExpression";
import FilterCriteriaPaster from "qqq/components/query/FilterCriteriaPaster";
import {OperatorOption, ValueMode} from "qqq/components/query/FilterCriteriaRow";
import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
import ValueUtils from "qqq/utils/qqq/ValueUtils";
import React, {SyntheticEvent, useReducer, useState} from "react";
interface Props
{
@ -44,7 +48,8 @@ interface Props
field: QFieldMetaData;
table: QTableMetaData;
valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
initiallyOpenMultiValuePvs?: boolean
initiallyOpenMultiValuePvs?: boolean;
queryScreenUsage?: QueryScreenUsage;
}
FilterCriteriaRowValues.defaultProps =
@ -72,8 +77,10 @@ export const getTypeForTextField = (field: QFieldMetaData): string =>
return (type);
};
export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWithId, valueChangeHandler?: (event: (React.ChangeEvent | React.SyntheticEvent), valueIndex?: (number | "all"), newValue?: any) => void, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWithId, valueChangeHandler?: (event: (React.ChangeEvent | React.SyntheticEvent), valueIndex?: (number | "all"), newValue?: any) => void, valueIndex: number = 0, label = "Value", idPrefix = "value-", allowVariables = false) =>
{
const isExpression = criteria.values && criteria.values[valueIndex] && criteria.values[valueIndex].type;
let type = getTypeForTextField(field);
const inputLabelProps: any = {};
@ -95,7 +102,6 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
};
/*******************************************************************************
** Event handler for key-down events - specifically added here, to stop pressing
** 'tab' in a date or date-time from closing the quick-filter...
@ -104,7 +110,7 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
{
if (field.type == QFieldType.DATE || field.type == QFieldType.DATE_TIME)
{
if(e.code == "Tab")
if (e.code == "Tab")
{
console.log("Tab on date or date-time - don't close me, just move to the next sub-field!...");
e.stopPropagation();
@ -112,6 +118,36 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
}
};
const makeFilterVariableTextField = (expression: FilterVariableExpression, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
{
const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
{
valueChangeHandler(event, index, "");
document.getElementById(`${idPrefix}${criteria.id}`).focus();
};
const inputProps2: any = {};
inputProps2.endAdornment = (
<InputAdornment position="end">
<IconButton sx={{visibility: expression ? "visible" : "hidden"}} onClick={(event) => clearValue(event, valueIndex)}>
<Icon>closer</Icon>
</IconButton>
</InputAdornment>
);
return <NoWrapTooltip title={<EvaluatedExpression field={field} expression={expression} />} placement="bottom" enterDelay={1000} sx={{marginLeft: "-75px !important", marginTop: "-8px !important"}}><TextField
id={`${idPrefix}${criteria.id}`}
label={label}
variant="standard"
autoComplete="off"
InputProps={{disabled: true, readOnly: true, unselectable: "off", ...inputProps2}}
InputLabelProps={{shrink: true}}
value="${VARIABLE}"
fullWidth
/></NoWrapTooltip>;
};
const inputProps: any = {};
inputProps.endAdornment = (
<InputAdornment position="end">
@ -121,25 +157,40 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
</InputAdornment>
);
return <TextField
id={`${idPrefix}${criteria.id}`}
label={label}
variant="standard"
autoComplete="off"
type={type}
onChange={(event) => valueChangeHandler(event, valueIndex)}
onKeyDown={handleKeyDown}
value={value}
InputLabelProps={inputLabelProps}
InputProps={inputProps}
fullWidth
autoFocus={true}
/>;
return <Box sx={{margin: 0, padding: 0, display: "flex"}}>
{
isExpression ? (
makeFilterVariableTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
) : (
<TextField
id={`${idPrefix}${criteria.id}`}
label={label}
variant="standard"
autoComplete="off"
type={type}
onChange={(event) => valueChangeHandler(event, valueIndex)}
onKeyDown={handleKeyDown}
value={value}
InputLabelProps={inputLabelProps}
InputProps={inputProps}
fullWidth
autoFocus={true}
/>
)
}
{
allowVariables && (
<AssignFilterVariable field={field} valueChangeHandler={valueChangeHandler} valueIndex={valueIndex} />
)
}
</Box>;
};
function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs}: Props): JSX.Element
function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs, queryScreenUsage}: Props): JSX.Element
{
const [, forceUpdate] = useReducer((x) => x + 1, 0);
const [allowVariables, setAllowVariables] = useState(queryScreenUsage == "reportSetup");
if (!operatorOption)
{
@ -174,7 +225,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
case ValueMode.NONE:
return null;
case ValueMode.SINGLE:
return makeTextField(field, criteria, valueChangeHandler);
return makeTextField(field, criteria, valueChangeHandler, 0, undefined, undefined, allowVariables);
case ValueMode.SINGLE_DATE:
return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} />;
case ValueMode.DOUBLE_DATE:
@ -183,7 +234,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
<CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" />
</Box>;
case ValueMode.SINGLE_DATE_TIME:
return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} />;
return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} allowVariables={allowVariables} />;
case ValueMode.DOUBLE_DATE_TIME:
return <Box>
<CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" />
@ -192,10 +243,10 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
case ValueMode.DOUBLE:
return <Box>
<Box width="50%" display="inline-block">
{makeTextField(field, criteria, valueChangeHandler, 0, "From", "from-")}
{makeTextField(field, criteria, valueChangeHandler, 0, "From", "from-", allowVariables)}
</Box>
<Box width="50%" display="inline-block">
{makeTextField(field, criteria, valueChangeHandler, 1, "To", "to-")}
{makeTextField(field, criteria, valueChangeHandler, 1, "To", "to-", allowVariables)}
</Box>
</Box>;
case ValueMode.MULTI:

78
src/qqq/components/query/QuickFilter.tsx
View File

@ -30,14 +30,15 @@ import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Menu from "@mui/material/Menu";
import TextField from "@mui/material/TextField";
import React, {SyntheticEvent, useContext, useReducer, useState} from "react";
import QContext from "QContext";
import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
import {getDefaultCriteriaValue, getOperatorOptions, getValueModeRequiredCount, OperatorOption, validateCriteria} from "qqq/components/query/FilterCriteriaRow";
import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
import XIcon from "qqq/components/query/XIcon";
import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
import FilterUtils from "qqq/utils/qqq/FilterUtils";
import TableUtils from "qqq/utils/qqq/TableUtils";
import React, {SyntheticEvent, useContext, useReducer, useState} from "react";
export type CriteriaParamType = QFilterCriteriaWithId | null | "tooComplex";
@ -50,6 +51,7 @@ interface QuickFilterProps
updateCriteria: (newCriteria: QFilterCriteria, needDebounce: boolean, doRemoveCriteria: boolean) => void;
defaultOperator?: QCriteriaOperator;
handleRemoveQuickFilterField?: (fieldName: string) => void;
queryScreenUsage?: QueryScreenUsage;
}
QuickFilter.defaultProps =
@ -71,7 +73,7 @@ export const quickFilterButtonStyles = {
minHeight: "auto",
padding: "0.375rem 0.625rem", whiteSpace: "nowrap",
marginBottom: "0.5rem"
}
};
/*******************************************************************************
** Test if a CriteriaParamType represents an actual query criteria - or, if it's
@ -89,11 +91,11 @@ const criteriaParamIsCriteria = (param: CriteriaParamType): boolean =>
*******************************************************************************/
const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteria: QFilterCriteriaWithId): boolean =>
{
if(operatorOption.value == criteria.operator)
if (operatorOption.value == criteria.operator)
{
if(operatorOption.implicitValues)
if (operatorOption.implicitValues)
{
if(JSON.stringify(operatorOption.implicitValues) == JSON.stringify(criteria.values))
if (JSON.stringify(operatorOption.implicitValues) == JSON.stringify(criteria.values))
{
return (true);
}
@ -107,7 +109,7 @@ const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteri
}
return (false);
}
};
/*******************************************************************************
@ -117,29 +119,29 @@ const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteri
*******************************************************************************/
const getOperatorSelectedValue = (operatorOptions: OperatorOption[], criteria: QFilterCriteriaWithId, defaultOperator: QCriteriaOperator): OperatorOption =>
{
if(criteria)
if (criteria)
{
const filteredOptions = operatorOptions.filter(o => doesOperatorOptionEqualCriteria(o, criteria));
if(filteredOptions.length > 0)
if (filteredOptions.length > 0)
{
return (filteredOptions[0]);
}
}
const filteredOptions = operatorOptions.filter(o => o.value == defaultOperator);
if(filteredOptions.length > 0)
if (filteredOptions.length > 0)
{
return (filteredOptions[0]);
}
return (null);
}
};
/*******************************************************************************
** Component to render a QuickFilter - that is - a button, with a Menu under it,
** with Operator and Value controls.
*******************************************************************************/
export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData, criteriaParam, updateCriteria, defaultOperator, handleRemoveQuickFilterField}: QuickFilterProps): JSX.Element
export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData, criteriaParam, updateCriteria, defaultOperator, handleRemoveQuickFilterField, queryScreenUsage}: QuickFilterProps): JSX.Element
{
const operatorOptions = fieldMetaData ? getOperatorOptions(tableMetaData, fullFieldName) : [];
const [_, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fullFieldName);
@ -190,7 +192,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
if (criteriaParamIsCriteria(criteriaParam) && JSON.stringify(criteriaParam) !== JSON.stringify(criteria))
{
if(isOpen)
if (isOpen)
{
////////////////////////////////////////////////////////////////////////////////
// this was firing too-often for case where: there was a criteria originally //
@ -217,12 +219,12 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
*******************************************************************************/
const criteriaNeedsReset = (): boolean =>
{
if(criteria != null && criteriaParam == null)
if (criteria != null && criteriaParam == null)
{
const defaultOperatorOption = operatorOptions.filter(o => o.value == defaultOperator)[0];
if(criteria.operator !== defaultOperatorOption?.value || JSON.stringify(criteria.values) !== JSON.stringify(getDefaultCriteriaValue()))
if (criteria.operator !== defaultOperatorOption?.value || JSON.stringify(criteria.values) !== JSON.stringify(getDefaultCriteriaValue()))
{
if(isOpen)
if (isOpen)
{
//////////////////////////////////////////////////////////////////////////////////
// this was firing too-often for case where: there was no criteria originally, //
@ -237,7 +239,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
}
return (false);
}
};
/*******************************************************************************
** Construct a new criteria object - resetting the values tied to the operator
@ -251,8 +253,8 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
setOperatorSelectedValue(operatorOption);
setOperatorInputValue(operatorOption?.label);
setCriteria(criteria);
return(criteria);
}
return (criteria);
};
/*******************************************************************************
** event handler to open the menu in response to the button being clicked.
@ -266,7 +268,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
{
const element = document.getElementById("value-" + criteria.id);
element?.focus();
})
});
};
/*******************************************************************************
@ -304,15 +306,15 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
// we've seen cases where switching operators can sometimes put a null in as the first value... //
// that just causes a bad time (e.g., null pointers in Autocomplete), so, get rid of that. //
//////////////////////////////////////////////////////////////////////////////////////////////////
if(criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
if (criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
{
criteria.values = [];
}
if(newValue.valueMode && !newValue.implicitValues)
if (newValue.valueMode && !newValue.implicitValues)
{
const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
if(requiredValueCount != null && criteria.values.length > requiredValueCount)
if (requiredValueCount != null && criteria.values.length > requiredValueCount)
{
criteria.values.splice(requiredValueCount);
}
@ -345,6 +347,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
// @ts-ignore
const value = newValue !== undefined ? newValue : event ? event.target.value : null;
console.log("IN HERE");
if (!criteria.values)
{
criteria.values = [];
@ -376,13 +379,13 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
*******************************************************************************/
const resetCriteria = (e: React.MouseEvent<HTMLSpanElement>) =>
{
if(criteriaIsValid)
if (criteriaIsValid)
{
e.stopPropagation();
const newCriteria = makeNewCriteria();
updateCriteria(newCriteria, false, true);
}
}
};
/*******************************************************************************
** event handler for clicking the (x) icon that turns off this quick filter field.
@ -390,17 +393,17 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
*******************************************************************************/
const handleTurningOffQuickFilterField = () =>
{
closeMenu()
if(handleRemoveQuickFilterField)
closeMenu();
if (handleRemoveQuickFilterField)
{
handleRemoveQuickFilterField(criteria?.fieldName);
}
}
};
////////////////////////////////////////////////////////////////////////////////////
// if no field was input (e.g., record-query is still loading), return null early //
////////////////////////////////////////////////////////////////////////////////////
if(!fieldMetaData)
if (!fieldMetaData)
{
return (null);
}
@ -410,10 +413,10 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
// from the last selected one, then set the state vars that control that autocomplete //
//////////////////////////////////////////////////////////////////////////////////////////
const maybeNewOperatorSelectedValue = getOperatorSelectedValue(operatorOptions, criteria, defaultOperator);
if(JSON.stringify(maybeNewOperatorSelectedValue) !== JSON.stringify(operatorSelectedValue))
if (JSON.stringify(maybeNewOperatorSelectedValue) !== JSON.stringify(operatorSelectedValue))
{
setOperatorSelectedValue(maybeNewOperatorSelectedValue)
setOperatorInputValue(maybeNewOperatorSelectedValue?.label)
setOperatorSelectedValue(maybeNewOperatorSelectedValue);
setOperatorInputValue(maybeNewOperatorSelectedValue?.label);
}
/////////////////////////////////////////////////////////////////////////////////////
@ -431,7 +434,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
const tooltipEnterDelay = 500;
let buttonAdditionalStyles: any = {};
let buttonContent = <span>{tableForField?.name != tableMetaData.name ? `${tableForField.label}: ` : ""}{fieldMetaData.label}</span>
let buttonContent = <span>{tableForField?.name != tableMetaData.name ? `${tableForField.label}: ` : ""}{fieldMetaData.label}</span>;
let buttonClassName = "filterNotActive";
if (criteriaIsValid)
{
@ -446,9 +449,9 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
// don't show the Equals or In operators //
///////////////////////////////////////////
let operatorString = (<>{operatorSelectedValue.label}&nbsp;</>);
if(operatorSelectedValue.value == QCriteriaOperator.EQUALS || operatorSelectedValue.value == QCriteriaOperator.IN)
if (operatorSelectedValue.value == QCriteriaOperator.EQUALS || operatorSelectedValue.value == QCriteriaOperator.IN)
{
operatorString = (<></>)
operatorString = (<></>);
}
buttonContent = (<><span style={{fontWeight: 700}}>{buttonContent}:</span>&nbsp;<span style={{fontWeight: 400}}>{operatorString}{valuesString}</span></>);
@ -491,7 +494,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
const xClicked = (e: React.MouseEvent<HTMLSpanElement>) =>
{
e.stopPropagation();
if(criteriaIsValid)
if (criteriaIsValid)
{
resetCriteria(e);
}
@ -499,12 +502,12 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
{
handleTurningOffQuickFilterField();
}
}
};
//////////////////////////////
// return the button & menu //
//////////////////////////////
const widthAndMaxWidth = fieldMetaData?.type == QFieldType.DATE_TIME ? 275 : 250
const widthAndMaxWidth = (fieldMetaData?.type == QFieldType.DATE_TIME) ? 295 : 250;
return (
<>
{button}
@ -541,6 +544,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
</Box>
<Box width={widthAndMaxWidth} maxWidth={widthAndMaxWidth} className="quickFilter filterValuesColumn">
<FilterCriteriaRowValues
queryScreenUsage={queryScreenUsage}
operatorOption={operatorSelectedValue}
criteria={criteria}
field={fieldMetaData}

9
src/qqq/components/widgets/DashboardWidgets.tsx
View File

@ -38,6 +38,7 @@ import StackedBarChart from "qqq/components/widgets/charts/StackedBarChart";
import CompositeWidget from "qqq/components/widgets/CompositeWidget";
import DataBagViewer from "qqq/components/widgets/misc/DataBagViewer";
import DividerWidget from "qqq/components/widgets/misc/Divider";
import DynamicFormWidget from "qqq/components/widgets/misc/DynamicFormWidget";
import FieldValueListWidget from "qqq/components/widgets/misc/FieldValueListWidget";
import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget";
import QuickSightChart from "qqq/components/widgets/misc/QuickSightChart";
@ -261,7 +262,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
{
const rs: {[name: string]: any} = {};
if(record.values)
if(record && record.values)
{
record.values.forEach((value, key) => rs[key] = value);
}
@ -596,6 +597,12 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
{}} />
)
}
{
widgetMetaData.type === "dynamicForm" && (
widgetData && widgetData[i] &&
<DynamicFormWidget isEditable={false} widgetMetaData={widgetMetaData} widgetData={widgetData[i]} record={record} recordValues={convertQRecordValuesFromMapToObject(record)} />
)
}
</Box>
);
};

12
src/qqq/components/widgets/Widget.tsx
View File

@ -21,8 +21,7 @@
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
import {InputLabel} from "@mui/material";
import Box from "@mui/material/Box";
import {Box, InputLabel} from "@mui/material";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
@ -196,8 +195,6 @@ export function HeaderLinkButtonComponent({label, onClickCallback, disabled, dis
}
/*******************************************************************************
**
*******************************************************************************/
@ -220,7 +217,7 @@ export function HeaderToggleComponent({label, getValue, onClickCallback, disable
const onClick = () =>
{
onClickCallback();
}
};
return (
<Box alignItems="baseline" mr="-0.75rem">
@ -236,7 +233,6 @@ export function HeaderToggleComponent({label, getValue, onClickCallback, disable
}
/*******************************************************************************
**
*******************************************************************************/
@ -698,7 +694,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
);
let sublabelElement = (
<Box height="20px">
<Box key="sublabel" height="20px">
<Typography sx={{position: "relative", top: "-18px"}} variant="caption">
{props.widgetData?.sublabel}
</Typography>
@ -785,7 +781,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
}
{localLabelAdditionalElementsLeft}
</Box>
<Box display="flex">
<Box key="sublabelContainer" display="flex">
{
hasPermission && props.widgetData?.sublabel && (sublabelElement)
}

264
src/qqq/components/widgets/misc/DynamicFormWidget.tsx Normal file
View File

@ -0,0 +1,264 @@
/*
* 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import Box from "@mui/material/Box";
import {FormikContextType, useFormikContext} from "formik";
import QDynamicForm from "qqq/components/forms/DynamicForm";
import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
import Widget from "qqq/components/widgets/Widget";
import {renderSectionOfFields} from "qqq/pages/records/view/RecordView";
import Client from "qqq/utils/qqq/Client";
import React, {useEffect, useState} from "react";
/*******************************************************************************
** component props
*******************************************************************************/
interface DynamicFormWidgetProps
{
isEditable: boolean;
widgetMetaData: QWidgetMetaData;
widgetData: any;
record: QRecord;
recordValues: { [name: string]: any };
onSaveCallback?: (values: { [name: string]: any }) => void;
}
/*******************************************************************************
** default values for props
*******************************************************************************/
DynamicFormWidget.defaultProps = {
onSaveCallback: null
};
/*******************************************************************************
** Component to display a dynamic form - e.g., on a record edit or view screen,
** or even within a process.
*******************************************************************************/
export default function DynamicFormWidget({isEditable, widgetMetaData, widgetData, record, recordValues, onSaveCallback}: DynamicFormWidgetProps): JSX.Element
{
const [fields, setFields] = useState([] as QFieldMetaData[]);
const [effectiveIsEditable, setEffectiveIsEditable] = useState(isEditable);
if(widgetMetaData.defaultValues.has("isEditable"))
{
const defaultIsEditableValue = widgetMetaData.defaultValues.get("isEditable")
if(defaultIsEditableValue != effectiveIsEditable)
{
setEffectiveIsEditable(defaultIsEditableValue);
}
}
const [dynamicFormFields, setDynamicFormFields] = useState(null as any);
const [formValidations, setFormValidations] = useState(null as any);
const [lastKnowFormValues, setLastKnowFormValues] = useState({} as {[name: string]: any});
//////////////////////////////////////////////////////////////////////////////////////////
// on initial load, and any time widgetData changes (e.g., if widget gets re-rendered), //
// figure out what our form fields are //
//////////////////////////////////////////////////////////////////////////////////////////
useEffect(() =>
{
setDynamicFormFields({})
setFormValidations({})
if(widgetData && widgetData.fieldList)
{
const newFields: QFieldMetaData[] = [];
for (let i = 0; i < widgetData.fieldList.length; i++)
{
newFields.push(new QFieldMetaData(widgetData.fieldList[i]));
}
setFields(newFields);
if(newFields.length > 0)
{
const {dynamicFormFields: newDynamicFormFields, formValidations: newFormValidations} = DynamicFormUtils.getFormData(newFields);
const defaultDisplayValues = new Map<string,string>(); // todo - seems not right?
DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, newFields, recordValues.tableName, null, record ? record.displayValues : defaultDisplayValues);
setDynamicFormFields(newDynamicFormFields)
setFormValidations(newFormValidations)
}
setLastKnowFormValues({});
}
else
{
setFields([])
}
}, [widgetData]);
/*******************************************************************************
**
*******************************************************************************/
function checkForFormValueChanges(formikProps: FormikContextType<any>)
{
if(!fields || !fields.length)
{
return;
}
let anyChanged = false;
for (let i = 0; i < fields.length; i++)
{
const name = fields[i].name;
if(formikProps.values[name] != lastKnowFormValues[name])
{
anyChanged = true;
lastKnowFormValues[name] = formikProps.values[name];
}
}
if(anyChanged)
{
const mergedDynamicFormValuesIntoFieldName = widgetData.mergedDynamicFormValuesIntoFieldName;
if(mergedDynamicFormValuesIntoFieldName && onSaveCallback)
{
const onSaveCallbackParam: {[name: string]: any} = {};
onSaveCallbackParam[mergedDynamicFormValuesIntoFieldName] = JSON.stringify(lastKnowFormValues);
onSaveCallback(onSaveCallbackParam);
}
}
}
/*******************************************************************************
**
*******************************************************************************/
function getInitialValue(fieldName: string)
{
for (let i = 0; i < fields?.length; i++)
{
if(fields[i].name == fieldName && fields[i].defaultValue)
{
return (fields[i].defaultValue)
}
}
return (null);
}
/*******************************************************************************
**
*******************************************************************************/
function renderEditForm()
{
const formikProps = useFormikContext();
if(!fields || !fields.length)
{
return (
<Box>
<Box fontSize="1rem">{widgetData && widgetData.noFieldsMessage}</Box>
</Box>
);
}
const formData: any = {};
formData.values = formikProps.values;
formData.touched = formikProps.touched;
formData.errors = formikProps.errors;
formData.formFields = {};
// todo - merge the formValidations object with formik's - maybe in the useEffect where we build it
// setValidations(Yup.object().shape(formValidations));
// formikProps.validationSchema.
for (let key of Object.keys(dynamicFormFields))
{
const dynamicFormField = dynamicFormFields[key];
formData.formFields[dynamicFormField.name] = dynamicFormField;
const initialValue = getInitialValue(dynamicFormField.name);
if(initialValue != null)
{
console.log(`@dk trying to set an initial value [${dynamicFormField.name}] to [${initialValue}]`);
// @ts-ignore some any
formikProps.initialValues[dynamicFormField.name] = initialValue;
}
}
if(formData.values)
{
checkForFormValueChanges(formikProps);
}
return (
<Box>
<QDynamicForm formData={formData} record={record} />
</Box>
);
}
/*******************************************************************************
**
*******************************************************************************/
function renderViewForm()
{
const fieldNames: string[] = [];
const fieldMap: {[name: string]: QFieldMetaData} = {};
const fakeRecord = new QRecord({});
const mergedDynamicFormValuesIntoFieldName = widgetData.mergedDynamicFormValuesIntoFieldName;
for (let i = 0; i < fields?.length; i++)
{
const fieldName = fields[i].name;
fieldNames.push(fieldName);
fieldMap[fieldName] = fields[i];
if(mergedDynamicFormValuesIntoFieldName && recordValues[mergedDynamicFormValuesIntoFieldName])
{
fakeRecord.values.set(fieldName, recordValues[mergedDynamicFormValuesIntoFieldName][fieldName]);
}
}
const section = renderSectionOfFields(`dynamicFormWidget:${widgetMetaData.name}`, fieldNames, null, false, fakeRecord, fieldMap);
return (<Box>
{section}
</Box>);
}
////////////
// render //
////////////
return (<Widget widgetMetaData={widgetMetaData}>
{
<React.Fragment>
{effectiveIsEditable ? renderEditForm() : renderViewForm()}
</React.Fragment>
}
</Widget>);
}

14
src/qqq/components/widgets/misc/PivotTableSetupWidget.tsx
View File

@ -280,7 +280,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
}
modalPivotTableDefinition[rowsOrColumns].push(new PivotTableGroupBy());
validateForm()
validateForm();
forceUpdate();
}
@ -292,7 +292,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
{
updateUsedGroupByFieldNames(modalPivotTableDefinition);
updateUsedValueFieldNames(modalPivotTableDefinition);
validateForm()
validateForm();
forceUpdate();
}
@ -308,7 +308,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
}
modalPivotTableDefinition.values.push(new PivotTableValue());
validateForm()
validateForm();
forceUpdate();
}
@ -319,7 +319,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
function removeValue(index: number)
{
modalPivotTableDefinition.values.splice(index, 1);
validateForm()
validateForm();
forceUpdate();
}
@ -503,7 +503,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
const labelAdditionalElementsRight: JSX.Element[] = [];
if (isEditable)
{
labelAdditionalElementsRight.push(<HeaderToggleComponent disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
labelAdditionalElementsRight.push(<HeaderToggleComponent key="pivotTableHeader" disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
}
@ -659,7 +659,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
// if this isn't a call from the on-submit handler, and we haven't previously attempted a submit, then return w/o setting any alerts //
// this is like a version of considering "touched"... //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if(!submitting && !attemptedSubmit)
if (!submitting && !attemptedSubmit)
{
return;
}
@ -703,7 +703,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
// now they've fixed 'em - so go back to a 'clean' state - so if they add more //
// boxes, they won't immediately show errors, until a re-submit //
////////////////////////////////////////////////////////////////////////////////////
if(attemptedSubmit)
if (attemptedSubmit)
{
setAttemptedSubmit(false);
}

92
src/qqq/components/widgets/misc/RecordGridWidget.tsx
View File

@ -185,7 +185,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
if(data && data.viewAllLink)
{
labelAdditionalElementsLeft.push(
<Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
<Typography key={"viewAllLink"} variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
<Link to={data.viewAllLink}>View All</Link>
</Typography>
)
@ -225,8 +225,8 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
if(widgetMetaData?.showExportButton)
{
labelAdditionalElementsLeft.push(
<Typography key={1} variant="body2" px={0} display="inline" position="relative">
<Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></Tooltip>
<Typography key={"exportButton"} variant="body2" px={0} display="inline" position="relative">
<Tooltip title={tooltipTitle}><span><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></span></Tooltip>
</Typography>
);
}
@ -305,48 +305,50 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
>
<Box mx={-2} mb={-3}>
<DataGridPro
autoHeight
sx={{
borderBottom: "none",
borderLeft: "none",
borderRight: "none"
}}
rows={rows}
disableSelectionOnClick
columns={columns}
rowBuffer={10}
getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
onRowClick={handleRowClick}
getRowId={(row) => row.__rowIndex}
// getRowHeight={() => "auto"} // maybe nice? wraps values in cells...
components={{
Toolbar: CustomToolbar
}}
// pinnedColumns={pinnedColumns}
// onPinnedColumnsChange={handlePinnedColumnsChange}
// pagination
// paginationMode="server"
// rowsPerPageOptions={[20]}
// sortingMode="server"
// filterMode="server"
// page={pageNumber}
// checkboxSelection
rowCount={data && data.totalRows}
// onPageSizeChange={handleRowsPerPageChange}
// onStateChange={handleStateChange}
// density={density}
// loading={loading}
// filterModel={filterModel}
// onFilterModelChange={handleFilterChange}
// columnVisibilityModel={columnVisibilityModel}
// onColumnVisibilityModelChange={handleColumnVisibilityChange}
// onColumnOrderChange={handleColumnOrderChange}
// onSelectionModelChange={selectionChanged}
// onSortModelChange={handleSortChange}
// sortingOrder={[ "asc", "desc" ]}
// sortModel={columnSortModel}
/>
<Box className="recordGridWidget">
<DataGridPro
autoHeight
sx={{
borderBottom: "none",
borderLeft: "none",
borderRight: "none"
}}
rows={rows}
disableSelectionOnClick
columns={columns}
rowBuffer={10}
getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
onRowClick={handleRowClick}
getRowId={(row) => row.__rowIndex}
// getRowHeight={() => "auto"} // maybe nice? wraps values in cells...
components={{
Toolbar: CustomToolbar
}}
// pinnedColumns={pinnedColumns}
// onPinnedColumnsChange={handlePinnedColumnsChange}
// pagination
// paginationMode="server"
// rowsPerPageOptions={[20]}
// sortingMode="server"
// filterMode="server"
// page={pageNumber}
// checkboxSelection
rowCount={data && data.totalRows}
// onPageSizeChange={handleRowsPerPageChange}
// onStateChange={handleStateChange}
// density={density}
// loading={loading}
// filterModel={filterModel}
// onFilterModelChange={handleFilterChange}
// columnVisibilityModel={columnVisibilityModel}
// onColumnVisibilityModelChange={handleColumnVisibilityChange}
// onColumnOrderChange={handleColumnOrderChange}
// onSelectionModelChange={selectionChanged}
// onSortModelChange={handleSortChange}
// sortingOrder={[ "asc", "desc" ]}
// sortModel={columnSortModel}
/>
</Box>
</Box>
</Widget>
);

42
src/qqq/components/widgets/misc/ReportSetupWidget.tsx
View File

@ -46,8 +46,8 @@ interface ReportSetupWidgetProps
{
isEditable: boolean;
widgetMetaData: QWidgetMetaData;
recordValues: {[name: string]: any};
onSaveCallback?: (values: {[name: string]: any}) => void;
recordValues: { [name: string]: any };
onSaveCallback?: (values: { [name: string]: any }) => void;
}
ReportSetupWidget.defaultProps = {
@ -103,14 +103,14 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
/////////////////////////////
let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
let usingDefaultEmptyFilter = false;
if(!queryFilter)
if (!queryFilter)
{
queryFilter = new QQueryFilter();
usingDefaultEmptyFilter = true;
}
let columns: QQueryColumns = null;
if(recordValues["columnsJson"])
if (recordValues["columnsJson"])
{
columns = QQueryColumns.buildFromJSON(recordValues["columnsJson"]);
}
@ -124,12 +124,12 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
{
(async () =>
{
const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"])
const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"]);
setTableMetaData(tableMetaData);
const queryFilterForFrontend = Object.assign({}, queryFilter);
await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilterForFrontend)
setFrontendQueryFilter(queryFilterForFrontend)
await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilterForFrontend);
setFrontendQueryFilter(queryFilterForFrontend);
})();
}
}, [recordValues]);
@ -140,7 +140,7 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
*******************************************************************************/
function openEditor()
{
if(recordValues["tableName"])
if (recordValues["tableName"])
{
setModalOpen(true);
}
@ -152,7 +152,7 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
*******************************************************************************/
function saveClicked()
{
if(!onSaveCallback)
if (!onSaveCallback)
{
console.log("onSaveCallback was not defined");
return;
@ -181,7 +181,7 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
*******************************************************************************/
function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
{
if(reason == "backdropClick" || reason == "escapeKeyDown")
if (reason == "backdropClick" || reason == "escapeKeyDown")
{
return;
}
@ -195,9 +195,9 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
*******************************************************************************/
function renderColumn(column: Column): JSX.Element
{
const [field, table] = FilterUtils.getField(tableMetaData, column.name)
const [field, table] = FilterUtils.getField(tableMetaData, column.name);
if(!column || !column.isVisible || column.name == "__check__" || !field)
if (!column || !column.isVisible || column.name == "__check__" || !field)
{
return (<React.Fragment />);
}
@ -215,9 +215,9 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
*******************************************************************************/
function mayShowQueryPreview(): boolean
{
if(tableMetaData)
if (tableMetaData)
{
if(frontendQueryFilter?.criteria?.length > 0 || frontendQueryFilter?.subFilters?.length > 0)
if (frontendQueryFilter?.criteria?.length > 0 || frontendQueryFilter?.subFilters?.length > 0)
{
return (true);
}
@ -231,11 +231,11 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
*******************************************************************************/
function mayShowColumnsPreview(): boolean
{
if(tableMetaData)
if (tableMetaData)
{
for(let i = 0; i<columns?.columns?.length; i++)
for (let i = 0; i < columns?.columns?.length; i++)
{
if(columns.columns[i].isVisible && columns.columns[i].name != "__check__")
if (columns.columns[i].isVisible && columns.columns[i].name != "__check__")
{
return (true);
}
@ -269,10 +269,10 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
// add link to widget header for opening modal //
/////////////////////////////////////////////////
const selectTableFirstTooltipTitle = tableMetaData ? null : "You must select a table before you can set up your report filters and columns";
const labelAdditionalElementsRight: JSX.Element[] = []
if(isEditable)
const labelAdditionalElementsRight: JSX.Element[] = [];
if (isEditable)
{
labelAdditionalElementsRight.push(<HeaderLinkButtonComponent label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />)
labelAdditionalElementsRight.push(<HeaderLinkButtonComponent key="filterAndColumnsHeader" label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />);
}
@ -316,7 +316,7 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
<Box display="flex" flexWrap="wrap" fontSize="1rem">
{
mayShowColumnsPreview() &&
columns.columns.map((column, i) => <React.Fragment key={i}>{renderColumn(column)}</React.Fragment>)
columns.columns.map((column, i) => <React.Fragment key={`column-${i}`}>{renderColumn(column)}</React.Fragment>)
}
{
!mayShowColumnsPreview() &&

4
src/qqq/models/fields/FieldRules.ts
View File

@ -29,6 +29,7 @@ export interface FieldRule
sourceField: string;
action: FieldRuleAction;
targetField: string;
targetWidget: string;
}
@ -46,5 +47,6 @@ export enum FieldRuleTrigger
*******************************************************************************/
export enum FieldRuleAction
{
CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD"
CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD",
RELOAD_WIDGET = "RELOAD_WIDGET"
}

45
src/qqq/pages/processes/ProcessRun.tsx
View File

@ -58,6 +58,7 @@ 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 DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
import BaseLayout from "qqq/layouts/BaseLayout";
import {TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT} from "qqq/pages/records/query/RecordQuery";
import Client from "qqq/utils/qqq/Client";
@ -124,6 +125,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
const [showErrorDetail, setShowErrorDetail] = useState(false);
const [showFullHelpText, setShowFullHelpText] = useState(false);
const [renderedWidgets, setRenderedWidgets] = useState({} as {[step: string]: {[widgetName: string]: any}});
const {pageHeader, recordAnalytics, setPageHeader} = useContext(QContext);
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
@ -273,6 +276,42 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
};
};
/*******************************************************************************
**
*******************************************************************************/
function renderWidget(widgetName: string)
{
if(!renderedWidgets[activeStep.name])
{
renderedWidgets[activeStep.name] = {};
setRenderedWidgets(renderedWidgets);
}
if(renderedWidgets[activeStep.name][widgetName])
{
return renderedWidgets[activeStep.name][widgetName];
}
const widgetMetaData = qInstance.widgets.get(widgetName);
if(!widgetMetaData)
{
return (<Alert color="error">Unrecognized widget name: {widgetName}</Alert>);
}
const queryStringParts: string[] = [];
for (let name in processValues)
{
queryStringParts.push(`${name}=${encodeURIComponent(processValues[name])}`)
}
const renderedWidget = (<Box m={-2}>
<DashboardWidgets widgetMetaDataList={[widgetMetaData]} omitWrappingGridContainer={true} childUrlParams={queryStringParts.join("&")} />
</Box>)
renderedWidgets[activeStep.name][widgetName] = renderedWidget;
return renderedWidget;
}
////////////////////////////////////////////////////
// generate the main form body content for a step //
////////////////////////////////////////////////////
@ -653,6 +692,12 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
</Box>
)
}
{
component.type === QComponentType.WIDGET && (
component.values?.widgetName &&
renderWidget(component.values?.widgetName)
)
}
</div>
);
}))

34
src/qqq/pages/records/query/RecordQuery.tsx
View File

@ -109,7 +109,7 @@ const qController = Client.getInstance();
*******************************************************************************/
const getLoadingScreen = (isModal: boolean) =>
{
if(isModal)
if (isModal)
{
return (<Box>&nbsp;</Box>);
}
@ -151,7 +151,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
*******************************************************************************/
function localStorageSet(key: string, value: string)
{
if(mayWriteLocalStorage)
if (mayWriteLocalStorage)
{
localStorage.setItem(key, value);
}
@ -163,7 +163,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
*******************************************************************************/
function localStorageRemove(key: string)
{
if(mayWriteLocalStorage)
if (mayWriteLocalStorage)
{
localStorage.removeItem(key);
}
@ -176,7 +176,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
{
return view;
}
}
};
});
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@ -256,7 +256,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
defaultView.mode = defaultMode;
}
if(firstRender)
if (firstRender)
{
/////////////////////////////////////////////////////////////////////////
// allow a caller to send in an initial filter & set of columns. //
@ -408,7 +408,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
//////////////////////////////////////////////////////////////////
// we use our own header - so clear out the context page header //
//////////////////////////////////////////////////////////////////
if(!isModal)
if (!isModal)
{
setPageHeader(null);
}
@ -486,7 +486,6 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
};
/*******************************************************************************
**
*******************************************************************************/
@ -711,7 +710,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
{
if (localStorage.getItem(currentSavedViewLocalStorageKey))
{
if(usage == "queryScreen")
if (usage == "queryScreen")
{
currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
@ -750,13 +749,13 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
const viewForLocalStorage: RecordQueryView = JSON.parse(viewAsJSON);
if (viewForLocalStorage?.queryFilter?.criteria?.length > 0)
{
FilterUtils.stripAwayIncompleteCriteria(viewForLocalStorage.queryFilter)
FilterUtils.stripAwayIncompleteCriteria(viewForLocalStorage.queryFilter);
}
localStorageSet(viewLocalStorageKey, JSON.stringify(viewForLocalStorage));
}
catch(e)
catch (e)
{
console.log("Error storing view in local storage: " + e)
console.log("Error storing view in local storage: " + e);
}
};
@ -939,7 +938,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
console.log(`Issuing query: ${thisQueryId}`);
if (tableMetaData.capabilities.has(Capability.TABLE_COUNT))
{
if(clearOutCount)
if (clearOutCount)
{
setTotalRecords(null);
setDistinctRecords(null);
@ -1437,7 +1436,6 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
return (selectedIds.length);
};
/*******************************************************************************
** get a query-string to put on the url to indicate what records are going into
** a process.
@ -2527,7 +2525,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
{
const currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
console.log(`returning to previously active saved view ${currentSavedViewId}`);
if(usage == "queryScreen")
if (usage == "queryScreen")
{
navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
}
@ -2770,7 +2768,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
spaceAboveGrid += 60;
}
if(isModal)
if (isModal)
{
spaceAboveGrid += 130;
}
@ -2976,15 +2974,15 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
</React.Fragment>
);
if(isModal)
if (isModal)
{
return body;
}
return (
<BaseLayout>{body}</BaseLayout>
)
})
);
});
RecordQuery.defaultProps = {

79
src/qqq/pages/records/view/RecordView.tsx
View File

@ -21,6 +21,7 @@
import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
@ -85,6 +86,47 @@ RecordView.defaultProps =
const TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT = "qqq.tableVariant";
/*******************************************************************************
**
*******************************************************************************/
export function renderSectionOfFields(key: string, fieldNames: string[], tableMetaData: QTableMetaData, helpHelpActive: boolean, record: QRecord, fieldMap?: {[name: string]: QFieldMetaData} )
{
return <Box key={key} display="flex" flexDirection="column" py={1} pr={2}>
{
fieldNames.map((fieldName: string) =>
{
let [field, tableForField] = tableMetaData ? TableUtils.getFieldAndTable(tableMetaData, fieldName) : fieldMap ? [fieldMap[fieldName], null] : [null, null];
if (field != null)
{
let label = field.label;
const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableMetaData?.name};field:${fieldName}`} />;
const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>;
return (
<Box key={fieldName} flexDirection="row" pr={2}>
<>
{
showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
}
<div style={{display: "inline-block", width: 0}}>&nbsp;</div>
<Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
{ValueUtils.getDisplayValue(field, record, "view", fieldName)}
</Typography>
</>
</Box>
);
}
})
}
</Box>;
}
/*******************************************************************************
** Record View Screen component.
*******************************************************************************/
@ -528,40 +570,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
// for a section with field names, render the field values. //
// for the T1 section, the "wrapper" will come out below - but for other sections, produce a wrapper too. //
////////////////////////////////////////////////////////////////////////////////////////////////////////////
const fields = (
<Box key={section.name} display="flex" flexDirection="column" py={1} pr={2}>
{
section.fieldNames.map((fieldName: string) =>
{
let [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
if (field != null)
{
let label = field.label;
const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableName};field:${fieldName}`} />;
const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>;
return (
<Box key={fieldName} flexDirection="row" pr={2}>
<>
{
showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
}
<div style={{display: "inline-block", width: 0}}>&nbsp;</div>
<Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
{ValueUtils.getDisplayValue(field, record, "view", fieldName)}
</Typography>
</>
</Box>
);
}
})
}
</Box>
);
const fields = renderSectionOfFields(section.name, section.fieldNames, tableMetaData, helpHelpActive, record);
if (section.tier === "T1")
{
@ -1055,7 +1064,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
{
showEditChildForm &&
<Modal open={showEditChildForm as boolean} onClose={(event, reason) => closeEditChildForm(event, reason)}>
<Modal open={showEditChildForm !== null} onClose={(event, reason) => closeEditChildForm(event, reason)}>
<div className="modalEditForm">
<EntityForm
isModal={true}

10
src/qqq/styles/qqq-override-styles.css
View File

@ -688,6 +688,16 @@ input[type="search"]::-webkit-search-results-decoration
font-weight: 500;
}
.recordView .widget
{
padding: 24px;
}
.recordView .widget .recordGridWidget
{
margin: -8px;
}
.MuiPickersDay-root.Mui-selected, .MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover
{
color: white;

10
src/qqq/utils/qqq/FilterUtils.tsx
View File

@ -23,6 +23,7 @@ import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QControl
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
import {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
import {NowWithOffsetExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression";
import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
@ -365,7 +366,12 @@ class FilterUtils
for (let i = 0; i < maxLoops; i++)
{
const value = criteria.values[i];
if (value.type == "NowWithOffset")
if (value.type == "FilterVariableExpression")
{
const expression = new FilterVariableExpression(value);
labels.push(expression.toString());
}
else if (value.type == "NowWithOffset")
{
const expression = new NowWithOffsetExpression(value);
labels.push(expression.toString());
@ -657,7 +663,7 @@ class FilterUtils
filterForBackend.subFilters = subFilters;
if(pageNumber !== undefined && rowsPerPage !== undefined)
if (pageNumber !== undefined && rowsPerPage !== undefined)
{
filterForBackend.skip = pageNumber * rowsPerPage;
filterForBackend.limit = rowsPerPage;

34
src/test/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardTableMetaDataTest.java
View File

@ -29,6 +29,9 @@ import com.kingsrook.qqq.backend.core.instances.QInstanceValidator;
import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
import com.kingsrook.qqq.frontend.materialdashboard.junit.BaseTest;
import com.kingsrook.qqq.frontend.materialdashboard.junit.TestUtils;
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRule;
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleAction;
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleTrigger;
import org.junit.jupiter.api.Test;
import static org.assertj.core.api.Assertions.assertThat;
import static org.junit.jupiter.api.Assertions.assertEquals;
@ -76,6 +79,37 @@ class MaterialDashboardTableMetaDataTest extends BaseTest
assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withDefaultQuickFilterFieldNames(List.of("firstName", "lastName", "firstName"))),
"duplicated field name: firstName");
}
/*******************************************************************************
**
*******************************************************************************/
@Test
void testValidateFieldRules()
{
assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withFieldRule(new FieldRule())),
"without an action",
"without a trigger",
"without a sourceField");
assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withFieldRule(new FieldRule()
.withTrigger(FieldRuleTrigger.ON_CHANGE)
.withAction(FieldRuleAction.CLEAR_TARGET_FIELD)
.withSourceField("notAField")
.withTargetField("alsoNotAField")
)),
"unrecognized sourceField: notAField",
"unrecognized targetField: alsoNotAField");
assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withFieldRule(new FieldRule()
.withTrigger(FieldRuleTrigger.ON_CHANGE)
.withAction(FieldRuleAction.RELOAD_WIDGET)
.withSourceField("id")
.withTargetWidget("notAWidget")
)),
"unrecognized targetWidget: notAWidget");
}

12
src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QBaseSeleniumTest.java
View File

@ -33,6 +33,7 @@ import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeAll;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.TestInfo;
import org.junit.jupiter.api.extension.ExtendWith;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
@ -43,6 +44,7 @@ import static org.junit.jupiter.api.Assertions.fail;
/*******************************************************************************
** Base class for Selenium tests
*******************************************************************************/
@ExtendWith(SeleniumTestWatcher.class)
public class QBaseSeleniumTest
{
protected static ChromeOptions chromeOptions;
@ -93,6 +95,8 @@ public class QBaseSeleniumTest
driver.manage().window().setSize(new Dimension(1700, 1300));
qSeleniumLib = new QSeleniumLib(driver);
SeleniumTestWatcher.setCurrentSeleniumLib(qSeleniumLib);
if(useInternalJavalin())
{
qSeleniumJavalin = new QSeleniumJavalin();
@ -197,10 +201,10 @@ public class QBaseSeleniumTest
qSeleniumLib.takeScreenshotToFile(getClass().getSimpleName() + "/" + testInfo.getDisplayName());
}
if(driver != null)
{
driver.quit();
}
////////////////////////////////////////////////////////////////////////////////////////
// note - at one time we did a driver.quit here - but we're moving that into //
// SeleniumTestWatcher, so it can dump logs if it wants to (it runs after the @After) //
////////////////////////////////////////////////////////////////////////////////////////
if(qSeleniumJavalin != null)
{

20
src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QSeleniumLib.java
View File

@ -42,6 +42,8 @@ import org.openqa.selenium.StaleElementReferenceException;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.logging.LogEntries;
import org.openqa.selenium.logging.LogEntry;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import static org.assertj.core.api.Assertions.assertThat;
@ -735,4 +737,22 @@ public class QSeleniumLib
return (this);
}
/*******************************************************************************
**
*******************************************************************************/
public void dumpConsole()
{
Set<String> availableLogTypes = driver.manage().logs().getAvailableLogTypes();
for(String logType : availableLogTypes)
{
LogEntries logEntries = driver.manage().logs().get(logType);
for(LogEntry logEntry : logEntries)
{
System.out.println(logEntry.toJson());
}
}
}
}

126
src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/SeleniumTestWatcher.java Normal file
View File

@ -0,0 +1,126 @@
/*
* 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/>.
*/
package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib;
import java.util.Optional;
import org.junit.jupiter.api.extension.ExtensionContext;
import org.junit.jupiter.api.extension.TestWatcher;
/*******************************************************************************
**
*******************************************************************************/
public class SeleniumTestWatcher implements TestWatcher
{
private static QSeleniumLib qSeleniumLib;
/*******************************************************************************
**
*******************************************************************************/
public static void setCurrentSeleniumLib(QSeleniumLib qSeleniumLib)
{
SeleniumTestWatcher.qSeleniumLib = qSeleniumLib;
}
/*******************************************************************************
**
*******************************************************************************/
@Override
public void testFailed(ExtensionContext context, Throwable cause)
{
if(qSeleniumLib != null)
{
System.out.println("Dumping browser console after failed test: " + context.getDisplayName());
System.out.println("----------------------------------------------------------------------------");
try
{
qSeleniumLib.dumpConsole();
}
catch(Exception e)
{
System.out.println("Error dumping console:");
e.printStackTrace();
}
System.out.println("----------------------------------------------------------------------------");
}
tryToQuitSelenium();
}
/*******************************************************************************
**
*******************************************************************************/
private void tryToQuitSelenium()
{
if(qSeleniumLib != null)
{
try
{
qSeleniumLib.driver.quit();
}
catch(Exception e)
{
System.err.println("Error quiting selenium driver: " + e.getMessage());
}
}
}
/*******************************************************************************
**
*******************************************************************************/
@Override
public void testSuccessful(ExtensionContext context)
{
tryToQuitSelenium();
}
/*******************************************************************************
**
*******************************************************************************/
@Override
public void testAborted(ExtensionContext context, Throwable cause)
{
tryToQuitSelenium();
}
/*******************************************************************************
**
*******************************************************************************/
@Override
public void testDisabled(ExtensionContext context, Optional<String> reason)
{
tryToQuitSelenium();
}
}