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

CE-969: added basic support for 'too complex' subfilters

Browse Source
This commit is contained in:
Tim Chamberlain
2024-03-12 17:40:56 -05:00
parent 626ada3507
commit c36dfb5683
10 changed files with 4126 additions and 3378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
.eslintrc.json
View File

@ -28,8 +28,7 @@
}, },
"plugins": [ "plugins": [
"react", "react",
"@typescript-eslint", "@typescript-eslint"
"import"
], ],
"rules": { "rules": {
"brace-style": [ "brace-style": [
@ -43,41 +42,6 @@
"SwitchCase": 1 "SwitchCase": 1
} }
], ],
"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never",
"tsx": "never",
"js": "never"
}
],
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": true
}
],
"import/order": [
"error",
{
"groups": [
"builtin", // Built-in imports (come from NodeJS native) go first
"external", // <- External imports
"internal", // <- Absolute imports
["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together
"index", // <- index imports
"unknown"
],
"newlines-between": "never",
"alphabetize": {
/* sort in ascending order. Options: ["ignore", "asc", "desc"] */
"order": "asc",
/* ignore case. Options: [true, false] */
"caseInsensitive": true
}
}
],
"jsx-one-expression-per-line": "off", "jsx-one-expression-per-line": "off",
"max-len": "off", "max-len": "off",
"no-console": "off", "no-console": "off",
@ -114,15 +78,6 @@
"quotes": [ "quotes": [
"error", "error",
"double" "double"
],
"sort-imports": [
"error",
{
"ignoreCase": false,
"ignoreDeclarationSort": true,
"ignoreMemberSort": true,
"allowSeparatedGroups": false
}
] ]
}, },
"settings": { "settings": {

6723
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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.87", "@kingsrook/qqq-frontend-core": "1.0.88",
"@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",

60
src/qqq/components/audits/AuditBody.tsx
View File

@ -34,7 +34,7 @@ import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup"; import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import React, {JSXElementConstructor, useContext, useEffect, useState} from "react"; import React, {useContext, useEffect, useState} from "react";
import QContext from "QContext"; import QContext from "QContext";
import Client from "qqq/utils/qqq/Client"; import Client from "qqq/utils/qqq/Client";
import ValueUtils from "qqq/utils/qqq/ValueUtils"; import ValueUtils from "qqq/utils/qqq/ValueUtils";
@ -58,19 +58,19 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
const [limit, setLimit] = useState(1000); const [limit, setLimit] = useState(1000);
const [statusString, setStatusString] = useState("Loading audits..."); const [statusString, setStatusString] = useState("Loading audits...");
const [auditsByDate, setAuditsByDate] = useState([] as QRecord[][]); const [auditsByDate, setAuditsByDate] = useState([] as QRecord[][]);
const [auditDetailMap, setAuditDetailMap] = useState(null as Map<number, JSX.Element[]>) const [auditDetailMap, setAuditDetailMap] = useState(null as Map<number, JSX.Element[]>);
const [fieldChangeMap, setFieldChangeMap] = useState(null as Map<number, JSX.Element>) const [fieldChangeMap, setFieldChangeMap] = useState(null as Map<number, JSX.Element>);
const [sortDirection, setSortDirection] = useState(localStorage.getItem("audit.sortDirection") === "true"); const [sortDirection, setSortDirection] = useState(localStorage.getItem("audit.sortDirection") === "true");
const {accentColor} = useContext(QContext); const {accentColor} = useContext(QContext);
function wrapValue(value: any): JSX.Element function wrapValue(value: any): JSX.Element
{ {
return <span style={{fontWeight: "500", color: " rgb(123, 128, 154)"}}>{value}</span> return <span style={{fontWeight: "500", color: " rgb(123, 128, 154)"}}>{value}</span>;
} }
function wasValue(value: any): JSX.Element function wasValue(value: any): JSX.Element
{ {
return <span style={{fontWeight: "100", color: " rgb(123, 128, 154)"}}>{value}</span> return <span style={{fontWeight: "100", color: " rgb(123, 128, 154)"}}>{value}</span>;
} }
function getAuditDetailFieldChangeRow(qRecord: QRecord): JSX.Element | null function getAuditDetailFieldChangeRow(qRecord: QRecord): JSX.Element | null
@ -79,10 +79,14 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
const fieldName = qRecord.values.get("auditDetail.fieldName"); const fieldName = qRecord.values.get("auditDetail.fieldName");
const oldValue = qRecord.values.get("auditDetail.oldValue"); const oldValue = qRecord.values.get("auditDetail.oldValue");
const newValue = qRecord.values.get("auditDetail.newValue"); const newValue = qRecord.values.get("auditDetail.newValue");
if(fieldName && (oldValue !== null || newValue !== null)) if (fieldName && (oldValue !== null || newValue !== null))
{ {
const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName;
return (<tr><td>{fieldLabel}</td><td>{oldValue}</td><td>{newValue}</td></tr>) return (<tr>
<td>{fieldLabel}</td>
<td>{oldValue}</td>
<td>{newValue}</td>
</tr>);
} }
return (null); return (null);
} }
@ -93,22 +97,22 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
const fieldName = qRecord.values.get("auditDetail.fieldName"); const fieldName = qRecord.values.get("auditDetail.fieldName");
const oldValue = qRecord.values.get("auditDetail.oldValue"); const oldValue = qRecord.values.get("auditDetail.oldValue");
const newValue = qRecord.values.get("auditDetail.newValue"); const newValue = qRecord.values.get("auditDetail.newValue");
if(fieldName && (oldValue !== null || newValue !== null)) if (fieldName && (oldValue !== null || newValue !== null))
{ {
const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName; const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName;
if(oldValue !== undefined && newValue !== undefined) if (oldValue !== undefined && newValue !== undefined)
{ {
return (<>{fieldLabel}: Changed from {(oldValue)} to <b>{(newValue)}</b></>); return (<>{fieldLabel}: Changed from {(oldValue)} to <b>{(newValue)}</b></>);
} }
else if(newValue !== undefined) else if (newValue !== undefined)
{ {
return (<>{fieldLabel}: Set to <b>{(newValue)}</b></>); return (<>{fieldLabel}: Set to <b>{(newValue)}</b></>);
} }
else if(oldValue !== undefined) else if (oldValue !== undefined)
{ {
return (<>{fieldLabel}: Removed value {(oldValue)}</>); return (<>{fieldLabel}: Removed value {(oldValue)}</>);
} }
else if(message) else if (message)
{ {
return (<>{message}</>); return (<>{message}</>);
} }
@ -177,7 +181,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
} }
*/ */
} }
else if(message) else if (message)
{ {
return (<>{message}</>); return (<>{message}</>);
} }
@ -198,18 +202,18 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
new QFilterOrderBy("timestamp", sortDirection), new QFilterOrderBy("timestamp", sortDirection),
new QFilterOrderBy("id", sortDirection), new QFilterOrderBy("id", sortDirection),
new QFilterOrderBy("auditDetail.id", true) new QFilterOrderBy("auditDetail.id", true)
], "AND", 0, limit); ], null, "AND", 0, limit);
/////////////////////////////// ///////////////////////////////
// fetch audits in try-catch // // fetch audits in try-catch //
/////////////////////////////// ///////////////////////////////
let audits = [] as QRecord[] let audits = [] as QRecord[];
try try
{ {
audits = await qController.query("audit", filter, [new QueryJoin("auditDetail", true, "LEFT")]); audits = await qController.query("audit", filter, [new QueryJoin("auditDetail", true, "LEFT")]);
setAudits(audits); setAudits(audits);
} }
catch(e) catch (e)
{ {
if (e instanceof QException) if (e instanceof QException)
{ {
@ -233,33 +237,33 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////
// group the audits by auditId (e.g., this is a list that joined audit & auditDetail, so un-flatten it) // // group the audits by auditId (e.g., this is a list that joined audit & auditDetail, so un-flatten it) //
////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////
const unflattenedAudits: QRecord[] = [] const unflattenedAudits: QRecord[] = [];
const detailMap: Map<number, JSX.Element[]> = new Map(); const detailMap: Map<number, JSX.Element[]> = new Map();
const fieldChangeRowsMap: Map<number, JSX.Element[]> = new Map(); const fieldChangeRowsMap: Map<number, JSX.Element[]> = new Map();
for (let i = 0; i < audits.length; i++) for (let i = 0; i < audits.length; i++)
{ {
let id = audits[i].values.get("id"); let id = audits[i].values.get("id");
if(i == 0 || unflattenedAudits[unflattenedAudits.length-1].values.get("id") != id) if (i == 0 || unflattenedAudits[unflattenedAudits.length - 1].values.get("id") != id)
{ {
unflattenedAudits.push(audits[i]); unflattenedAudits.push(audits[i]);
} }
let auditDetail = getAuditDetailElement(audits[i]); let auditDetail = getAuditDetailElement(audits[i]);
if(auditDetail) if (auditDetail)
{ {
if(!detailMap.has(id)) if (!detailMap.has(id))
{ {
detailMap.set(id, []); detailMap.set(id, []);
} }
detailMap.get(id).push(auditDetail) detailMap.get(id).push(auditDetail);
} }
// table version, probably not to commit // table version, probably not to commit
let fieldChangeRow = getAuditDetailFieldChangeRow(audits[i]); let fieldChangeRow = getAuditDetailFieldChangeRow(audits[i]);
if(auditDetail) if (auditDetail)
{ {
if(!fieldChangeRowsMap.has(id)) if (!fieldChangeRowsMap.has(id))
{ {
fieldChangeRowsMap.set(id, []); fieldChangeRowsMap.set(id, []);
} }
@ -273,7 +277,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
for (let i = 0; i < unflattenedAudits.length; i++) for (let i = 0; i < unflattenedAudits.length; i++)
{ {
let id = unflattenedAudits[i].values.get("id"); let id = unflattenedAudits[i].values.get("id");
if(fieldChangeRowsMap.has(id) && fieldChangeRowsMap.get(id).length > 0) if (fieldChangeRowsMap.has(id) && fieldChangeRowsMap.get(id).length > 0)
{ {
const fieldChangeTable = ( const fieldChangeTable = (
<table style={{fontSize: "0.875rem"}} className="auditDetailTable" cellSpacing="0"> <table style={{fontSize: "0.875rem"}} className="auditDetailTable" cellSpacing="0">
@ -288,11 +292,11 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
{fieldChangeRowsMap.get(id).map((row, key) => <React.Fragment key={key}>{row}</React.Fragment>)} {fieldChangeRowsMap.get(id).map((row, key) => <React.Fragment key={key}>{row}</React.Fragment>)}
</tbody> </tbody>
</table> </table>
) );
fieldChangeMap.set(id, fieldChangeTable); fieldChangeMap.set(id, fieldChangeTable);
} }
} }
setFieldChangeMap(fieldChangeMap) setFieldChangeMap(fieldChangeMap);
////////////////////////////// //////////////////////////////
// group the audits by date // // group the audits by date //
@ -350,7 +354,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
const changeSortDirection = () => const changeSortDirection = () =>
{ {
setAudits([]); setAudits([]);
const newSortDirection = !sortDirection const newSortDirection = !sortDirection;
setSortDirection(newSortDirection); setSortDirection(newSortDirection);
localStorage.setItem("audit.sortDirection", String(newSortDirection)); localStorage.setItem("audit.sortDirection", String(newSortDirection));
}; };

54
src/qqq/components/misc/GotoRecordDialog.tsx
View File

@ -61,7 +61,7 @@ const qController = Client.getInstance();
function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
{ {
const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard"); const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
if(mdbMetaData && mdbMetaData.gotoFieldNames) if (mdbMetaData && mdbMetaData.gotoFieldNames)
{ {
return (true); return (true);
} }
@ -71,25 +71,25 @@ function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
function GotoRecordDialog(props: Props): JSX.Element function GotoRecordDialog(props: Props): JSX.Element
{ {
const fields: QFieldMetaData[] = [] const fields: QFieldMetaData[] = [];
let pkey = props?.tableMetaData?.fields.get(props?.tableMetaData?.primaryKeyField); let pkey = props?.tableMetaData?.fields.get(props?.tableMetaData?.primaryKeyField);
let addedPkey = false; let addedPkey = false;
const mdbMetaData = props?.tableMetaData?.supplementalTableMetaData?.get("materialDashboard"); const mdbMetaData = props?.tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
if(mdbMetaData) if (mdbMetaData)
{ {
if(mdbMetaData.gotoFieldNames) if (mdbMetaData.gotoFieldNames)
{ {
for(let i = 0; i<mdbMetaData.gotoFieldNames.length; i++) for (let i = 0; i < mdbMetaData.gotoFieldNames.length; i++)
{ {
// todo - multi-field keys!! // todo - multi-field keys!!
let fieldName = mdbMetaData.gotoFieldNames[i][0]; let fieldName = mdbMetaData.gotoFieldNames[i][0];
let field = props.tableMetaData.fields.get(fieldName); let field = props.tableMetaData.fields.get(fieldName);
if(field) if (field)
{ {
fields.push(field); fields.push(field);
if(field.name == pkey.name) if (field.name == pkey.name)
{ {
addedPkey = true; addedPkey = true;
} }
@ -98,17 +98,17 @@ function GotoRecordDialog(props: Props): JSX.Element
} }
} }
if(pkey && !addedPkey) if (pkey && !addedPkey)
{ {
fields.unshift(pkey); fields.unshift(pkey);
} }
const makeInitialValues = () => const makeInitialValues = () =>
{ {
const rs = {} as {[field: string]: string}; const rs = {} as { [field: string]: string };
fields.forEach((field) => rs[field.name] = ""); fields.forEach((field) => rs[field.name] = "");
return (rs); return (rs);
} };
const [error, setError] = useState(""); const [error, setError] = useState("");
const [values, setValues] = useState(makeInitialValues()); const [values, setValues] = useState(makeInitialValues());
@ -118,49 +118,49 @@ function GotoRecordDialog(props: Props): JSX.Element
{ {
values[fieldName] = newValue; values[fieldName] = newValue;
setValues(JSON.parse(JSON.stringify(values))); setValues(JSON.parse(JSON.stringify(values)));
} };
const close = () => const close = () =>
{ {
setError(""); setError("");
setValues(makeInitialValues()); setValues(makeInitialValues());
props.closeHandler(); props.closeHandler();
} };
const keyPressed = (e: React.KeyboardEvent<HTMLDivElement>) => const keyPressed = (e: React.KeyboardEvent<HTMLDivElement>) =>
{ {
// @ts-ignore // @ts-ignore
const targetId: string = e.target?.id; const targetId: string = e.target?.id;
if(e.key == "Esc") if (e.key == "Esc")
{ {
if(props.mayClose) if (props.mayClose)
{ {
close(); close();
} }
} }
else if(e.key == "Enter" && targetId?.startsWith("gotoInput-")) else if (e.key == "Enter" && targetId?.startsWith("gotoInput-"))
{ {
const index = targetId?.replaceAll("gotoInput-", ""); const index = targetId?.replaceAll("gotoInput-", "");
document.getElementById("gotoButton-" + index).click(); document.getElementById("gotoButton-" + index).click();
} }
} };
const closeRequested = () => const closeRequested = () =>
{ {
if(props.mayClose) if (props.mayClose)
{ {
close(); close();
} }
} };
const goClicked = async (fieldName: string) => const goClicked = async (fieldName: string) =>
{ {
setError(""); setError("");
const filter = new QQueryFilter([new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [values[fieldName]])], null, "AND", null, 10); const filter = new QQueryFilter([new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [values[fieldName]])], null, null, "AND", null, 10);
try try
{ {
const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant) const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant);
if (queryResult.length == 0) if (queryResult.length == 0)
{ {
setError("Record not found."); setError("Record not found.");
@ -177,19 +177,19 @@ function GotoRecordDialog(props: Props): JSX.Element
setTimeout(() => setError(""), 3000); setTimeout(() => setError(""), 3000);
} }
} }
catch(e) catch (e)
{ {
// @ts-ignore // @ts-ignore
setError(`Error: ${(e && e.message) ? e.message : e}`); setError(`Error: ${(e && e.message) ? e.message : e}`);
setTimeout(() => setError(""), 6000); setTimeout(() => setError(""), 6000);
} }
} };
if(props.tableMetaData) if (props.tableMetaData)
{ {
if (fields.length == 0 && !error) if (fields.length == 0 && !error)
{ {
setError("This table is not configured for this feature.") setError("This table is not configured for this feature.");
} }
} }
@ -244,7 +244,7 @@ function GotoRecordDialog(props: Props): JSX.Element
: <Box>&nbsp;</Box> : <Box>&nbsp;</Box>
} }
</Dialog> </Dialog>
) );
} }
interface GotoRecordButtonProps interface GotoRecordButtonProps
@ -266,7 +266,7 @@ GotoRecordButton.defaultProps = {
export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
{ {
const [gotoIsOpen, setGotoIsOpen] = useState(props.autoOpen) const [gotoIsOpen, setGotoIsOpen] = useState(props.autoOpen);
function openGoto() function openGoto()
{ {
@ -282,7 +282,7 @@ export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
return ( return (
<React.Fragment> <React.Fragment>
{ {
props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto} >Go To...</Button> props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto}>Go To...</Button>
} }
<GotoRecordDialog metaData={props.metaData} tableMetaData={props.tableMetaData} tableVariant={props.tableVariant} isOpen={gotoIsOpen} closeHandler={closeGoto} mayClose={props.mayClose} subHeader={props.subHeader} /> <GotoRecordDialog metaData={props.metaData} tableMetaData={props.tableMetaData} tableVariant={props.tableVariant} isOpen={gotoIsOpen} closeHandler={closeGoto} mayClose={props.mayClose} subHeader={props.subHeader} />
</React.Fragment> </React.Fragment>

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

@ -29,7 +29,7 @@ import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QC
import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria"; import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy"; import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter"; import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
import {Badge, ToggleButton, ToggleButtonGroup} from "@mui/material"; import {ToggleButton} from "@mui/material";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog"; import Dialog from "@mui/material/Dialog";
@ -38,9 +38,9 @@ import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText"; import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle"; import DialogTitle from "@mui/material/DialogTitle";
import Icon from "@mui/material/Icon"; import Icon from "@mui/material/Icon";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import {GridApiPro} from "@mui/x-data-grid-pro/models/gridApiPro"; import {GridApiPro} from "@mui/x-data-grid-pro/models/gridApiPro";
import React, {forwardRef, useContext, useImperativeHandle, useReducer, useState} from "react";
import QContext from "QContext"; import QContext from "QContext";
import colors from "qqq/assets/theme/base/colors"; import colors from "qqq/assets/theme/base/colors";
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons"; import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
@ -51,6 +51,7 @@ import QuickFilter, {quickFilterButtonStyles} from "qqq/components/query/QuickFi
import XIcon from "qqq/components/query/XIcon"; import XIcon from "qqq/components/query/XIcon";
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, {forwardRef, useContext, useImperativeHandle, useReducer, useState} from "react";
interface BasicAndAdvancedQueryControlsProps interface BasicAndAdvancedQueryControlsProps
{ {
@ -89,14 +90,14 @@ let debounceTimeout: string | number | NodeJS.Timeout;
*******************************************************************************/ *******************************************************************************/
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} = props;
///////////////////// /////////////////////
// state variables // // state variables //
///////////////////// /////////////////////
const [defaultQuickFilterFieldNames, setDefaultQuickFilterFieldNames] = useState(getDefaultQuickFilterFieldNames(tableMetaData)); const [defaultQuickFilterFieldNames, setDefaultQuickFilterFieldNames] = useState(getDefaultQuickFilterFieldNames(tableMetaData));
const [defaultQuickFilterFieldNameMap, setDefaultQuickFilterFieldNameMap] = useState(Object.fromEntries(defaultQuickFilterFieldNames.map(k => [k, true]))); const [defaultQuickFilterFieldNameMap, setDefaultQuickFilterFieldNameMap] = useState(Object.fromEntries(defaultQuickFilterFieldNames.map(k => [k, true])));
const [addQuickFilterMenu, setAddQuickFilterMenu] = useState(null) const [addQuickFilterMenu, setAddQuickFilterMenu] = useState(null);
const [addQuickFilterOpenCounter, setAddQuickFilterOpenCounter] = useState(0); const [addQuickFilterOpenCounter, setAddQuickFilterOpenCounter] = useState(0);
const [showClearFiltersWarning, setShowClearFiltersWarning] = useState(false); const [showClearFiltersWarning, setShowClearFiltersWarning] = useState(false);
const [mouseOverElement, setMouseOverElement] = useState(null as string); const [mouseOverElement, setMouseOverElement] = useState(null as string);
@ -122,7 +123,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
{ {
return (mode); return (mode);
} }
} };
}); });
@ -176,7 +177,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
let foundIndex = null; let foundIndex = null;
for (let i = 0; i < queryFilter?.criteria?.length; i++) for (let i = 0; i < queryFilter?.criteria?.length; i++)
{ {
if(queryFilter.criteria[i].fieldName == newCriteria.fieldName) if (queryFilter.criteria[i].fieldName == newCriteria.fieldName)
{ {
queryFilter.criteria[i] = newCriteria; queryFilter.criteria[i] = newCriteria;
found = true; found = true;
@ -185,9 +186,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
} }
} }
if(doClearCriteria) if (doClearCriteria)
{ {
if(found) if (found)
{ {
queryFilter.criteria.splice(foundIndex, 1); queryFilter.criteria.splice(foundIndex, 1);
setQueryFilter(queryFilter); setQueryFilter(queryFilter);
@ -195,9 +196,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
return; return;
} }
if(!found) if (!found)
{ {
if(!queryFilter.criteria) if (!queryFilter.criteria)
{ {
queryFilter.criteria = []; queryFilter.criteria = [];
} }
@ -205,9 +206,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
found = true; found = true;
} }
if(found) if (found)
{ {
clearTimeout(debounceTimeout) clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => debounceTimeout = setTimeout(() =>
{ {
setQueryFilter(queryFilter); setQueryFilter(queryFilter);
@ -227,17 +228,17 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
const matches: QFilterCriteriaWithId[] = []; const matches: QFilterCriteriaWithId[] = [];
for (let i = 0; i < queryFilter?.criteria?.length; i++) for (let i = 0; i < queryFilter?.criteria?.length; i++)
{ {
if(queryFilter.criteria[i].fieldName == fieldName) if (queryFilter.criteria[i].fieldName == fieldName)
{ {
matches.push(queryFilter.criteria[i] as QFilterCriteriaWithId); matches.push(queryFilter.criteria[i] as QFilterCriteriaWithId);
} }
} }
if(matches.length == 0) if (matches.length == 0)
{ {
return (null); return (null);
} }
else if(matches.length == 1) else if (matches.length == 1)
{ {
return (matches[0]); return (matches[0]);
} }
@ -254,8 +255,8 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
*******************************************************************************/ *******************************************************************************/
const handleRemoveQuickFilterField = (fieldName: string): void => const handleRemoveQuickFilterField = (fieldName: string): void =>
{ {
const index = quickFilterFieldNames.indexOf(fieldName) const index = quickFilterFieldNames.indexOf(fieldName);
if(index >= 0) if (index >= 0)
{ {
////////////////////////////////////// //////////////////////////////////////
// remove this field from the query // // remove this field from the query //
@ -276,7 +277,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
{ {
setAddQuickFilterMenu(event.currentTarget); setAddQuickFilterMenu(event.currentTarget);
setAddQuickFilterOpenCounter(addQuickFilterOpenCounter + 1); setAddQuickFilterOpenCounter(addQuickFilterOpenCounter + 1);
} };
/******************************************************************************* /*******************************************************************************
@ -285,7 +286,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
const closeAddQuickFilterMenu = () => const closeAddQuickFilterMenu = () =>
{ {
setAddQuickFilterMenu(null); setAddQuickFilterMenu(null);
} };
/******************************************************************************* /*******************************************************************************
@ -306,7 +307,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
const fieldName = newValue ? newValue.fieldName : null; const fieldName = newValue ? newValue.fieldName : null;
if (fieldName) if (fieldName)
{ {
if(defaultQuickFilterFieldNameMap[fieldName]) if (defaultQuickFilterFieldNameMap[fieldName])
{ {
return; return;
} }
@ -322,12 +323,12 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// only do this when user has added the field (e.g., not when adding it because of a selected view or filter-in-url) // // only do this when user has added the field (e.g., not when adding it because of a selected view or filter-in-url) //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if(reason != "modeToggleClicked" && reason != "defaultFilterLoaded" && reason != "savedFilterSelected" && reason != "activatedView") if (reason != "modeToggleClicked" && reason != "defaultFilterLoaded" && reason != "savedFilterSelected" && reason != "activatedView")
{ {
setTimeout(() => document.getElementById(`quickFilter.${fieldName}`)?.click(), 5); setTimeout(() => document.getElementById(`quickFilter.${fieldName}`)?.click(), 5);
} }
} }
else if(reason == "columnMenu") else if (reason == "columnMenu")
{ {
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// if field was already on-screen, but user clicked an option from the columnMenu, then open the quick-filter field // // if field was already on-screen, but user clicked an option from the columnMenu, then open the quick-filter field //
@ -346,13 +347,13 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
const handleFieldListMenuSelection = (field: QFieldMetaData, table: QTableMetaData): void => const handleFieldListMenuSelection = (field: QFieldMetaData, table: QTableMetaData): void =>
{ {
let fullFieldName = field.name; let fullFieldName = field.name;
if(table && table.name != tableMetaData.name) if (table && table.name != tableMetaData.name)
{ {
fullFieldName = `${table.name}.${field.name}`; fullFieldName = `${table.name}.${field.name}`;
} }
addQuickFilterField({fieldName: fullFieldName}, "selectedFromAddFilterMenu"); addQuickFilterField({fieldName: fullFieldName}, "selectedFromAddFilterMenu");
} };
/******************************************************************************* /*******************************************************************************
@ -385,15 +386,16 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
{ {
queryFilter.criteria.splice(index, 1); queryFilter.criteria.splice(index, 1);
setQueryFilter(queryFilter); setQueryFilter(queryFilter);
} };
/******************************************************************************* /*******************************************************************************
** format the current query as a string for showing on-screen as a preview. ** format the current query as a string for showing on-screen as a preview.
*******************************************************************************/ *******************************************************************************/
const queryToAdvancedString = () => const queryToAdvancedString = (thisQueryFilter: QQueryFilter, isSubFilter: boolean, subFilterOperator: string) =>
{ {
if(queryFilter == null || !queryFilter.criteria) const {canFilterWorkAsBasic, canFilterWorkAsAdvanced} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
if (thisQueryFilter == null || !thisQueryFilter.criteria)
{ {
return (<span></span>); return (<span></span>);
} }
@ -402,18 +404,22 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
return ( return (
<Box display="flex" flexWrap="wrap" fontSize="0.875rem"> <Box display="flex" flexWrap="wrap" fontSize="0.875rem">
{queryFilter.criteria.map((criteria, i) => {isSubFilter && (`${subFilterOperator} ( `)}
{thisQueryFilter.criteria.map((criteria, i) =>
{ {
const {criteriaIsValid} = validateCriteria(criteria, null); const {criteriaIsValid} = validateCriteria(criteria, null);
if(criteriaIsValid) if (criteriaIsValid)
{ {
counter++; counter++;
return ( return (
<span key={i} style={{marginBottom: "0.125rem"}} onMouseOver={() => handleMouseOverElement(`queryPreview-${i}`)} onMouseOut={() => handleMouseOutElement()}> <span key={i} style={{marginBottom: "0.125rem"}} onMouseOver={() => handleMouseOverElement(`queryPreview-${i}`)} onMouseOut={() => handleMouseOutElement()}>
{counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{queryFilter.booleanOperator}&nbsp;</span> : <span/>} {counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
{FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)} {FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
{mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}><XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(i)} /></span>} {canFilterWorkAsAdvanced && (
mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}>
<XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(i)} /></span>
)}
</span> </span>
); );
} }
@ -422,6 +428,12 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
return (<span />); return (<span />);
} }
})} })}
{thisQueryFilter.subFilters?.length > 0 && (thisQueryFilter.subFilters.map((filter: QQueryFilter, i) =>
{
return (queryToAdvancedString(filter, true, thisQueryFilter.booleanOperator));
}))}
{isSubFilter && (")")}
</Box> </Box>
); );
}; };
@ -434,16 +446,21 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
{ {
if (newValue) if (newValue)
{ {
if(newValue == "basic") if (newValue == "basic")
{ {
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// we're always allowed to go to advanced - // // we're always allowed to go to advanced - //
// but if we're trying to go to basic, make sure the filter isn't too complex // // but if we're trying to go to basic, make sure the filter isn't too complex //
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter); const {canFilterWorkAsBasic, canFilterWorkAsAdvanced} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
if (!canFilterWorkAsBasic) if (!canFilterWorkAsBasic)
{ {
console.log("Query cannot work as basic - so - not allowing toggle to basic.") console.log("Query cannot work as basic - so - not allowing toggle to basic.");
return;
}
if (!canFilterWorkAsAdvanced)
{
console.log("Query cannot work as advanced - so - not allowing toggle to advanced.");
return; return;
} }
@ -470,22 +487,29 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
*******************************************************************************/ *******************************************************************************/
const ensureAllFilterCriteriaAreActiveQuickFilters = (tableMetaData: QTableMetaData, queryFilter: QQueryFilter, reason: "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | string, newMode?: string) => const ensureAllFilterCriteriaAreActiveQuickFilters = (tableMetaData: QTableMetaData, queryFilter: QQueryFilter, reason: "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | string, newMode?: string) =>
{ {
if(!tableMetaData || !queryFilter) if (!tableMetaData || !queryFilter)
{ {
return; return;
} }
const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter); const {canFilterWorkAsBasic, canFilterWorkAsAdvanced} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
if (!canFilterWorkAsBasic) if (!canFilterWorkAsBasic && canFilterWorkAsAdvanced)
{ {
console.log("query is too complex for basic - so - switching to advanced"); console.log("query is too complex for basic - so - switching to advanced");
modeToggleClicked("advanced"); modeToggleClicked("advanced");
forceUpdate(); forceUpdate();
return; return;
} }
if (!canFilterWorkAsAdvanced)
{
console.log("query is too complex for advanced - so disabling buttons");
modeToggleClicked("tooComplex");
forceUpdate();
return;
}
const modeToUse = newMode ?? mode; const modeToUse = newMode ?? mode;
if(modeToUse == "basic") if (modeToUse == "basic")
{ {
for (let i = 0; i < queryFilter?.criteria?.length; i++) for (let i = 0; i < queryFilter?.criteria?.length; i++)
{ {
@ -496,7 +520,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
} }
} }
} }
} };
/******************************************************************************* /*******************************************************************************
@ -508,13 +532,13 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
for (let i = 0; i < queryFilter?.criteria?.length; i++) for (let i = 0; i < queryFilter?.criteria?.length; i++)
{ {
const {criteriaIsValid} = validateCriteria(queryFilter.criteria[i], null); const {criteriaIsValid} = validateCriteria(queryFilter.criteria[i], null);
if(criteriaIsValid) if (criteriaIsValid)
{ {
count++; count++;
} }
} }
return count; return count;
} };
/******************************************************************************* /*******************************************************************************
@ -523,11 +547,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
const handleSetSort = (field: QFieldMetaData, table: QTableMetaData, isAscending: boolean = true): void => const handleSetSort = (field: QFieldMetaData, table: QTableMetaData, isAscending: boolean = true): void =>
{ {
const fullFieldName = table && table.name != tableMetaData.name ? `${table.name}.${field.name}` : field.name; const fullFieldName = table && table.name != tableMetaData.name ? `${table.name}.${field.name}` : field.name;
queryFilter.orderBys = [new QFilterOrderBy(fullFieldName, isAscending)] queryFilter.orderBys = [new QFilterOrderBy(fullFieldName, isAscending)];
setQueryFilter(queryFilter); setQueryFilter(queryFilter);
forceUpdate(); forceUpdate();
} };
/******************************************************************************* /*******************************************************************************
@ -542,11 +566,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const isAscending = event.target.innerHTML == "arrow_upward"; const isAscending = event.target.innerHTML == "arrow_upward";
const isDescending = event.target.innerHTML == "arrow_downward"; const isDescending = event.target.innerHTML == "arrow_downward";
if(isAscending || isDescending) if (isAscending || isDescending)
{ {
handleSetSort(field, table, isAscending); handleSetSort(field, table, isAscending);
} }
} };
/******************************************************************************* /*******************************************************************************
@ -561,30 +585,30 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
setQueryFilter(queryFilter); setQueryFilter(queryFilter);
forceUpdate(); forceUpdate();
} }
catch(e) catch (e)
{ {
console.log(`Error toggling sort: ${e}`) console.log(`Error toggling sort: ${e}`);
} }
} }
///////////////////////////////// /////////////////////////////////
// set up the sort menu button // // set up the sort menu button //
///////////////////////////////// /////////////////////////////////
let sortButtonContents = <>Sort...</> let sortButtonContents = <>Sort...</>;
if(queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0) if (queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
{ {
const orderBy = queryFilter.orderBys[0]; const orderBy = queryFilter.orderBys[0];
const orderByFieldName = orderBy.fieldName; const orderByFieldName = orderBy.fieldName;
const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName); const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName);
const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`; const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`;
sortButtonContents = <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></> sortButtonContents = <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>;
} }
//////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////
// this is being used as a version of like forcing that we get re-rendered if the query filter changes... // // this is being used as a version of like forcing that we get re-rendered if the query filter changes... //
//////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////
const [lastIndex, setLastIndex] = useState(queryFilterJSON); const [lastIndex, setLastIndex] = useState(queryFilterJSON);
if(queryFilterJSON != lastIndex) if (queryFilterJSON != lastIndex)
{ {
ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, queryFilter, "defaultFilterLoaded"); ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, queryFilter, "defaultFilterLoaded");
setLastIndex(queryFilterJSON); setLastIndex(queryFilterJSON);
@ -594,16 +618,25 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
// set some status flags based on current filter // // set some status flags based on current filter //
/////////////////////////////////////////////////// ///////////////////////////////////////////////////
const hasValidFilters = queryFilter && countValidCriteria(queryFilter) > 0; const hasValidFilters = queryFilter && countValidCriteria(queryFilter) > 0;
const {canFilterWorkAsBasic, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter); const {canFilterWorkAsBasic, canFilterWorkAsAdvanced, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
let reasonWhyBasicIsDisabled = null; let reasonWhyBasicIsDisabled = null;
if(reasonsWhyItCannot && reasonsWhyItCannot.length > 0) if (canFilterWorkAsAdvanced && reasonsWhyItCannot && reasonsWhyItCannot.length > 0)
{ {
reasonWhyBasicIsDisabled = <> reasonWhyBasicIsDisabled = <>
Your current Filter cannot be managed using Basic mode because: Your current Filter cannot be managed using Basic mode because:
<ul style={{marginLeft: "1rem"}}> <ul style={{marginLeft: "1rem"}}>
{reasonsWhyItCannot.map((reason, i) => <li key={i}>{reason}</li>)} {reasonsWhyItCannot.map((reason, i) => <li key={i}>{reason}</li>)}
</ul> </ul>
</> </>;
}
if (!canFilterWorkAsAdvanced && reasonsWhyItCannot && reasonsWhyItCannot.length > 0)
{
reasonWhyBasicIsDisabled = <>
Your current Filter is too complex to modify because:
<ul style={{marginLeft: "1rem"}}>
{reasonsWhyItCannot.map((reason, i) => <li key={i}>{reason}</li>)}
</ul>
</>;
} }
const borderGray = colors.grayLines.main; const borderGray = colors.grayLines.main;
@ -646,7 +679,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
sx={{pl: 0.5, width: "10rem"}} sx={{pl: 0.5, width: "10rem"}}
> >
<ToggleButton value="basic" disabled={!canFilterWorkAsBasic}>Basic</ToggleButton> <ToggleButton value="basic" disabled={!canFilterWorkAsBasic}>Basic</ToggleButton>
<ToggleButton value="advanced">Advanced</ToggleButton> <ToggleButton value="advanced" disabled={!canFilterWorkAsAdvanced}>Advanced</ToggleButton>
</ToggleButtonGroup> </ToggleButtonGroup>
</Tooltip> </Tooltip>
</Box> </Box>
@ -722,29 +755,29 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////
// advanced mode - 2 rows - one for Filter Builder button & sort control, 2nd row for the filter-detail box // // advanced mode - 2 rows - one for Filter Builder button & sort control, 2nd row for the filter-detail box //
////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////
metaData && tableMetaData && mode == "advanced" && metaData && tableMetaData && (mode == "advanced" || mode == "tooComplex") &&
<Box borderRadius="0.75rem" border={`1px solid ${borderGray}`}> <Box borderRadius="0.75rem" border={`1px solid ${borderGray}`}>
<Box display="flex" justifyContent="space-between" alignItems="center"> {mode == "advanced" && (<Box display="flex" justifyContent="space-between" alignItems="center">
<Box p="0.5rem"> <Box p="0.5rem">
<Tooltip enterDelay={500} title="Build an advanced Filter" placement="top"> <Tooltip enterDelay={500} title="Build an advanced Filter" placement="top">
<> <>
<Button <Button
className="filterBuilderButton" className="filterBuilderButton"
onClick={(e) => openFilterBuilder(e)} onClick={(e) => openFilterBuilder(e)}
{... filterBuilderMouseEvents} {...filterBuilderMouseEvents}
startIcon={<Icon>build</Icon>} startIcon={<Icon>build</Icon>}
sx={{borderRadius: "0.75rem", padding: "0.5rem", pl: "1rem", fontSize: "0.875rem", fontWeight: 500, border: `1px solid ${accentColor}`, textTransform: "none"}} sx={{borderRadius: "0.75rem", padding: "0.5rem", pl: "1rem", fontSize: "0.875rem", fontWeight: 500, border: `1px solid ${accentColor}`, textTransform: "none"}}
> >
Filter Builder Filter Builder
{ {
countValidCriteria(queryFilter) > 0 && countValidCriteria(queryFilter) > 0 &&
<Box {... filterBuilderMouseEvents} sx={{backgroundColor: accentColor, marginLeft: "0.25rem", minWidth: "1rem", fontSize: "0.75rem"}} borderRadius="50%" color="#FFFFFF" position="relative" top="-2px" className="filterBuilderCountBadge"> <Box {...filterBuilderMouseEvents} sx={{backgroundColor: accentColor, marginLeft: "0.25rem", minWidth: "1rem", fontSize: "0.75rem"}} borderRadius="50%" color="#FFFFFF" position="relative" top="-2px" className="filterBuilderCountBadge">
{countValidCriteria(queryFilter) } {countValidCriteria(queryFilter)}
</Box> </Box>
} }
</Button> </Button>
{ {
hasValidFilters && mouseOverElement == "filterBuilderButton" && <span {... filterBuilderMouseEvents} className="filterBuilderXIcon"><XIcon shade="accent" position="default" onClick={() => setShowClearFiltersWarning(true)} /></span> hasValidFilters && mouseOverElement == "filterBuilderButton" && <span {...filterBuilderMouseEvents} className="filterBuilderXIcon"><XIcon shade="accent" position="default" onClick={() => setShowClearFiltersWarning(true)} /></span>
} }
</> </>
</Tooltip> </Tooltip>
@ -763,6 +796,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
{sortMenuComponent} {sortMenuComponent}
</Box> </Box>
</Box> </Box>
)}
<Box whiteSpace="nowrap" display="flex" flexShrink={1} flexGrow={1} alignItems="center"> <Box whiteSpace="nowrap" display="flex" flexShrink={1} flexGrow={1} alignItems="center">
{ {
<Box <Box
@ -777,7 +811,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
pb={"0.125rem"} pb={"0.125rem"}
boxShadow={"inset 0px 0px 4px 2px #EFEFED"} boxShadow={"inset 0px 0px 4px 2px #EFEFED"}
> >
{queryToAdvancedString()} {queryToAdvancedString(queryFilter, false, null)}
</Box> </Box>
} }
</Box> </Box>

24
src/qqq/components/widgets/misc/DataBagViewer.tsx
View File

@ -25,14 +25,13 @@ import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QC
import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria"; import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy"; import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter"; import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
import {Chip} from "@mui/material";
import Alert from "@mui/material/Alert"; import Alert from "@mui/material/Alert";
import Avatar from "@mui/material/Avatar"; import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import Chip from "@mui/material/Chip";
import Divider from "@mui/material/Divider"; import Divider from "@mui/material/Divider";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import List from "@mui/material/List"; import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem"; import ListItem from "@mui/material/ListItem";
import ListItemAvatar from "@mui/material/ListItemAvatar"; import ListItemAvatar from "@mui/material/ListItemAvatar";
@ -42,8 +41,6 @@ import Snackbar from "@mui/material/Snackbar";
import Tab from "@mui/material/Tab"; import Tab from "@mui/material/Tab";
import Tabs from "@mui/material/Tabs"; import Tabs from "@mui/material/Tabs";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import React, {useReducer, useState} from "react";
import AceEditor from "react-ace";
import DataBagDataEditor, {DataBagDataEditorProps} from "qqq/components/databags/DataBagDataEditor"; import DataBagDataEditor, {DataBagDataEditorProps} from "qqq/components/databags/DataBagDataEditor";
import DataBagPreview from "qqq/components/databags/DataBagPreview"; import DataBagPreview from "qqq/components/databags/DataBagPreview";
import TabPanel from "qqq/components/misc/TabPanel"; import TabPanel from "qqq/components/misc/TabPanel";
@ -57,6 +54,8 @@ import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/mode-javascript"; import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-json"; import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-github";
import React, {useReducer, useState} from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/ext-language_tools"; import "ace-builds/src-noconflict/ext-language_tools";
const qController = Client.getInstance(); const qController = Client.getInstance();
@ -64,12 +63,11 @@ const qController = Client.getInstance();
// Declaring props types for ViewForm // Declaring props types for ViewForm
interface Props interface Props
{ {
dataBagId: number dataBagId: number;
} }
DataBagViewer.defaultProps = DataBagViewer.defaultProps =
{ {};
};
export default function DataBagViewer({dataBagId}: Props): JSX.Element export default function DataBagViewer({dataBagId}: Props): JSX.Element
{ {
@ -77,12 +75,12 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
const [asyncLoadInited, setAsyncLoadInited] = useState(false); const [asyncLoadInited, setAsyncLoadInited] = useState(false);
const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]); const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]);
const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord); const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord);
const [currentVersionId , setCurrentVersionId] = useState(null as number); const [currentVersionId, setCurrentVersionId] = useState(null as number);
const [notFoundMessage, setNotFoundMessage] = useState(null); const [notFoundMessage, setNotFoundMessage] = useState(null);
const [selectedTab, setSelectedTab] = useState(0); const [selectedTab, setSelectedTab] = useState(0);
const [editorProps, setEditorProps] = useState(null as DataBagDataEditorProps); const [editorProps, setEditorProps] = useState(null as DataBagDataEditorProps);
const [successText, setSuccessText] = useState(null as string); const [successText, setSuccessText] = useState(null as string);
const [failText, setFailText] = useState(null as string) const [failText, setFailText] = useState(null as string);
const [, forceUpdate] = useReducer((x) => x + 1, 0); const [, forceUpdate] = useReducer((x) => x + 1, 0);
const [loadingSelectedVersion, _] = useState(new LoadingState(forceUpdate, "loading")); const [loadingSelectedVersion, _] = useState(new LoadingState(forceUpdate, "loading"));
@ -100,13 +98,13 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
const criteria = [new QFilterCriteria("dataBagId", QCriteriaOperator.EQUALS, [dataBagId])]; const criteria = [new QFilterCriteria("dataBagId", QCriteriaOperator.EQUALS, [dataBagId])];
const orderBys = [new QFilterOrderBy("sequenceNo", false)]; const orderBys = [new QFilterOrderBy("sequenceNo", false)];
const filter = new QQueryFilter(criteria, orderBys, "AND", 0, 25); const filter = new QQueryFilter(criteria, orderBys, null, "AND", 0, 25);
const versions = await qController.query("dataBagVersion", filter); const versions = await qController.query("dataBagVersion", filter);
console.log("Fetched versions:"); console.log("Fetched versions:");
console.log(versions); console.log(versions);
setVersionRecordList(versions); setVersionRecordList(versions);
if(versions && versions.length > 0) if (versions && versions.length > 0)
{ {
setCurrentVersionId(versions[0].values.get("id")); setCurrentVersionId(versions[0].values.get("id"));
const latestVersion = await qController.get("dataBagVersion", versions[0].values.get("id")); const latestVersion = await qController.get("dataBagVersion", versions[0].values.get("id"));
@ -362,7 +360,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
<Typography variant="h6" pl={3}>Data Preview (Version {selectedVersionRecord?.values?.get("sequenceNo")})</Typography> <Typography variant="h6" pl={3}>Data Preview (Version {selectedVersionRecord?.values?.get("sequenceNo")})</Typography>
</Box> </Box>
<Box height="400px" overflow="auto" ml={1} fontSize="14px"> <Box height="400px" overflow="auto" ml={1} fontSize="14px">
{loadingSelectedVersion.isNotLoading() && selectedTab == 1 && selectedVersionRecord?.values?.get("data") && <DataBagPreview json={selectedVersionRecord?.values?.get("data")} /> } {loadingSelectedVersion.isNotLoading() && selectedTab == 1 && selectedVersionRecord?.values?.get("data") && <DataBagPreview json={selectedVersionRecord?.values?.get("data")} />}
{loadingSelectedVersion.isLoadingSlow() && <Box pl={3}>Loading...</Box>} {loadingSelectedVersion.isLoadingSlow() && <Box pl={3}>Loading...</Box>}
</Box> </Box>
</Grid> </Grid>
@ -377,7 +375,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
<Modal open={editorProps !== null} onClose={(event, reason) => closeEditingScript(event, reason)}> <Modal open={editorProps !== null} onClose={(event, reason) => closeEditingScript(event, reason)}>
<DataBagDataEditor <DataBagDataEditor
closeCallback={closeEditingScript} closeCallback={closeEditingScript}
{... editorProps} {...editorProps}
/> />
</Modal> </Modal>
} }

54
src/qqq/components/widgets/misc/ScriptViewer.tsx
View File

@ -46,9 +46,6 @@ import Snackbar from "@mui/material/Snackbar";
import Tab from "@mui/material/Tab"; import Tab from "@mui/material/Tab";
import Tabs from "@mui/material/Tabs"; import Tabs from "@mui/material/Tabs";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import React, {useReducer, useState} from "react";
import AceEditor from "react-ace";
import {Link} from "react-router-dom";
import TabPanel from "qqq/components/misc/TabPanel"; import TabPanel from "qqq/components/misc/TabPanel";
import ScriptDocsForm from "qqq/components/scripts/ScriptDocsForm"; import ScriptDocsForm from "qqq/components/scripts/ScriptDocsForm";
import ScriptEditor, {ScriptEditorProps} from "qqq/components/scripts/ScriptEditor"; import ScriptEditor, {ScriptEditorProps} from "qqq/components/scripts/ScriptEditor";
@ -65,6 +62,9 @@ import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-velocity"; import "ace-builds/src-noconflict/mode-velocity";
import "ace-builds/src-noconflict/mode-json"; import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-github";
import React, {useReducer, useState} from "react";
import AceEditor from "react-ace";
import {Link} from "react-router-dom";
import "ace-builds/src-noconflict/ext-language_tools"; import "ace-builds/src-noconflict/ext-language_tools";
const qController = Client.getInstance(); const qController = Client.getInstance();
@ -97,16 +97,16 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]); const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]);
const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord); const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord);
const [scriptLogs, setScriptLogs] = useState({} as any); const [scriptLogs, setScriptLogs] = useState({} as any);
const [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord) const [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord);
const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = useState(null as QRecord[]) const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = useState(null as QRecord[]);
const [availableFileNames, setAvailableFileNames] = useState([] as string[]); const [availableFileNames, setAvailableFileNames] = useState([] as string[]);
const [selectedFileName, setSelectedFileName] = useState(""); const [selectedFileName, setSelectedFileName] = useState("");
const [currentVersionId , setCurrentVersionId] = useState(null as number); const [currentVersionId, setCurrentVersionId] = useState(null as number);
const [notFoundMessage, setNotFoundMessage] = useState(null); const [notFoundMessage, setNotFoundMessage] = useState(null);
const [selectedTab, setSelectedTab] = useState(0); const [selectedTab, setSelectedTab] = useState(0);
const [editorProps, setEditorProps] = useState(null as ScriptEditorProps); const [editorProps, setEditorProps] = useState(null as ScriptEditorProps);
const [successText, setSuccessText] = useState(null as string); const [successText, setSuccessText] = useState(null as string);
const [failText, setFailText] = useState(null as string) const [failText, setFailText] = useState(null as string);
const [, forceUpdate] = useReducer((x) => x + 1, 0); const [, forceUpdate] = useReducer((x) => x + 1, 0);
const [loadingSelectedVersion, _] = useState(new LoadingState(forceUpdate, "loading")); const [loadingSelectedVersion, _] = useState(new LoadingState(forceUpdate, "loading"));
@ -129,13 +129,13 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
let fileMode = scriptTypeRecord.values.get("fileMode"); let fileMode = scriptTypeRecord.values.get("fileMode");
let scriptTypeFileSchemaList: QRecord[] = null; let scriptTypeFileSchemaList: QRecord[] = null;
if(fileMode == 1) // SINGLE if (fileMode == 1) // SINGLE
{ {
scriptTypeFileSchemaList = [new QRecord({values: {name: "Script.js", fileType: "javascript"}})]; scriptTypeFileSchemaList = [new QRecord({values: {name: "Script.js", fileType: "javascript"}})];
} }
else if(fileMode == 2) // MULTI_PRE_DEFINED else if (fileMode == 2) // MULTI_PRE_DEFINED
{ {
const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")]) const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")]);
scriptTypeFileSchemaList = await qController.query("scriptTypeFileSchema", filter); scriptTypeFileSchemaList = await qController.query("scriptTypeFileSchema", filter);
} }
else // MULTI AD_HOC else // MULTI AD_HOC
@ -145,22 +145,22 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
} }
setScriptTypeFileSchemaList(scriptTypeFileSchemaList); setScriptTypeFileSchemaList(scriptTypeFileSchemaList);
if(scriptTypeFileSchemaList) if (scriptTypeFileSchemaList)
{ {
const availableFileNames = scriptTypeFileSchemaList.map((fileSchemaRecord) => fileSchemaRecord.values.get("name")) const availableFileNames = scriptTypeFileSchemaList.map((fileSchemaRecord) => fileSchemaRecord.values.get("name"));
setAvailableFileNames(availableFileNames); setAvailableFileNames(availableFileNames);
setSelectedFileName(availableFileNames[0]) setSelectedFileName(availableFileNames[0]);
} }
const criteria = [new QFilterCriteria("scriptId", QCriteriaOperator.EQUALS, [scriptId])]; const criteria = [new QFilterCriteria("scriptId", QCriteriaOperator.EQUALS, [scriptId])];
const orderBys = [new QFilterOrderBy("sequenceNo", false)]; const orderBys = [new QFilterOrderBy("sequenceNo", false)];
const filter = new QQueryFilter(criteria, orderBys, "AND", 0, 25); const filter = new QQueryFilter(criteria, orderBys, null, "AND", 0, 25);
const versions = await qController.query("scriptRevision", filter); const versions = await qController.query("scriptRevision", filter);
console.log("Fetched versions:"); console.log("Fetched versions:");
console.log(versions); console.log(versions);
setVersionRecordList(versions); setVersionRecordList(versions);
if(versions && versions.length > 0) if (versions && versions.length > 0)
{ {
selectVersion(versions[0]); selectVersion(versions[0]);
} }
@ -253,31 +253,31 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
const handleSelectFile = (event: SelectChangeEvent) => const handleSelectFile = (event: SelectChangeEvent) =>
{ {
setSelectedFileName(event.target.value); setSelectedFileName(event.target.value);
} };
const getSelectedFileCode = (): string => const getSelectedFileCode = (): string =>
{ {
return (getSelectedVersionCode()[selectedFileName] ?? ""); return (getSelectedVersionCode()[selectedFileName] ?? "");
} };
const getSelectedFileType = (): string => const getSelectedFileType = (): string =>
{ {
for (let i = 0; i < scriptTypeFileSchemaList.length; i++) for (let i = 0; i < scriptTypeFileSchemaList.length; i++)
{ {
let name = scriptTypeFileSchemaList[i].values.get("name"); let name = scriptTypeFileSchemaList[i].values.get("name");
if(name == selectedFileName) if (name == selectedFileName)
{ {
return (scriptTypeFileSchemaList[i].values.get("fileType")); return (scriptTypeFileSchemaList[i].values.get("fileType"));
} }
} }
return ("javascript"); // have some default... return ("javascript"); // have some default...
} };
const getSelectedVersionCode = (): {[name: string]: string} => const getSelectedVersionCode = (): { [name: string]: string } =>
{ {
let rs: {[name: string]: string} = {} let rs: { [name: string]: string } = {};
let files = selectedVersionRecord?.associatedRecords?.get("files") let files = selectedVersionRecord?.associatedRecords?.get("files");
for (let j = 0; j < files?.length; j++) for (let j = 0; j < files?.length; j++)
{ {
@ -286,7 +286,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
} }
return (rs); return (rs);
} };
function getVersionsList(versionRecordList: QRecord[], selectedVersionRecord: QRecord) function getVersionsList(versionRecordList: QRecord[], selectedVersionRecord: QRecord)
{ {
@ -344,11 +344,11 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
const getScriptLogs = (scriptRevisionId: number) => const getScriptLogs = (scriptRevisionId: number) =>
{ {
if(!scriptLogs[scriptRevisionId]) if (!scriptLogs[scriptRevisionId])
{ {
(async () => (async () =>
{ {
let filter = new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])], [new QFilterOrderBy("id", false)], "AND", 0, 100); let filter = new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])], [new QFilterOrderBy("id", false)], null, "AND", 0, 100);
scriptLogs[scriptRevisionId] = await qController.query("scriptLog", filter); scriptLogs[scriptRevisionId] = await qController.query("scriptLog", filter);
setScriptLogs(scriptLogs); setScriptLogs(scriptLogs);
forceUpdate(); forceUpdate();
@ -368,7 +368,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
} }
return (<ScriptLogsView logs={logs} />); return (<ScriptLogsView logs={logs} />);
} };
let editButtonTooltip = ""; let editButtonTooltip = "";
let editButtonText = "Create New Version"; let editButtonText = "Create New Version";
@ -556,7 +556,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
<Modal open={editorProps !== null} onClose={(event, reason) => closeEditingScript(event, reason)}> <Modal open={editorProps !== null} onClose={(event, reason) => closeEditingScript(event, reason)}>
<ScriptEditor <ScriptEditor
closeCallback={closeEditingScript} closeCallback={closeEditingScript}
{... editorProps} {...editorProps}
/> />
</Modal> </Modal>
} }

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

@ -44,11 +44,9 @@ import LinearProgress from "@mui/material/LinearProgress";
import MenuItem from "@mui/material/MenuItem"; import MenuItem from "@mui/material/MenuItem";
import Modal from "@mui/material/Modal"; import Modal from "@mui/material/Modal";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import {ColumnHeaderFilterIconButtonProps, DataGridPro, GridCallbackDetails, GridColDef, GridColumnHeaderParams, GridColumnMenuContainer, GridColumnMenuProps, GridColumnOrderChangeParams, GridColumnPinningMenuItems, GridColumnResizeParams, GridColumnsMenuItem, GridColumnVisibilityModel, GridDensity, GridEventListener, GridFilterMenuItem, GridPinnedColumns, gridPreferencePanelStateSelector, GridPreferencePanelsValue, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridState, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, HideGridColMenuItem, MuiEvent, SortGridMenuItems, useGridApiContext, useGridApiEventHandler, useGridApiRef, useGridSelector} from "@mui/x-data-grid-pro"; import {ColumnHeaderFilterIconButtonProps, DataGridPro, GridCallbackDetails, GridColDef, GridColumnHeaderParams, GridColumnMenuContainer, GridColumnMenuProps, GridColumnOrderChangeParams, GridColumnPinningMenuItems, GridColumnResizeParams, GridColumnVisibilityModel, GridDensity, GridEventListener, GridPinnedColumns, gridPreferencePanelStateSelector, GridPreferencePanelsValue, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridState, GridToolbarContainer, GridToolbarDensitySelector, HideGridColMenuItem, MuiEvent, SortGridMenuItems, useGridApiContext, useGridApiEventHandler, useGridApiRef, useGridSelector} from "@mui/x-data-grid-pro";
import {GridRowModel} from "@mui/x-data-grid/models/gridRows"; import {GridRowModel} from "@mui/x-data-grid/models/gridRows";
import FormData from "form-data"; import FormData from "form-data";
import React, {forwardRef, useContext, useEffect, useReducer, useRef, useState} from "react";
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
import QContext from "QContext"; import QContext from "QContext";
import colors from "qqq/assets/theme/base/colors"; import colors from "qqq/assets/theme/base/colors";
import {QCancelButton, QCreateNewButton} from "qqq/components/buttons/DefaultButtons"; import {QCancelButton, QCreateNewButton} from "qqq/components/buttons/DefaultButtons";
@ -78,6 +76,8 @@ import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils"; import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils";
import TableUtils from "qqq/utils/qqq/TableUtils"; import TableUtils from "qqq/utils/qqq/TableUtils";
import ValueUtils from "qqq/utils/qqq/ValueUtils"; import ValueUtils from "qqq/utils/qqq/ValueUtils";
import React, {forwardRef, useContext, useEffect, useReducer, useRef, useState} from "react";
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
const CURRENT_SAVED_VIEW_ID_LOCAL_STORAGE_KEY_ROOT = "qqq.currentSavedViewId"; const CURRENT_SAVED_VIEW_ID_LOCAL_STORAGE_KEY_ROOT = "qqq.currentSavedViewId";
const DENSITY_LOCAL_STORAGE_KEY_ROOT = "qqq.density"; const DENSITY_LOCAL_STORAGE_KEY_ROOT = "qqq.density";
@ -112,7 +112,7 @@ const getLoadingScreen = () =>
return (<BaseLayout> return (<BaseLayout>
&nbsp; &nbsp;
</BaseLayout>); </BaseLayout>);
} };
/******************************************************************************* /*******************************************************************************
@ -139,16 +139,16 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// manage "state" being passed from some screens (like delete) into query screen - by grabbing, and then deleting // // manage "state" being passed from some screens (like delete) into query screen - by grabbing, and then deleting //
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if(location.state) if (location.state)
{ {
let state: any = location.state; let state: any = location.state;
if(state["deleteSuccess"]) if (state["deleteSuccess"])
{ {
setShowSuccessfullyDeletedAlert(true); setShowSuccessfullyDeletedAlert(true);
delete state["deleteSuccess"]; delete state["deleteSuccess"];
} }
if(state["warning"]) if (state["warning"])
{ {
setWarningAlert(state["warning"]); setWarningAlert(state["warning"]);
delete state["warning"]; delete state["warning"];
@ -181,7 +181,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const densityLocalStorageKey = `${DENSITY_LOCAL_STORAGE_KEY_ROOT}`; const densityLocalStorageKey = `${DENSITY_LOCAL_STORAGE_KEY_ROOT}`;
// only load things out of local storage on the first render // only load things out of local storage on the first render
if(firstRender) if (firstRender)
{ {
console.log("This is firstRender, so reading defaults from local storage..."); console.log("This is firstRender, so reading defaults from local storage...");
if (localStorage.getItem(densityLocalStorageKey)) if (localStorage.getItem(densityLocalStorageKey))
@ -200,7 +200,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
setFirstRender(false); setFirstRender(false);
} }
if(defaultView == null) if (defaultView == null)
{ {
defaultView = new RecordQueryView(); defaultView = new RecordQueryView();
defaultView.queryFilter = new QQueryFilter(); defaultView.queryFilter = new QQueryFilter();
@ -214,15 +214,15 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
///////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////
// in case the view is missing any of these attributes, give them a reasonable default // // in case the view is missing any of these attributes, give them a reasonable default //
///////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////
if(!defaultView.rowsPerPage) if (!defaultView.rowsPerPage)
{ {
defaultView.rowsPerPage = defaultRowsPerPage; defaultView.rowsPerPage = defaultRowsPerPage;
} }
if(!defaultView.mode) if (!defaultView.mode)
{ {
defaultView.mode = defaultMode; defaultView.mode = defaultMode;
} }
if(!defaultView.quickFilterFieldNames) if (!defaultView.quickFilterFieldNames)
{ {
defaultView.quickFilterFieldNames = []; defaultView.quickFilterFieldNames = [];
} }
@ -246,7 +246,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// state of the page - e.g., have we loaded meta data? what about the initial view? or are we ready to render records. // // state of the page - e.g., have we loaded meta data? what about the initial view? or are we ready to render records. //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const [pageState, setPageState] = useState("initial" as PageState) const [pageState, setPageState] = useState("initial" as PageState);
///////////////////////////////// /////////////////////////////////
// meta-data and derived state // // meta-data and derived state //
@ -260,8 +260,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////////////////////// ///////////////////////////////////////////
// state of the view of the query screen // // state of the view of the query screen //
/////////////////////////////////////////// ///////////////////////////////////////////
const [view, setView] = useState(defaultView) const [view, setView] = useState(defaultView);
const [viewAsJson, setViewAsJson] = useState(JSON.stringify(defaultView)) const [viewAsJson, setViewAsJson] = useState(JSON.stringify(defaultView));
const [queryFilter, setQueryFilter] = useState(defaultView.queryFilter); const [queryFilter, setQueryFilter] = useState(defaultView.queryFilter);
const [queryColumns, setQueryColumns] = useState(defaultView.queryColumns); const [queryColumns, setQueryColumns] = useState(defaultView.queryColumns);
const [lastFetchedQFilterJSON, setLastFetchedQFilterJSON] = useState(""); const [lastFetchedQFilterJSON, setLastFetchedQFilterJSON] = useState("");
@ -309,7 +309,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
///////////////////////////////////////// /////////////////////////////////////////
const [columnStatsFieldName, setColumnStatsFieldName] = useState(null as string); const [columnStatsFieldName, setColumnStatsFieldName] = useState(null as string);
const [columnStatsField, setColumnStatsField] = useState(null as QFieldMetaData); const [columnStatsField, setColumnStatsField] = useState(null as QFieldMetaData);
const [columnStatsFieldTableName, setColumnStatsFieldTableName] = useState(null as string) const [columnStatsFieldTableName, setColumnStatsFieldTableName] = useState(null as string);
const [filterForColumnStats, setFilterForColumnStats] = useState(null as QQueryFilter); const [filterForColumnStats, setFilterForColumnStats] = useState(null as QQueryFilter);
/////////////////////////////////////////////////// ///////////////////////////////////////////////////
@ -353,14 +353,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////
// add a LoadingState object, in case the initial loads (of meta data and view) are slow // // add a LoadingState object, in case the initial loads (of meta data and view) are slow //
/////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////
const [pageLoadingState, _] = useState(new LoadingState(forceUpdate)) const [pageLoadingState, _] = useState(new LoadingState(forceUpdate));
if(isFirstRenderAfterChangingTables) if (isFirstRenderAfterChangingTables)
{ {
setIsFirstRenderAfterChangingTables(false); setIsFirstRenderAfterChangingTables(false);
console.log("This is the first render after changing tables - so - setting state based on 'defaults' from localStorage"); console.log("This is the first render after changing tables - so - setting state based on 'defaults' from localStorage");
setView(defaultView) setView(defaultView);
} }
/******************************************************************************* /*******************************************************************************
@ -386,7 +386,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const criteria = queryFilter.criteria[i]; const criteria = queryFilter.criteria[i];
const {criteriaIsValid} = validateCriteria(criteria, null); const {criteriaIsValid} = validateCriteria(criteria, null);
const fieldName = criteria.fieldName; const fieldName = criteria.fieldName;
if(criteriaIsValid && fieldName && fieldName.indexOf(".") > -1) if (criteriaIsValid && fieldName && fieldName.indexOf(".") > -1)
{ {
visibleJoinTables.add(fieldName.split(".")[0]); visibleJoinTables.add(fieldName.split(".")[0]);
} }
@ -407,7 +407,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const join = tableMetaData.exposedJoins[i]; const join = tableMetaData.exposedJoins[i];
if (visibleJoinTables.has(join.joinTable.name)) if (visibleJoinTables.has(join.joinTable.name))
{ {
if(join.isMany) if (join.isMany)
{ {
return (true); return (true);
} }
@ -415,7 +415,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
} }
} }
return (false); return (false);
} };
/******************************************************************************* /*******************************************************************************
@ -423,7 +423,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
*******************************************************************************/ *******************************************************************************/
const prepQueryFilterForBackend = (sourceFilter: QQueryFilter) => const prepQueryFilterForBackend = (sourceFilter: QQueryFilter) =>
{ {
const filterForBackend = new QQueryFilter([], sourceFilter.orderBys, sourceFilter.booleanOperator); const filterForBackend = new QQueryFilter([], sourceFilter.orderBys, sourceFilter.subFilters, sourceFilter.booleanOperator);
for (let i = 0; i < sourceFilter?.criteria?.length; i++) for (let i = 0; i < sourceFilter?.criteria?.length; i++)
{ {
const criteria = sourceFilter.criteria[i]; const criteria = sourceFilter.criteria[i];
@ -442,7 +442,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
// else push a clone of the criteria - since it may get manipulated below (convertFilterPossibleValuesToIds) // // else push a clone of the criteria - since it may get manipulated below (convertFilterPossibleValuesToIds) //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
const [field] = FilterUtils.getField(tableMetaData, criteria.fieldName) const [field] = FilterUtils.getField(tableMetaData, criteria.fieldName);
filterForBackend.criteria.push(new QFilterCriteria(criteria.fieldName, criteria.operator, FilterUtils.cleanseCriteriaValueForQQQ(criteria.values, field))); filterForBackend.criteria.push(new QFilterCriteria(criteria.fieldName, criteria.operator, FilterUtils.cleanseCriteriaValueForQQQ(criteria.values, field)));
} }
} }
@ -451,7 +451,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
filterForBackend.limit = rowsPerPage; filterForBackend.limit = rowsPerPage;
return filterForBackend; return filterForBackend;
} };
/******************************************************************************* /*******************************************************************************
@ -475,7 +475,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////////////////////// ///////////////////////////////////////////
// build the export menu, for the header // // build the export menu, for the header //
/////////////////////////////////////////// ///////////////////////////////////////////
let exportMenu = <></> let exportMenu = <></>;
try try
{ {
const exportMenuItemRestProps = const exportMenuItemRestProps =
@ -485,7 +485,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
columnsModel: columnsModel, columnsModel: columnsModel,
columnVisibilityModel: columnVisibilityModel, columnVisibilityModel: columnVisibilityModel,
queryFilter: prepQueryFilterForBackend(queryFilter) queryFilter: prepQueryFilterForBackend(queryFilter)
} };
exportMenu = (<> exportMenu = (<>
<IconButton sx={{p: 0, fontSize: "0.75rem", mb: 1, color: colors.secondary.main, fontVariationSettings: "'wght' 100"}} onClick={openExportMenu}><Icon fontSize="small">save_alt</Icon></IconButton> <IconButton sx={{p: 0, fontSize: "0.75rem", mb: 1, color: colors.secondary.main, fontVariationSettings: "'wght' 100"}} onClick={openExportMenu}><Icon fontSize="small">save_alt</Icon></IconButton>
@ -503,7 +503,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
</Menu> </Menu>
</>); </>);
} }
catch(e) catch (e)
{ {
console.log("Error preparing export menu for page header: " + e); console.log("Error preparing export menu for page header: " + e);
} }
@ -515,7 +515,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
{ {
let label: string = tableMetaData?.label ?? ""; let label: string = tableMetaData?.label ?? "";
if(currentSavedView?.values?.get("label")) if (currentSavedView?.values?.get("label"))
{ {
label += " / " + currentSavedView?.values?.get("label"); label += " / " + currentSavedView?.values?.get("label");
} }
@ -536,12 +536,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
} }
let joinLabelsString = joinLabels.join(", "); let joinLabelsString = joinLabels.join(", ");
if(joinLabels.length == 2) if (joinLabels.length == 2)
{ {
let lastCommaIndex = joinLabelsString.lastIndexOf(","); let lastCommaIndex = joinLabelsString.lastIndexOf(",");
joinLabelsString = joinLabelsString.substring(0, lastCommaIndex) + " and " + joinLabelsString.substring(lastCommaIndex + 1); joinLabelsString = joinLabelsString.substring(0, lastCommaIndex) + " and " + joinLabelsString.substring(lastCommaIndex + 1);
} }
if(joinLabels.length > 2) if (joinLabels.length > 2)
{ {
let lastCommaIndex = joinLabelsString.lastIndexOf(","); let lastCommaIndex = joinLabelsString.lastIndexOf(",");
joinLabelsString = joinLabelsString.substring(0, lastCommaIndex) + ", and " + joinLabelsString.substring(lastCommaIndex + 1); joinLabelsString = joinLabelsString.substring(0, lastCommaIndex) + ", and " + joinLabelsString.substring(lastCommaIndex + 1);
@ -552,9 +552,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
<ul style={{marginLeft: "1rem"}}> <ul style={{marginLeft: "1rem"}}>
{joinLabels.map((name) => <li key={name}>{name}</li>)} {joinLabels.map((name) => <li key={name}>{name}</li>)}
</ul> </ul>
</div> </div>;
return( return (
<div> <div>
{label} {exportMenu} {label} {exportMenu}
<CustomWidthTooltip title={tooltipHTML}> <CustomWidthTooltip title={tooltipHTML}>
@ -586,7 +586,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
</Tooltip> </Tooltip>
</Typography> </Typography>
); );
} };
/////////////////////// ///////////////////////
// Keyboard handling // // Keyboard handling //
@ -598,16 +598,16 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const type = (e.target as any).type; const type = (e.target as any).type;
const validType = (type !== "text" && type !== "textarea" && type !== "input" && type !== "search"); const validType = (type !== "text" && type !== "textarea" && type !== "input" && type !== "search");
if(validType && !dotMenuOpen && !keyboardHelpOpen && !activeModalProcess) if (validType && !dotMenuOpen && !keyboardHelpOpen && !activeModalProcess)
{ {
if (! e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission) if (!e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
{ {
e.preventDefault() e.preventDefault();
navigate(`${metaData?.getTablePathByName(tableName)}/create`); navigate(`${metaData?.getTablePathByName(tableName)}/create`);
} }
else if (! e.metaKey && e.key === "r") else if (!e.metaKey && e.key === "r")
{ {
e.preventDefault() e.preventDefault();
updateTable("'r' keyboard event"); updateTable("'r' keyboard event");
} }
/* /*
@ -618,25 +618,25 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
gridApiRef.current.showPreferences(GridPreferencePanelsValue.columns) gridApiRef.current.showPreferences(GridPreferencePanelsValue.columns)
} }
*/ */
else if (! e.metaKey && e.key === "f") else if (!e.metaKey && e.key === "f")
{ {
e.preventDefault() e.preventDefault();
// @ts-ignore // @ts-ignore
if(basicAndAdvancedQueryControlsRef?.current?.getCurrentMode() == "advanced") if (basicAndAdvancedQueryControlsRef?.current?.getCurrentMode() == "advanced")
{ {
gridApiRef.current.showFilterPanel() gridApiRef.current.showFilterPanel();
} }
} }
} }
} };
document.addEventListener("keydown", down) document.addEventListener("keydown", down);
return () => return () =>
{ {
document.removeEventListener("keydown", down) document.removeEventListener("keydown", down);
} };
}, [dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess]) }, [dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess]);
/******************************************************************************* /*******************************************************************************
@ -645,7 +645,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const urlLooksLikeProcess = (): boolean => const urlLooksLikeProcess = (): boolean =>
{ {
return (pathParts[pathParts.length - 2] === tableName); return (pathParts[pathParts.length - 2] === tableName);
} };
////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////
// monitor location changes - if our url looks like a savedView, then load that view, kinda // // monitor location changes - if our url looks like a savedView, then load that view, kinda //
@ -703,7 +703,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
setView(view); setView(view);
setViewAsJson(JSON.stringify(view)); setViewAsJson(JSON.stringify(view));
localStorage.setItem(viewLocalStorageKey, JSON.stringify(view)); localStorage.setItem(viewLocalStorageKey, JSON.stringify(view));
} };
/******************************************************************************* /*******************************************************************************
@ -712,10 +712,10 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const handleColumnVisibilityChange = (columnVisibilityModel: GridColumnVisibilityModel) => const handleColumnVisibilityChange = (columnVisibilityModel: GridColumnVisibilityModel) =>
{ {
setColumnVisibilityModel(columnVisibilityModel); setColumnVisibilityModel(columnVisibilityModel);
queryColumns.updateVisibility(columnVisibilityModel) queryColumns.updateVisibility(columnVisibilityModel);
view.queryColumns = queryColumns; view.queryColumns = queryColumns;
doSetView(view) doSetView(view);
forceUpdate(); forceUpdate();
}; };
@ -730,12 +730,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
// set the field's value in the view // // set the field's value in the view //
/////////////////////////////////////// ///////////////////////////////////////
let fieldName = field.name; let fieldName = field.name;
if(table && table.name != tableMetaData.name) if (table && table.name != tableMetaData.name)
{ {
fieldName = `${table.name}.${field.name}`; fieldName = `${table.name}.${field.name}`;
} }
view.queryColumns.setIsVisible(fieldName, newValue) view.queryColumns.setIsVisible(fieldName, newValue);
///////////////////// /////////////////////
// update the grid // // update the grid //
@ -745,13 +745,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
///////////////////////////////////////////////// /////////////////////////////////////////////////
// update the view (e.g., write local storage) // // update the view (e.g., write local storage) //
///////////////////////////////////////////////// /////////////////////////////////////////////////
doSetView(view) doSetView(view);
/////////////////// ///////////////////
// ole' faithful // // ole' faithful //
/////////////////// ///////////////////
forceUpdate(); forceUpdate();
} };
/******************************************************************************* /*******************************************************************************
@ -790,7 +790,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
setPinnedColumns(queryColumns.toGridPinnedColumns()); setPinnedColumns(queryColumns.toGridPinnedColumns());
setColumnVisibilityModel(queryColumns.toColumnVisibilityModel()); setColumnVisibilityModel(queryColumns.toColumnVisibilityModel());
setColumnsModel(columns); setColumnsModel(columns);
} };
/******************************************************************************* /*******************************************************************************
@ -799,7 +799,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const promptForTableVariantSelection = () => const promptForTableVariantSelection = () =>
{ {
setTableVariantPromptOpen(true); setTableVariantPromptOpen(true);
} };
/******************************************************************************* /*******************************************************************************
@ -813,10 +813,10 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
for (let i = 0; i < queryFilter?.orderBys?.length; i++) for (let i = 0; i < queryFilter?.orderBys?.length; i++)
{ {
const fieldName = queryFilter.orderBys[i].fieldName; const fieldName = queryFilter.orderBys[i].fieldName;
if(fieldName.indexOf(".") > -1) if (fieldName.indexOf(".") > -1)
{ {
const joinTableName = fieldName.replaceAll(/\..*/g, ""); const joinTableName = fieldName.replaceAll(/\..*/g, "");
if(!vjtToUse.has(joinTableName)) if (!vjtToUse.has(joinTableName))
{ {
const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, fieldName); const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
handleChangeOneColumnVisibility(field, fieldTable, true); handleChangeOneColumnVisibility(field, fieldTable, true);
@ -826,7 +826,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
} }
return (rs); return (rs);
} };
/******************************************************************************* /*******************************************************************************
@ -834,13 +834,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
*******************************************************************************/ *******************************************************************************/
const updateTable = (reason?: string) => const updateTable = (reason?: string) =>
{ {
if(pageState != "ready") if (pageState != "ready")
{ {
console.log(`In updateTable, but pageSate[${pageState}] is not ready, so returning with noop`); console.log(`In updateTable, but pageSate[${pageState}] is not ready, so returning with noop`);
return; return;
} }
if(tableMetaData?.usesVariants && (!tableVariant || tableVariantPromptOpen)) if (tableMetaData?.usesVariants && (!tableVariant || tableVariantPromptOpen))
{ {
console.log("In updateTable, but a variant is needed, so returning with noop"); console.log("In updateTable, but a variant is needed, so returning with noop");
return; return;
@ -894,7 +894,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
}); });
} }
if(!tableMetaData.capabilities.has(Capability.TABLE_QUERY)) if (!tableMetaData.capabilities.has(Capability.TABLE_QUERY))
{ {
console.log("Cannot update table - it does not have QUERY capability."); console.log("Cannot update table - it does not have QUERY capability.");
return; return;
@ -969,7 +969,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
setDistinctRecords(countResults[latestQueryId][1]); setDistinctRecords(countResults[latestQueryId][1]);
delete countResults[latestQueryId]; delete countResults[latestQueryId];
} }
catch(e) catch (e)
{ {
console.log(e); console.log(e);
} }
@ -999,7 +999,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
// count how many distinct primary keys are on this page // // count how many distinct primary keys are on this page //
/////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////
let distinctPrimaryKeySet = new Set<string>(); let distinctPrimaryKeySet = new Set<string>();
for(let i = 0; i < results.length; i++) for (let i = 0; i < results.length; i++)
{ {
distinctPrimaryKeySet.add(results[i].values.get(tableMetaData.primaryKeyField) as string); distinctPrimaryKeySet.add(results[i].values.get(tableMetaData.primaryKeyField) as string);
} }
@ -1055,7 +1055,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
setRowsPerPage(size); setRowsPerPage(size);
view.rowsPerPage = size; view.rowsPerPage = size;
doSetView(view) doSetView(view);
}; };
/******************************************************************************* /*******************************************************************************
@ -1064,11 +1064,11 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const handlePinnedColumnsChange = (pinnedColumns: GridPinnedColumns) => const handlePinnedColumnsChange = (pinnedColumns: GridPinnedColumns) =>
{ {
setPinnedColumns(pinnedColumns); setPinnedColumns(pinnedColumns);
queryColumns.setPinnedLeftColumns(pinnedColumns.left) queryColumns.setPinnedLeftColumns(pinnedColumns.left);
queryColumns.setPinnedRightColumns(pinnedColumns.right) queryColumns.setPinnedRightColumns(pinnedColumns.right);
view.queryColumns = queryColumns; view.queryColumns = queryColumns;
doSetView(view) doSetView(view);
}; };
/******************************************************************************* /*******************************************************************************
@ -1121,7 +1121,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
let selectedPrimaryKeys = new Set<string>(); let selectedPrimaryKeys = new Set<string>();
selectionModel.forEach((value: GridRowId, index: number) => selectionModel.forEach((value: GridRowId, index: number) =>
{ {
checkboxesChecked++ checkboxesChecked++;
const valueToPush = latestQueryResults[value as number].values.get(tableMetaData.primaryKeyField); const valueToPush = latestQueryResults[value as number].values.get(tableMetaData.primaryKeyField);
selectedPrimaryKeys.add(valueToPush as string); selectedPrimaryKeys.add(valueToPush as string);
}); });
@ -1150,7 +1150,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
queryColumns.updateColumnOrder(columnOrdering); queryColumns.updateColumnOrder(columnOrdering);
view.queryColumns = queryColumns; view.queryColumns = queryColumns;
doSetView(view) doSetView(view);
}; };
@ -1162,7 +1162,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
queryColumns.updateColumnWidth(params.colDef.field, params.width); queryColumns.updateColumnWidth(params.colDef.field, params.width);
view.queryColumns = queryColumns; view.queryColumns = queryColumns;
doSetView(view) doSetView(view);
}; };
@ -1185,13 +1185,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
{ {
const fieldName = gridSort[i].field; const fieldName = gridSort[i].field;
const isAscending = gridSort[i].sort == "asc"; const isAscending = gridSort[i].sort == "asc";
queryFilter.orderBys.push(new QFilterOrderBy(fieldName, isAscending)) queryFilter.orderBys.push(new QFilterOrderBy(fieldName, isAscending));
} }
////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////
// set a default order-by, if none is otherwise present // // set a default order-by, if none is otherwise present //
////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////
if(queryFilter.orderBys.length == 0) if (queryFilter.orderBys.length == 0)
{ {
queryFilter.orderBys.push(new QFilterOrderBy(tableMetaData.primaryKeyField, false)); queryFilter.orderBys.push(new QFilterOrderBy(tableMetaData.primaryKeyField, false));
} }
@ -1209,7 +1209,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const handleColumnHeaderClick = (params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails): void => const handleColumnHeaderClick = (params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails): void =>
{ {
event.defaultMuiPrevented = true; event.defaultMuiPrevented = true;
} };
/******************************************************************************* /*******************************************************************************
@ -1227,7 +1227,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
setRowsPerPage(view.rowsPerPage ?? defaultRowsPerPage); setRowsPerPage(view.rowsPerPage ?? defaultRowsPerPage);
setMode(view.mode ?? defaultMode); setMode(view.mode ?? defaultMode);
setQuickFilterFieldNames(view.quickFilterFieldNames ?? []) // todo not i think ?? getDefaultQuickFilterFieldNames(tableMetaData)); setQuickFilterFieldNames(view.quickFilterFieldNames ?? []); // todo not i think ?? getDefaultQuickFilterFieldNames(tableMetaData));
////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////
// do this last - in case anything in the view got modified in any of those other doSet methods // // do this last - in case anything in the view got modified in any of those other doSet methods //
@ -1240,7 +1240,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////
// @ts-ignore // @ts-ignore
setTimeout(() => basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "activatedView")); setTimeout(() => basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "activatedView"));
} };
/******************************************************************************* /*******************************************************************************
@ -1258,7 +1258,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////////////////////////////// ///////////////////////////////////////////////////
// in case there's no orderBys, set default here // // in case there's no orderBys, set default here //
/////////////////////////////////////////////////// ///////////////////////////////////////////////////
if(!queryFilter.orderBys || queryFilter.orderBys.length == 0) if (!queryFilter.orderBys || queryFilter.orderBys.length == 0)
{ {
queryFilter.orderBys = [new QFilterOrderBy(tableMetaData?.primaryKeyField, false)]; queryFilter.orderBys = [new QFilterOrderBy(tableMetaData?.primaryKeyField, false)];
view.queryFilter = queryFilter; view.queryFilter = queryFilter;
@ -1284,17 +1284,17 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////////////////////////// ///////////////////////////////////////////////
// put this query filter in the current view // // put this query filter in the current view //
/////////////////////////////////////////////// ///////////////////////////////////////////////
if(!isFromActivateView) if (!isFromActivateView)
{ {
view.queryFilter = queryFilter; view.queryFilter = queryFilter;
doSetView(view) doSetView(view);
} }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// this force-update causes a re-render that'll see the changed filter hash/json string, and make an updateTable run (if appropriate) // // this force-update causes a re-render that'll see the changed filter hash/json string, and make an updateTable run (if appropriate) //
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
forceUpdate(); forceUpdate();
} };
/******************************************************************************* /*******************************************************************************
** Wrapper around setQueryColumns that also sets column models for the grid, puts ** Wrapper around setQueryColumns that also sets column models for the grid, puts
@ -1324,12 +1324,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////////////////////// ///////////////////////////////////////////
// put these columns in the current view // // put these columns in the current view //
/////////////////////////////////////////// ///////////////////////////////////////////
if(!isFromActivateView) if (!isFromActivateView)
{ {
view.queryColumns = queryColumns; view.queryColumns = queryColumns;
doSetView(view) doSetView(view);
} }
} };
/******************************************************************************* /*******************************************************************************
@ -1341,7 +1341,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
setQuickFilterFieldNames([...(names ?? [])]); setQuickFilterFieldNames([...(names ?? [])]);
view.quickFilterFieldNames = names; view.quickFilterFieldNames = names;
doSetView(view) doSetView(view);
}; };
@ -1354,7 +1354,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
view.mode = newValue; view.mode = newValue;
doSetView(view); doSetView(view);
} };
/******************************************************************************* /*******************************************************************************
@ -1372,7 +1372,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
} }
return (selectedIds.length); return (selectedIds.length);
} };
/******************************************************************************* /*******************************************************************************
@ -1403,7 +1403,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
} }
return ""; return "";
} };
/******************************************************************************* /*******************************************************************************
@ -1559,7 +1559,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
*******************************************************************************/ *******************************************************************************/
const doSetCurrentSavedView = (savedViewRecord: QRecord) => const doSetCurrentSavedView = (savedViewRecord: QRecord) =>
{ {
if(savedViewRecord == null) if (savedViewRecord == null)
{ {
console.log("doSetCurrentView called with a null view record - calling doClearCurrentSavedView instead."); console.log("doSetCurrentView called with a null view record - calling doClearCurrentSavedView instead.");
doClearCurrentSavedView(); doClearCurrentSavedView();
@ -1568,7 +1568,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
setCurrentSavedView(savedViewRecord); setCurrentSavedView(savedViewRecord);
const viewJson = savedViewRecord.values.get("viewJson") const viewJson = savedViewRecord.values.get("viewJson");
const newView = RecordQueryView.buildFromJSON(viewJson); const newView = RecordQueryView.buildFromJSON(viewJson);
activateView(newView); activateView(newView);
@ -1577,7 +1577,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
// todo can/should/does this move into the view's "identity"? // // todo can/should/does this move into the view's "identity"? //
//////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////
localStorage.setItem(currentSavedViewLocalStorageKey, `${savedViewRecord.values.get("id")}`); localStorage.setItem(currentSavedViewLocalStorageKey, `${savedViewRecord.values.get("id")}`);
} };
/******************************************************************************* /*******************************************************************************
@ -1587,7 +1587,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
{ {
setCurrentSavedView(null); setCurrentSavedView(null);
localStorage.removeItem(currentSavedViewLocalStorageKey); localStorage.removeItem(currentSavedViewLocalStorageKey);
} };
/******************************************************************************* /*******************************************************************************
@ -1603,7 +1603,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
newDefaultView.quickFilterFieldNames = []; newDefaultView.quickFilterFieldNames = [];
newDefaultView.mode = defaultMode; newDefaultView.mode = defaultMode;
return newDefaultView; return newDefaultView;
} };
/******************************************************************************* /*******************************************************************************
** event handler for SavedViews component, to handle user selecting a view ** event handler for SavedViews component, to handle user selecting a view
@ -1638,9 +1638,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////////////////////////// ///////////////////////////////////////////////
// activate a new default view for the table // // activate a new default view for the table //
/////////////////////////////////////////////// ///////////////////////////////////////////////
activateView(buildTableDefaultView(tableMetaData)) activateView(buildTableDefaultView(tableMetaData));
} }
} };
/******************************************************************************* /*******************************************************************************
** utility function to fetch a saved view from the backend. ** utility function to fetch a saved view from the backend.
@ -1668,7 +1668,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
// such as, making values be what they'd be in the UI (not necessarily // // such as, making values be what they'd be in the UI (not necessarily //
// what they're like in the backend); similarly, set anything that's unset. // // what they're like in the backend); similarly, set anything that's unset. //
////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////
const viewJson = qRecord.values.get("viewJson") const viewJson = qRecord.values.get("viewJson");
const newView = RecordQueryView.buildFromJSON(viewJson); const newView = RecordQueryView.buildFromJSON(viewJson);
setWarningAlert(null); setWarningAlert(null);
@ -1684,16 +1684,16 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////// ///////////////////////////
// set columns if absent // // set columns if absent //
/////////////////////////// ///////////////////////////
if(!newView.queryColumns || !newView.queryColumns.columns || newView.queryColumns.columns?.length == 0) if (!newView.queryColumns || !newView.queryColumns.columns || newView.queryColumns.columns?.length == 0)
{ {
newView.queryColumns = QQueryColumns.buildDefaultForTable(tableMetaData); newView.queryColumns = QQueryColumns.buildDefaultForTable(tableMetaData);
} }
qRecord.values.set("viewJson", JSON.stringify(newView)) qRecord.values.set("viewJson", JSON.stringify(newView));
} }
return (qRecord); return (qRecord);
} };
/******************************************************************************* /*******************************************************************************
@ -1793,12 +1793,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
} }
const removedFieldCount = removedFieldNames.size; const removedFieldCount = removedFieldNames.size;
if(removedFieldCount > 0) if (removedFieldCount > 0)
{ {
const plural = removedFieldCount > 1; const plural = removedFieldCount > 1;
setWarningAlert(`${removedFieldCount} field${plural ? "s" : ""} that ${plural ? "were" : "was"} part of this view ${plural ? "are" : "is"} no longer in this table, and ${plural ? "were" : "was"} removed from this view (${[...removedFieldNames.values()].join(", ")}).`); setWarningAlert(`${removedFieldCount} field${plural ? "s" : ""} that ${plural ? "were" : "was"} part of this view ${plural ? "are" : "is"} no longer in this table, and ${plural ? "were" : "was"} removed from this view (${[...removedFieldNames.values()].join(", ")}).`);
} }
} };
/******************************************************************************* /*******************************************************************************
@ -1808,7 +1808,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
{ {
const newCriteria = new QFilterCriteria(fieldName, null, []); const newCriteria = new QFilterCriteria(fieldName, null, []);
if(!queryFilter.criteria) if (!queryFilter.criteria)
{ {
queryFilter.criteria = []; queryFilter.criteria = [];
} }
@ -1834,8 +1834,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////// ///////////////////////////
// open the filter panel // // open the filter panel //
/////////////////////////// ///////////////////////////
gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters) gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters);
} };
/******************************************************************************* /*******************************************************************************
@ -1930,7 +1930,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
<MenuItem onClick={(e) => <MenuItem onClick={(e) =>
{ {
hideMenu(e); hideMenu(e);
if(mode == "advanced") if (mode == "advanced")
{ {
handleColumnMenuAdvancedFilterSelection(currentColumn.field); handleColumnMenuAdvancedFilterSelection(currentColumn.field);
} }
@ -1989,24 +1989,24 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
for (let i = 0; i < queryFilter?.criteria?.length; i++) for (let i = 0; i < queryFilter?.criteria?.length; i++)
{ {
const criteria = queryFilter.criteria[i]; const criteria = queryFilter.criteria[i];
if(criteria.fieldName == props.field && validateCriteria(criteria, null).criteriaIsValid) if (criteria.fieldName == props.field && validateCriteria(criteria, null).criteriaIsValid)
{ {
showFilter = true; showFilter = true;
} }
} }
if(showFilter) if (showFilter)
{ {
return (<IconButton size="small" sx={{p: "2px"}} onClick={(event) => return (<IconButton size="small" sx={{p: "2px"}} onClick={(event) =>
{ {
if(mode == "basic") if (mode == "basic")
{ {
// @ts-ignore !? // @ts-ignore !?
basicAndAdvancedQueryControlsRef.current.addField(props.field); basicAndAdvancedQueryControlsRef.current.addField(props.field);
} }
else else
{ {
gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters) gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters);
} }
event.stopPropagation(); event.stopPropagation();
@ -2110,35 +2110,35 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
*******************************************************************************/ *******************************************************************************/
const selectionMenuCallback = (selectedIndex: number) => const selectionMenuCallback = (selectedIndex: number) =>
{ {
if(selectedIndex == 0) if (selectedIndex == 0)
{ {
/////////////// ///////////////
// this page // // this page //
/////////////// ///////////////
programmaticallySelectSomeOrAllRows(); programmaticallySelectSomeOrAllRows();
setSelectFullFilterState("checked") setSelectFullFilterState("checked");
} }
else if(selectedIndex == 1) else if (selectedIndex == 1)
{ {
/////////////////////// ///////////////////////
// full query result // // full query result //
/////////////////////// ///////////////////////
programmaticallySelectSomeOrAllRows(); programmaticallySelectSomeOrAllRows();
setSelectFullFilterState("filter") setSelectFullFilterState("filter");
} }
else if(selectedIndex == 2) else if (selectedIndex == 2)
{ {
//////////////////////////// ////////////////////////////
// subset of query result // // subset of query result //
//////////////////////////// ////////////////////////////
setSelectionSubsetSizePromptOpen(true); setSelectionSubsetSizePromptOpen(true);
} }
else if(selectedIndex == 3) else if (selectedIndex == 3)
{ {
///////////////////// /////////////////////
// clear selection // // clear selection //
///////////////////// /////////////////////
setSelectFullFilterState("n/a") setSelectFullFilterState("n/a");
setRowSelectionModel([]); setRowSelectionModel([]);
setSelectedIds([]); setSelectedIds([]);
} }
@ -2160,13 +2160,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
{ {
setSelectionSubsetSizePromptOpen(false); setSelectionSubsetSizePromptOpen(false);
if(value !== undefined) if (value !== undefined)
{ {
if(typeof value === "number" && value > 0) if (typeof value === "number" && value > 0)
{ {
programmaticallySelectSomeOrAllRows(value); programmaticallySelectSomeOrAllRows(value);
setSelectionSubsetSize(value); setSelectionSubsetSize(value);
setSelectFullFilterState("filterSubset") setSelectFullFilterState("filterSubset");
} }
else else
{ {
@ -2270,7 +2270,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
///////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////
const [filterHash, setFilterHash] = useState(""); const [filterHash, setFilterHash] = useState("");
if(pageState == "ready") if (pageState == "ready")
{ {
const newFilterHash = JSON.stringify(prepQueryFilterForBackend(queryFilter)); const newFilterHash = JSON.stringify(prepQueryFilterForBackend(queryFilter));
if (filterHash != newFilterHash) if (filterHash != newFilterHash)
@ -2383,7 +2383,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
for (let i = 0; i < queryFilter?.criteria?.length; i++) for (let i = 0; i < queryFilter?.criteria?.length; i++)
{ {
const criteria = queryFilter.criteria[i]; const criteria = queryFilter.criteria[i];
if(criteria.operator == QCriteriaOperator.NOT_EQUALS) if (criteria.operator == QCriteriaOperator.NOT_EQUALS)
{ {
criteria.operator = QCriteriaOperator.NOT_EQUALS_OR_IS_NULL; criteria.operator = QCriteriaOperator.NOT_EQUALS_OR_IS_NULL;
} }
@ -2401,14 +2401,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
///////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////
doClearCurrentSavedView(); doClearCurrentSavedView();
} }
catch(e) catch (e)
{ {
setAlertContent("Error parsing filter from URL"); setAlertContent("Error parsing filter from URL");
} }
} }
else if (viewIdInLocation) else if (viewIdInLocation)
{ {
if(view.viewIdentity == `savedView:${viewIdInLocation}`) if (view.viewIdentity == `savedView:${viewIdInLocation}`)
{ {
///////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////
// if the view id in the location is the same as the view that was most-recently active here, // // if the view id in the location is the same as the view that was most-recently active here, //
@ -2453,7 +2453,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
// so the useEffect that monitors location will see the change, and will set viewIdInLocation // // so the useEffect that monitors location will see the change, and will set viewIdInLocation //
// so upon a re-render we'll hit this block again. // // so upon a re-render we'll hit this block again. //
///////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////
setPageState("loadedMetaData") setPageState("loadedMetaData");
return; return;
} }
@ -2487,7 +2487,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
setTimeout(() => setTimeout(() =>
{ {
// @ts-ignore // @ts-ignore
basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "defaultFilterLoaded") basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "defaultFilterLoaded");
}); });
console.log("finished preparing grid, going to page state ready"); console.log("finished preparing grid, going to page state ready");
@ -2509,13 +2509,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
//////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////
useEffect(() => useEffect(() =>
{ {
if(pageState == "ready") if (pageState == "ready")
{ {
pageLoadingState.setNotLoading() pageLoadingState.setNotLoading();
if(!tableVariantPromptOpen) if (!tableVariantPromptOpen)
{ {
updateTable("pageState is now ready") updateTable("pageState is now ready");
} }
} }
}, [pageState, tableVariantPromptOpen]); }, [pageState, tableVariantPromptOpen]);
@ -2544,7 +2544,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
///////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////
if (tableMetaData && !tableMetaData.capabilities.has(Capability.TABLE_QUERY) && tableMetaData.capabilities.has(Capability.TABLE_GET)) if (tableMetaData && !tableMetaData.capabilities.has(Capability.TABLE_QUERY) && tableMetaData.capabilities.has(Capability.TABLE_GET))
{ {
if(tableMetaData?.usesVariants && (!tableVariant || tableVariantPromptOpen)) if (tableMetaData?.usesVariants && (!tableVariant || tableVariantPromptOpen))
{ {
return ( return (
<BaseLayout> <BaseLayout>
@ -2561,9 +2561,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
// if the table uses variants, then put the variant-selector into the goto dialog // // if the table uses variants, then put the variant-selector into the goto dialog //
//////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////
let gotoVariantSubHeader = <></>; let gotoVariantSubHeader = <></>;
if(tableMetaData?.usesVariants) if (tableMetaData?.usesVariants)
{ {
gotoVariantSubHeader = <Box mb={2}>{getTableVariantHeader(tableVariant)}</Box> gotoVariantSubHeader = <Box mb={2}>{getTableVariantHeader(tableVariant)}</Box>;
} }
return ( return (
@ -2576,7 +2576,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////
// render a loading screen if the page state isn't ready // // render a loading screen if the page state isn't ready //
/////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////
if(pageState != "ready") if (pageState != "ready")
{ {
console.log(`page state is ${pageState}... no-op while those complete async's run...`); console.log(`page state is ${pageState}... no-op while those complete async's run...`);
return (getLoadingScreen()); return (getLoadingScreen());
@ -2586,13 +2586,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
// if the table isn't loaded yet, display loading screen. // // if the table isn't loaded yet, display loading screen. //
// this shouldn't be possible, to be out-of-sync with pageState, but just as a fail-safe // // this shouldn't be possible, to be out-of-sync with pageState, but just as a fail-safe //
/////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////
if(!tableMetaData) if (!tableMetaData)
{ {
return (getLoadingScreen()); return (getLoadingScreen());
} }
let savedViewsComponent = null; let savedViewsComponent = null;
if(metaData && metaData.processes.has("querySavedView")) if (metaData && metaData.processes.has("querySavedView"))
{ {
savedViewsComponent = (<SavedViews qController={qController} metaData={metaData} tableMetaData={tableMetaData} view={view} viewAsJson={viewAsJson} currentSavedView={currentSavedView} tableDefaultView={tableDefaultView} viewOnChangeCallback={handleSavedViewChange} loadingSavedView={loadingSavedView} />); savedViewsComponent = (<SavedViews qController={qController} metaData={metaData} tableMetaData={tableMetaData} view={view} viewAsJson={viewAsJson} currentSavedView={currentSavedView} tableDefaultView={tableDefaultView} viewOnChangeCallback={handleSavedViewChange} loadingSavedView={loadingSavedView} />);
} }
@ -2615,9 +2615,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
//////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////
const baseView = currentSavedView ? JSON.parse(currentSavedView.values.get("viewJson")) as RecordQueryView : tableDefaultView; const baseView = currentSavedView ? JSON.parse(currentSavedView.values.get("viewJson")) as RecordQueryView : tableDefaultView;
const viewDiffs: string[] = []; const viewDiffs: string[] = [];
SavedViewUtils.diffColumns(tableMetaData, baseView, view, viewDiffs) SavedViewUtils.diffColumns(tableMetaData, baseView, view, viewDiffs);
if(viewDiffs.length == 0 && currentSavedView) if (viewDiffs.length == 0 && currentSavedView)
{ {
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
// if 's a saved view, and it's "clean", show it in main style // // if 's a saved view, and it's "clean", show it in main style //
@ -2626,7 +2626,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
buttonBorder = accentColor; buttonBorder = accentColor;
buttonColor = "#FFFFFF"; buttonColor = "#FFFFFF";
} }
else if(viewDiffs.length > 0) else if (viewDiffs.length > 0)
{ {
/////////////////////////////////////////////////// ///////////////////////////////////////////////////
// else if there are diffs, show alt/light style // // else if there are diffs, show alt/light style //
@ -2653,7 +2653,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
color: buttonColor, color: buttonColor,
backgroundColor: buttonBackground, backgroundColor: buttonBackground,
} }
} };
return (<Box order="2"> return (<Box order="2">
<FieldListMenu <FieldListMenu
@ -2668,19 +2668,19 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
handleToggleField={handleChangeOneColumnVisibility} handleToggleField={handleChangeOneColumnVisibility}
/> />
</Box>); </Box>);
} };
////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////
// these numbers help set the height of the grid (so page won't scroll) based on spcae above & below it // // these numbers help set the height of the grid (so page won't scroll) based on spcae above & below it //
////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////
let spaceBelowGrid = 40; let spaceBelowGrid = 40;
let spaceAboveGrid = 205; let spaceAboveGrid = 205;
if(tableMetaData?.usesVariants) if (tableMetaData?.usesVariants)
{ {
spaceAboveGrid += 30; spaceAboveGrid += 30;
} }
if(mode == "advanced") if (mode == "advanced")
{ {
spaceAboveGrid += 60; spaceAboveGrid += 60;
} }

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

@ -263,39 +263,45 @@ class FilterUtils
/******************************************************************************* /*******************************************************************************
** **
*******************************************************************************/ *******************************************************************************/
public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; reasonsWhyItCannot?: string[] } public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; canFilterWorkAsAdvanced: boolean, reasonsWhyItCannot?: string[] }
{ {
const reasonsWhyItCannot: string[] = []; const reasonsWhyItCannot: string[] = [];
if(filter == null) if (filter == null)
{ {
return ({canFilterWorkAsBasic: true}); return ({canFilterWorkAsBasic: true, canFilterWorkAsAdvanced: true});
} }
if(filter.booleanOperator == "OR") if (filter.booleanOperator == "OR")
{ {
reasonsWhyItCannot.push("Filter uses the 'OR' operator.") reasonsWhyItCannot.push("Filter uses the 'OR' operator.");
} }
if(filter.criteria) if (filter.subFilters?.length > 0)
{ {
const usedFields: {[name: string]: boolean} = {}; reasonsWhyItCannot.push("Filter contains sub-filters.");
const warnedFields: {[name: string]: boolean} = {}; return ({canFilterWorkAsBasic: false, canFilterWorkAsAdvanced: false, reasonsWhyItCannot: reasonsWhyItCannot});
}
if (filter.criteria)
{
const usedFields: { [name: string]: boolean } = {};
const warnedFields: { [name: string]: boolean } = {};
for (let i = 0; i < filter.criteria.length; i++) for (let i = 0; i < filter.criteria.length; i++)
{ {
const criteriaName = filter.criteria[i].fieldName; const criteriaName = filter.criteria[i].fieldName;
if(!criteriaName) if (!criteriaName)
{ {
continue; continue;
} }
if(usedFields[criteriaName]) if (usedFields[criteriaName])
{ {
if(!warnedFields[criteriaName]) if (!warnedFields[criteriaName])
{ {
const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, criteriaName); const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, criteriaName);
let fieldLabel = field.label; let fieldLabel = field.label;
if(tableForField.name != tableMetaData.name) if (tableForField.name != tableMetaData.name)
{ {
let fieldLabel = `${tableForField.label}: ${field.label}`; let fieldLabel = `${tableForField.label}: ${field.label}`;
} }
@ -307,13 +313,13 @@ class FilterUtils
} }
} }
if(reasonsWhyItCannot.length == 0) if (reasonsWhyItCannot.length == 0)
{ {
return ({canFilterWorkAsBasic: true}); return ({canFilterWorkAsBasic: true, canFilterWorkAsAdvanced: true});
} }
else else
{ {
return ({canFilterWorkAsBasic: false, reasonsWhyItCannot: reasonsWhyItCannot}); return ({canFilterWorkAsBasic: false, canFilterWorkAsAdvanced: true, reasonsWhyItCannot: reasonsWhyItCannot});
} }
} }
@ -325,7 +331,7 @@ class FilterUtils
{ {
let valuesString = ""; let valuesString = "";
if(criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK) if (criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
{ {
/////////////////////////////////////////////// ///////////////////////////////////////////////
// we don't want values for these operators. // // we don't want values for these operators. //
@ -342,7 +348,7 @@ class FilterUtils
{ {
maxLoops = maxValuesToShow; maxLoops = maxValuesToShow;
} }
else if(maxValuesToShow == 1 && criteria.values.length > 1) else if (maxValuesToShow == 1 && criteria.values.length > 1)
{ {
maxLoops = 1; maxLoops = 1;
} }
@ -364,21 +370,21 @@ class FilterUtils
{ {
const expression = new ThisOrLastPeriodExpression(value); const expression = new ThisOrLastPeriodExpression(value);
let startOfPrefix = ""; let startOfPrefix = "";
if(fieldMetaData.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS") if (fieldMetaData.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
{ {
startOfPrefix = "start of "; startOfPrefix = "start of ";
} }
labels.push(`${startOfPrefix}${expression.toString()}`); labels.push(`${startOfPrefix}${expression.toString()}`);
} }
else if(fieldMetaData.type == QFieldType.BOOLEAN) else if (fieldMetaData.type == QFieldType.BOOLEAN)
{ {
labels.push(value == true ? "yes" : "no") labels.push(value == true ? "yes" : "no");
} }
else if(fieldMetaData.type == QFieldType.DATE_TIME) else if (fieldMetaData.type == QFieldType.DATE_TIME)
{ {
labels.push(ValueUtils.formatDateTime(value)); labels.push(ValueUtils.formatDateTime(value));
} }
else if(fieldMetaData.type == QFieldType.DATE) else if (fieldMetaData.type == QFieldType.DATE)
{ {
labels.push(ValueUtils.formatDate(value)); labels.push(ValueUtils.formatDate(value));
} }
@ -401,7 +407,7 @@ class FilterUtils
labels.push(` and ${n} other value${n == 1 ? "" : "s"}.`); labels.push(` and ${n} other value${n == 1 ? "" : "s"}.`);
break; break;
case "+N": case "+N":
labels[labels.length-1] += ` +${n}`; labels[labels.length - 1] += ` +${n}`;
break; break;
} }
} }
@ -450,7 +456,7 @@ class FilterUtils
for (let i = 0; i < queryFilter?.orderBys?.length; i++) for (let i = 0; i < queryFilter?.orderBys?.length; i++)
{ {
const orderBy = queryFilter.orderBys[i]; const orderBy = queryFilter.orderBys[i];
gridSortModel.push({field: orderBy.fieldName, sort: orderBy.isAscending ? "asc" : "desc"}) gridSortModel.push({field: orderBy.fieldName, sort: orderBy.isAscending ? "asc" : "desc"});
} }
return (gridSortModel); return (gridSortModel);
} }
@ -461,7 +467,7 @@ class FilterUtils
*******************************************************************************/ *******************************************************************************/
public static operatorToHumanString(criteria: QFilterCriteria, field: QFieldMetaData): string public static operatorToHumanString(criteria: QFilterCriteria, field: QFieldMetaData): string
{ {
if(criteria == null || criteria.operator == null) if (criteria == null || criteria.operator == null)
{ {
return (null); return (null);
} }
@ -471,7 +477,7 @@ class FilterUtils
try try
{ {
switch(criteria.operator) switch (criteria.operator)
{ {
case QCriteriaOperator.EQUALS: case QCriteriaOperator.EQUALS:
return ("equals"); return ("equals");
@ -495,35 +501,35 @@ class FilterUtils
case QCriteriaOperator.NOT_CONTAINS: case QCriteriaOperator.NOT_CONTAINS:
return ("does not contain"); return ("does not contain");
case QCriteriaOperator.LESS_THAN: case QCriteriaOperator.LESS_THAN:
if(isDate || isDateTime) if (isDate || isDateTime)
{ {
return ("is before") return ("is before");
} }
return ("less than"); return ("less than");
case QCriteriaOperator.LESS_THAN_OR_EQUALS: case QCriteriaOperator.LESS_THAN_OR_EQUALS:
if(isDate) if (isDate)
{ {
return ("is on or before") return ("is on or before");
} }
if(isDateTime) if (isDateTime)
{ {
return ("is at or before") return ("is at or before");
} }
return ("less than or equals"); return ("less than or equals");
case QCriteriaOperator.GREATER_THAN: case QCriteriaOperator.GREATER_THAN:
if(isDate || isDateTime) if (isDate || isDateTime)
{ {
return ("is after") return ("is after");
} }
return ("greater than or equals"); return ("greater than or equals");
case QCriteriaOperator.GREATER_THAN_OR_EQUALS: case QCriteriaOperator.GREATER_THAN_OR_EQUALS:
if(isDate) if (isDate)
{ {
return ("is on or after") return ("is on or after");
} }
if(isDateTime) if (isDateTime)
{ {
return ("is at or after") return ("is at or after");
} }
return ("greater than or equals"); return ("greater than or equals");
case QCriteriaOperator.IS_BLANK: case QCriteriaOperator.IS_BLANK:
@ -536,10 +542,10 @@ class FilterUtils
return ("is not between"); return ("is not between");
} }
} }
catch(e) catch (e)
{ {
console.log(`Error getting operator human string for ${JSON.stringify(criteria)}: ${e}`); console.log(`Error getting operator human string for ${JSON.stringify(criteria)}: ${e}`);
return criteria?.operator return criteria?.operator;
} }
} }
@ -549,7 +555,7 @@ class FilterUtils
*******************************************************************************/ *******************************************************************************/
public static criteriaToHumanString(table: QTableMetaData, criteria: QFilterCriteria, styled = false): string | JSX.Element public static criteriaToHumanString(table: QTableMetaData, criteria: QFilterCriteria, styled = false): string | JSX.Element
{ {
if(criteria == null) if (criteria == null)
{ {
return (null); return (null);
} }
@ -558,7 +564,7 @@ class FilterUtils
const fieldLabel = TableUtils.getFieldFullLabel(table, criteria.fieldName); const fieldLabel = TableUtils.getFieldFullLabel(table, criteria.fieldName);
const valuesString = FilterUtils.getValuesString(field, criteria); const valuesString = FilterUtils.getValuesString(field, criteria);
if(styled) if (styled)
{ {
return ( return (
<Box display="inline" whiteSpace="nowrap" color="#FFFFFF" mb={"0.5rem"}> <Box display="inline" whiteSpace="nowrap" color="#FFFFFF" mb={"0.5rem"}>
@ -567,7 +573,7 @@ class FilterUtils
{valuesString && <Box display="inline" p="0.125rem" pr="0.5rem" sx={{background: "#009971"}} borderRadius="0 0.5rem 0.5rem 0"> {valuesString}</Box>} {valuesString && <Box display="inline" p="0.125rem" pr="0.5rem" sx={{background: "#009971"}} borderRadius="0 0.5rem 0.5rem 0"> {valuesString}</Box>}
&nbsp; &nbsp;
</Box> </Box>
) );
} }
else else
{ {