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

Merge branch 'feature/CTLE-207-query-joins' into integration/sprint-25

Browse Source
This commit is contained in:
darin.kelkhoff
2023-05-02 08:03:05 -05:00
parent 3a53f00192 74f0876de4
commit fb429be69b
18 changed files with 933 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -6,7 +6,7 @@
"@auth0/auth0-react": "1.10.2",
"@emotion/react": "11.7.1",
"@emotion/styled": "11.6.0",
"@kingsrook/qqq-frontend-core": "1.0.57",
"@kingsrook/qqq-frontend-core": "1.0.59",
"@mui/icons-material": "5.4.1",
"@mui/material": "5.11.1",
"@mui/styles": "5.11.1",

2
pom.xml
View File

@ -85,7 +85,7 @@
<dependency>
<groupId>io.javalin</groupId>
<artifactId>javalin</artifactId>
<version>5.1.4</version>
<version>5.4.2</version>
<scope>test</scope>
</dependency>
<dependency>

4
src/App.tsx
View File

@ -549,7 +549,7 @@ export default function App()
},
);
const [pageHeader, setPageHeader] = useState("");
const [pageHeader, setPageHeader] = useState("" as string | JSX.Element);
const [accentColor, setAccentColor] = useState("#0062FF");
return (
@ -557,7 +557,7 @@ export default function App()
<QContext.Provider value={{
pageHeader: pageHeader,
accentColor: accentColor,
setPageHeader: (header: string) => setPageHeader(header),
setPageHeader: (header: string | JSX.Element) => setPageHeader(header),
setAccentColor: (accentColor: string) => setAccentColor(accentColor)
}}>
<ThemeProvider theme={theme}>

4
src/QContext.tsx
View File

@ -24,8 +24,8 @@ import {createContext} from "react";
interface QContext
{
pageHeader: string;
setPageHeader?: (header: string) => void;
pageHeader: string | JSX.Element;
setPageHeader?: (header: string | JSX.Element) => void;
accentColor: string;
setAccentColor?: (header: string) => void;
}

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

@ -194,7 +194,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
new QFilterOrderBy("timestamp", sortDirection),
new QFilterOrderBy("id", sortDirection),
new QFilterOrderBy("auditDetail.id", true)
]);
], "AND", 0, limit);
///////////////////////////////
// fetch audits in try-catch //
@ -202,7 +202,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
let audits = [] as QRecord[]
try
{
audits = await qController.query("audit", filter, limit, 0, [new QueryJoin("auditDetail", true, "LEFT")]);
audits = await qController.query("audit", filter, [new QueryJoin("auditDetail", true, "LEFT")]);
setAudits(audits);
}
catch(e)
@ -222,8 +222,8 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
// if we fetched the limit
if (audits.length == limit)
{
const count = await qController.count("audit", filter);
setTotal(count);
const [count, distinctCount] = await qController.count("audit", filter, null, true); // todo validate distinct working here!
setTotal(distinctCount);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////

8
src/qqq/components/buttons/DefaultButtons.tsx
View File

@ -50,18 +50,20 @@ export function QCreateNewButton({tablePath}: QCreateNewButtonProps): JSX.Elemen
interface QSaveButtonProps
{
label?: string;
iconName?: string;
onClickHandler?: any,
disabled: boolean
}
QSaveButton.defaultProps = {
label: "Save"
label: "Save",
iconName: "save"
};
export function QSaveButton({label, onClickHandler, disabled}: QSaveButtonProps): JSX.Element
export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveButtonProps): JSX.Element
{
return (
<Box ml={3} width={standardWidth}>
<MDButton type="submit" variant="gradient" color="info" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>save</Icon>} disabled={disabled}>
<MDButton type="submit" variant="gradient" color="info" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}>
{label}
</MDButton>
</Box>

144
src/qqq/components/buttons/MenuButton.tsx Normal file
View File

