diff --git a/src/qqq/components/query/AdvancedDateTimeFilterValues.tsx b/src/qqq/components/query/AdvancedDateTimeFilterValues.tsx
new file mode 100644
index 0000000..085d01c
--- /dev/null
+++ b/src/qqq/components/query/AdvancedDateTimeFilterValues.tsx
@@ -0,0 +1,312 @@
+/*
+ * 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 .
+ */
+
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+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";
+import {FormControl, FormControlLabel, Radio, RadioGroup, Select} from "@mui/material";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+import Icon from "@mui/material/Icon";
+import MenuItem from "@mui/material/MenuItem";
+import Modal from "@mui/material/Modal";
+import {SelectChangeEvent} from "@mui/material/Select/Select";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import React, {ReactNode, useState} from "react";
+import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
+
+
+interface Props
+{
+ type: QFieldType
+ expression: any;
+ onSave: (expression: any) => void;
+ forcedOpen: boolean;
+}
+
+AdvancedDateTimeFilterValues.defaultProps = {
+ forcedOpen: false
+};
+
+const extractExpressionType = (expression: any) => expression?.type ?? "NowWithOffset";
+const extractNowWithOffsetAmount = (expression: any) => expression?.type == "NowWithOffset" ? (expression?.amount ?? 1) : 1;
+const extractNowWithOffsetTimeUnit = (expression: any) => expression?.type == "NowWithOffset" ? (expression?.timeUnit ?? "DAYS") : "DAYS" as NowWithOffsetUnit;
+const extractNowWithOffsetOperator = (expression: any) => expression?.type == "NowWithOffset" ? (expression?.operator ?? "MINUS") : "MINUS" as NowWithOffsetOperator;
+const extractThisOrLastPeriodTimeUnit = (expression: any) => expression?.type == "ThisOrLastPeriod" ? (expression?.timeUnit ?? "DAYS") : "DAYS" as ThisOrLastPeriodUnit;
+const extractThisOrLastPeriodOperator = (expression: any) => expression?.type == "ThisOrLastPeriod" ? (expression?.operator ?? "THIS") : "THIS" as ThisOrLastPeriodOperator;
+
+function AdvancedDateTimeFilterValues({type, expression, onSave, forcedOpen}: Props): JSX.Element
+{
+ const [originalExpression, setOriginalExpression] = useState(JSON.stringify(expression));
+
+ const [expressionType, setExpressionType] = useState(extractExpressionType(expression))
+
+ const [nowWithOffsetAmount, setNowWithOffsetAmount] = useState(extractNowWithOffsetAmount(expression));
+ const [nowWithOffsetTimeUnit, setNowWithOffsetTimeUnit] = useState(extractNowWithOffsetTimeUnit(expression));
+ const [nowWithOffsetOperator, setNowWithOffsetOperator] = useState(extractNowWithOffsetOperator(expression));
+
+ const [thisOrLastPeriodTimeUnit, setThisOrLastPeriodTimeUnit] = useState(extractThisOrLastPeriodTimeUnit(expression));
+ const [thisOrLastPeriodOperator, setThisOrLastPeriodOperator] = useState(extractThisOrLastPeriodOperator(expression));
+
+ const [isOpen, setIsOpen] = useState(false)
+
+ if(!isOpen && forcedOpen)
+ {
+ setIsOpen(true);
+ }
+
+ const setStateToExpression = (activeExpression: any) =>
+ {
+ setExpressionType(extractExpressionType(activeExpression))
+
+ setNowWithOffsetAmount(extractNowWithOffsetAmount(activeExpression))
+ setNowWithOffsetTimeUnit(extractNowWithOffsetTimeUnit(activeExpression))
+ setNowWithOffsetOperator(extractNowWithOffsetOperator(activeExpression))
+
+ setThisOrLastPeriodTimeUnit(extractThisOrLastPeriodTimeUnit(activeExpression))
+ setThisOrLastPeriodOperator(extractThisOrLastPeriodOperator(activeExpression))
+ }
+
+ //////////////////////////////////////////////////////////////////////////////////
+ // if the expression (prop) has changed, re-set the state variables based on it //
+ //////////////////////////////////////////////////////////////////////////////////
+ if(JSON.stringify(expression) !== originalExpression)
+ {
+ ///////////////////////////////////////////////////////////
+ // update all state vars based on the current expression //
+ ///////////////////////////////////////////////////////////
+ setStateToExpression(expression);
+
+ setOriginalExpression(JSON.stringify(expression))
+ }
+
+ const openDialog = () =>
+ {
+ setIsOpen(true);
+ }
+
+ const handleCancelClicked = () =>
+ {
+ ///////////////////////////////////////////////////////////
+ // update all state vars back to the original expression //
+ ///////////////////////////////////////////////////////////
+ const restoreExpression = JSON.parse(originalExpression)
+ setStateToExpression(restoreExpression);
+
+ close();
+ }
+
+ const handleSaveClicked = () =>
+ {
+ switch(expressionType)
+ {
+ case "Now":
+ {
+ const expression = new NowExpression();
+ onSave(expression);
+ break;
+ }
+ case "NowWithOffset":
+ {
+ const expression = new NowWithOffsetExpression()
+ expression.operator = nowWithOffsetOperator;
+ expression.amount = nowWithOffsetAmount;
+ expression.timeUnit = nowWithOffsetTimeUnit;
+ onSave(expression);
+ break;
+ }
+ case "ThisOrLastPeriod":
+ {
+ const expression = new ThisOrLastPeriodExpression()
+ expression.operator = thisOrLastPeriodOperator;
+ expression.timeUnit = thisOrLastPeriodTimeUnit;
+ onSave(expression);
+ break;
+ }
+ default:
+ {
+ console.log(`Unmapped expression type in handleSAveClicked: ${expressionType}`);
+ }
+ }
+
+ close();
+ }
+
+ const close = () =>
+ {
+ setIsOpen(false);
+ }
+
+ function handleExpressionTypeChange(e: React.ChangeEvent)
+ {
+ setExpressionType(e.target.value);
+ }
+
+ function handleNowWithOffsetAmountChange(event: React.ChangeEvent)
+ {
+ setNowWithOffsetAmount(parseInt(event.target.value));
+ }
+
+ function handleNowWithOffsetTimeUnitChange(event: SelectChangeEvent, child: ReactNode)
+ {
+ // @ts-ignore
+ setNowWithOffsetTimeUnit(event.target.value)
+ }
+
+ function handleNowWithOffsetOperatorChange(event: SelectChangeEvent, child: ReactNode)
+ {
+ // @ts-ignore
+ setNowWithOffsetOperator(event.target.value)
+ }
+
+ function handleThisOrLastPeriodTimeUnitChange(event: SelectChangeEvent, child: ReactNode)
+ {
+ // @ts-ignore
+ setThisOrLastPeriodTimeUnit(event.target.value)
+ }
+
+ function handleThisOrLastPeriodOperatorChange(event: SelectChangeEvent, child: ReactNode)
+ {
+ // @ts-ignore
+ setThisOrLastPeriodOperator(event.target.value)
+ }
+
+ const mainCardStyles: any = {};
+ mainCardStyles.width = "600px";
+
+ /////////////////////////////////////////////////////////////////////////
+ // for the time units, have them end in an 's' if the amount is plural //
+ // name here means "time unit 's'" //
+ /////////////////////////////////////////////////////////////////////////
+ const nwoTUs = (nowWithOffsetAmount == 1 ? "" : "s");
+
+ return (
+
+
+ settings
+
+ {
+ isOpen &&
+ (
+
+
+
+
+
+
+
+ Custom Date Filter Condition
+
+ Select the type of expression you want for your condition.
+ Then enter values to express your condition.
+
+
+
+
+
+
+
+ } label={type == QFieldType.DATE_TIME ? "Now" : "Today"} />
+
+
+
+ } label="Relative Expression" />
+
+
+ handleNowWithOffsetAmountChange(event)}
+ fullWidth
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ } label={`${type == QFieldType.DATE_TIME ? "Start of " : ""}This or Last...`} />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ );
+}
+
+export default AdvancedDateTimeFilterValues;
diff --git a/src/qqq/components/query/CriteriaDateField.tsx b/src/qqq/components/query/CriteriaDateField.tsx
new file mode 100644
index 0000000..7040c5d
--- /dev/null
+++ b/src/qqq/components/query/CriteriaDateField.tsx
@@ -0,0 +1,274 @@
+/*
+ * 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 .
+ */
+
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+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";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment/InputAdornment";
+import Menu from "@mui/material/Menu";
+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";
+
+
+export type Expression = NowWithOffsetExpression | ThisOrLastPeriodExpression | NowExpression;
+
+
+interface CriteriaDateFieldProps
+{
+ valueIndex: number;
+ label: string;
+ idPrefix: string;
+ field: QFieldMetaData;
+ criteria: QFilterCriteriaWithId;
+ valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
+}
+
+CriteriaDateField.defaultProps = {
+ valueIndex: 0,
+ label: "Value",
+ idPrefix: "value-"
+};
+
+export default function CriteriaDateField({valueIndex, label, idPrefix, field, criteria, valueChangeHandler}: CriteriaDateFieldProps): JSX.Element
+{
+ const [relativeDateTimeMenuAnchorElement, setRelativeDateTimeMenuAnchorElement] = useState(null);
+ const [forceAdvancedDateTimeDialogOpen, setForceAdvancedDateTimeDialogOpen] = useState(false)
+ const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+ const openRelativeDateTimeMenu = (event: React.MouseEvent) =>
+ {
+ setRelativeDateTimeMenuAnchorElement(event.currentTarget);
+ };
+
+ const closeRelativeDateTimeMenu = () =>
+ {
+ setRelativeDateTimeMenuAnchorElement(null);
+ };
+
+ const setExpression = (valueIndex: number, expression: Expression) =>
+ {
+ saveNewDateTimeExpression(valueIndex, expression);
+ closeRelativeDateTimeMenu();
+ };
+
+ function saveNewDateTimeExpression(valueIndex: number, expression: any)
+ {
+ valueChangeHandler(null, valueIndex, expression);
+ forceUpdate();
+ }
+
+ const makeDateTimeExpressionTextField = (expression: any, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
+ {
+ const clearValue = (event: React.MouseEvent | React.MouseEvent, index: number) =>
+ {
+ valueChangeHandler(event, index, "");
+ forceUpdate();
+ document.getElementById(`${idPrefix}${criteria.id}`).focus();
+ };
+
+ const inputProps: any = {};
+ inputProps.endAdornment = (
+
+ clearValue(event, valueIndex)}>
+ close
+
+
+ );
+
+ let displayValue = expression.toString();
+ if (expression?.type == "ThisOrLastPeriod")
+ {
+ if (field.type == QFieldType.DATE_TIME || (field.type == QFieldType.DATE && expression.timeUnit != "DAYS"))
+ {
+ displayValue = "start of " + displayValue;
+ }
+ }
+ if (expression?.type == "Now")
+ {
+ if (field.type == QFieldType.DATE)
+ {
+ displayValue = "today";
+ }
+ }
+
+ return } placement="bottom" enterDelay={1000} sx={{marginLeft: "-75px !important", marginTop: "-8px !important"}}>;
+ };
+
+ 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) => (
+ {children}
+ ))({
+ [`& .${tooltipClasses.tooltip}`]: {
+ whiteSpace: "nowrap"
+ },
+ });
+
+ const tooltipMenuItemFromExpression = (valueIndex: number, tooltipPlacement: "left" | "right", expression: Expression) =>
+ {
+ let startOfPrefix = "";
+ if(expression.type == "ThisOrLastPeriod")
+ {
+ if(field.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
+ {
+ startOfPrefix = "start of ";
+ }
+ }
+
+ return } placement={tooltipPlacement}>
+
+ ;
+ };
+
+ const newNowExpression = (): NowExpression =>
+ {
+ const expression = new NowExpression();
+ return (expression);
+ };
+
+ const newNowWithOffsetExpression = (operator: NowWithOffsetOperator, amount: number, timeUnit: NowWithOffsetUnit): NowWithOffsetExpression =>
+ {
+ const expression = new NowWithOffsetExpression();
+ expression.operator = operator;
+ expression.amount = amount;
+ expression.timeUnit = timeUnit;
+ return (expression);
+ };
+
+ const newThisOrLastPeriodExpression = (operator: ThisOrLastPeriodOperator, timeUnit: ThisOrLastPeriodUnit): ThisOrLastPeriodExpression =>
+ {
+ const expression = new ThisOrLastPeriodExpression();
+ expression.operator = operator;
+ expression.timeUnit = timeUnit;
+ return (expression);
+ };
+
+ function doForceAdvancedDateTimeDialogOpen()
+ {
+ setForceAdvancedDateTimeDialogOpen(true);
+ closeRelativeDateTimeMenu();
+ setTimeout(() => setForceAdvancedDateTimeDialogOpen(false), 100);
+ }
+
+ return
+ {
+ isExpression ? makeDateTimeExpressionTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
+ : makeTextField(field, criteria, valueChangeHandler, valueIndex, label, idPrefix)
+ }
+
+
+ date_range
+
+
+
+
+ saveNewDateTimeExpression(valueIndex, expression)} forcedOpen={forceAdvancedDateTimeDialogOpen} />
+
+ ;
+}
+
diff --git a/src/qqq/components/query/EvaluatedExpression.tsx b/src/qqq/components/query/EvaluatedExpression.tsx
new file mode 100644
index 0000000..9ab4f53
--- /dev/null
+++ b/src/qqq/components/query/EvaluatedExpression.tsx
@@ -0,0 +1,189 @@
+/*
+ * 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 .
+ */
+
+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";
+
+/*******************************************************************************
+ ** Helper component to show value inside tooltips that ticks up every second.
+ ** Without this, changing state on the higher-level component caused the tooltip to flicker.
+ *******************************************************************************/
+interface EvaluatedExpressionProps
+{
+ field: QFieldMetaData;
+ expression: any;
+}
+
+
+export function EvaluatedExpression({field, expression}: EvaluatedExpressionProps)
+{
+ const [timeForEvaluations, setTimeForEvaluations] = useState(new Date());
+
+ useEffect(() =>
+ {
+ const interval = setInterval(() =>
+ {
+ setTimeForEvaluations(new Date());
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ return <>{`${evaluateExpression(timeForEvaluations, field, expression)}`};
+}
+
+const HOUR_MS = 60 * 60 * 1000;
+const DAY_MS = 24 * 60 * 60 * 1000;
+const evaluateExpression = (time: Date, field: QFieldMetaData, expression: Expression): string =>
+{
+ let rs: Date = null;
+ if (expression.type == "NowWithOffset")
+ {
+ rs = time;
+ let amount = Number(expression.amount);
+ switch (expression.timeUnit)
+ {
+ case "MINUTES":
+ {
+ amount = amount * 60 * 1000;
+ break;
+ }
+ case "HOURS":
+ {
+ amount = amount * HOUR_MS;
+ break;
+ }
+ case "DAYS":
+ {
+ amount = amount * DAY_MS;
+ break;
+ }
+ case "YEARS":
+ {
+ amount = amount * 365 * DAY_MS;
+ break;
+ }
+ default:
+ {
+ console.log("Unrecognized time unit: " + expression.timeUnit);
+ }
+ }
+
+ if (expression.operator == "MINUS")
+ {
+ amount = -amount;
+ }
+
+ rs.setTime(rs.getTime() + amount);
+
+ if (expression.timeUnit == "YEARS")
+ {
+ //////////////////////
+ // handle leap year //
+ //////////////////////
+ const today = time;
+ while (today.getDate() != rs.getDate())
+ {
+ rs.setTime(rs.getTime() - DAY_MS);
+ }
+ }
+ }
+ else if (expression.type == "Now")
+ {
+ rs = time;
+ }
+ else if (expression.type == "ThisOrLastPeriod")
+ {
+ rs = time;
+ rs.setSeconds(0);
+ rs.setMinutes(0);
+ if (expression.timeUnit == "HOURS")
+ {
+ if (expression.operator == "LAST")
+ {
+ rs.setTime(rs.getTime() - HOUR_MS);
+ }
+ }
+ else
+ {
+ rs.setHours(0);
+ if (expression.timeUnit == "DAYS")
+ {
+ if (expression.operator == "LAST")
+ {
+ rs.setTime(rs.getTime() - DAY_MS);
+ }
+ }
+ else if (expression.timeUnit == "WEEKS")
+ {
+ while (rs.getDay() != 0)
+ {
+ rs.setTime(rs.getTime() - DAY_MS);
+ }
+
+ if (expression.operator == "LAST")
+ {
+ rs.setTime(rs.getTime() - 7 * DAY_MS);
+ }
+ }
+ else if (expression.timeUnit == "MONTHS")
+ {
+ rs.setDate(1);
+
+ if (expression.operator == "LAST")
+ {
+ rs.setTime(rs.getTime() - DAY_MS);
+ rs.setDate(1);
+ }
+ }
+ else if (expression.timeUnit == "YEARS")
+ {
+ rs.setDate(1);
+ rs.setMonth(0);
+
+ if (expression.operator == "LAST")
+ {
+ rs.setTime(rs.getTime() - 365 * DAY_MS);
+ }
+ }
+ }
+ }
+
+ if (rs)
+ {
+ if (field.type == QFieldType.DATE)
+ {
+ return (ValueUtils.formatDate(rs));
+ }
+ else
+ {
+ return (ValueUtils.formatDateTime(rs));
+ }
+ }
+
+ return null;
+};
+
+
+
diff --git a/src/qqq/components/query/FilterCriteriaRow.tsx b/src/qqq/components/query/FilterCriteriaRow.tsx
index 850a065..8114c63 100644
--- a/src/qqq/components/query/FilterCriteriaRow.tsx
+++ b/src/qqq/components/query/FilterCriteriaRow.tsx
@@ -45,7 +45,9 @@ export enum ValueMode
DOUBLE = "DOUBLE",
MULTI = "MULTI",
SINGLE_DATE = "SINGLE_DATE",
+ DOUBLE_DATE = "DOUBLE_DATE",
SINGLE_DATE_TIME = "SINGLE_DATE_TIME",
+ DOUBLE_DATE_TIME = "DOUBLE_DATE_TIME",
PVS_SINGLE = "PVS_SINGLE",
PVS_MULTI = "PVS_MULTI",
}
@@ -159,9 +161,13 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
operatorOptions.push({label: "equals", value: QCriteriaOperator.EQUALS, valueMode: ValueMode.SINGLE_DATE});
operatorOptions.push({label: "does not equal", value: QCriteriaOperator.NOT_EQUALS_OR_IS_NULL, valueMode: ValueMode.SINGLE_DATE});
operatorOptions.push({label: "is after", value: QCriteriaOperator.GREATER_THAN, valueMode: ValueMode.SINGLE_DATE});
+ operatorOptions.push({label: "is on or after", value: QCriteriaOperator.GREATER_THAN_OR_EQUALS, valueMode: ValueMode.SINGLE_DATE});
operatorOptions.push({label: "is before", value: QCriteriaOperator.LESS_THAN, valueMode: ValueMode.SINGLE_DATE});
+ operatorOptions.push({label: "is on or before", value: QCriteriaOperator.LESS_THAN_OR_EQUALS, valueMode: ValueMode.SINGLE_DATE});
operatorOptions.push({label: "is empty", value: QCriteriaOperator.IS_BLANK, valueMode: ValueMode.NONE});
operatorOptions.push({label: "is not empty", value: QCriteriaOperator.IS_NOT_BLANK, valueMode: ValueMode.NONE});
+ operatorOptions.push({label: "is between", value: QCriteriaOperator.BETWEEN, valueMode: ValueMode.DOUBLE_DATE});
+ operatorOptions.push({label: "is not between", value: QCriteriaOperator.NOT_BETWEEN, valueMode: ValueMode.DOUBLE_DATE});
//? operatorOptions.push({label: "is between", value: QCriteriaOperator.BETWEEN});
//? operatorOptions.push({label: "is not between", value: QCriteriaOperator.NOT_BETWEEN});
//? operatorOptions.push({label: "is any of", value: QCriteriaOperator.IN});
@@ -171,11 +177,13 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
operatorOptions.push({label: "equals", value: QCriteriaOperator.EQUALS, valueMode: ValueMode.SINGLE_DATE_TIME});
operatorOptions.push({label: "does not equal", value: QCriteriaOperator.NOT_EQUALS_OR_IS_NULL, valueMode: ValueMode.SINGLE_DATE_TIME});
operatorOptions.push({label: "is after", value: QCriteriaOperator.GREATER_THAN, valueMode: ValueMode.SINGLE_DATE_TIME});
- operatorOptions.push({label: "is on or after", value: QCriteriaOperator.GREATER_THAN_OR_EQUALS, valueMode: ValueMode.SINGLE_DATE_TIME});
+ operatorOptions.push({label: "is at or after", value: QCriteriaOperator.GREATER_THAN_OR_EQUALS, valueMode: ValueMode.SINGLE_DATE_TIME});
operatorOptions.push({label: "is before", value: QCriteriaOperator.LESS_THAN, valueMode: ValueMode.SINGLE_DATE_TIME});
- operatorOptions.push({label: "is on or before", value: QCriteriaOperator.LESS_THAN_OR_EQUALS, valueMode: ValueMode.SINGLE_DATE_TIME});
+ operatorOptions.push({label: "is at or before", value: QCriteriaOperator.LESS_THAN_OR_EQUALS, valueMode: ValueMode.SINGLE_DATE_TIME});
operatorOptions.push({label: "is empty", value: QCriteriaOperator.IS_BLANK, valueMode: ValueMode.NONE});
operatorOptions.push({label: "is not empty", value: QCriteriaOperator.IS_NOT_BLANK, valueMode: ValueMode.NONE});
+ operatorOptions.push({label: "is between", value: QCriteriaOperator.BETWEEN, valueMode: ValueMode.DOUBLE_DATE_TIME});
+ operatorOptions.push({label: "is not between", value: QCriteriaOperator.NOT_BETWEEN, valueMode: ValueMode.DOUBLE_DATE_TIME});
//? operatorOptions.push({label: "is between", value: QCriteriaOperator.BETWEEN});
//? operatorOptions.push({label: "is not between", value: QCriteriaOperator.NOT_BETWEEN});
break;
@@ -447,9 +455,9 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
// don't need to look at values //
//////////////////////////////////
}
- else if(operatorSelectedValue.valueMode == ValueMode.DOUBLE)
+ else if(operatorSelectedValue.valueMode == ValueMode.DOUBLE || operatorSelectedValue.valueMode == ValueMode.DOUBLE_DATE || operatorSelectedValue.valueMode == ValueMode.DOUBLE_DATE_TIME)
{
- if(criteria.values.length < 2)
+ if(criteria.values.length < 2 || isNotSet(criteria.values[0]) || isNotSet(criteria.values[1]))
{
criteriaIsValid = false;
criteriaStatusTooltip = "You must enter two values to complete the definition of this condition.";
diff --git a/src/qqq/components/query/FilterCriteriaRowValues.tsx b/src/qqq/components/query/FilterCriteriaRowValues.tsx
index ef1452b..d1eb339 100644
--- a/src/qqq/components/query/FilterCriteriaRowValues.tsx
+++ b/src/qqq/components/query/FilterCriteriaRowValues.tsx
@@ -31,6 +31,7 @@ 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 {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
import FilterCriteriaPaster from "qqq/components/query/FilterCriteriaPaster";
import {OperatorOption, ValueMode} from "qqq/components/query/FilterCriteriaRow";
@@ -45,7 +46,71 @@ interface Props
valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
}
-FilterCriteriaRowValues.defaultProps = {
+FilterCriteriaRowValues.defaultProps = {};
+
+export const getTypeForTextField = (field: QFieldMetaData): string =>
+{
+ let type = "search";
+
+ if (field.type == QFieldType.INTEGER)
+ {
+ type = "number";
+ }
+ else if (field.type == QFieldType.DATE)
+ {
+ type = "date";
+ }
+ else if (field.type == QFieldType.DATE_TIME)
+ {
+ type = "datetime-local";
+ }
+
+ 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-") =>
+{
+ let type = getTypeForTextField(field);
+ const inputLabelProps: any = {};
+
+ if (field.type == QFieldType.DATE || field.type == QFieldType.DATE_TIME)
+ {
+ inputLabelProps.shrink = true;
+ }
+
+ let value = criteria.values[valueIndex];
+ if (field.type == QFieldType.DATE_TIME && value && String(value).indexOf("Z") > -1)
+ {
+ value = ValueUtils.formatDateTimeValueForForm(value);
+ }
+
+ const clearValue = (event: React.MouseEvent | React.MouseEvent, index: number) =>
+ {
+ valueChangeHandler(event, index, "");
+ document.getElementById(`${idPrefix}${criteria.id}`).focus();
+ };
+
+ const inputProps: any = {};
+ inputProps.endAdornment = (
+
+ clearValue(event, valueIndex)}>
+ close
+
+
+ );
+
+ return valueChangeHandler(event, valueIndex)}
+ value={value}
+ InputLabelProps={inputLabelProps}
+ InputProps={inputProps}
+ fullWidth
+ />;
};
function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler}: Props): JSX.Element
@@ -57,71 +122,6 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
return
;
}
- const getTypeForTextField = (): string =>
- {
- let type = "search";
-
- if (field.type == QFieldType.INTEGER)
- {
- type = "number";
- }
- else if (field.type == QFieldType.DATE)
- {
- type = "date";
- }
- else if (field.type == QFieldType.DATE_TIME)
- {
- type = "datetime-local";
- }
-
- return (type);
- };
-
- const makeTextField = (valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
- {
- let type = getTypeForTextField();
- const inputLabelProps: any = {};
-
- if (field.type == QFieldType.DATE || field.type == QFieldType.DATE_TIME)
- {
- inputLabelProps.shrink = true;
- }
-
- let value = criteria.values[valueIndex];
- if (field.type == QFieldType.DATE_TIME && value && String(value).indexOf("Z") > -1)
- {
- value = ValueUtils.formatDateTimeValueForForm(value);
- }
-
- const clearValue = (event: React.MouseEvent | React.MouseEvent, index: number) =>
- {
- valueChangeHandler(event, index, "");
- document.getElementById(`${idPrefix}${criteria.id}`).focus();
- };
-
- const inputProps: any = {};
- inputProps.endAdornment = (
-
- clearValue(event, valueIndex)}>
- close
-
-
- );
-
- return valueChangeHandler(event, valueIndex)}
- value={value}
- InputLabelProps={inputLabelProps}
- InputProps={inputProps}
- fullWidth
- />;
- };
-
function saveNewPasterValues(newValues: any[])
{
if (criteria.values)
@@ -150,18 +150,28 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
case ValueMode.NONE:
return
;
case ValueMode.SINGLE:
- return makeTextField();
+ return makeTextField(field, criteria, valueChangeHandler);
case ValueMode.SINGLE_DATE:
- return makeTextField();
+ return ;
+ case ValueMode.DOUBLE_DATE:
+ return
+
+
+ ;
case ValueMode.SINGLE_DATE_TIME:
- return makeTextField();
+ return ;
+ case ValueMode.DOUBLE_DATE_TIME:
+ return
+
+
+ ;
case ValueMode.DOUBLE:
return
- { makeTextField(0, "From", "from-") }
+ {makeTextField(field, criteria, valueChangeHandler, 0, "From", "from-")}
- {makeTextField(1, "To", "to-")}
+ {makeTextField(field, criteria, valueChangeHandler, 1, "To", "to-")}
;
case ValueMode.MULTI:
@@ -184,7 +194,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
onChange={(event, value) => valueChangeHandler(event, "all", value)}
/>
- saveNewPasterValues(newValues)} />
+ saveNewPasterValues(newValues)} />
;
case ValueMode.PVS_SINGLE:
@@ -233,7 +243,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
inForm={false}
onChange={(value: any) => valueChangeHandler(null, "all", value)}
/>
-
+ ;
}
return (
);
diff --git a/src/qqq/styles/qqq-override-styles.css b/src/qqq/styles/qqq-override-styles.css
index 0b791d4..73d6aa5 100644
--- a/src/qqq/styles/qqq-override-styles.css
+++ b/src/qqq/styles/qqq-override-styles.css
@@ -446,22 +446,34 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
font-size: 14px !important;
}
-/* fix something in AND/OR dropdown in filters */
-.customFilterPanel .booleanOperatorColumn .MuiSvgIcon-root
+/* make down-arrow appear in select boxes */
+.customFilterPanel .booleanOperatorColumn .MuiSvgIcon-root,
+.AdvancedDateTimeFilterValues .MuiSvgIcon-root
{
display: inline-block !important;
}
-/* adjust bottom of AND/OR dropdown in filters */
-.customFilterPanel .booleanOperatorColumn .MuiInputBase-formControl
+/* adjust vertical padding in filter selects */
+.customFilterPanel .booleanOperatorColumn .MuiInputBase-formControl .MuiSelect-select,
+.AdvancedDateTimeFilterValues .MuiInputBase-formControl .MuiSelect-select
{
- padding-bottom: calc(0.25rem + 1px);
+ padding-bottom: calc(0.25rem + 1px) !important;
+ padding-top: calc(0.25rem + 1px) !important;
}
-/* adjust down-arrow in AND/OR dropdown in filters */
-.customFilterPanel .booleanOperatorColumn .MuiSelect-iconStandard
+.customFilterPanel .filterValuesColumn .MuiInputBase-inputAdornedEnd
{
- top: calc(50% - 0.75rem);
+ padding-right: 0 !important;
+}
+
+.customFilterPanel .filterValuesColumn .MuiInputAdornment-positionEnd button
+{
+ padding-left: 0;
+}
+
+.customFilterPanel .filterValuesColumn .MuiSelect-iconStandard
+{
+ display: inline;
}
/* change tags in any-of value fields to not be black bg with white text */
diff --git a/src/qqq/utils/DataGridUtils.tsx b/src/qqq/utils/DataGridUtils.tsx
index 6a04389..0aa5626 100644
--- a/src/qqq/utils/DataGridUtils.tsx
+++ b/src/qqq/utils/DataGridUtils.tsx
@@ -50,15 +50,33 @@ const makeGridFilterOperator = (value: string, label: string, takesValues: boole
return (rs);
};
+////////////////////////////////////////////////////////////////////////////////////////
+// at this point, these may only be used to drive the toolitp on the FILTER button... //
+////////////////////////////////////////////////////////////////////////////////////////
const QGridDateOperators = [
makeGridFilterOperator("equals", "equals", true),
- makeGridFilterOperator("isNot", "not equals", true),
+ makeGridFilterOperator("isNot", "does not equal", true),
makeGridFilterOperator("after", "is after", true),
makeGridFilterOperator("onOrAfter", "is on or after", true),
makeGridFilterOperator("before", "is before", true),
makeGridFilterOperator("onOrBefore", "is on or before", true),
makeGridFilterOperator("isEmpty", "is empty"),
makeGridFilterOperator("isNotEmpty", "is not empty"),
+ makeGridFilterOperator("between", "is between", true),
+ makeGridFilterOperator("notBetween", "is not between", true),
+];
+
+const QGridDateTimeOperators = [
+ makeGridFilterOperator("equals", "equals", true),
+ makeGridFilterOperator("isNot", "does not equal", true),
+ makeGridFilterOperator("after", "is after", true),
+ makeGridFilterOperator("onOrAfter", "is at or after", true),
+ makeGridFilterOperator("before", "is before", true),
+ makeGridFilterOperator("onOrBefore", "is at or before", true),
+ makeGridFilterOperator("isEmpty", "is empty"),
+ makeGridFilterOperator("isNotEmpty", "is not empty"),
+ makeGridFilterOperator("between", "is between", true),
+ makeGridFilterOperator("notBetween", "is not between", true),
];
export default class DataGridUtils
@@ -272,7 +290,7 @@ export default class DataGridUtils
case QFieldType.DATE_TIME:
columnType = "dateTime";
columnWidth = 200;
- filterOperators = QGridDateOperators;
+ filterOperators = QGridDateTimeOperators;
break;
case QFieldType.BOOLEAN:
columnType = "string"; // using boolean gives an odd 'no' for nulls.
diff --git a/src/qqq/utils/qqq/FilterUtils.ts b/src/qqq/utils/qqq/FilterUtils.ts
index a428c2c..8ce5706 100644
--- a/src/qqq/utils/qqq/FilterUtils.ts
+++ b/src/qqq/utils/qqq/FilterUtils.ts
@@ -23,10 +23,13 @@ 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 {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";
import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import {ThisOrLastPeriodExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/ThisOrLastPeriodExpression";
import {GridFilterItem, GridFilterModel, GridLinkOperator, GridSortItem} from "@mui/x-data-grid-pro";
import ValueUtils from "qqq/utils/qqq/ValueUtils";
@@ -285,6 +288,11 @@ class FilterUtils
return (param);
}
+ if (FilterUtils.gridCriteriaValueToExpression(param))
+ {
+ return (param);
+ }
+
let rs = [];
for (let i = 0; i < param.length; i++)
{
@@ -342,18 +350,24 @@ class FilterUtils
return (values);
}
- if (values.length > 0)
+ if (values && values.length > 0)
{
////////////////////////////////////////////////////////////////////////////////////////////////
// make sure dates are formatted for the grid the way it expects - not the way we pass it in. //
////////////////////////////////////////////////////////////////////////////////////////////////
if (fieldType === QFieldType.DATE_TIME)
{
- values[0] = ValueUtils.formatDateTimeValueForForm(values[0]);
+ for(let i = 0; i 0)
{
for (let i = 0; i < qQueryFilter.orderBys.length; i++)
@@ -595,6 +518,36 @@ class FilterUtils
}
}
+ /////////////////////////////////////////////////////////////////////////////////
+ // if any values in the items are objects, but should be expression instances, //
+ // then convert & replace them. //
+ /////////////////////////////////////////////////////////////////////////////////
+ if(defaultFilter && defaultFilter.items && defaultFilter.items.length)
+ {
+ defaultFilter.items.forEach((item) =>
+ {
+ if(item.value && item.value.length)
+ {
+ for (let i = 0; i < item.value.length; i++)
+ {
+ const expression = this.gridCriteriaValueToExpression(item.value[i])
+ if(expression)
+ {
+ item.value[i] = expression;
+ }
+ }
+ }
+ else
+ {
+ const expression = this.gridCriteriaValueToExpression(item.value)
+ if(expression)
+ {
+ item.value = expression;
+ }
+ }
+ });
+ }
+
return ({filter: defaultFilter, sort: defaultSort});
}
@@ -699,19 +652,30 @@ class FilterUtils
////////////////////////////////////////////////////////////////////////////////
// if no value set and not 'empty' or 'not empty' operators, skip this filter //
////////////////////////////////////////////////////////////////////////////////
- if ((!item.value || item.value.length == 0 || (item.value.length == 1 && (item.value[0] === "" || item.value[0] === undefined))) && item.operatorValue !== "isEmpty" && item.operatorValue !== "isNotEmpty")
+ let incomplete = false;
+ if (item.operatorValue === "between" || item.operatorValue === "notBetween")
{
- if (!allowIncompleteCriteria)
+ if(!item.value || !item.value.length || item.value.length < 2 || this.isUnset(item.value[0]) || this.isUnset(item.value[1]))
{
- console.log(`Discarding incomplete filter criteria: ${JSON.stringify(item)}`);
- return;
+ incomplete = true;
}
}
+ else if ((!item.value || item.value.length == 0 || (item.value.length == 1 && this.isUnset(item.value[0]))) && item.operatorValue !== "isEmpty" && item.operatorValue !== "isNotEmpty")
+ {
+ incomplete = true;
+ }
+
+ if (incomplete && !allowIncompleteCriteria)
+ {
+ console.log(`Discarding incomplete filter criteria: ${JSON.stringify(item)}`);
+ return;
+ }
const fieldMetadata = tableMetaData?.fields.get(item.columnField);
const operator = FilterUtils.gridCriteriaOperatorToQQQ(item.operatorValue);
const values = FilterUtils.gridCriteriaValueToQQQ(operator, item.value, item.operatorValue, fieldMetadata);
- qFilter.addCriteria(new QFilterCriteria(item.columnField, operator, values));
+ let criteria = new QFilterCriteria(item.columnField, operator, values);
+ qFilter.addCriteria(criteria);
foundFilter = true;
});
@@ -729,6 +693,44 @@ class FilterUtils
};
+ /*******************************************************************************
+ **
+ *******************************************************************************/
+ private static isUnset(value: any)
+ {
+ return value === "" || value === undefined;
+ }
+
+ /*******************************************************************************
+ **
+ *******************************************************************************/
+ private static gridCriteriaValueToExpression(value: any)
+ {
+ if (value && value.length)
+ {
+ value = value[0];
+ }
+
+ if (value && value.type)
+ {
+ if (value.type == "NowWithOffset")
+ {
+ return (new NowWithOffsetExpression(value));
+ }
+ else if (value.type == "Now")
+ {
+ return (new NowExpression(value));
+ }
+ else if (value.type == "ThisOrLastPeriod")
+ {
+ return (new ThisOrLastPeriodExpression(value));
+ }
+ }
+
+ return (null);
+ }
+
+
/*******************************************************************************
** edit the input filter object, replacing any values which have {id,label} attributes
** to instead just have the id part.
diff --git a/src/qqq/utils/qqq/ValueUtils.tsx b/src/qqq/utils/qqq/ValueUtils.tsx
index ad9695c..909ec04 100644
--- a/src/qqq/utils/qqq/ValueUtils.tsx
+++ b/src/qqq/utils/qqq/ValueUtils.tsx
@@ -254,6 +254,16 @@ class ValueUtils
return (returnValue);
}
+ public static formatDate(date: Date)
+ {
+ if (!(date instanceof Date))
+ {
+ date = new Date(date);
+ }
+ // @ts-ignore
+ return (`${date.toString("yyyy-MM-dd")}`);
+ }
+
public static formatDateTime(date: Date)
{
if (!(date instanceof Date))