mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 05:10:45 +00:00
Add initial version of record developer mode, associated scripts
This commit is contained in:
@ -13,7 +13,7 @@
|
||||
"@fullcalendar/interaction": "5.10.0",
|
||||
"@fullcalendar/react": "5.10.0",
|
||||
"@fullcalendar/timegrid": "5.10.0",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.27",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.28",
|
||||
"@mui/icons-material": "5.4.1",
|
||||
"@mui/material": "5.4.1",
|
||||
"@mui/styled-engine": "5.4.1",
|
||||
@ -34,6 +34,7 @@
|
||||
"@types/react": "17.0.38",
|
||||
"@types/react-dom": "17.0.11",
|
||||
"@types/react-router-hash-link": "2.4.5",
|
||||
"ace-builds": "1.12.3",
|
||||
"chart.js": "3.4.1",
|
||||
"chroma-js": "2.4.2",
|
||||
"datejs": "1.0.0-rc3",
|
||||
@ -45,6 +46,7 @@
|
||||
"html-react-parser": "1.4.8",
|
||||
"http-proxy-middleware": "2.0.6",
|
||||
"react": "17.0.2",
|
||||
"react-ace": "10.1.0",
|
||||
"react-chartjs-2": "3.0.4",
|
||||
"react-cookie": "4.1.1",
|
||||
"react-dom": "17.0.2",
|
||||
|
||||
10
src/App.tsx
10
src/App.tsx
@ -48,7 +48,8 @@ import Overview from "qqq/pages/dashboards/Overview";
|
||||
import EntityCreate from "qqq/pages/entity-create";
|
||||
import EntityEdit from "qqq/pages/entity-edit";
|
||||
import EntityList from "qqq/pages/entity-list";
|
||||
import EntityView from "qqq/pages/entity-view";
|
||||
import EntityDeveloperView from "qqq/pages/entity-view/EntityDeveloperView";
|
||||
import EntityView from "qqq/pages/entity-view/EntityView";
|
||||
import ProcessRun from "qqq/pages/process-run";
|
||||
import ReportRun from "qqq/pages/process-run/ReportRun";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
@ -262,6 +263,13 @@ export default function App()
|
||||
component: <EntityEdit table={table} />,
|
||||
});
|
||||
|
||||
routeList.push({
|
||||
name: `${app.label}`,
|
||||
key: `${app.name}.dev`,
|
||||
route: `${path}/:id/dev`,
|
||||
component: <EntityDeveloperView table={table} />,
|
||||
});
|
||||
|
||||
const processesForTable = QProcessUtils.getProcessesForTable(metaData, table.name, true);
|
||||
processesForTable.forEach((process) =>
|
||||
{
|
||||
|
||||
37
src/qqq/components/CustomWidthTooltip/CustomWidthTooltip.tsx
Normal file
37
src/qqq/components/CustomWidthTooltip/CustomWidthTooltip.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
/*
|
||||
* 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 {tooltipClasses, TooltipProps} from "@mui/material";
|
||||
import {styled} from "@mui/material/styles";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import React from "react";
|
||||
|
||||
const CustomWidthTooltip = styled(({className, ...props}: TooltipProps) => (
|
||||
<Tooltip {...props} classes={{popper: className}} />
|
||||
))({
|
||||
[`& .${tooltipClasses.tooltip}`]: {
|
||||
maxWidth: 500,
|
||||
textAlign: "left",
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
export default CustomWidthTooltip
|
||||
117
src/qqq/pages/entity-view/AssociatedScriptEditor.tsx
Normal file
117
src/qqq/pages/entity-view/AssociatedScriptEditor.tsx
Normal file
@ -0,0 +1,117 @@
|
||||
/*
|
||||
* 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 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 QClient from "qqq/utils/QClient";
|
||||
|
||||
interface Props
|
||||
{
|
||||
tableName: string;
|
||||
primaryKey: any;
|
||||
fieldName: string;
|
||||
titlePrefix: string;
|
||||
recordLabel: string;
|
||||
scriptName: string;
|
||||
code: string;
|
||||
closeCallback: any;
|
||||
}
|
||||
|
||||
|
||||
const qController = QClient.getInstance();
|
||||
|
||||
function AssociatedScriptEditor({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 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={12}>
|
||||
<Card sx={{height: "100%", p: 3}}>
|
||||
<Typography variant="h5" pb={1}>
|
||||
{`${titlePrefix}: ${recordLabel} - ${scriptName}`}
|
||||
</Typography>
|
||||
|
||||
<AceEditor
|
||||
mode="javascript"
|
||||
theme="github"
|
||||
name="editor"
|
||||
editorProps={{$blockScrolling: true}}
|
||||
onChange={updateCode}
|
||||
width="100%"
|
||||
height="100%"
|
||||
value={updatedCode}
|
||||
style={{border: "1px solid gray"}}
|
||||
/>
|
||||
|
||||
<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;
|
||||
654
src/qqq/pages/entity-view/EntityDeveloperView.tsx
Normal file
654
src/qqq/pages/entity-view/EntityDeveloperView.tsx
Normal file
@ -0,0 +1,654 @@
|
||||
/*
|
||||
* 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 {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
|
||||
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";
|
||||
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 Divider from "@mui/material/Divider";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import List from "@mui/material/List";
|
||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import Snackbar from "@mui/material/Snackbar";
|
||||
import Tab from "@mui/material/Tab";
|
||||
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 Tabs from "@mui/material/Tabs";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import React, {useContext, useReducer, useState} from "react";
|
||||
import AceEditor from "react-ace";
|
||||
import {useParams} from "react-router-dom";
|
||||
import QContext from "QContext";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import CustomWidthTooltip from "qqq/components/CustomWidthTooltip/CustomWidthTooltip";
|
||||
import DataTableBodyCell from "qqq/components/Temporary/DataTable/DataTableBodyCell";
|
||||
import DataTableHeadCell from "qqq/components/Temporary/DataTable/DataTableHeadCell";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import AssociatedScriptEditor from "qqq/pages/entity-view/AssociatedScriptEditor";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import QValueUtils from "qqq/utils/QValueUtils";
|
||||
|
||||
import "ace-builds/src-noconflict/mode-java";
|
||||
import "ace-builds/src-noconflict/mode-javascript";
|
||||
import "ace-builds/src-noconflict/mode-json";
|
||||
import "ace-builds/src-noconflict/theme-github";
|
||||
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
|
||||
{
|
||||
table?: QTableMetaData;
|
||||
}
|
||||
|
||||
EntityDeveloperView.defaultProps =
|
||||
{
|
||||
table: null,
|
||||
};
|
||||
|
||||
function EntityDeveloperView({table}: Props): JSX.Element
|
||||
{
|
||||
const {id} = useParams();
|
||||
|
||||
const tableName = table.name;
|
||||
const [asyncLoadInited, setAsyncLoadInited] = useState(false);
|
||||
const [tableMetaData, setTableMetaData] = useState(null);
|
||||
|
||||
const [record, setRecord] = useState(null as QRecord);
|
||||
const [recordJSON, setRecordJSON] = useState("");
|
||||
const [associatedScripts, setAssociatedScripts] = useState([] as any[]);
|
||||
const [notFoundMessage, setNotFoundMessage] = useState(null);
|
||||
|
||||
const [selectedTabs, setSelectedTabs] = useState({} as any);
|
||||
const [viewingRevisions, setViewingRevisions] = useState({} as any);
|
||||
const [scriptLogs, setScriptLogs] = useState({} as any);
|
||||
|
||||
const [editingScript, setEditingScript] = useState(null as any);
|
||||
const [alertText, setAlertText] = useState(null as string);
|
||||
|
||||
const {setPageHeader} = useContext(QContext);
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
if (!asyncLoadInited)
|
||||
{
|
||||
setAsyncLoadInited(true);
|
||||
|
||||
(async () =>
|
||||
{
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// load the full table meta-data (the one we took in is a partial) //
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
const tableMetaData = await qController.loadTableMetaData(tableName);
|
||||
setTableMetaData(tableMetaData);
|
||||
|
||||
//////////////////////////////
|
||||
// load top-level meta-data //
|
||||
//////////////////////////////
|
||||
const metaData = await qController.loadMetaData();
|
||||
QValueUtils.qInstance = metaData;
|
||||
|
||||
/////////////////////
|
||||
// load the record //
|
||||
/////////////////////
|
||||
let record: QRecord;
|
||||
try
|
||||
{
|
||||
const developerModeData = await qController.getRecordDeveloperMode(tableName, id);
|
||||
record = new QRecord(developerModeData.record);
|
||||
console.log("Loaded record developer mode.");
|
||||
setRecord(record);
|
||||
|
||||
setAssociatedScripts(developerModeData.associatedScripts);
|
||||
|
||||
const recordJSONObject = {} as any;
|
||||
for (let key of record.values.keys())
|
||||
{
|
||||
recordJSONObject[key] = record.values.get(key);
|
||||
}
|
||||
setRecordJSON(JSON.stringify(recordJSONObject, null, 3));
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
if (e instanceof QException)
|
||||
{
|
||||
if ((e as QException).status === "404")
|
||||
{
|
||||
setNotFoundMessage(`${tableMetaData.label} ${id} could not be found.`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setPageHeader(record.recordLabel + " Developer Mode");
|
||||
|
||||
forceUpdate();
|
||||
})();
|
||||
}
|
||||
|
||||
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) =>
|
||||
{
|
||||
const editingScript = {} as any;
|
||||
editingScript.fieldName = fieldName;
|
||||
editingScript.titlePrefix = code ? "Editing Script" : "Creating New Script";
|
||||
editingScript.code = code;
|
||||
setEditingScript(editingScript);
|
||||
};
|
||||
|
||||
const closeEditingScript = (event: object, reason: string, alert: string = null) =>
|
||||
{
|
||||
if (reason === "backdropClick")
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
if (reason === "saved")
|
||||
{
|
||||
setAsyncLoadInited(false);
|
||||
setAssociatedScripts([]);
|
||||
viewingRevisions[editingScript.fieldName] = null;
|
||||
setViewingRevisions(viewingRevisions);
|
||||
forceUpdate();
|
||||
}
|
||||
|
||||
if (alert)
|
||||
{
|
||||
setAlertText(alert);
|
||||
}
|
||||
|
||||
setEditingScript(null);
|
||||
};
|
||||
|
||||
const changeTab = (newValue: number, fieldName: string) =>
|
||||
{
|
||||
selectedTabs[fieldName] = newValue;
|
||||
setSelectedTabs(selectedTabs);
|
||||
forceUpdate();
|
||||
};
|
||||
|
||||
const selectRevision = (fieldName: string, revisionId: number) =>
|
||||
{
|
||||
viewingRevisions[fieldName] = revisionId;
|
||||
setViewingRevisions(viewingRevisions);
|
||||
|
||||
scriptLogs[revisionId] = null;
|
||||
setScriptLogs(scriptLogs);
|
||||
|
||||
loadRevisionLogs(fieldName, revisionId)
|
||||
|
||||
forceUpdate();
|
||||
};
|
||||
|
||||
const loadRevisionLogs = (fieldName: string, revisionId: number) =>
|
||||
{
|
||||
(async () =>
|
||||
{
|
||||
const rs = await qController.getRecordAssociatedScriptLogs(tableName, id, fieldName, revisionId);
|
||||
scriptLogs[revisionId] = [];
|
||||
if (rs["scriptLogRecords"])
|
||||
{
|
||||
scriptLogs[revisionId] = rs["scriptLogRecords"];
|
||||
}
|
||||
console.log("Script logs:");
|
||||
console.log(scriptLogs[revisionId]);
|
||||
setScriptLogs(scriptLogs);
|
||||
forceUpdate();
|
||||
})();
|
||||
}
|
||||
|
||||
function getRevisionsList(scriptRevisions: any, fieldName: any, currentScriptRevisionId: any)
|
||||
{
|
||||
return <List sx={{pl: 3, height: "400px", overflow: "auto"}}>
|
||||
{
|
||||
scriptRevisions ? <></> :
|
||||
<Typography variant="body2">
|
||||
There are not any versions of this script.
|
||||
</Typography>
|
||||
}
|
||||
{
|
||||
scriptRevisions?.map((revision: any) => (
|
||||
<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>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primaryTypographyProps={{fontSize: "1rem"}}
|
||||
secondaryTypographyProps={{fontSize: ".85rem"}}
|
||||
primary={
|
||||
<div style={{whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"}} title={revision.values.commitMessage}>
|
||||
{revision.values.id == currentScriptRevisionId && <Chip label="CURRENT" color="success" variant="outlined" size="small" sx={{mr: 1, fontSize: "0.75rem"}} />}
|
||||
{revision.values.commitMessage}
|
||||
</div>
|
||||
}
|
||||
secondary={
|
||||
<>
|
||||
{QValueUtils.formatDateTime(revision.values.createDate)}
|
||||
<br />
|
||||
{revision.values.author}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<ListItemIcon sx={{minWidth: "auto", px: 1}}><Icon>settings</Icon></ListItemIcon>
|
||||
</ListItem>
|
||||
<Divider sx={{my: 0.5}} variant="inset" component="li" />
|
||||
</React.Fragment>
|
||||
))
|
||||
}
|
||||
</List>;
|
||||
}
|
||||
|
||||
function getScriptLogs(revisionId: number)
|
||||
{
|
||||
const logs = scriptLogs[revisionId] as any[];
|
||||
if (logs === null || logs === undefined)
|
||||
{
|
||||
return <Typography variant="body2" p={3}>Loading...</Typography>;
|
||||
}
|
||||
|
||||
if (logs.length === 0)
|
||||
{
|
||||
return <Typography variant="body2" p={3}>No logs available for this version.</Typography>;
|
||||
}
|
||||
|
||||
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) =>
|
||||
{
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseLayout>
|
||||
<MDBox>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<MDBox mb={3}>
|
||||
{
|
||||
notFoundMessage
|
||||
?
|
||||
<MDBox>{notFoundMessage}</MDBox>
|
||||
:
|
||||
<MDBox pb={3}>
|
||||
{
|
||||
alertText ? (
|
||||
<Snackbar open={alertText !== null && alertText !== ""} autoHideDuration={6000} onClose={() => setAlertText(null)} anchorOrigin={{vertical: "top", horizontal: "center"}}>
|
||||
<Alert color="success" onClose={() => setAlertText(null)}>
|
||||
{alertText}
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
) : ("")
|
||||
}
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} mb={3}>
|
||||
<Card id="jsonView" sx={{mb: 3}}>
|
||||
<Typography variant="h5" p={2}>Record Raw Values as JSON</Typography>
|
||||
<AceEditor
|
||||
mode="json"
|
||||
theme="github"
|
||||
name="recordJSON"
|
||||
editorProps={{$blockScrolling: true}}
|
||||
value={recordJSON}
|
||||
readOnly
|
||||
width="100%"
|
||||
showPrintMargin={false}
|
||||
height="200px"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{
|
||||
associatedScripts.map((object) =>
|
||||
{
|
||||
let fieldName = object.associatedScript?.fieldName;
|
||||
let field = tableMetaData.fields.get(fieldName);
|
||||
|
||||
let currentScriptRevisionId = object.script?.values?.currentScriptRevisionId;
|
||||
|
||||
if (!selectedTabs[fieldName])
|
||||
{
|
||||
selectedTabs[fieldName] = 0;
|
||||
}
|
||||
|
||||
if (!viewingRevisions[fieldName] || viewingRevisions[fieldName] === -1)
|
||||
{
|
||||
console.log(`Defaulting revision for ${fieldName} to ${currentScriptRevisionId}`);
|
||||
viewingRevisions[fieldName] = currentScriptRevisionId;
|
||||
|
||||
if(!scriptLogs[currentScriptRevisionId])
|
||||
{
|
||||
loadRevisionLogs(fieldName, currentScriptRevisionId);
|
||||
}
|
||||
}
|
||||
|
||||
const viewingRevisionArray = object.scriptRevisions?.filter((rev: any) => rev?.values?.id === viewingRevisions[fieldName]);
|
||||
const code = viewingRevisionArray?.length > 0 ? viewingRevisionArray[0].values.contents : "";
|
||||
const viewingSequenceNo = viewingRevisionArray?.length > 0 ? viewingRevisionArray[0].values.sequenceNo : "";
|
||||
|
||||
let editButtonTooltip = "";
|
||||
let editButtonText = "Create New Script";
|
||||
if (currentScriptRevisionId)
|
||||
{
|
||||
if (currentScriptRevisionId === viewingRevisions[fieldName])
|
||||
{
|
||||
editButtonTooltip = "If you make any changes to this script, a new version will be created when you hit Save.";
|
||||
editButtonText = "Edit";
|
||||
}
|
||||
else
|
||||
{
|
||||
editButtonTooltip = "If you want to make this previous Version active, bring up the Edit window, make any changes " +
|
||||
"to the old Version if they are needed, then click Save. A new Version will be created, and set as Current.";
|
||||
editButtonText = "Edit and Activate";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Card key={fieldName} id={`associatedScript.${fieldName}`} sx={{mb: 3}}>
|
||||
|
||||
<Box display="flex" alignItems="center" justifyContent="space-between" gap={2}>
|
||||
<Typography variant="h5" p={2}>{field?.label}</Typography>
|
||||
<Tabs
|
||||
sx={{mr: 1}}
|
||||
value={selectedTabs[fieldName]}
|
||||
onChange={(event, newValue) => changeTab(newValue, fieldName)}
|
||||
variant="standard"
|
||||
>
|
||||
<Tab label="Code" id="simple-tab-0" aria-controls="simple-tabpanel-0" sx={{width: "100px"}} />
|
||||
<Tab label="Logs" id="simple-tab-1" aria-controls="simple-tabpanel-1" sx={{width: "100px"}} />
|
||||
<Tab label="Test" id="simple-tab-2" aria-controls="simple-tabpanel-2" sx={{width: "100px"}} />
|
||||
<Tab label="Docs" id="simple-tab-3" aria-controls="simple-tabpanel-3" sx={{width: "100px"}} />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
<TabPanel index={0} value={selectedTabs[fieldName]}>
|
||||
<Grid container>
|
||||
<Grid item xs={4}>
|
||||
<Box display="flex" alignItems="center" gap={2} pb={1} height="40px">
|
||||
<Typography variant="h6" pl={3}>Versions</Typography>
|
||||
</Box>
|
||||
{getRevisionsList(object.scriptRevisions, fieldName, currentScriptRevisionId)}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={8}>
|
||||
<Box display="flex" alignItems="center" gap={2} pb={1} height="40px">
|
||||
{
|
||||
currentScriptRevisionId &&
|
||||
<Typography variant="h6">
|
||||
{
|
||||
currentScriptRevisionId === viewingRevisions[fieldName]
|
||||
? (<>Current Version ({viewingSequenceNo})</>)
|
||||
: (<>Version {viewingSequenceNo}</>)
|
||||
}
|
||||
</Typography>
|
||||
}
|
||||
<CustomWidthTooltip title={editButtonTooltip}>
|
||||
<Button sx={{py: 0}} onClick={() => editScript(fieldName, code)}>
|
||||
{editButtonText}
|
||||
</Button>
|
||||
</CustomWidthTooltip>
|
||||
</Box>
|
||||
{
|
||||
code ? (
|
||||
<>
|
||||
<AceEditor
|
||||
mode="javascript"
|
||||
theme="github"
|
||||
name={`view-${fieldName}`}
|
||||
readOnly
|
||||
editorProps={{$blockScrolling: true}}
|
||||
width="100%"
|
||||
height="400px"
|
||||
value={code}
|
||||
/>
|
||||
</>
|
||||
) : null
|
||||
}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TabPanel>
|
||||
<TabPanel index={1} value={selectedTabs[fieldName]}>
|
||||
<Grid container height="440px">
|
||||
<Grid item xs={4}>
|
||||
<Box display="flex" alignItems="center" gap={2} pb={1} height="40px">
|
||||
<Typography variant="h6" pl={3}>Versions</Typography>
|
||||
</Box>
|
||||
{getRevisionsList(object.scriptRevisions, fieldName, currentScriptRevisionId)}
|
||||
</Grid>
|
||||
<Grid item xs={8}>
|
||||
<Box display="flex" alignItems="center" gap={2} pb={1} height="40px">
|
||||
<Typography variant="h6" pl={3}>Script Logs (Version {viewingSequenceNo})</Typography>
|
||||
</Box>
|
||||
<Box height="400px" overflow="auto">
|
||||
{getScriptLogs(viewingRevisions[fieldName])}
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TabPanel>
|
||||
<TabPanel index={2} value={selectedTabs[fieldName]}>
|
||||
<Grid container height="440px" spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Box gap={2} pb={1} height="40px" px={2}>
|
||||
<Card sx={{width: "100%", height: "400px"}}>
|
||||
<Box width="100%">
|
||||
<Typography variant="h6" p={2}>Test Input</Typography>
|
||||
<Box px={2} pb={2}>
|
||||
<TextField id="testInput1" label="Ship To Zip" variant="standard" fullWidth sx={{mb: 2}} />
|
||||
<TextField id="testInput1" label="No of Cartons" variant="standard" fullWidth sx={{mb: 2}} />
|
||||
</Box>
|
||||
<div style={{float: "right"}}>
|
||||
<Button>Submit</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Box gap={2} pb={1} height="40px">
|
||||
<Card sx={{width: "100%", height: "400px"}}>
|
||||
<Typography variant="h6" pl={3}>Test Output</Typography>
|
||||
</Card>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TabPanel>
|
||||
<TabPanel index={3} value={selectedTabs[fieldName]}>
|
||||
<Grid container height="440px">
|
||||
<Grid item xs={12}>
|
||||
<Box gap={2} pb={1} pl={3}>
|
||||
<Box pb={1}>
|
||||
<Typography variant="h6">Documentation</Typography>
|
||||
</Box>
|
||||
<Box sx={{overflow: "auto"}} className="devDocumentation">
|
||||
<Typography variant="body2" sx={{maxWidth: "1200px", margin: "auto"}}>
|
||||
<p>A <b>Deposco Order Optimization Batch Name Script</b> is called when an order is being
|
||||
optimized for shipping within Deposco. It is responsible for determining the order's
|
||||
<b>Batch Name</b> - in other words, an indication of what day the order should be shipped,
|
||||
and whether or not the order is a line haul.</p>
|
||||
|
||||
<p><b>Input</b></p>
|
||||
<p>The input to this type of script is an object named <code>input</code>, with the following fields:</p>
|
||||
<ul>
|
||||
<li><code>warehouseId</code> The id of the warehouse that the order is shipping from. See the <b>Warehouse</b> table for mappings.</li>
|
||||
<li><code>shipToZipCode</code> The zip code that the order is shipping to.</li>
|
||||
<li><code>estimatedNoOfCartons</code> The estimated number of cartons that the order will ship in.</li>
|
||||
</ul>
|
||||
|
||||
<p><b>Output</b></p>
|
||||
<p>The script is responsible only for outputting a single value - a <code>string</code> which will be set as the order's
|
||||
<b>Batch Name</b> in Deposco.</p>
|
||||
|
||||
<p><b>Example</b></p>
|
||||
<code style={{whiteSpace: "pre-wrap"}}>
|
||||
if(today.weekday == 1)
|
||||
(
|
||||
return "TUE-Line-Haul"
|
||||
)
|
||||
</code>
|
||||
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</TabPanel>
|
||||
</Card>
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{
|
||||
editingScript &&
|
||||
<Modal open={editingScript as boolean} onClose={(event, reason) => closeEditingScript(event, reason)}>
|
||||
<AssociatedScriptEditor
|
||||
tableName={tableName}
|
||||
primaryKey={id}
|
||||
fieldName={editingScript.fieldName}
|
||||
titlePrefix={editingScript.titlePrefix}
|
||||
recordLabel={record.recordLabel}
|
||||
scriptName={tableMetaData.fields.get(editingScript.fieldName).label}
|
||||
code={editingScript.code}
|
||||
closeCallback={closeEditingScript}
|
||||
/>
|
||||
</Modal>
|
||||
}
|
||||
|
||||
</MDBox>
|
||||
}
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</BaseLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default EntityDeveloperView;
|
||||
@ -41,8 +41,9 @@ import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import React, {useContext, useEffect, useReducer, useState} from "react";
|
||||
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
|
||||
import {useLocation, useNavigate, useParams, useSearchParams} from "react-router-dom";
|
||||
import QContext from "QContext";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import DashboardWidgets from "qqq/components/DashboardWidgets";
|
||||
import {QActionsMenuButton, QDeleteButton, QEditButton} from "qqq/components/QButtons";
|
||||
import QRecordSidebar from "qqq/components/QRecordSidebar";
|
||||
@ -61,18 +62,20 @@ const qController = QClient.getInstance();
|
||||
// Declaring props types for ViewForm
|
||||
interface Props
|
||||
{
|
||||
id: string;
|
||||
table?: QTableMetaData;
|
||||
launchProcess?: QProcessMetaData;
|
||||
}
|
||||
|
||||
ViewContents.defaultProps = {
|
||||
table: null,
|
||||
launchProcess: null
|
||||
};
|
||||
EntityView.defaultProps =
|
||||
{
|
||||
table: null,
|
||||
launchProcess: null
|
||||
};
|
||||
|
||||
function ViewContents({id, table, launchProcess}: Props): JSX.Element
|
||||
function EntityView({table, launchProcess}: Props): JSX.Element
|
||||
{
|
||||
const {id} = useParams();
|
||||
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
@ -330,6 +333,11 @@ function ViewContents({id, table, launchProcess}: Props): JSX.Element
|
||||
{process.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
<Divider />
|
||||
<MenuItem onClick={() => navigate("dev")}>
|
||||
<ListItemIcon><Icon>data_object</Icon></ListItemIcon>
|
||||
Developer Mode
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
@ -355,111 +363,122 @@ function ViewContents({id, table, launchProcess}: Props): JSX.Element
|
||||
};
|
||||
|
||||
return (
|
||||
notFoundMessage
|
||||
?
|
||||
<MDBox>{notFoundMessage}</MDBox>
|
||||
:
|
||||
<MDBox pb={3}>
|
||||
{
|
||||
(searchParams.get("createSuccess") || searchParams.get("updateSuccess")) ? (
|
||||
<MDAlert color="success" dismissible>
|
||||
{tableMetaData?.label}
|
||||
{" "}
|
||||
successfully
|
||||
{" "}
|
||||
{searchParams.get("createSuccess") ? "created" : "updated"}
|
||||
<BaseLayout>
|
||||
<MDBox>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<MDBox mb={3}>
|
||||
{
|
||||
notFoundMessage
|
||||
?
|
||||
<MDBox>{notFoundMessage}</MDBox>
|
||||
:
|
||||
<MDBox pb={3}>
|
||||
{
|
||||
(searchParams.get("createSuccess") || searchParams.get("updateSuccess")) ? (
|
||||
<MDAlert color="success" dismissible>
|
||||
{tableMetaData?.label}
|
||||
{" "}
|
||||
successfully
|
||||
{" "}
|
||||
{searchParams.get("createSuccess") ? "created" : "updated"}
|
||||
|
||||
</MDAlert>
|
||||
) : ("")
|
||||
}
|
||||
</MDAlert>
|
||||
) : ("")
|
||||
}
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} lg={3}>
|
||||
<QRecordSidebar tableSections={tableSections} widgetMetaDataList={tableWidgets} />
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={9}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} lg={3}>
|
||||
<QRecordSidebar tableSections={tableSections} widgetMetaDataList={tableWidgets} />
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={9}>
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} mb={3}>
|
||||
<Card id={t1SectionName}>
|
||||
<MDBox display="flex" p={3} pb={1}>
|
||||
<MDBox mr={1.5}>
|
||||
<Avatar sx={{bgcolor: colors.info.main}}>
|
||||
<Icon>
|
||||
{tableMetaData?.iconName}
|
||||
</Icon>
|
||||
</Avatar>
|
||||
</MDBox>
|
||||
<MDBox display="flex" justifyContent="space-between" width="100%" alignItems="center">
|
||||
<MDTypography variant="h5">
|
||||
{tableMetaData && record ? `Viewing ${tableMetaData?.label}: ${record?.recordLabel}` : ""}
|
||||
</MDTypography>
|
||||
<QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
|
||||
{renderActionsMenu}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
{t1SectionElement ? (<MDBox p={3} pt={0}>{t1SectionElement}</MDBox>) : null}
|
||||
</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}
|
||||
<MDBox component="form" p={3}>
|
||||
<Grid container justifyContent="flex-end" spacing={3}>
|
||||
<QDeleteButton onClickHandler={handleClickDeleteButton} />
|
||||
<QEditButton />
|
||||
</Grid>
|
||||
</MDBox>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Delete confirmation Dialog */}
|
||||
<Dialog
|
||||
open={deleteConfirmationOpen}
|
||||
onClose={handleDeleteConfirmClose}
|
||||
aria-labelledby="alert-dialog-title"
|
||||
aria-describedby="alert-dialog-description"
|
||||
>
|
||||
<DialogTitle id="alert-dialog-title">Confirm Deletion</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText id="alert-dialog-description">
|
||||
Are you sure you want to delete this record?
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleDeleteConfirmClose}>No</Button>
|
||||
<Button onClick={handleDelete} autoFocus>
|
||||
Yes
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{
|
||||
activeModalProcess &&
|
||||
<Modal open={activeModalProcess !== null} onClose={(event, reason) => closeModalProcess(event, reason)}>
|
||||
<div className="modalProcess">
|
||||
<ProcessRun process={activeModalProcess} isModal={true} recordIds={id} closeModalHandler={closeModalProcess} />
|
||||
</div>
|
||||
</Modal>
|
||||
}
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} mb={3}>
|
||||
<Card id={t1SectionName}>
|
||||
<MDBox display="flex" p={3} pb={1}>
|
||||
<MDBox mr={1.5}>
|
||||
<Avatar sx={{bgcolor: colors.info.main}}>
|
||||
<Icon>
|
||||
{tableMetaData?.iconName}
|
||||
</Icon>
|
||||
</Avatar>
|
||||
</MDBox>
|
||||
<MDBox display="flex" justifyContent="space-between" width="100%" alignItems="center">
|
||||
<MDTypography variant="h5">
|
||||
{tableMetaData && record ? `Viewing ${tableMetaData?.label}: ${record?.recordLabel}` : ""}
|
||||
</MDTypography>
|
||||
<QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
|
||||
{renderActionsMenu}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
{t1SectionElement ? (<MDBox p={3} pt={0}>{t1SectionElement}</MDBox>) : null}
|
||||
</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}
|
||||
<MDBox component="form" p={3}>
|
||||
<Grid container justifyContent="flex-end" spacing={3}>
|
||||
<QDeleteButton onClickHandler={handleClickDeleteButton} />
|
||||
<QEditButton />
|
||||
</Grid>
|
||||
}
|
||||
</MDBox>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Delete confirmation Dialog */}
|
||||
<Dialog
|
||||
open={deleteConfirmationOpen}
|
||||
onClose={handleDeleteConfirmClose}
|
||||
aria-labelledby="alert-dialog-title"
|
||||
aria-describedby="alert-dialog-description"
|
||||
>
|
||||
<DialogTitle id="alert-dialog-title">Confirm Deletion</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText id="alert-dialog-description">
|
||||
Are you sure you want to delete this record?
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleDeleteConfirmClose}>No</Button>
|
||||
<Button onClick={handleDelete} autoFocus>
|
||||
Yes
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{
|
||||
activeModalProcess &&
|
||||
<Modal open={activeModalProcess !== null} onClose={(event, reason) => closeModalProcess(event, reason)}>
|
||||
<div className="modalProcess">
|
||||
<ProcessRun process={activeModalProcess} isModal={true} recordIds={id} closeModalHandler={closeModalProcess} />
|
||||
</div>
|
||||
</Modal>
|
||||
}
|
||||
|
||||
</MDBox>
|
||||
|
||||
</BaseLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default ViewContents;
|
||||
export default EntityView;
|
||||
@ -1,60 +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 {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import {useParams} from "react-router-dom";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import ViewContents from "./components/ViewContents";
|
||||
|
||||
interface Props
|
||||
{
|
||||
table?: QTableMetaData;
|
||||
launchProcess?: QProcessMetaData;
|
||||
}
|
||||
|
||||
function EntityView({table, launchProcess}: Props): JSX.Element
|
||||
{
|
||||
const {id} = useParams();
|
||||
|
||||
return (
|
||||
<BaseLayout>
|
||||
<MDBox>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<MDBox mb={3}>
|
||||
<ViewContents table={table} id={id} launchProcess={launchProcess}/>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</BaseLayout>
|
||||
);
|
||||
}
|
||||
|
||||
EntityView.defaultProps = {
|
||||
table: null,
|
||||
launchProcess: null
|
||||
};
|
||||
|
||||
export default EntityView;
|
||||
@ -35,6 +35,7 @@ import Tooltip from "@mui/material/Tooltip";
|
||||
import React, {useState} from "react";
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import CustomWidthTooltip from "qqq/components/CustomWidthTooltip/CustomWidthTooltip";
|
||||
import {ProcessSummaryLine} from "qqq/pages/process-run/model/ProcessSummaryLine";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import QValueUtils from "qqq/utils/QValueUtils";
|
||||
@ -87,15 +88,6 @@ function QValidationReview({
|
||||
setPreviewRecordIndex(newIndex);
|
||||
};
|
||||
|
||||
const CustomWidthTooltip = styled(({className, ...props}: TooltipProps) => (
|
||||
<Tooltip {...props} classes={{popper: className}} />
|
||||
))({
|
||||
[`& .${tooltipClasses.tooltip}`]: {
|
||||
maxWidth: 500,
|
||||
textAlign: "left",
|
||||
},
|
||||
});
|
||||
|
||||
const buildDoFullValidationRadioListItem = (value: "true" | "false", labelText: string, tooltipHTML: JSX.Element): JSX.Element =>
|
||||
{
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
@ -238,3 +238,24 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
|
||||
color: gray;
|
||||
right: 0.125rem;
|
||||
}
|
||||
|
||||
.devDocumentation ul>li
|
||||
{
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.devDocumentation *
|
||||
{
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.devDocumentation p
|
||||
{
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.devDocumentation code
|
||||
{
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@ -26,7 +26,6 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import "datejs";
|
||||
import {Chip, Icon} from "@mui/material";
|
||||
import {queryByTestId} from "@testing-library/react";
|
||||
import React, {Fragment} from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
@ -42,9 +41,9 @@ class QValueUtils
|
||||
|
||||
private static getQInstance(): QInstance
|
||||
{
|
||||
if(QValueUtils.qInstance == null)
|
||||
if (QValueUtils.qInstance == null)
|
||||
{
|
||||
if(QValueUtils.loadingQInstance)
|
||||
if (QValueUtils.loadingQInstance)
|
||||
{
|
||||
return (null);
|
||||
}
|
||||
@ -87,20 +86,20 @@ class QValueUtils
|
||||
let href = rawValue;
|
||||
|
||||
const toRecordFromTable = adornment.getValue("toRecordFromTable");
|
||||
if(toRecordFromTable)
|
||||
if (toRecordFromTable)
|
||||
{
|
||||
if(QValueUtils.getQInstance())
|
||||
if (QValueUtils.getQInstance())
|
||||
{
|
||||
let tablePath = QValueUtils.getQInstance().getTablePathByName(toRecordFromTable);
|
||||
if(!tablePath)
|
||||
if (!tablePath)
|
||||
{
|
||||
console.log("Couldn't find path for table: " + tablePath);
|
||||
return ("");
|
||||
}
|
||||
|
||||
if(!tablePath.endsWith("/"))
|
||||
if (!tablePath.endsWith("/"))
|
||||
{
|
||||
tablePath += "/"
|
||||
tablePath += "/";
|
||||
}
|
||||
href = tablePath + rawValue;
|
||||
}
|
||||
@ -113,33 +112,33 @@ class QValueUtils
|
||||
}
|
||||
}
|
||||
|
||||
if(!href)
|
||||
if (!href)
|
||||
{
|
||||
return ("");
|
||||
}
|
||||
|
||||
if(href.startsWith("http"))
|
||||
if (href.startsWith("http"))
|
||||
{
|
||||
return (<a target={adornment.getValue("target") ?? "_self"} href={href} onClick={(e) => e.stopPropagation()}>{displayValue ?? rawValue}</a>)
|
||||
return (<a target={adornment.getValue("target") ?? "_self"} href={href} onClick={(e) => e.stopPropagation()}>{displayValue ?? rawValue}</a>);
|
||||
}
|
||||
else
|
||||
{
|
||||
return (<Link target={adornment.getValue("target") ?? "_self"} to={href} onClick={(e) => e.stopPropagation()}>{displayValue ?? rawValue}</Link>)
|
||||
return (<Link target={adornment.getValue("target") ?? "_self"} to={href} onClick={(e) => e.stopPropagation()}>{displayValue ?? rawValue}</Link>);
|
||||
}
|
||||
}
|
||||
|
||||
if (field.hasAdornment(AdornmentType.CHIP))
|
||||
{
|
||||
if(!displayValue)
|
||||
if (!displayValue)
|
||||
{
|
||||
return (<span/>);
|
||||
return (<span />);
|
||||
}
|
||||
|
||||
const adornment = field.getAdornment(AdornmentType.CHIP);
|
||||
const color = adornment.getValue("color." + rawValue) ?? "default"
|
||||
const color = adornment.getValue("color." + rawValue) ?? "default";
|
||||
const iconName = adornment.getValue("icon." + rawValue) ?? null;
|
||||
const iconElement = iconName ? <Icon>{iconName}</Icon> : null;
|
||||
return (<Chip label={displayValue} color={color} icon={iconElement} size="small" variant="outlined" sx={{fontWeight: 500}} />);
|
||||
return (<Chip label={displayValue} color={color} icon={iconElement} size="small" variant="outlined" sx={{fontWeight: 500}} />);
|
||||
}
|
||||
|
||||
return (QValueUtils.getUnadornedValueForDisplay(field, rawValue, displayValue));
|
||||
@ -158,8 +157,7 @@ class QValueUtils
|
||||
return ("");
|
||||
}
|
||||
const date = new Date(rawValue);
|
||||
// @ts-ignore
|
||||
return (`${date.toString("yyyy-MM-dd hh:mm:ss")} ${date.getHours() < 12 ? "AM" : "PM"} ${date.getTimezone()}`);
|
||||
return this.formatDateTime(date);
|
||||
}
|
||||
else if (field.type === QFieldType.DATE)
|
||||
{
|
||||
@ -185,6 +183,29 @@ class QValueUtils
|
||||
return (returnValue);
|
||||
}
|
||||
|
||||
public static formatDateTime(date: Date)
|
||||
{
|
||||
if(!(date instanceof Date))
|
||||
{
|
||||
date = new Date(date)
|
||||
}
|
||||
// @ts-ignore
|
||||
return (`${date.toString("yyyy-MM-dd hh:mm:ss")} ${date.getHours() < 12 ? "AM" : "PM"} ${date.getTimezone()}`);
|
||||
}
|
||||
|
||||
public static formatBoolean(value: any)
|
||||
{
|
||||
if(value === true)
|
||||
{
|
||||
return ("Yes");
|
||||
}
|
||||
else if(value === false)
|
||||
{
|
||||
return ("No");
|
||||
}
|
||||
return (null);
|
||||
}
|
||||
|
||||
public static getFormattedNumber(n: number): string
|
||||
{
|
||||
try
|
||||
@ -225,24 +246,24 @@ class QValueUtils
|
||||
*******************************************************************************/
|
||||
public static formatDateTimeValueForForm(value: string): string
|
||||
{
|
||||
if(value === null || value === undefined)
|
||||
if (value === null || value === undefined)
|
||||
{
|
||||
return (value);
|
||||
}
|
||||
|
||||
if(value.match(/^\d{4}-\d{2}-\d{2}$/))
|
||||
if (value.match(/^\d{4}-\d{2}-\d{2}$/))
|
||||
{
|
||||
//////////////////////////////////////////////////////////////////
|
||||
// if we just passed in a date (w/o time), attach T00:00 to it. //
|
||||
//////////////////////////////////////////////////////////////////
|
||||
return(value + "T00:00");
|
||||
return (value + "T00:00");
|
||||
}
|
||||
else if(value.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}.*/))
|
||||
else if (value.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}.*/))
|
||||
{
|
||||
///////////////////////////////////////////////////////////////////////////////////
|
||||
// if we passed in something too long (e.g., w/ seconds and fractions), trim it. //
|
||||
///////////////////////////////////////////////////////////////////////////////////
|
||||
return(value.substring(0, 16));
|
||||
return (value.substring(0, 16));
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user