@ -0,0 +1,144 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2023. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {ClickAwayListener, Grow, MenuList, Paper, Popper} from "@mui/material";
import Button from "@mui/material/Button/Button";
import Icon from "@mui/material/Icon";
import MenuItem from "@mui/material/MenuItem";
import React, {useEffect, useRef, useState} from "react";
interface Props
{
label: string;
iconName?: string
options: string[];
disabled?: boolean;
callback: (selectedIndex: number) => void;
}
MenuButton.defaultProps =
{
disabled: false
};
function MenuButton({label, iconName, options, disabled, callback}: Props)
{
const [open, setOpen] = useState(false);
const anchorRef = useRef<HTMLButtonElement>(null);
const handleToggle = () =>
{
setOpen((prevOpen) => !prevOpen);
};
const handleClose = (event: Event | React.SyntheticEvent) =>
{
if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement))
{
return;
}
setOpen(false);
};
function handleListKeyDown(event: React.KeyboardEvent)
{
if (event.key === "Tab")
{
event.preventDefault();
setOpen(false);
}
else if (event.key === "Escape")
{
setOpen(false);
}
}
// return focus to the button when we transitioned from !open -> open
const prevOpen = useRef(open);
useEffect(() =>
{
if (prevOpen.current === true && open === false)
{
anchorRef.current!.focus();
}
prevOpen.current = open;
}, [open]);
const menuItemClicked = (e: React.MouseEvent<HTMLLIElement, MouseEvent>, newIndex: number) =>
{
callback(newIndex);
handleClose(e);
}
const menuItems: JSX.Element[] = []
options.map((option, index) =>
{
menuItems.push(<MenuItem key={index} onClick={e => menuItemClicked(e, index)}>
{option}
</MenuItem>);
})
return (
<div>
<Button
ref={anchorRef}
id="composition-button"
aria-controls={open ? "composition-menu" : undefined}
aria-expanded={open ? "true" : undefined}
aria-haspopup="true"
onClick={handleToggle}
startIcon={iconName ? <Icon>{iconName}</Icon> : undefined}
sx={{pl: "1.25rem"}}
disabled={disabled}
>
{label}
</Button>
<Popper
open={open}
anchorEl={anchorRef.current}
role={undefined}
placement="bottom-start"
transition
disablePortal nonce={undefined} onResize={undefined} onResizeCapture={undefined}
sx={{zIndex: 1}}
>
{({TransitionProps, placement}) => (
<Grow{...TransitionProps} style={{transformOrigin: placement === "bottom-start" ? "left top" : "left bottom"}}>
<Paper elevation={3}>
<ClickAwayListener onClickAway={handleClose}>
<MenuList onKeyDown={handleListKeyDown}>
{menuItems}
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
);
}
export default MenuButton;

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

@ -100,8 +100,8 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
const criteria = [new QFilterCriteria("dataBagId", QCriteriaOperator.EQUALS, [dataBagId])];
const orderBys = [new QFilterOrderBy("sequenceNo", false)];
const filter = new QQueryFilter(criteria, orderBys);
const versions = await qController.query("dataBagVersion", filter, 25, 0);
const filter = new QQueryFilter(criteria, orderBys, "AND", 0, 25);
const versions = await qController.query("dataBagVersion", filter);
console.log("Fetched versions:");
console.log(versions);
setVersionRecordList(versions);

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

@ -60,13 +60,13 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
}
const tableMetaData = new QTableMetaData(data.childTableMetaData);
const {rows, columnsToRender} = DataGridUtils.makeRows(records, tableMetaData);
const rows = DataGridUtils.makeRows(records, tableMetaData);
/////////////////////////////////////////////////////////////////////////////////
// note - tablePath may be null, if the user doesn't have access to the table. //
/////////////////////////////////////////////////////////////////////////////////
const childTablePath = data.tablePath ? data.tablePath + (data.tablePath.endsWith("/") ? "" : "/") : data.tablePath;
const columns = DataGridUtils.setupGridColumns(tableMetaData, columnsToRender, childTablePath);
const columns = DataGridUtils.setupGridColumns(tableMetaData, childTablePath, null, "bySection");
////////////////////////////////////////////////////////////////
// do not not show the foreign-key column of the parent table //

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

