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

CE-1179: checkpoint commit for integrations

Browse Source
This commit is contained in:
Tim Chamberlain
2024-04-30 10:06:21 -05:00
parent 4c6955b6ed
commit 8707aa8a94
14 changed files with 295 additions and 160 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", "@auth0/auth0-react": "1.10.2",
"@emotion/react": "11.7.1", "@emotion/react": "11.7.1",
"@emotion/styled": "11.6.0", "@emotion/styled": "11.6.0",
"@kingsrook/qqq-frontend-core": "1.0.96", "@kingsrook/qqq-frontend-core": "1.0.98",
"@mui/icons-material": "5.4.1", "@mui/icons-material": "5.4.1",
"@mui/material": "5.11.1", "@mui/material": "5.11.1",
"@mui/styles": "5.11.1", "@mui/styles": "5.11.1",

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 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 // // state variables //
@ -682,6 +682,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
criteriaParam={getQuickCriteriaParam(fieldName)} criteriaParam={getQuickCriteriaParam(fieldName)}
fieldMetaData={field} fieldMetaData={field}
defaultOperator={defaultOperator} defaultOperator={defaultOperator}
queryScreenUsage={queryScreenUsage}
handleRemoveQuickFilterField={null} />); handleRemoveQuickFilterField={null} />);
}) })
} }
@ -701,6 +702,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
criteriaParam={getQuickCriteriaParam(fieldName)} criteriaParam={getQuickCriteriaParam(fieldName)}
fieldMetaData={field} fieldMetaData={field}
defaultOperator={defaultOperator} defaultOperator={defaultOperator}
queryScreenUsage={queryScreenUsage}
handleRemoveQuickFilterField={handleRemoveQuickFilterField} />); 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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType"; 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 {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
import {NowWithOffsetExpression, NowWithOffsetOperator, NowWithOffsetUnit} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression"; 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"; 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 {styled} from "@mui/material/styles";
import TextField from "@mui/material/TextField"; import TextField from "@mui/material/TextField";
import Tooltip, {tooltipClasses, TooltipProps} from "@mui/material/Tooltip"; import Tooltip, {tooltipClasses, TooltipProps} from "@mui/material/Tooltip";
import React, {SyntheticEvent, useEffect, useReducer, useState} from "react";
import AdvancedDateTimeFilterValues from "qqq/components/query/AdvancedDateTimeFilterValues"; import AdvancedDateTimeFilterValues from "qqq/components/query/AdvancedDateTimeFilterValues";
import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel"; import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
import {EvaluatedExpression} from "qqq/components/query/EvaluatedExpression"; import {EvaluatedExpression} from "qqq/components/query/EvaluatedExpression";
import {makeTextField} from "qqq/components/query/FilterCriteriaRowValues"; 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 interface CriteriaDateFieldProps
@ -52,6 +53,7 @@ interface CriteriaDateFieldProps
field: QFieldMetaData; field: QFieldMetaData;
criteria: QFilterCriteriaWithId; criteria: QFilterCriteriaWithId;
valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void; valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
allowVariables?: boolean;
} }
CriteriaDateField.defaultProps = { CriteriaDateField.defaultProps = {
@ -60,19 +62,30 @@ CriteriaDateField.defaultProps = {
idPrefix: "value-" 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 [relativeDateTimeMenuAnchorElement, setRelativeDateTimeMenuAnchorElement] = useState(null);
const [forceAdvancedDateTimeDialogOpen, setForceAdvancedDateTimeDialogOpen] = useState(false) const [forceAdvancedDateTimeDialogOpen, setForceAdvancedDateTimeDialogOpen] = useState(false);
const [, forceUpdate] = useReducer((x) => x + 1, 0); const [, forceUpdate] = useReducer((x) => x + 1, 0);
const openRelativeDateTimeMenu = (event: React.MouseEvent<HTMLElement>) => const openRelativeDateTimeMenu = (event: React.MouseEvent<HTMLElement>) =>
{ {
setRelativeDateTimeOpen(true);
setRelativeDateTimeMenuAnchorElement(event.currentTarget); setRelativeDateTimeMenuAnchorElement(event.currentTarget);
}; };
const closeRelativeDateTimeMenu = () => const closeRelativeDateTimeMenu = () =>
{ {
setRelativeDateTimeOpen(false);
setRelativeDateTimeMenuAnchorElement(null); 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 isExpression = criteria.values && criteria.values[valueIndex] && criteria.values[valueIndex].type;
const currentExpression = isExpression ? criteria.values[valueIndex] : null; 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) => const tooltipMenuItemFromExpression = (valueIndex: number, tooltipPlacement: "left" | "right", expression: Expression) =>
{ {
let startOfPrefix = ""; 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 "; startOfPrefix = "start of ";
} }
@ -194,14 +199,14 @@ export default function CriteriaDateField({valueIndex, label, idPrefix, field, c
return <Box display="flex" alignItems="flex-end"> return <Box display="flex" alignItems="flex-end">
{ {
isExpression ? makeDateTimeExpressionTextField(criteria.values[valueIndex], valueIndex, label, idPrefix) isExpression ? makeDateTimeExpressionTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
: makeTextField(field, criteria, valueChangeHandler, valueIndex, label, idPrefix) : makeTextField(field, criteria, valueChangeHandler, valueIndex, label, idPrefix, allowVariables)
} }
<Box> <Box>
<Tooltip title={`Choose a common relative ${field.type == QFieldType.DATE ? "date" : "date-time"} expression`} placement="bottom"> <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> <Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={openRelativeDateTimeMenu}>date_range</Icon>
</Tooltip> </Tooltip>
<Menu <Menu
open={relativeDateTimeMenuAnchorElement} open={relativeDateTimeOpen}
anchorEl={relativeDateTimeMenuAnchorElement} anchorEl={relativeDateTimeMenuAnchorElement}
transformOrigin={{horizontal: "left", vertical: "top"}} transformOrigin={{horizontal: "left", vertical: "top"}}
onClose={closeRelativeDateTimeMenu} 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 {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; 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 Button from "@mui/material/Button";
import Icon from "@mui/material/Icon"; import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
@ -56,7 +58,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
const someRef = createRef(); const someRef = createRef();
const textRef = useRef(null); const textRef = useRef(null);
const [didInitialFocus, setDidInitialFocus] = useState(false) const [didInitialFocus, setDidInitialFocus] = useState(false);
const [openGroups, setOpenGroups] = useState(props.initialOpenedGroups || {}); const [openGroups, setOpenGroups] = useState(props.initialOpenedGroups || {});
const openGroupsBecauseOfFilter = {} as { [name: string]: boolean }; const openGroupsBecauseOfFilter = {} as { [name: string]: boolean };
@ -71,9 +73,9 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
console.log(`Open groups: ${JSON.stringify(openGroups)}`); console.log(`Open groups: ${JSON.stringify(openGroups)}`);
if(!didInitialFocus) if (!didInitialFocus)
{ {
if(textRef.current) if (textRef.current)
{ {
textRef.current.select(); textRef.current.select();
setDidInitialFocus(true); 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. // // 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 => sortedColumns.sort((a, b): number =>
{ {
return a.headerName.localeCompare(b.headerName); return a.headerName.localeCompare(b.headerName);
}) });
for (let i = 0; i < sortedColumns.length; i++) for (let i = 0; i < sortedColumns.length; i++)
{ {
@ -361,7 +363,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
const changeFilterText = (newValue: string) => const changeFilterText = (newValue: string) =>
{ {
setFilterText(newValue); setFilterText(newValue);
props.filterTextChanger(newValue) props.filterTextChanger(newValue);
}; };
const filterTextChanged = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => 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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType"; 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 {Expression} from "qqq/components/query/CriteriaDateField";
import ValueUtils from "qqq/utils/qqq/ValueUtils"; 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. ** 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 DAY_MS = 24 * 60 * 60 * 1000;
const evaluateExpression = (time: Date, field: QFieldMetaData, expression: Expression): string => const evaluateExpression = (time: Date, field: QFieldMetaData, expression: Expression): string =>
{ {
if (expression.type == "FilterVariableExpression")
{
return (expression.toString());
}
let rs: Date = null; let rs: Date = null;
if (expression.type == "NowWithOffset") 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: case ValueMode.PVS_MULTI:
return (null); return (null);
} }
} };
export interface OperatorOption export interface OperatorOption
{ {
@ -183,7 +183,7 @@ export const getOperatorOptions = (tableMetaData: QTableMetaData, fieldName: str
} }
return (operatorOptions); return (operatorOptions);
} };
interface FilterCriteriaRowProps interface FilterCriteriaRowProps
@ -200,10 +200,9 @@ interface FilterCriteriaRowProps
} }
FilterCriteriaRow.defaultProps = 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 criteriaIsValid = true;
let criteriaStatusTooltip = "This condition is fully defined and is part of your filter."; 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() === ""); return (value === null || value == undefined || String(value).trim() === "");
} }
if(!criteria) if (!criteria)
{ {
criteriaIsValid = false; criteriaIsValid = false;
criteriaStatusTooltip = "This condition is not defined."; criteriaStatusTooltip = "This condition is not defined.";
@ -284,7 +283,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
let defaultFieldValue; let defaultFieldValue;
let field = null; let field = null;
let fieldTable = null; let fieldTable = null;
if(criteria && criteria.fieldName) if (criteria && criteria.fieldName)
{ {
[field, fieldTable] = FilterUtils.getField(tableMetaData, criteria.fieldName); [field, fieldTable] = FilterUtils.getField(tableMetaData, criteria.fieldName);
if (field && fieldTable) if (field && fieldTable)
@ -303,9 +302,9 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
let newOperatorSelectedValue = operatorOptions.filter(option => 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)); return (JSON.stringify(option.implicitValues) == JSON.stringify(criteria.values));
} }
@ -316,7 +315,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
} }
return (false); return (false);
})[0]; })[0];
if(newOperatorSelectedValue?.label !== operatorSelectedValue?.label) if (newOperatorSelectedValue?.label !== operatorSelectedValue?.label)
{ {
setOperatorSelectedValue(newOperatorSelectedValue); setOperatorSelectedValue(newOperatorSelectedValue);
setOperatorInputValue(newOperatorSelectedValue?.label); setOperatorInputValue(newOperatorSelectedValue?.label);
@ -379,12 +378,12 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
{ {
criteria.operator = newValue ? newValue.value : null; criteria.operator = newValue ? newValue.value : null;
if(newValue) if (newValue)
{ {
setOperatorSelectedValue(newValue); setOperatorSelectedValue(newValue);
setOperatorInputValue(newValue.label); setOperatorInputValue(newValue.label);
if(newValue.implicitValues) if (newValue.implicitValues)
{ {
criteria.values = 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... // // 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. // // 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 = []; criteria.values = [];
} }
if(newValue.valueMode && !newValue.implicitValues) if (newValue.valueMode && !newValue.implicitValues)
{ {
const requiredValueCount = getValueModeRequiredCount(newValue.valueMode); const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
if(requiredValueCount != null && criteria.values.length > requiredValueCount) if (requiredValueCount != null && criteria.values.length > requiredValueCount)
{ {
criteria.values.splice(requiredValueCount); criteria.values.splice(requiredValueCount);
} }
@ -424,12 +423,12 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
// @ts-ignore // @ts-ignore
const value = newValue !== undefined ? newValue : event ? event.target.value : null; const value = newValue !== undefined ? newValue : event ? event.target.value : null;
if(!criteria.values) if (!criteria.values)
{ {
criteria.values = []; criteria.values = [];
} }
if(valueIndex == "all") if (valueIndex == "all")
{ {
criteria.values = value; criteria.values = value;
} }

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

@ -23,19 +23,23 @@
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData"; import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType"; import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; 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 Autocomplete from "@mui/material/Autocomplete";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import Icon from "@mui/material/Icon"; import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import InputAdornment from "@mui/material/InputAdornment/InputAdornment"; import InputAdornment from "@mui/material/InputAdornment/InputAdornment";
import TextField from "@mui/material/TextField"; import TextField from "@mui/material/TextField";
import React, {SyntheticEvent, useReducer} from "react";
import DynamicSelect from "qqq/components/forms/DynamicSelect"; 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 {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
import {EvaluatedExpression} from "qqq/components/query/EvaluatedExpression";
import FilterCriteriaPaster from "qqq/components/query/FilterCriteriaPaster"; import FilterCriteriaPaster from "qqq/components/query/FilterCriteriaPaster";
import {OperatorOption, ValueMode} from "qqq/components/query/FilterCriteriaRow"; import {OperatorOption, ValueMode} from "qqq/components/query/FilterCriteriaRow";
import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
import ValueUtils from "qqq/utils/qqq/ValueUtils"; import ValueUtils from "qqq/utils/qqq/ValueUtils";
import React, {SyntheticEvent, useReducer, useState} from "react";
interface Props interface Props
{ {
@ -44,7 +48,8 @@ interface Props
field: QFieldMetaData; field: QFieldMetaData;
table: QTableMetaData; table: QTableMetaData;
valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void; valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
initiallyOpenMultiValuePvs?: boolean initiallyOpenMultiValuePvs?: boolean;
queryScreenUsage?: QueryScreenUsage;
} }
FilterCriteriaRowValues.defaultProps = FilterCriteriaRowValues.defaultProps =
@ -72,8 +77,10 @@ export const getTypeForTextField = (field: QFieldMetaData): string =>
return (type); 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); let type = getTypeForTextField(field);
const inputLabelProps: any = {}; 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 ** Event handler for key-down events - specifically added here, to stop pressing
** 'tab' in a date or date-time from closing the quick-filter... ** '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 (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!..."); console.log("Tab on date or date-time - don't close me, just move to the next sub-field!...");
e.stopPropagation(); 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 = {}; const inputProps: any = {};
inputProps.endAdornment = ( inputProps.endAdornment = (
<InputAdornment position="end"> <InputAdornment position="end">
@ -121,25 +157,40 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
</InputAdornment> </InputAdornment>
); );
return <TextField return <Box sx={{margin: 0, padding: 0, display: "flex"}}>
id={`${idPrefix}${criteria.id}`} {
label={label} isExpression ? (
variant="standard" makeFilterVariableTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
autoComplete="off" ) : (
type={type} <TextField
onChange={(event) => valueChangeHandler(event, valueIndex)} id={`${idPrefix}${criteria.id}`}
onKeyDown={handleKeyDown} label={label}
value={value} variant="standard"
InputLabelProps={inputLabelProps} autoComplete="off"
InputProps={inputProps} type={type}
fullWidth onChange={(event) => valueChangeHandler(event, valueIndex)}
autoFocus={true} 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 [, forceUpdate] = useReducer((x) => x + 1, 0);
const [allowVariables, setAllowVariables] = useState(queryScreenUsage == "reportSetup");
if (!operatorOption) if (!operatorOption)
{ {
@ -174,7 +225,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
case ValueMode.NONE: case ValueMode.NONE:
return null; return null;
case ValueMode.SINGLE: case ValueMode.SINGLE:
return makeTextField(field, criteria, valueChangeHandler); return makeTextField(field, criteria, valueChangeHandler, 0, undefined, undefined, allowVariables);
case ValueMode.SINGLE_DATE: case ValueMode.SINGLE_DATE:
return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} />; return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} />;
case ValueMode.DOUBLE_DATE: 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-" /> <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" />
</Box>; </Box>;
case ValueMode.SINGLE_DATE_TIME: 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: case ValueMode.DOUBLE_DATE_TIME:
return <Box> return <Box>
<CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" /> <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: case ValueMode.DOUBLE:
return <Box> return <Box>
<Box width="50%" display="inline-block"> <Box width="50%" display="inline-block">
{makeTextField(field, criteria, valueChangeHandler, 0, "From", "from-")} {makeTextField(field, criteria, valueChangeHandler, 0, "From", "from-", allowVariables)}
</Box> </Box>
<Box width="50%" display="inline-block"> <Box width="50%" display="inline-block">
{makeTextField(field, criteria, valueChangeHandler, 1, "To", "to-")} {makeTextField(field, criteria, valueChangeHandler, 1, "To", "to-", allowVariables)}
</Box> </Box>
</Box>; </Box>;
case ValueMode.MULTI: case ValueMode.MULTI:
@ -276,4 +327,4 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
return (<br />); return (<br />);
} }
export default FilterCriteriaRowValues; export default FilterCriteriaRowValues;

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 Button from "@mui/material/Button";
import Menu from "@mui/material/Menu"; import Menu from "@mui/material/Menu";
import TextField from "@mui/material/TextField"; import TextField from "@mui/material/TextField";
import React, {SyntheticEvent, useContext, useReducer, useState} from "react";
import QContext from "QContext"; import QContext from "QContext";
import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel"; import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
import {getDefaultCriteriaValue, getOperatorOptions, getValueModeRequiredCount, OperatorOption, validateCriteria} from "qqq/components/query/FilterCriteriaRow"; import {getDefaultCriteriaValue, getOperatorOptions, getValueModeRequiredCount, OperatorOption, validateCriteria} from "qqq/components/query/FilterCriteriaRow";
import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues"; import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
import XIcon from "qqq/components/query/XIcon"; import XIcon from "qqq/components/query/XIcon";
import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
import FilterUtils from "qqq/utils/qqq/FilterUtils"; import FilterUtils from "qqq/utils/qqq/FilterUtils";
import TableUtils from "qqq/utils/qqq/TableUtils"; import TableUtils from "qqq/utils/qqq/TableUtils";
import React, {SyntheticEvent, useContext, useReducer, useState} from "react";
export type CriteriaParamType = QFilterCriteriaWithId | null | "tooComplex"; export type CriteriaParamType = QFilterCriteriaWithId | null | "tooComplex";
@ -50,6 +51,7 @@ interface QuickFilterProps
updateCriteria: (newCriteria: QFilterCriteria, needDebounce: boolean, doRemoveCriteria: boolean) => void; updateCriteria: (newCriteria: QFilterCriteria, needDebounce: boolean, doRemoveCriteria: boolean) => void;
defaultOperator?: QCriteriaOperator; defaultOperator?: QCriteriaOperator;
handleRemoveQuickFilterField?: (fieldName: string) => void; handleRemoveQuickFilterField?: (fieldName: string) => void;
queryScreenUsage?: QueryScreenUsage;
} }
QuickFilter.defaultProps = QuickFilter.defaultProps =
@ -71,7 +73,7 @@ export const quickFilterButtonStyles = {
minHeight: "auto", minHeight: "auto",
padding: "0.375rem 0.625rem", whiteSpace: "nowrap", padding: "0.375rem 0.625rem", whiteSpace: "nowrap",
marginBottom: "0.5rem" marginBottom: "0.5rem"
} };
/******************************************************************************* /*******************************************************************************
** Test if a CriteriaParamType represents an actual query criteria - or, if it's ** 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 => 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); return (true);
} }
@ -107,7 +109,7 @@ const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteri
} }
return (false); return (false);
} };
/******************************************************************************* /*******************************************************************************
@ -117,29 +119,29 @@ const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteri
*******************************************************************************/ *******************************************************************************/
const getOperatorSelectedValue = (operatorOptions: OperatorOption[], criteria: QFilterCriteriaWithId, defaultOperator: QCriteriaOperator): OperatorOption => const getOperatorSelectedValue = (operatorOptions: OperatorOption[], criteria: QFilterCriteriaWithId, defaultOperator: QCriteriaOperator): OperatorOption =>
{ {
if(criteria) if (criteria)
{ {
const filteredOptions = operatorOptions.filter(o => doesOperatorOptionEqualCriteria(o, criteria)); const filteredOptions = operatorOptions.filter(o => doesOperatorOptionEqualCriteria(o, criteria));
if(filteredOptions.length > 0) if (filteredOptions.length > 0)
{ {
return (filteredOptions[0]); return (filteredOptions[0]);
} }
} }
const filteredOptions = operatorOptions.filter(o => o.value == defaultOperator); const filteredOptions = operatorOptions.filter(o => o.value == defaultOperator);
if(filteredOptions.length > 0) if (filteredOptions.length > 0)
{ {
return (filteredOptions[0]); return (filteredOptions[0]);
} }
return (null); return (null);
} };
/******************************************************************************* /*******************************************************************************
** Component to render a QuickFilter - that is - a button, with a Menu under it, ** Component to render a QuickFilter - that is - a button, with a Menu under it,
** with Operator and Value controls. ** 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 operatorOptions = fieldMetaData ? getOperatorOptions(tableMetaData, fullFieldName) : [];
const [_, tableForField] = TableUtils.getFieldAndTable(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 (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 // // 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 => const criteriaNeedsReset = (): boolean =>
{ {
if(criteria != null && criteriaParam == null) if (criteria != null && criteriaParam == null)
{ {
const defaultOperatorOption = operatorOptions.filter(o => o.value == defaultOperator)[0]; 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, // // 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); return (false);
} };
/******************************************************************************* /*******************************************************************************
** Construct a new criteria object - resetting the values tied to the operator ** 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); setOperatorSelectedValue(operatorOption);
setOperatorInputValue(operatorOption?.label); setOperatorInputValue(operatorOption?.label);
setCriteria(criteria); setCriteria(criteria);
return(criteria); return (criteria);
} };
/******************************************************************************* /*******************************************************************************
** event handler to open the menu in response to the button being clicked. ** 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); const element = document.getElementById("value-" + criteria.id);
element?.focus(); 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... // // 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. // // 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 = []; criteria.values = [];
} }
if(newValue.valueMode && !newValue.implicitValues) if (newValue.valueMode && !newValue.implicitValues)
{ {
const requiredValueCount = getValueModeRequiredCount(newValue.valueMode); const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
if(requiredValueCount != null && criteria.values.length > requiredValueCount) if (requiredValueCount != null && criteria.values.length > requiredValueCount)
{ {
criteria.values.splice(requiredValueCount); criteria.values.splice(requiredValueCount);
} }
@ -345,6 +347,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
// @ts-ignore // @ts-ignore
const value = newValue !== undefined ? newValue : event ? event.target.value : null; const value = newValue !== undefined ? newValue : event ? event.target.value : null;
console.log("IN HERE");
if (!criteria.values) if (!criteria.values)
{ {
criteria.values = []; criteria.values = [];
@ -376,13 +379,13 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
*******************************************************************************/ *******************************************************************************/
const resetCriteria = (e: React.MouseEvent<HTMLSpanElement>) => const resetCriteria = (e: React.MouseEvent<HTMLSpanElement>) =>
{ {
if(criteriaIsValid) if (criteriaIsValid)
{ {
e.stopPropagation(); e.stopPropagation();
const newCriteria = makeNewCriteria(); const newCriteria = makeNewCriteria();
updateCriteria(newCriteria, false, true); updateCriteria(newCriteria, false, true);
} }
} };
/******************************************************************************* /*******************************************************************************
** event handler for clicking the (x) icon that turns off this quick filter field. ** 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 = () => const handleTurningOffQuickFilterField = () =>
{ {
closeMenu() closeMenu();
if(handleRemoveQuickFilterField) if (handleRemoveQuickFilterField)
{ {
handleRemoveQuickFilterField(criteria?.fieldName); handleRemoveQuickFilterField(criteria?.fieldName);
} }
} };
//////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////
// if no field was input (e.g., record-query is still loading), return null early // // if no field was input (e.g., record-query is still loading), return null early //
//////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////
if(!fieldMetaData) if (!fieldMetaData)
{ {
return (null); 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 // // from the last selected one, then set the state vars that control that autocomplete //
////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////
const maybeNewOperatorSelectedValue = getOperatorSelectedValue(operatorOptions, criteria, defaultOperator); const maybeNewOperatorSelectedValue = getOperatorSelectedValue(operatorOptions, criteria, defaultOperator);
if(JSON.stringify(maybeNewOperatorSelectedValue) !== JSON.stringify(operatorSelectedValue)) if (JSON.stringify(maybeNewOperatorSelectedValue) !== JSON.stringify(operatorSelectedValue))
{ {
setOperatorSelectedValue(maybeNewOperatorSelectedValue) setOperatorSelectedValue(maybeNewOperatorSelectedValue);
setOperatorInputValue(maybeNewOperatorSelectedValue?.label) setOperatorInputValue(maybeNewOperatorSelectedValue?.label);
} }
///////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////
@ -431,7 +434,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
const tooltipEnterDelay = 500; const tooltipEnterDelay = 500;
let buttonAdditionalStyles: any = {}; 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"; let buttonClassName = "filterNotActive";
if (criteriaIsValid) if (criteriaIsValid)
{ {
@ -446,9 +449,9 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
// don't show the Equals or In operators // // don't show the Equals or In operators //
/////////////////////////////////////////// ///////////////////////////////////////////
let operatorString = (<>{operatorSelectedValue.label}&nbsp;</>); 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></>); 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>) => const xClicked = (e: React.MouseEvent<HTMLSpanElement>) =>
{ {
e.stopPropagation(); e.stopPropagation();
if(criteriaIsValid) if (criteriaIsValid)
{ {
resetCriteria(e); resetCriteria(e);
} }
@ -499,12 +502,12 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
{ {
handleTurningOffQuickFilterField(); handleTurningOffQuickFilterField();
} }
} };
////////////////////////////// //////////////////////////////
// return the button & menu // // return the button & menu //
////////////////////////////// //////////////////////////////
const widthAndMaxWidth = fieldMetaData?.type == QFieldType.DATE_TIME ? 275 : 250 const widthAndMaxWidth = (fieldMetaData?.type == QFieldType.DATE_TIME) ? 295 : 250;
return ( return (
<> <>
{button} {button}
@ -541,6 +544,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
</Box> </Box>
<Box width={widthAndMaxWidth} maxWidth={widthAndMaxWidth} className="quickFilter filterValuesColumn"> <Box width={widthAndMaxWidth} maxWidth={widthAndMaxWidth} className="quickFilter filterValuesColumn">
<FilterCriteriaRowValues <FilterCriteriaRowValues
queryScreenUsage={queryScreenUsage}
operatorOption={operatorSelectedValue} operatorOption={operatorSelectedValue}
criteria={criteria} criteria={criteria}
field={fieldMetaData} field={fieldMetaData}

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

@ -196,8 +196,6 @@ export function HeaderLinkButtonComponent({label, onClickCallback, disabled, dis
} }
/******************************************************************************* /*******************************************************************************
** **
*******************************************************************************/ *******************************************************************************/
@ -220,7 +218,7 @@ export function HeaderToggleComponent({label, getValue, onClickCallback, disable
const onClick = () => const onClick = () =>
{ {
onClickCallback(); onClickCallback();
} };
return ( return (
<Box alignItems="baseline" mr="-0.75rem"> <Box alignItems="baseline" mr="-0.75rem">
@ -236,7 +234,6 @@ export function HeaderToggleComponent({label, getValue, onClickCallback, disable
} }
/******************************************************************************* /*******************************************************************************
** **
*******************************************************************************/ *******************************************************************************/
@ -698,7 +695,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
); );
let sublabelElement = ( let sublabelElement = (
<Box height="20px"> <Box key="sublabel" height="20px">
<Typography sx={{position: "relative", top: "-18px"}} variant="caption"> <Typography sx={{position: "relative", top: "-18px"}} variant="caption">
{props.widgetData?.sublabel} {props.widgetData?.sublabel}
</Typography> </Typography>
@ -785,7 +782,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
} }
{localLabelAdditionalElementsLeft} {localLabelAdditionalElementsLeft}
</Box> </Box>
<Box display="flex"> <Box key="sublabelContainer" display="flex">
{ {
hasPermission && props.widgetData?.sublabel && (sublabelElement) hasPermission && props.widgetData?.sublabel && (sublabelElement)
} }

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()); modalPivotTableDefinition[rowsOrColumns].push(new PivotTableGroupBy());
validateForm() validateForm();
forceUpdate(); forceUpdate();
} }
@ -292,7 +292,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
{ {
updateUsedGroupByFieldNames(modalPivotTableDefinition); updateUsedGroupByFieldNames(modalPivotTableDefinition);
updateUsedValueFieldNames(modalPivotTableDefinition); updateUsedValueFieldNames(modalPivotTableDefinition);
validateForm() validateForm();
forceUpdate(); forceUpdate();
} }
@ -308,7 +308,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
} }
modalPivotTableDefinition.values.push(new PivotTableValue()); modalPivotTableDefinition.values.push(new PivotTableValue());
validateForm() validateForm();
forceUpdate(); forceUpdate();
} }
@ -319,7 +319,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
function removeValue(index: number) function removeValue(index: number)
{ {
modalPivotTableDefinition.values.splice(index, 1); modalPivotTableDefinition.values.splice(index, 1);
validateForm() validateForm();
forceUpdate(); forceUpdate();
} }
@ -503,7 +503,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
const labelAdditionalElementsRight: JSX.Element[] = []; const labelAdditionalElementsRight: JSX.Element[] = [];
if (isEditable) 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 // // 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"... // // this is like a version of considering "touched"... //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if(!submitting && !attemptedSubmit) if (!submitting && !attemptedSubmit)
{ {
return; 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 // // 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 // // boxes, they won't immediately show errors, until a re-submit //
//////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////
if(attemptedSubmit) if (attemptedSubmit)
{ {
setAttemptedSubmit(false); setAttemptedSubmit(false);
} }

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

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

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

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

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