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

Add record grid widget; move table widgets down into sections

Browse Source
This commit is contained in:
darin.kelkhoff
2022-11-14 15:19:54 -06:00
parent b3a131a64f
commit de630e2bd6
14 changed files with 680 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
src/qqq/components/DashboardWidgets.tsx
View File

@ -33,6 +33,7 @@ import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
import LineChart from "qqq/pages/dashboards/Widgets/LineChart";
import MultiStatisticsCard from "qqq/pages/dashboards/Widgets/MultiStatisticsCard";
import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
import RecordGridWidget from "qqq/pages/dashboards/Widgets/RecordGridWidget";
import StepperCard from "qqq/pages/dashboards/Widgets/StepperCard";
import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
import QClient from "qqq/utils/QClient";
@ -43,14 +44,16 @@ interface Props
{
widgetMetaDataList: QWidgetMetaData[];
entityPrimaryKey?: string;
omitWrappingGridContainer: boolean;
}
DashboardWidgets.defaultProps = {
widgetMetaDataList: null,
entityPrimaryKey: null
entityPrimaryKey: null,
omitWrappingGridContainer: false
};
function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.Element
function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGridContainer}: Props): JSX.Element
{
const location = useLocation();
const [qInstance, setQInstance] = useState(null as QInstance);
@ -105,125 +108,158 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.El
// console.log(JSON.stringify(widgetMetaDataList));
// console.log(widgetCount);
return (
widgetCount > 0 ? (
<Grid container spacing={3} pb={4}>
const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
{
return (
<>
{
widgetMetaData.type === "table" && (
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%"}}>
<TableCard
color="info"
title={widgetMetaData.label}
linkText={widgetData[i]?.linkText}
linkURL={widgetData[i]?.linkURL}
noRowsFoundHTML={widgetData[i]?.noRowsFoundHTML}
data={widgetData[i]}
dropdownOptions={widgetData[i]?.dropdownOptions}
dropdownOnChange={handleDropdownOnChange}
widgetIndex={i}
/>
</MDBox>
)
}
{
widgetMetaData.type === "stepper" && (
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<MDBox padding="1rem">
{
widgetMetaData.label && (
<MDTypography variant="h5" textTransform="capitalize">
{widgetMetaData.label}
</MDTypography>
)
}
<StepperCard data={widgetData[i]} />
</MDBox>
</Card>
</MDBox>
)
}
{
widgetMetaData.type === "html" && (
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<MDBox padding="1rem">
<MDTypography variant="h5" textTransform="capitalize">
{widgetMetaData.label}
</MDTypography>
<MDTypography component="div" variant="button" color="text" fontWeight="light">
{
widgetData && widgetData[i] && widgetData[i].html ? (
parse(widgetData[i].html)
) : <Skeleton />
}
</MDTypography>
</MDBox>
</Card>
</MDBox>
)
}
{
widgetMetaData.type === "multiStatistics" && (
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<MultiStatisticsCard
color="info"
title={widgetMetaData.label}
data={widgetData[i]}
/>
</MDBox>
)
}
{
widgetMetaData.type === "quickSightChart" && (
<MDBox sx={{display: "flex"}}>
<QuickSightChart url={widgetData[i]?.url} label={widgetMetaData.label} />
</MDBox>
)
}
{
widgetMetaData.type === "barChart" && (
<MDBox mb={3} sx={{display: "flex"}}>
<BarChart
color="info"
title={widgetMetaData.label}
date={`As of ${new Date().toDateString()}`}
data={widgetData[i]?.chartData}
/>
</MDBox>
)
}
{
widgetMetaData.type === "lineChart" && (
widgetData && widgetData[i] ? (
<MDBox mb={3}>
<LineChart
title={widgetData[i].title}
description={(
<MDBox display="flex" justifyContent="space-between">
<MDBox display="flex" ml={-1}>
{
widgetData[i].lineChartData.datasets.map((dataSet: any) => (
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
))
}
</MDBox>
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
</MDBox>
)}
chart={widgetData[i].lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
/>
</MDBox>
) : null
)
}
{
widgetMetaData.type === "childRecordList" && (
widgetData && widgetData[i] &&
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%"}}>
<RecordGridWidget
title={widgetMetaData.label}
data={widgetData[i]}
/>
</MDBox>
)
}
</>
);
}
const body: JSX.Element =
(
<>
{
widgetMetaDataList.map((widgetMetaData, i) => (
<Grid id={widgetMetaData.name} key={`${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
{
widgetMetaData.type === "table" && (
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<TableCard
color="info"
title={widgetMetaData.label}
linkText={widgetData[i]?.linkText}
linkURL={widgetData[i]?.linkURL}
noRowsFoundHTML={widgetData[i]?.noRowsFoundHTML}
data={widgetData[i]}
dropdownOptions={widgetData[i]?.dropdownOptions}
dropdownOnChange={handleDropdownOnChange}
widgetIndex={i}
/>
</MDBox>
)
}
{
widgetMetaData.type === "stepper" && (
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<MDBox padding="1rem">
{
widgetMetaData.label && (
<MDTypography variant="h5" textTransform="capitalize">
{widgetMetaData.label}
</MDTypography>
)
}
<StepperCard data={widgetData[i]} />
</MDBox>
</Card>
</MDBox>
)
}
{
widgetMetaData.type === "html" && (
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<MDBox padding="1rem">
<MDTypography variant="h5" textTransform="capitalize">
{widgetMetaData.label}
</MDTypography>
<MDTypography component="div" variant="button" color="text" fontWeight="light">
{
widgetData && widgetData[i] && widgetData[i].html ? (
parse(widgetData[i].html)
) : <Skeleton />
}
</MDTypography>
</MDBox>
</Card>
</MDBox>
)
}
{
widgetMetaData.type === "multiStatistics" && (
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<MultiStatisticsCard
color="info"
title={widgetMetaData.label}
data={widgetData[i]}
/>
</MDBox>
)
}
{
widgetMetaData.type === "quickSightChart" && (
<MDBox sx={{display: "flex"}}>
<QuickSightChart url={widgetData[i]?.url} label={widgetMetaData.label} />
</MDBox>
)
}
{
widgetMetaData.type === "barChart" && (
<MDBox mb={3} sx={{display: "flex"}}>
<BarChart
color="info"
title={widgetMetaData.label}
date={`As of ${new Date().toDateString()}`}
data={widgetData[i]?.chartData}
/>
</MDBox>
)
}
{
widgetMetaData.type === "lineChart" && (
widgetData && widgetData[i] ? (
<MDBox mb={3}>
<LineChart
title={widgetData[i].title}
description={(
<MDBox display="flex" justifyContent="space-between">
<MDBox display="flex" ml={-1}>
{
widgetData[i].lineChartData.datasets.map((dataSet: any) => (
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
))
}
</MDBox>
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
</MDBox>
)}
chart={widgetData[i].lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
/>
</MDBox>
) : null
)
}
</Grid>
omitWrappingGridContainer
? renderWidget(widgetMetaData, i)
:
<Grid id={widgetMetaData.name} key={`${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
{renderWidget(widgetMetaData, i)}
</Grid>
))
}
</Grid>
</>
);
return (
widgetCount > 0 ? (
omitWrappingGridContainer ? body :
(
<Grid container spacing={3} pb={4}>
{body}
</Grid>
)
) : null
);
}

5
src/qqq/components/EntityForm/index.tsx
View File

@ -186,6 +186,11 @@ function EntityForm({table, id}: Props): JSX.Element
continue;
}
if(!section.fieldNames)
{
continue;
}
for (let j = 0; j < section.fieldNames.length; j++)
{
const fieldName = section.fieldNames[j];

175
src/qqq/components/ScriptComponents/AssociatedScriptEditor.tsx Normal file
View File

@ -0,0 +1,175 @@
/*
* 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/components/ScriptComponents/ScriptDocsForm";
import ScriptTestForm from "qqq/components/ScriptComponents/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;

82
src/qqq/components/ScriptComponents/ScriptDocsForm.tsx Normal file
View File

@ -0,0 +1,82 @@
/*
* 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;

96
src/qqq/components/ScriptComponents/ScriptLogsView.tsx Normal file
View File

@ -0,0 +1,96 @@
/*
* 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;

189
src/qqq/components/ScriptComponents/ScriptTestForm.tsx Normal file
View File

@ -0,0 +1,189 @@
/*
* 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;

54
src/qqq/components/TabPanel/TabPanel.tsx Normal file
View File

@ -0,0 +1,54 @@
/*
* 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 React from "react";
interface TabPanelProps
{
children?: React.ReactNode;
index: number;
value: number;
}
export default 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>
);
}