mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-19 05:40:44 +00:00
Add record grid widget; move table widgets down into sections
This commit is contained in:
122
src/qqq/pages/dashboards/Widgets/RecordGridWidget.tsx
Normal file
122
src/qqq/pages/dashboards/Widgets/RecordGridWidget.tsx
Normal file
@ -0,0 +1,122 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. 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 {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import {DataGridPro, GridValidRowModel} from "@mui/x-data-grid-pro";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
import DataGridUtils from "qqq/utils/DataGridUtils";
|
||||
|
||||
interface Props
|
||||
{
|
||||
title: string
|
||||
data: any;
|
||||
}
|
||||
|
||||
RecordGridWidget.defaultProps = {
|
||||
};
|
||||
|
||||
function RecordGridWidget({title, data}: Props): JSX.Element
|
||||
{
|
||||
const [rows, setRows] = useState([]);
|
||||
const [columns, setColumns] = useState([])
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(data && data.childTableMetaData && data.queryOutput)
|
||||
{
|
||||
const records: QRecord[] = [];
|
||||
const queryOutputRecords = data.queryOutput.records;
|
||||
if (queryOutputRecords)
|
||||
{
|
||||
for (let i = 0; i < queryOutputRecords.length; i++)
|
||||
{
|
||||
records.push(new QRecord(queryOutputRecords[i]));
|
||||
}
|
||||
}
|
||||
|
||||
const tableMetaData = new QTableMetaData(data.childTableMetaData);
|
||||
const {rows, columnsToRender} = DataGridUtils.makeRows(records, tableMetaData);
|
||||
const columns = DataGridUtils.setupGridColumns(tableMetaData, columnsToRender, data.tablePath);
|
||||
|
||||
setRows(rows);
|
||||
setColumns(columns);
|
||||
}
|
||||
}, [data])
|
||||
|
||||
return (
|
||||
<Card sx={{width: "100%"}}>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center">
|
||||
<Typography variant="h5" fontWeight="medium" p={3}>
|
||||
{title}
|
||||
</Typography>
|
||||
{
|
||||
data.viewAllLink &&
|
||||
<Typography variant="body2" p={3}>
|
||||
<Link to={data.viewAllLink}>
|
||||
View All
|
||||
</Link>
|
||||
</Typography>
|
||||
}
|
||||
</Box>
|
||||
<DataGridPro
|
||||
autoHeight
|
||||
rows={rows}
|
||||
disableSelectionOnClick
|
||||
columns={columns}
|
||||
rowBuffer={10}
|
||||
getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
|
||||
// getRowHeight={() => "auto"} // maybe nice? wraps values in cells...
|
||||
// components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading}}
|
||||
// pinnedColumns={pinnedColumns}
|
||||
// onPinnedColumnsChange={handlePinnedColumnsChange}
|
||||
// pagination
|
||||
// paginationMode="server"
|
||||
// sortingMode="server"
|
||||
// filterMode="server"
|
||||
// page={pageNumber}
|
||||
// checkboxSelection
|
||||
// rowCount={totalRecords === null ? 0 : totalRecords}
|
||||
// onPageSizeChange={handleRowsPerPageChange}
|
||||
// onRowClick={handleRowClick}
|
||||
// onStateChange={handleStateChange}
|
||||
// density={density}
|
||||
// loading={loading}
|
||||
// filterModel={filterModel}
|
||||
// onFilterModelChange={handleFilterChange}
|
||||
// columnVisibilityModel={columnVisibilityModel}
|
||||
// onColumnVisibilityModelChange={handleColumnVisibilityChange}
|
||||
// onColumnOrderChange={handleColumnOrderChange}
|
||||
// onSelectionModelChange={selectionChanged}
|
||||
// onSortModelChange={handleSortChange}
|
||||
// sortingOrder={[ "asc", "desc" ]}
|
||||
// sortModel={columnSortModel}
|
||||
/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default RecordGridWidget;
|
||||
@ -57,6 +57,7 @@ import MDAlert from "qqq/components/Temporary/MDAlert";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import {buildQGridPvsOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/entity-list/QGridFilterOperators";
|
||||
import ProcessRun from "qqq/pages/process-run";
|
||||
import DataGridUtils from "qqq/utils/DataGridUtils";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import QFilterUtils from "qqq/utils/QFilterUtils";
|
||||
import QProcessUtils from "qqq/utils/QProcessUtils";
|
||||
@ -442,120 +443,6 @@ function EntityList({table, launchProcess}: Props): JSX.Element
|
||||
})();
|
||||
};
|
||||
|
||||
const setupGridColumns = (columnsToRender: any) =>
|
||||
{
|
||||
const sortedKeys: string[] = [];
|
||||
|
||||
for (let i = 0; i < tableMetaData.sections.length; i++)
|
||||
{
|
||||
const section = tableMetaData.sections[i];
|
||||
for (let j = 0; j < section.fieldNames.length; j++)
|
||||
{
|
||||
sortedKeys.push(section.fieldNames[j]);
|
||||
}
|
||||
}
|
||||
|
||||
const columns = [] as GridColDef[];
|
||||
sortedKeys.forEach((key) =>
|
||||
{
|
||||
const field = tableMetaData.fields.get(key);
|
||||
|
||||
let columnType = "string";
|
||||
let columnWidth = 200;
|
||||
let filterOperators: GridFilterOperator<any>[] = QGridStringOperators;
|
||||
|
||||
if (field.possibleValueSourceName)
|
||||
{
|
||||
filterOperators = buildQGridPvsOperators(tableName, field);
|
||||
}
|
||||
else
|
||||
{
|
||||
switch (field.type)
|
||||
{
|
||||
case QFieldType.DECIMAL:
|
||||
case QFieldType.INTEGER:
|
||||
columnType = "number";
|
||||
columnWidth = 100;
|
||||
|
||||
if (key === tableMetaData.primaryKeyField && field.label.length < 3)
|
||||
{
|
||||
columnWidth = 75;
|
||||
}
|
||||
|
||||
filterOperators = QGridNumericOperators;
|
||||
break;
|
||||
case QFieldType.DATE:
|
||||
columnType = "date";
|
||||
columnWidth = 100;
|
||||
filterOperators = getGridDateOperators();
|
||||
break;
|
||||
case QFieldType.DATE_TIME:
|
||||
columnType = "dateTime";
|
||||
columnWidth = 200;
|
||||
filterOperators = getGridDateOperators(true);
|
||||
break;
|
||||
case QFieldType.BOOLEAN:
|
||||
columnType = "string"; // using boolean gives an odd 'no' for nulls.
|
||||
columnWidth = 75;
|
||||
filterOperators = QGridBooleanOperators;
|
||||
break;
|
||||
default:
|
||||
// noop - leave as string
|
||||
}
|
||||
}
|
||||
|
||||
if (field.hasAdornment(AdornmentType.SIZE))
|
||||
{
|
||||
const sizeAdornment = field.getAdornment(AdornmentType.SIZE);
|
||||
const width: string = sizeAdornment.getValue("width");
|
||||
const widths: Map<string, number> = new Map<string, number>([
|
||||
[ "small", 100 ],
|
||||
[ "medium", 200 ],
|
||||
[ "large", 400 ],
|
||||
[ "xlarge", 600 ]
|
||||
]);
|
||||
if (widths.has(width))
|
||||
{
|
||||
columnWidth = widths.get(width);
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log("Unrecognized size.width adornment value: " + width);
|
||||
}
|
||||
}
|
||||
|
||||
const column = {
|
||||
field: field.name,
|
||||
type: columnType,
|
||||
headerName: field.label,
|
||||
width: columnWidth,
|
||||
renderCell: null as any,
|
||||
filterOperators: filterOperators,
|
||||
};
|
||||
|
||||
if (columnsToRender[field.name])
|
||||
{
|
||||
column.renderCell = (cellValues: any) => (
|
||||
(cellValues.value)
|
||||
);
|
||||
}
|
||||
|
||||
if (key === tableMetaData.primaryKeyField)
|
||||
{
|
||||
columns.splice(0, 0, column);
|
||||
column.renderCell = (cellValues: any) => (
|
||||
<Link to={cellValues.value}>{cellValues.value}</Link>
|
||||
);
|
||||
}
|
||||
else
|
||||
{
|
||||
columns.push(column);
|
||||
}
|
||||
});
|
||||
|
||||
setColumnsModel(columns);
|
||||
};
|
||||
|
||||
///////////////////////////
|
||||
// display count results //
|
||||
///////////////////////////
|
||||
@ -592,47 +479,16 @@ function EntityList({table, launchProcess}: Props): JSX.Element
|
||||
const results = queryResults[latestQueryId];
|
||||
delete queryResults[latestQueryId];
|
||||
|
||||
const fields = [ ...tableMetaData.fields.values() ];
|
||||
const rows = [] as any[];
|
||||
const columnsToRender = {} as any;
|
||||
results.forEach((record: QRecord) =>
|
||||
{
|
||||
const row: any = {};
|
||||
fields.forEach((field) =>
|
||||
{
|
||||
const value = QValueUtils.getDisplayValue(field, record, "query");
|
||||
if (typeof value !== "string")
|
||||
{
|
||||
columnsToRender[field.name] = true;
|
||||
}
|
||||
row[field.name] = value;
|
||||
});
|
||||
|
||||
if(!row["id"])
|
||||
{
|
||||
row["id"] = row[tableMetaData.primaryKeyField];
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
const {rows, columnsToRender} = DataGridUtils.makeRows(results, tableMetaData);
|
||||
|
||||
if(columnsModel.length == 0)
|
||||
{
|
||||
setupGridColumns(columnsToRender);
|
||||
const columns = DataGridUtils.setupGridColumns(tableMetaData, columnsToRender);
|
||||
setColumnsModel(columns);
|
||||
}
|
||||
|
||||
setRows(rows);
|
||||
|
||||
setLoading(false);
|
||||
setAlertContent(null);
|
||||
forceUpdate();
|
||||
|
||||
@ -1,175 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {Label} from "@mui/icons-material";
|
||||
import {ToggleButton, ToggleButtonGroup, Typography} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import React, {useState} from "react";
|
||||
import AceEditor from "react-ace";
|
||||
import {QCancelButton, QSaveButton} from "qqq/components/QButtons";
|
||||
import ScriptDocsForm from "qqq/pages/entity-view/ScriptDocsForm";
|
||||
import ScriptTestForm from "qqq/pages/entity-view/ScriptTestForm";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
|
||||
interface AssociatedScriptDefinition
|
||||
{
|
||||
testInputFields: QFieldMetaData[];
|
||||
testOutputFields: QFieldMetaData[];
|
||||
scriptType: any;
|
||||
}
|
||||
|
||||
interface Props
|
||||
{
|
||||
scriptDefinition: AssociatedScriptDefinition;
|
||||
tableName: string;
|
||||
primaryKey: any;
|
||||
fieldName: string;
|
||||
titlePrefix: string;
|
||||
recordLabel: string;
|
||||
scriptName: string;
|
||||
code: string;
|
||||
closeCallback: any;
|
||||
}
|
||||
|
||||
|
||||
const qController = QClient.getInstance();
|
||||
|
||||
function AssociatedScriptEditor({scriptDefinition, tableName, primaryKey, fieldName, titlePrefix, recordLabel, scriptName, code, closeCallback}: Props): JSX.Element
|
||||
{
|
||||
const [closing, setClosing] = useState(false);
|
||||
const [updatedCode, setUpdatedCode] = useState(code)
|
||||
const [commitMessage, setCommitMessage] = useState("")
|
||||
const [openTool, setOpenTool] = useState(null);
|
||||
|
||||
const changeOpenTool = (event: React.MouseEvent<HTMLElement>, newValue: string | null) =>
|
||||
{
|
||||
setOpenTool(newValue);
|
||||
|
||||
// need this to make Ace recognize new height.
|
||||
setTimeout(() =>
|
||||
{
|
||||
window.dispatchEvent(new Event("resize"))
|
||||
}, 100);
|
||||
};
|
||||
|
||||
|
||||
const saveClicked = () =>
|
||||
{
|
||||
setClosing(true);
|
||||
|
||||
(async () =>
|
||||
{
|
||||
const rs = await qController.storeRecordAssociatedScript(tableName, primaryKey, fieldName, updatedCode, commitMessage);
|
||||
closeCallback(null, "saved", "Saved New " + scriptName);
|
||||
})();
|
||||
}
|
||||
|
||||
const cancelClicked = () =>
|
||||
{
|
||||
setClosing(true);
|
||||
closeCallback(null, "cancelled");
|
||||
}
|
||||
|
||||
const updateCode = (value: string, event: any) =>
|
||||
{
|
||||
setUpdatedCode(value);
|
||||
}
|
||||
|
||||
const updateCommitMessage = (event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
{
|
||||
setCommitMessage(event.target.value);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{position: "absolute", overflowY: "auto", height: "100%", width: "100%"}} p={6}>
|
||||
<Card sx={{height: "100%", p: 3}}>
|
||||
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center">
|
||||
<Typography variant="h5" pb={1}>
|
||||
{`${titlePrefix}: ${recordLabel} - ${scriptName}`}
|
||||
</Typography>
|
||||
|
||||
<Box>
|
||||
<Typography variant="body2" display="inline" pr={1}>
|
||||
Tools:
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={openTool}
|
||||
exclusive
|
||||
onChange={changeOpenTool}
|
||||
size="small"
|
||||
sx={{pb: 1}}
|
||||
>
|
||||
<ToggleButton value="test">Test</ToggleButton>
|
||||
<ToggleButton value="docs">Docs</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{height: openTool ? "45%" : "100%"}}>
|
||||
<AceEditor
|
||||
mode="javascript"
|
||||
theme="github"
|
||||
name="editor"
|
||||
editorProps={{$blockScrolling: true}}
|
||||
onChange={updateCode}
|
||||
width="100%"
|
||||
height="100%"
|
||||
value={updatedCode}
|
||||
style={{border: "1px solid gray"}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{
|
||||
openTool &&
|
||||
<Box sx={{height: "45%"}} pt={2}>
|
||||
{
|
||||
openTool == "test" && <ScriptTestForm scriptDefinition={scriptDefinition} tableName={tableName} fieldName={fieldName} recordId={primaryKey} code={updatedCode} />
|
||||
}
|
||||
{
|
||||
openTool == "docs" && <ScriptDocsForm helpText={scriptDefinition.scriptType.values.helpText} exampleCode={scriptDefinition.scriptType.values.sampleCode} aceEditorHeight="100%" />
|
||||
}
|
||||
</Box>
|
||||
}
|
||||
|
||||
<Box pt={1}>
|
||||
<Grid container alignItems="flex-end">
|
||||
<Box width="50%">
|
||||
<TextField id="commitMessage" label="Commit Message" variant="standard" fullWidth value={commitMessage} onChange={updateCommitMessage} />
|
||||
</Box>
|
||||
<Grid container justifyContent="flex-end" spacing={3}>
|
||||
<QCancelButton disabled={closing} onClickHandler={cancelClicked} />
|
||||
<QSaveButton disabled={closing} onClickHandler={saveClicked} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default AssociatedScriptEditor;
|
||||
@ -20,7 +20,6 @@
|
||||
*/
|
||||
|
||||
import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import {Alert, Chip, Icon, ListItem, ListItemAvatar, Typography} from "@mui/material";
|
||||
@ -43,13 +42,15 @@ import {useParams} from "react-router-dom";
|
||||
import QContext from "QContext";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import CustomWidthTooltip from "qqq/components/CustomWidthTooltip/CustomWidthTooltip";
|
||||
import AssociatedScriptEditor from "qqq/components/ScriptComponents/AssociatedScriptEditor";
|
||||
import ScriptDocsForm from "qqq/components/ScriptComponents/ScriptDocsForm";
|
||||
import ScriptLogsView from "qqq/components/ScriptComponents/ScriptLogsView";
|
||||
import ScriptTestForm from "qqq/components/ScriptComponents/ScriptTestForm";
|
||||
import TabPanel from "qqq/components/TabPanel/TabPanel";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import AssociatedScriptEditor from "qqq/pages/entity-view/AssociatedScriptEditor";
|
||||
import ScriptLogsView from "qqq/pages/entity-view/ScriptLogsView";
|
||||
import ScriptTestForm from "qqq/pages/entity-view/ScriptTestForm";
|
||||
import DeveloperModeUtils from "qqq/utils/DeveloperModeUtils";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import QValueUtils from "qqq/utils/QValueUtils";
|
||||
import ScriptDocsForm from "./ScriptDocsForm";
|
||||
|
||||
import "ace-builds/src-noconflict/mode-java";
|
||||
import "ace-builds/src-noconflict/mode-javascript";
|
||||
@ -59,35 +60,6 @@ import "ace-builds/src-noconflict/ext-language_tools";
|
||||
|
||||
const qController = QClient.getInstance();
|
||||
|
||||
interface TabPanelProps
|
||||
{
|
||||
children?: React.ReactNode;
|
||||
index: number;
|
||||
value: number;
|
||||
}
|
||||
|
||||
function TabPanel(props: TabPanelProps)
|
||||
{
|
||||
const {children, value, index, ...other} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="tabpanel"
|
||||
hidden={value !== index}
|
||||
id={`simple-tabpanel-${index}`}
|
||||
aria-labelledby={`simple-tab-${index}`}
|
||||
{...other}
|
||||
>
|
||||
{value === index && (
|
||||
<Box>
|
||||
<Typography>{children}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// Declaring props types for ViewForm
|
||||
interface Props
|
||||
{
|
||||
@ -115,8 +87,6 @@ function EntityDeveloperView({table}: Props): JSX.Element
|
||||
const [selectedTabs, setSelectedTabs] = useState({} as any);
|
||||
const [viewingRevisions, setViewingRevisions] = useState({} as any);
|
||||
const [scriptLogs, setScriptLogs] = useState({} as any);
|
||||
const [testInputValues, setTestInputValues] = useState({} as any);
|
||||
const [testOutputValues, setTestOutputValues] = useState({} as any);
|
||||
|
||||
const [editingScript, setEditingScript] = useState(null as any);
|
||||
const [alertText, setAlertText] = useState(null as string);
|
||||
@ -155,23 +125,6 @@ function EntityDeveloperView({table}: Props): JSX.Element
|
||||
|
||||
setAssociatedScripts(developerModeData.associatedScripts);
|
||||
|
||||
const testInputValues = {};
|
||||
const testOutputValues = {};
|
||||
console.log("@dk - here");
|
||||
console.log(developerModeData.associatedScripts);
|
||||
developerModeData.associatedScripts.forEach((object: any) =>
|
||||
{
|
||||
const fieldName = object.associatedScript.fieldName;
|
||||
|
||||
// @ts-ignore
|
||||
testInputValues[fieldName] = {};
|
||||
|
||||
// @ts-ignore
|
||||
testOutputValues[fieldName] = {};
|
||||
});
|
||||
setTestInputValues(testInputValues);
|
||||
setTestOutputValues(testOutputValues);
|
||||
|
||||
const recordJSONObject = {} as any;
|
||||
for (let key of record.values.keys())
|
||||
{
|
||||
@ -197,32 +150,6 @@ function EntityDeveloperView({table}: Props): JSX.Element
|
||||
})();
|
||||
}
|
||||
|
||||
const revToColor = (fieldName: string, rev: number): string =>
|
||||
{
|
||||
let hash = 0;
|
||||
let idFactor = 1;
|
||||
try
|
||||
{
|
||||
idFactor = Number(id);
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
}
|
||||
const string = `${fieldName} ${90210 * idFactor * rev}`;
|
||||
for (let i = 0; i < string.length; i += 1)
|
||||
{
|
||||
hash = string.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
|
||||
let color = "#";
|
||||
for (let i = 0; i < 3; i += 1)
|
||||
{
|
||||
const value = (hash >> (i * 8)) & 0xff;
|
||||
color += `00${value.toString(16)}`.slice(-2);
|
||||
}
|
||||
return color;
|
||||
};
|
||||
|
||||
const editScript = (fieldName: string, code: string, object: any) =>
|
||||
{
|
||||
const editingScript = {} as any;
|
||||
@ -233,34 +160,6 @@ function EntityDeveloperView({table}: Props): JSX.Element
|
||||
setEditingScript(editingScript);
|
||||
};
|
||||
|
||||
const testScript = (object: any, fieldName: string) =>
|
||||
{
|
||||
const viewingRevisionArray = object.scriptRevisions?.filter((rev: any) => rev?.values?.id === viewingRevisions[fieldName]);
|
||||
const code = viewingRevisionArray?.length > 0 ? viewingRevisionArray[0].values.contents : "";
|
||||
|
||||
const inputValues = new Map<string, any>();
|
||||
if (object.testInputFields)
|
||||
{
|
||||
object.testInputFields.forEach((field: QFieldMetaData) =>
|
||||
{
|
||||
console.log(`${field.name} = ${testInputValues[fieldName][field.name]}`)
|
||||
inputValues.set(field.name, testInputValues[fieldName][field.name]);
|
||||
});
|
||||
}
|
||||
|
||||
const newTestOutputValues = JSON.parse(JSON.stringify(testOutputValues));
|
||||
newTestOutputValues[fieldName] = {};
|
||||
setTestOutputValues(newTestOutputValues);
|
||||
|
||||
(async () =>
|
||||
{
|
||||
const output = await qController.testScript(tableName, id, fieldName, code, inputValues);
|
||||
const newTestOutputValues = JSON.parse(JSON.stringify(testOutputValues));
|
||||
newTestOutputValues[fieldName] = output.outputValues;
|
||||
setTestOutputValues(newTestOutputValues);
|
||||
})();
|
||||
};
|
||||
|
||||
const closeEditingScript = (event: object, reason: string, alert: string = null) =>
|
||||
{
|
||||
if (reason === "backdropClick")
|
||||
@ -336,7 +235,7 @@ function EntityDeveloperView({table}: Props): JSX.Element
|
||||
<React.Fragment key={revision.values.id}>
|
||||
<ListItem sx={{p: 1}} alignItems="flex-start" selected={viewingRevisions[fieldName] == revision.values.id} onClick={(event) => selectRevision(fieldName, revision.values.id)}>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{bgcolor: revToColor(fieldName, revision.values.sequenceNo)}}>{`${revision.values.sequenceNo}`}</Avatar>
|
||||
<Avatar sx={{bgcolor: DeveloperModeUtils.revToColor(fieldName, id, revision.values.sequenceNo)}}>{`${revision.values.sequenceNo}`}</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primaryTypographyProps={{fontSize: "1rem"}}
|
||||
|
||||
@ -24,9 +24,9 @@ import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capabi
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Card from "@mui/material/Card";
|
||||
import Dialog from "@mui/material/Dialog";
|
||||
@ -95,7 +95,6 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
||||
const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]);
|
||||
const [allTableProcesses, setAllTableProcesses] = useState([] as QProcessMetaData[]);
|
||||
const [actionsMenu, setActionsMenu] = useState(null);
|
||||
const [tableWidgets, setTableWidgets] = useState([] as QWidgetMetaData[]);
|
||||
const [notFoundMessage, setNotFoundMessage] = useState(null);
|
||||
const [searchParams] = useSearchParams();
|
||||
const {setPageHeader} = useContext(QContext);
|
||||
@ -116,7 +115,6 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
||||
setNonT1TableSections([]);
|
||||
setTableProcesses([]);
|
||||
setTableSections(null);
|
||||
setTableWidgets(null);
|
||||
};
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
@ -210,17 +208,6 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
||||
|
||||
setPageHeader(record.recordLabel);
|
||||
|
||||
///////////////////////////
|
||||
// load widget meta data //
|
||||
///////////////////////////
|
||||
const matchingWidgets: QWidgetMetaData[] = [];
|
||||
tableMetaData.widgets && tableMetaData.widgets.forEach((widgetName) =>
|
||||
{
|
||||
const widget = metaData.widgets.get(widgetName);
|
||||
matchingWidgets.push(widget);
|
||||
});
|
||||
setTableWidgets(matchingWidgets);
|
||||
|
||||
/////////////////////////////////////////////////
|
||||
// define the sections, e.g., for the left-bar //
|
||||
/////////////////////////////////////////////////
|
||||
@ -235,28 +222,75 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
||||
for (let i = 0; i < tableSections.length; i++)
|
||||
{
|
||||
const section = tableSections[i];
|
||||
if(section.isHidden)
|
||||
if (section.isHidden)
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
sectionFieldElements.set(
|
||||
section.name,
|
||||
<MDBox key={section.name} display="flex" flexDirection="column" py={1} pr={2}>
|
||||
{
|
||||
section.fieldNames.map((fieldName: string) => (
|
||||
<MDBox key={fieldName} flexDirection="row" pr={2}>
|
||||
<MDTypography variant="button" fontWeight="bold" pr={1}>
|
||||
{tableMetaData.fields.get(fieldName).label}:
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{QValueUtils.getDisplayValue(tableMetaData.fields.get(fieldName), record, "view")}
|
||||
</MDTypography>
|
||||
if (section.widgetName)
|
||||
{
|
||||
const widgetMetaData = metaData.widgets.get(section.widgetName);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
// for a section with a widget name, call the dashboard widgets component //
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
sectionFieldElements.set(section.name,
|
||||
<Grid id={section.name} key={section.name} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", flexGrow: 1, scrollMarginTop: "100px"}}>
|
||||
<Box width="100%" flexGrow={1} alignItems="stretch">
|
||||
<DashboardWidgets key={section.name} widgetMetaDataList={[widgetMetaData]} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} omitWrappingGridContainer={true} />
|
||||
</Box>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
else if (section.fieldNames)
|
||||
{
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// for a section with field names, render the field values. //
|
||||
// for the T1 section, the "wrapper" will come out below - but for other sections, produce a wrapper too. //
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const fields = (
|
||||
<MDBox key={section.name} display="flex" flexDirection="column" py={1} pr={2}>
|
||||
{
|
||||
section.fieldNames.map((fieldName: string) => (
|
||||
<MDBox key={fieldName} flexDirection="row" pr={2}>
|
||||
<MDTypography variant="button" fontWeight="bold" pr={1}>
|
||||
{tableMetaData.fields.get(fieldName).label}:
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{QValueUtils.getDisplayValue(tableMetaData.fields.get(fieldName), record, "view")}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
))
|
||||
}
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
if (section.tier === "T1")
|
||||
{
|
||||
sectionFieldElements.set(section.name, fields);
|
||||
}
|
||||
else
|
||||
{
|
||||
sectionFieldElements.set(section.name,
|
||||
<Grid id={section.name} key={section.name} item lg={12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
|
||||
<MDBox mb={3} width="100%">
|
||||
<Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}}>
|
||||
<MDTypography variant="h5" p={3} pb={1}>
|
||||
{section.label}
|
||||
</MDTypography>
|
||||
<MDBox p={3} pt={0} flexDirection="column">
|
||||
{fields}
|
||||
</MDBox>
|
||||
</Card>
|
||||
</MDBox>
|
||||
))
|
||||
}
|
||||
</MDBox>,
|
||||
);
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
if (section.tier === "T1")
|
||||
{
|
||||
@ -401,7 +435,7 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} lg={3}>
|
||||
<QRecordSidebar tableSections={tableSections} widgetMetaDataList={tableWidgets} />
|
||||
<QRecordSidebar tableSections={tableSections} />
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={9}>
|
||||
|
||||
@ -428,21 +462,15 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{tableMetaData && tableMetaData.widgets && record && (
|
||||
<DashboardWidgets widgetMetaDataList={tableWidgets} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} />
|
||||
)}
|
||||
{nonT1TableSections.length > 0 ? nonT1TableSections.map(({
|
||||
iconName, label, name, fieldNames, tier,
|
||||
}: any) => (
|
||||
<MDBox mb={3} key={name}>
|
||||
<Card key={name} id={name} sx={{overflow: "visible", scrollMarginTop: "100px"}}>
|
||||
<MDTypography variant="h5" p={3} pb={1}>
|
||||
{label}
|
||||
</MDTypography>
|
||||
<MDBox p={3} pt={0} flexDirection="column">{sectionFieldElements.get(name)}</MDBox>
|
||||
</Card>
|
||||
</MDBox>
|
||||
)) : null}
|
||||
<Grid container spacing={3} pb={4}>
|
||||
{nonT1TableSections.length > 0 ? nonT1TableSections.map(({
|
||||
iconName, label, name, fieldNames, tier,
|
||||
}: any) => (
|
||||
<>
|
||||
{sectionFieldElements.get(name)}
|
||||
</>
|
||||
)) : null}
|
||||
</Grid>
|
||||
<MDBox component="form" p={3}>
|
||||
<Grid container justifyContent="flex-end" spacing={3}>
|
||||
{
|
||||
|
||||
@ -1,82 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. 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 {Typography} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import React from "react";
|
||||
import AceEditor from "react-ace";
|
||||
|
||||
interface Props
|
||||
{
|
||||
helpText: string;
|
||||
exampleCode: string;
|
||||
aceEditorHeight: string
|
||||
}
|
||||
|
||||
ScriptDocsForm.defaultProps = {
|
||||
aceEditorHeight: "100%",
|
||||
};
|
||||
|
||||
function ScriptDocsForm({helpText, exampleCode, aceEditorHeight}: Props): JSX.Element
|
||||
{
|
||||
|
||||
const oneBlock = (name: string, mode: string, heading: string, code: string): JSX.Element =>
|
||||
{
|
||||
return (
|
||||
<Grid item xs={6} height="100%">
|
||||
<Box gap={2} pb={1} pr={2} height="100%">
|
||||
<Card sx={{width: "100%", height: "100%"}}>
|
||||
<Typography variant="h6" p={2} pb={1}>{heading}</Typography>
|
||||
<Box className="devDocumentation" height="100%">
|
||||
<Typography variant="body2" sx={{maxWidth: "1200px", margin: "auto", height: "100%"}}>
|
||||
<AceEditor
|
||||
mode={mode}
|
||||
theme="github"
|
||||
name={name}
|
||||
editorProps={{$blockScrolling: true}}
|
||||
value={code}
|
||||
readOnly
|
||||
highlightActiveLine={false}
|
||||
width="100%"
|
||||
showPrintMargin={false}
|
||||
height="100%"
|
||||
/>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid container spacing={2} height="100%">
|
||||
{oneBlock("helpText", "text", "Documentation", helpText)}
|
||||
{oneBlock("exampleCode", "javascript", "ExampleCode", exampleCode)}
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
export default ScriptDocsForm;
|
||||
|
||||
@ -1,96 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. 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 {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import Box from "@mui/material/Box";
|
||||
import Table from "@mui/material/Table";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableContainer from "@mui/material/TableContainer";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import React from "react";
|
||||
import DataTableBodyCell from "qqq/components/Temporary/DataTable/DataTableBodyCell";
|
||||
import DataTableHeadCell from "qqq/components/Temporary/DataTable/DataTableHeadCell";
|
||||
import QValueUtils from "qqq/utils/QValueUtils";
|
||||
|
||||
interface Props
|
||||
{
|
||||
logs: any;
|
||||
}
|
||||
|
||||
ScriptLogsView.defaultProps = {
|
||||
logs: null,
|
||||
};
|
||||
|
||||
function ScriptLogsView({logs}: Props): JSX.Element
|
||||
{
|
||||
return (
|
||||
<TableContainer sx={{boxShadow: "none"}}>
|
||||
<Table>
|
||||
<Box component="thead">
|
||||
<TableRow key="header">
|
||||
<DataTableHeadCell sorted={false}>Timestamp</DataTableHeadCell>
|
||||
<DataTableHeadCell sorted={false} align="right">Run Time (ms)</DataTableHeadCell>
|
||||
<DataTableHeadCell sorted={false}>Had Error?</DataTableHeadCell>
|
||||
<DataTableHeadCell sorted={false}>Input</DataTableHeadCell>
|
||||
<DataTableHeadCell sorted={false}>Output</DataTableHeadCell>
|
||||
<DataTableHeadCell sorted={false}>Logs</DataTableHeadCell>
|
||||
</TableRow>
|
||||
</Box>
|
||||
<TableBody>
|
||||
{
|
||||
logs.map((logRecord: any) =>
|
||||
{
|
||||
let logs = "";
|
||||
if (logRecord.values.scriptLogLine)
|
||||
{
|
||||
for (let i = 0; i < logRecord.values.scriptLogLine.length; i++)
|
||||
{
|
||||
console.log(" += " + i);
|
||||
logs += (logRecord.values.scriptLogLine[i].values.text + "\n");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<TableRow key={logRecord.values.id}>
|
||||
<DataTableBodyCell>{QValueUtils.formatDateTime(logRecord.values.startTimestamp)}</DataTableBodyCell>
|
||||
<DataTableBodyCell align="right">{logRecord.values.runTimeMillis?.toLocaleString()}</DataTableBodyCell>
|
||||
<DataTableBodyCell>
|
||||
<div style={{color: logRecord.values.hadError ? "red" : "auto"}}>{QValueUtils.formatBoolean(logRecord.values.hadError)}</div>
|
||||
</DataTableBodyCell>
|
||||
<DataTableBodyCell>{logRecord.values.input}</DataTableBodyCell>
|
||||
<DataTableBodyCell>
|
||||
{logRecord.values.output}
|
||||
{logRecord.values.error}
|
||||
</DataTableBodyCell>
|
||||
<DataTableBodyCell>{logs}</DataTableBodyCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default ScriptLogsView;
|
||||
|
||||
|
||||
@ -1,189 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {Typography} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import QValueUtils from "qqq/utils/QValueUtils";
|
||||
|
||||
interface AssociatedScriptDefinition
|
||||
{
|
||||
testInputFields: QFieldMetaData[];
|
||||
testOutputFields: QFieldMetaData[];
|
||||
}
|
||||
|
||||
interface Props
|
||||
{
|
||||
scriptDefinition: AssociatedScriptDefinition;
|
||||
tableName: string;
|
||||
fieldName: string;
|
||||
recordId: any;
|
||||
code: string;
|
||||
}
|
||||
|
||||
ScriptTestForm.defaultProps = {
|
||||
// foo: null,
|
||||
};
|
||||
|
||||
const qController = QClient.getInstance();
|
||||
|
||||
function ScriptTestForm({scriptDefinition, tableName, fieldName, recordId, code}: Props): JSX.Element
|
||||
{
|
||||
const [testInputValues, setTestInputValues] = useState({} as any);
|
||||
const [testOutputValues, setTestOutputValues] = useState({} as any);
|
||||
const [testException, setTestException] = useState(null as string)
|
||||
const [firstRender, setFirstRender] = useState(true);
|
||||
|
||||
if(firstRender)
|
||||
{
|
||||
setFirstRender(false)
|
||||
}
|
||||
|
||||
if(firstRender)
|
||||
{
|
||||
scriptDefinition.testInputFields.forEach((field: QFieldMetaData) =>
|
||||
{
|
||||
testInputValues[field.name] = "";
|
||||
});
|
||||
}
|
||||
|
||||
const testScript = () =>
|
||||
{
|
||||
const inputValues = new Map<string, any>();
|
||||
if (scriptDefinition.testInputFields)
|
||||
{
|
||||
scriptDefinition.testInputFields.forEach((field: QFieldMetaData) =>
|
||||
{
|
||||
inputValues.set(field.name, testInputValues[field.name]);
|
||||
});
|
||||
}
|
||||
|
||||
setTestOutputValues({});
|
||||
setTestException(null);
|
||||
|
||||
(async () =>
|
||||
{
|
||||
const output = await qController.testScript(tableName, recordId, fieldName, code, inputValues);
|
||||
console.log("got output:")
|
||||
console.log(output);
|
||||
console.log(Object.keys(output));
|
||||
setTestOutputValues(output.outputObject);
|
||||
if(output.exception)
|
||||
{
|
||||
setTestException(output.exception.message)
|
||||
console.log(`set test exception to ${output.exception.message}`);
|
||||
}
|
||||
})();
|
||||
};
|
||||
|
||||
// console.log("Rendering vvv");
|
||||
// console.log(`${testOutputValues}`);
|
||||
// console.log("Rendering ^^^");
|
||||
|
||||
const handleInputChange = (fieldName: string, newValue: string) =>
|
||||
{
|
||||
testInputValues[fieldName] = newValue;
|
||||
console.log(`Setting ${fieldName} = ${newValue}`);
|
||||
setTestInputValues(JSON.parse(JSON.stringify(testInputValues)));
|
||||
}
|
||||
|
||||
// console.log(testInputValues);
|
||||
|
||||
return (
|
||||
<Grid container spacing={2} height="100%">
|
||||
<Grid item xs={6} height="100%">
|
||||
<Box gap={2} pb={1} pr={2} height="100%">
|
||||
<Card sx={{width: "100%", height: "100%", overflow: "auto"}}>
|
||||
<Box width="100%">
|
||||
<Typography variant="h6" p={2} pb={1}>Test Input</Typography>
|
||||
<Box px={2} pb={2}>
|
||||
{
|
||||
scriptDefinition.testInputFields && testInputValues && scriptDefinition.testInputFields.map((field: QFieldMetaData) =>
|
||||
{
|
||||
return (<TextField
|
||||
key={field.name}
|
||||
id={field.name}
|
||||
label={field.label}
|
||||
value={testInputValues[field.name]}
|
||||
variant="standard"
|
||||
onChange={(event) =>
|
||||
{
|
||||
handleInputChange(field.name, event.target.value);
|
||||
}}
|
||||
fullWidth
|
||||
sx={{mb: 2}}
|
||||
/>);
|
||||
})
|
||||
}
|
||||
</Box>
|
||||
<div style={{float: "right"}}>
|
||||
<Button onClick={() => testScript()}>Submit</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} height="100%">
|
||||
<Box gap={2} pb={1} height="100%">
|
||||
<Card sx={{width: "100%", height: "100%", overflow: "auto"}}>
|
||||
<Typography variant="h6" p={2} pl={3} pb={1}>Test Output</Typography>
|
||||
<Box p={3} pt={0}>
|
||||
{
|
||||
testException &&
|
||||
<Typography variant="body2" color="red">
|
||||
{testException}
|
||||
</Typography>
|
||||
}
|
||||
{
|
||||
scriptDefinition.testOutputFields && testOutputValues && scriptDefinition.testOutputFields.map((f: any) =>
|
||||
{
|
||||
const field = new QFieldMetaData(f);
|
||||
console.log(field.name);
|
||||
console.log(testOutputValues[field.name]);
|
||||
return (
|
||||
<MDBox key={field.name} flexDirection="row" pr={2}>
|
||||
<Typography variant="button" fontWeight="bold" pr={1}>
|
||||
{field.label}:
|
||||
</Typography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{QValueUtils.getValueForDisplay(field, testOutputValues[field.name], testOutputValues[field.name], "view")}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
);
|
||||
})
|
||||
}
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
export default ScriptTestForm;
|
||||
Reference in New Issue
Block a user