@ -133,8 +133,8 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
const criteria = [new QFilterCriteria("scriptId", QCriteriaOperator.EQUALS, [scriptId])];
const orderBys = [new QFilterOrderBy("sequenceNo", false)];
const filter = new QQueryFilter(criteria, orderBys);
const versions = await qController.query("scriptRevision", filter, 25, 0);
const filter = new QQueryFilter(criteria, orderBys, "AND", 0, 25);
const versions = await qController.query("scriptRevision", filter);
console.log("Fetched versions:");
console.log(versions);
setVersionRecordList(versions);
@ -281,7 +281,8 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
{
(async () =>
{
scriptLogs[scriptRevisionId] = await qController.query("scriptLog", new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])]), 100, 0);
let filter = new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])], [new QFilterOrderBy("id", false)], "AND", 0, 100);
scriptLogs[scriptRevisionId] = await qController.query("scriptLog", filter);
setScriptLogs(scriptLogs);
forceUpdate();
})();

2
src/qqq/pages/apps/Home.tsx
View File

@ -127,7 +127,7 @@ function AppHome({app}: Props): JSX.Element
let countResult = null;
if(tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
{
countResult = await qController.count(table.name);
[countResult] = await qController.count(table.name);
if (countResult !== null && countResult !== undefined)
{

4
src/qqq/pages/records/query/ColumnStats.tsx
View File

@ -126,8 +126,8 @@ function ColumnStats({tableMetaData, fieldMetaData, filter}: Props): JSX.Element
fakeTableMetaData.sections = [] as QTableSection[];
fakeTableMetaData.sections.push(new QTableSection({fieldNames: [fieldMetaData.name, "count"]}));
const {rows, columnsToRender} = DataGridUtils.makeRows(valueCounts, fakeTableMetaData);
const columns = DataGridUtils.setupGridColumns(fakeTableMetaData, columnsToRender);
const rows = DataGridUtils.makeRows(valueCounts, fakeTableMetaData);
const columns = DataGridUtils.setupGridColumns(fakeTableMetaData, null, null, "bySection");
columns.forEach((c) =>
{
c.width = 200;

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

File diff suppressed because it is too large Load Diff

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

@ -124,7 +124,6 @@
.MuiDataGrid-toolbarContainer .selectionTool
{
margin-left: 40px;
font-size: 14px;
}

172
src/qqq/utils/DataGridUtils.tsx
View File

@ -22,10 +22,12 @@
import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import {getGridDateOperators, GridColDef, GridRowsProp} from "@mui/x-data-grid-pro";
import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
import React from "react";
import {Link} from "react-router-dom";
import {buildQGridPvsOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/records/query/GridFilterOperators";
import ValueUtils from "qqq/utils/qqq/ValueUtils";
@ -36,24 +38,39 @@ export default class DataGridUtils
/*******************************************************************************
**
*******************************************************************************/
public static makeRows = (results: QRecord[], tableMetaData: QTableMetaData): {rows: GridRowsProp[], columnsToRender: any} =>
public static makeRows = (results: QRecord[], tableMetaData: QTableMetaData): GridRowsProp[] =>
{
const fields = [ ...tableMetaData.fields.values() ];
const rows = [] as any[];
const columnsToRender = {} as any;
let rowIndex = 0;
results.forEach((record: QRecord) =>
{
const row: any = {};
row.__rowIndex = rowIndex++;
fields.forEach((field) =>
{
const value = ValueUtils.getDisplayValue(field, record, "query");
if (typeof value !== "string")
{
columnsToRender[field.name] = true;
}
row[field.name] = value;
row[field.name] = ValueUtils.getDisplayValue(field, record, "query");
});
if(tableMetaData.exposedJoins)
{
for (let i = 0; i < tableMetaData.exposedJoins.length; i++)
{
const join = tableMetaData.exposedJoins[i];
if(join?.joinTable?.fields?.values())
{
const fields = [...join.joinTable.fields.values()];
fields.forEach((field) =>
{
let fieldName = join.joinTable.name + "." + field.name;
row[fieldName] = ValueUtils.getDisplayValue(field, record, "query", fieldName);
});
}
}
}
if(!row["id"])
{
row["id"] = record.values.get(tableMetaData.primaryKeyField) ?? row[tableMetaData.primaryKeyField];
@ -69,70 +86,106 @@ export default class DataGridUtils
rows.push(row);
});
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// do this secondary check for columnsToRender - in case we didn't have any rows above, and our check for string isn't enough. //
// ... shouldn't this be just based on the field definition anyway... ? plus adornments? //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
fields.forEach((field) =>
{
if(field.possibleValueSourceName)
{
columnsToRender[field.name] = true;
}
});
return ({rows, columnsToRender});
return (rows);
}
/*******************************************************************************
**
*******************************************************************************/
public static setupGridColumns = (tableMetaData: QTableMetaData, columnsToRender: any, linkBase: string = ""): GridColDef[] =>
public static setupGridColumns = (tableMetaData: QTableMetaData, linkBase: string = "", metaData?: QInstance, columnSort: "bySection" | "alphabetical" = "alphabetical"): GridColDef[] =>
{
const columns = [] as GridColDef[];
const sortedKeys: string[] = [];
this.addColumnsForTable(tableMetaData, linkBase, columns, columnSort, null, null);
for (let i = 0; i < tableMetaData.sections.length; i++)
if(tableMetaData.exposedJoins)
{
const section = tableMetaData.sections[i];
if(!section.fieldNames)
for (let i = 0; i < tableMetaData.exposedJoins.length; i++)
{
continue;
}
const join = tableMetaData.exposedJoins[i];
for (let j = 0; j < section.fieldNames.length; j++)
{
sortedKeys.push(section.fieldNames[j]);
let joinLinkBase = null;
if(metaData)
{
joinLinkBase = metaData.getTablePath(join.joinTable);
joinLinkBase += joinLinkBase.endsWith("/") ? "" : "/";
}
if(join?.joinTable?.fields?.values())
{
this.addColumnsForTable(join.joinTable, joinLinkBase, columns, columnSort, join.joinTable.name + ".", join.label + ": ");
}
}
}
sortedKeys.forEach((key) =>
{
const field = tableMetaData.fields.get(key);
const column = this.makeColumnFromField(field, tableMetaData, columnsToRender);
if (key === tableMetaData.primaryKeyField && linkBase)
{
columns.splice(0, 0, column);
column.renderCell = (cellValues: any) => (
<Link to={`${linkBase}${cellValues.value}`}>{cellValues.value}</Link>
);
}
else
{
columns.push(column);
}
});
return (columns);
};
/*******************************************************************************
**
*******************************************************************************/
private static addColumnsForTable(tableMetaData: QTableMetaData, linkBase: string, columns: GridColDef[], columnSort: "bySection" | "alphabetical" = "alphabetical", namePrefix?: string, labelPrefix?: string)
{
const sortedKeys: string[] = [];
////////////////////////////////////////////////////////////////////////
// this sorted by sections - e.g., manual sorting by the meta-data... //
////////////////////////////////////////////////////////////////////////
if(columnSort === "bySection")
{
for (let i = 0; i < tableMetaData.sections.length; i++)
{
const section = tableMetaData.sections[i];
if (!section.fieldNames)
{
continue;
}
for (let j = 0; j < section.fieldNames.length; j++)
{
sortedKeys.push(section.fieldNames[j]);
}
}
}
else // columnSort = "alphabetical"
{
///////////////////////////
// sort by labels... mmm //
///////////////////////////
sortedKeys.push(...tableMetaData.fields.keys())
sortedKeys.sort((a: string, b: string): number =>
{
return (tableMetaData.fields.get(a).label.localeCompare(tableMetaData.fields.get(b).label))
})
}
sortedKeys.forEach((key) =>
{
const field = tableMetaData.fields.get(key);
const column = this.makeColumnFromField(field, tableMetaData, namePrefix, labelPrefix);
if(key === tableMetaData.primaryKeyField && linkBase && namePrefix == null)
{
columns.splice(0, 0, column);
}
else
{
columns.push(column);
}
if (key === tableMetaData.primaryKeyField && linkBase)
{
column.renderCell = (cellValues: any) => (
<Link to={`${linkBase}${cellValues.value}`} onClick={(e) => e.stopPropagation()}>{cellValues.value}</Link>
);
}
});
}
/*******************************************************************************
**
*******************************************************************************/
public static makeColumnFromField = (field: QFieldMetaData, tableMetaData: QTableMetaData, columnsToRender: any): GridColDef =>
public static makeColumnFromField = (field: QFieldMetaData, tableMetaData: QTableMetaData, namePrefix?: string, labelPrefix?: string): GridColDef =>
{
let columnType = "string";
let columnWidth = 200;
@ -198,24 +251,21 @@ export default class DataGridUtils
}
}
let headerName = labelPrefix ? labelPrefix + field.label : field.label;
let fieldName = namePrefix ? namePrefix + field.name : field.name;
const column = {
field: field.name,
field: fieldName,
type: columnType,
headerName: field.label,
headerName: headerName,
width: columnWidth,
renderCell: null as any,
filterOperators: filterOperators,
};
/////////////////////////////////////////////////////////////////////////////////////////
// looks like, maybe we can just always render all columns, and remove this parameter? //
/////////////////////////////////////////////////////////////////////////////////////////
if (columnsToRender == null || columnsToRender[field.name])
{
column.renderCell = (cellValues: any) => (
(cellValues.value)
);
}
column.renderCell = (cellValues: any) => (
(cellValues.value)
);
return (column);
}

8
src/qqq/utils/qqq/FilterUtils.ts
View File

@ -514,7 +514,7 @@ class FilterUtils
/*******************************************************************************
** build a qqq filter from a grid and column sort model
*******************************************************************************/
public static buildQFilterFromGridFilter(tableMetaData: QTableMetaData, filterModel: GridFilterModel, columnSortModel: GridSortItem[]): QQueryFilter
public static buildQFilterFromGridFilter(tableMetaData: QTableMetaData, filterModel: GridFilterModel, columnSortModel: GridSortItem[], limit?: number): QQueryFilter
{
console.log("Building q filter with model:");
console.log(filterModel);
@ -528,6 +528,12 @@ class FilterUtils
});
}
if (limit)
{
console.log("Setting limit to: " + limit);
qFilter.limit = limit;
}
if (filterModel)
{
let foundFilter = false;

8
src/qqq/utils/qqq/ValueUtils.tsx
View File

@ -69,10 +69,12 @@ class ValueUtils
** When you have a field, and a record - call this method to get a string or
** element back to display the field's value.
*******************************************************************************/
public static getDisplayValue(field: QFieldMetaData, record: QRecord, usage: "view" | "query" = "view"): string | JSX.Element | JSX.Element[]
public static getDisplayValue(field: QFieldMetaData, record: QRecord, usage: "view" | "query" = "view", overrideFieldName?: string): string | JSX.Element | JSX.Element[]
{
const displayValue = record.displayValues ? record.displayValues.get(field.name) : undefined;
const rawValue = record.values ? record.values.get(field.name) : undefined;
const fieldName = overrideFieldName ?? field.name;
const displayValue = record.displayValues ? record.displayValues.get(fieldName) : undefined;
const rawValue = record.values ? record.values.get(fieldName) : undefined;
return ValueUtils.getValueForDisplay(field, rawValue, displayValue, usage);
}

2
src/test/java/com/kingsrook/qqq/materialdashboard/tests/QueryScreenTest.java
View File

@ -128,7 +128,7 @@ public class QueryScreenTest extends QBaseSeleniumTest
String expectedFilterContents1 = """
{"fieldName":"firstName","operator":"CONTAINS","values":["Jam"]}""";
String expectedFilterContents2 = """
"booleanOperator":"OR"}""";
"booleanOperator":"OR\"""";
qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectedFilterContents0);
qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectedFilterContents1);