QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 05:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Checkpoint - starting to add between on dates & date-times

Browse Source
This commit is contained in:
darin.kelkhoff
2023-07-13 09:18:45 -05:00
parent 50ad1760d5
commit 8458ff6b2a
2 changed files with 119 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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",
}
@ -164,6 +166,8 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
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});
@ -178,6 +182,8 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
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;

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

@ -131,7 +131,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
/>;
};
const makeDateTimeExpressionTextField = (value: string, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
const makeDateTimeExpressionTextField = (expression: any, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
{
const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
{
@ -143,23 +143,120 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
const inputProps: any = {};
inputProps.endAdornment = (
<InputAdornment position="end">
<IconButton sx={{visibility: value ? "visible" : "hidden"}} onClick={(event) => clearValue(event, valueIndex)}>
<IconButton sx={{visibility: expression ? "visible" : "hidden"}} onClick={(event) => clearValue(event, valueIndex)}>
<Icon>close</Icon>
</IconButton>
</InputAdornment>
);
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;
}
}
return <TextField
id={`${idPrefix}${criteria.id}`}
label={label}
variant="standard"
autoComplete="off"
InputProps={{readOnly: true, unselectable: "off", ...inputProps}}
value={value}
value={displayValue}
fullWidth
/>;
}
const makeDateField = (valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
{
return <Box display="flex" alignItems="flex-end">
{
criteria.expression == null && makeTextField(valueIndex, label, idPrefix)
}
{
criteria.expression != null && makeDateTimeExpressionTextField(criteria.expression, valueIndex, label, idPrefix)
}
<Box>
<Tooltip title="Choose a common relative date expression" placement="top">
<Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer"}} onClick={openRelativeDateTimeMenu}>date_range</Icon>
</Tooltip>
<Menu
open={relativeDateTimeMenuAnchorElement}
anchorEl={relativeDateTimeMenuAnchorElement}
transformOrigin={{horizontal: "center", vertical: "top"}}
onClose={closeRelativeDateTimeMenu}
>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 1, "DAYS")}>1 day ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "THIS", "DAYS")}>today</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "LAST", "DAYS")}>yesterday</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 7, "DAYS")}>7 days ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "THIS", "WEEKS")}>start of this week</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "LAST", "WEEKS")}>start of last week</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 14, "DAYS")}>14 days ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 30, "DAYS")}>30 days ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "THIS", "MONTHS")}>start of this month</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "LAST", "MONTHS")}>start of last month</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 90, "DAYS")}>90 days ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 180, "DAYS")}>180 days ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 1, "YEARS")}>1 year ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "THIS", "YEARS")}>start of this year</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "LAST", "YEARS")}>start of last year</MenuItem>
</Menu>
</Box>
<Box>
<AdvancedDateTimeFilterValues type={"date"} expression={criteria.expression} onSave={(expression: any) => saveNewDateTimeExpression(valueIndex, expression)} />
</Box>
</Box>;
}
const makeDateTimeField = (valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
{
return <Box display="flex" alignItems="flex-end">
{
criteria.expression == null && makeTextField(valueIndex, label, idPrefix)
}
{
criteria.expression != null && makeDateTimeExpressionTextField(criteria.expression, valueIndex, label, idPrefix)
}
<Box>
<Tooltip title="Choose a common relative date-time expression" placement="top">
<Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer"}} onClick={openRelativeDateTimeMenu}>date_range</Icon>
</Tooltip>
<Menu
open={relativeDateTimeMenuAnchorElement}
anchorEl={relativeDateTimeMenuAnchorElement}
transformOrigin={{horizontal: "center", vertical: "top"}}
onClose={closeRelativeDateTimeMenu}
>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 1, "HOURS")}>1 hour ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "THIS", "HOURS")}>start of this hour</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "LAST", "HOURS")}>start of last hour</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 12, "HOURS")}>12 hours ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 24, "HOURS")}>24 hours ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "THIS", "DAYS")}>start of today</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "LAST", "DAYS")}>start of yesterday</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 7, "DAYS")}>7 days ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "THIS", "WEEKS")}>start of this week</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "LAST", "WEEKS")}>start of last week</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 14, "DAYS")}>14 days ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 30, "DAYS")}>30 days ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "THIS", "MONTHS")}>start of this month</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "LAST", "MONTHS")}>start of last month</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 90, "DAYS")}>90 days ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 180, "DAYS")}>180 days ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset(valueIndex, "MINUS", 1, "YEARS")}>1 year ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "THIS", "YEARS")}>start of this year</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod(valueIndex, "LAST", "YEARS")}>start of last year</MenuItem>
</Menu>
</Box>
<Box>
<AdvancedDateTimeFilterValues type={"datetime"} expression={criteria.expression} onSave={(expression: any) => saveNewDateTimeExpression(valueIndex, expression)} />
</Box>
</Box>;
}
function saveNewPasterValues(newValues: any[])
{
if (criteria.values)
@ -193,34 +290,34 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
setRelativeDateTimeMenuAnchorElement(null);
};
const setExpressionNowWithOffset = (operator: NowWithOffsetOperator, amount: number, timeUnit: NowWithOffsetUnit) =>
const setExpressionNowWithOffset = (valueIndex: number, operator: NowWithOffsetOperator, amount: number, timeUnit: NowWithOffsetUnit) =>
{
const expression = new NowWithOffsetExpression()
expression.operator = operator;
expression.amount = amount;
expression.timeUnit = timeUnit;
saveNewDateTimeExpression(expression);
saveNewDateTimeExpression(valueIndex, expression);
closeRelativeDateTimeMenu();
};
const setExpressionThisOrLastPeriod = (operator: ThisOrLastPeriodOperator, timeUnit: ThisOrLastPeriodUnit) =>
const setExpressionThisOrLastPeriod = (valueIndex: number, operator: ThisOrLastPeriodOperator, timeUnit: ThisOrLastPeriodUnit) =>
{
const expression = new ThisOrLastPeriodExpression()
expression.operator = operator;
expression.timeUnit = timeUnit;
saveNewDateTimeExpression(expression);
saveNewDateTimeExpression(valueIndex, expression);
closeRelativeDateTimeMenu();
};
function saveNewDateTimeExpression(expression: any)
function saveNewDateTimeExpression(valueIndex: number, expression: any)
{
criteria.expression = expression;
criteria.values = null;
valueChangeHandler(null, null, null, expression);
valueChangeHandler(null, valueIndex, null, expression);
forceUpdate();
}
@ -231,87 +328,14 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
case ValueMode.SINGLE:
return makeTextField();
case ValueMode.SINGLE_DATE:
return <Box display="flex" alignItems="flex-end">
{
criteria.expression == null && makeTextField()
}
{
criteria.expression != null && makeDateTimeExpressionTextField(criteria.expression.toString())
}
<Box>
<Tooltip title="Choose a common relative date-time expression" placement="top">
<Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer"}} onClick={openRelativeDateTimeMenu}>event_upcoming</Icon>
</Tooltip>
<Menu
open={relativeDateTimeMenuAnchorElement}
anchorEl={relativeDateTimeMenuAnchorElement}
transformOrigin={{horizontal: "center", vertical: "top"}}
onClose={closeRelativeDateTimeMenu}
>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 1, "DAYS")}>1 day ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("THIS", "DAYS")}>today</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("LAST", "DAYS")}>yesterday</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 7, "DAYS")}>7 days ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("THIS", "WEEKS")}>start of this week</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("LAST", "WEEKS")}>start of last week</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 14, "DAYS")}>14 days ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 30, "DAYS")}>30 days ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("THIS", "MONTHS")}>start of this month</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("LAST", "MONTHS")}>start of last month</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 90, "DAYS")}>90 days ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 180, "DAYS")}>180 days ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 1, "YEARS")}>1 year ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("THIS", "YEARS")}>start of this year</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("LAST", "YEARS")}>start of last year</MenuItem>
</Menu>
return makeDateField();
case ValueMode.DOUBLE_DATE:
return <Box>
{makeDateField(0, "From", "from-")}
{makeDateField(1, "To", "to-")}
</Box>
<Box>
<AdvancedDateTimeFilterValues type={"date"} expression={criteria.expression} onSave={(expression: any) => saveNewDateTimeExpression(expression)} />
</Box>
</Box>;
case ValueMode.SINGLE_DATE_TIME:
return <Box display="flex" alignItems="flex-end">
{
criteria.expression == null && makeTextField()
}
{
criteria.expression != null && makeDateTimeExpressionTextField(criteria.expression.toString())
}
<Box>
<Tooltip title="Choose a common relative date-time expression" placement="top">
<Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer"}} onClick={openRelativeDateTimeMenu}>event_upcoming</Icon>
</Tooltip>
<Menu
open={relativeDateTimeMenuAnchorElement}
anchorEl={relativeDateTimeMenuAnchorElement}
transformOrigin={{horizontal: "center", vertical: "top"}}
onClose={closeRelativeDateTimeMenu}
>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 1, "HOURS")}>1 hour ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("THIS", "HOURS")}>start of this hour</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("LAST", "HOURS")}>start of last hour</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 12, "HOURS")}>12 hours ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 24, "HOURS")}>24 hours ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("THIS", "DAYS")}>start of today</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("LAST", "DAYS")}>start of yesterday</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 7, "DAYS")}>7 days ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("THIS", "WEEKS")}>start of this week</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("LAST", "WEEKS")}>start of last week</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 14, "DAYS")}>14 days ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 30, "DAYS")}>30 days ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("THIS", "MONTHS")}>start of this month</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("LAST", "MONTHS")}>start of last month</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 90, "DAYS")}>90 days ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 180, "DAYS")}>180 days ago</MenuItem>
<MenuItem onClick={() => setExpressionNowWithOffset("MINUS", 1, "YEARS")}>1 year ago</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("THIS", "YEARS")}>start of this year</MenuItem>
<MenuItem onClick={() => setExpressionThisOrLastPeriod("LAST", "YEARS")}>start of last year</MenuItem>
</Menu>
</Box>
<Box>
<AdvancedDateTimeFilterValues type={"datetime"} expression={criteria.expression} onSave={(expression: any) => saveNewDateTimeExpression(expression)} />
</Box>
</Box>;
return makeDateTimeField();
case ValueMode.DOUBLE:
return <Box>
<Box width="50%" display="inline-block">