Add initial version of record developer mode, associated scripts

package.json

@@ -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",

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) =>
                {

src/qqq/components/CustomWidthTooltip/CustomWidthTooltip.tsx

@@ -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

src/qqq/pages/entity-view/AssociatedScriptEditor.tsx

@@ -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;

src/qqq/pages/entity-view/EntityDeveloperView.tsx

@@ -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&apos;s&nbsp;
+                                                                  <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&apos;s&nbsp;
+                                                                     <b>Batch Name</b> in Deposco.</p>
+
+                                                                  <p><b>Example</b></p>
+                                                                  <code style={{whiteSpace: "pre-wrap"}}>
+                                                                     if(today.weekday == 1)
+                                                                     (
+                                                                     return &quot;TUE-Line-Haul&quot;
+                                                                     )
+                                                                  </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;

src/qqq/pages/entity-view/EntityView.tsx

@@ -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 = {
+EntityView.defaultProps =
-   table: null,
+   {
-   launchProcess: null
+      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
+      <BaseLayout>
-         ?
+         <MDBox>
-         <MDBox>{notFoundMessage}</MDBox>
+            <Grid container>
-         :
+               <Grid item xs={12}>
-         <MDBox pb={3}>
+                  <MDBox mb={3}>
-            {
+                     {
-               (searchParams.get("createSuccess") || searchParams.get("updateSuccess")) ? (
+                        notFoundMessage
-                  <MDAlert color="success" dismissible>
+                           ?
-                     {tableMetaData?.label}
+                           <MDBox>{notFoundMessage}</MDBox>
-                     {" "}
+                           :
-                     successfully
+                           <MDBox pb={3}>
-                     {" "}
+                              {
-                     {searchParams.get("createSuccess") ? "created" : "updated"}
+                                 (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 container spacing={3}>
-               <Grid item xs={12} lg={3}>
+                                 <Grid item xs={12} lg={3}>
-                  <QRecordSidebar tableSections={tableSections} widgetMetaDataList={tableWidgets} />
+                                    <QRecordSidebar tableSections={tableSections} widgetMetaDataList={tableWidgets} />
-               </Grid>
+                                 </Grid>
-               <Grid item xs={12} lg={9}>
+                                 <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;

src/qqq/pages/entity-view/index.tsx

@@ -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;

src/qqq/pages/process-run/components/QValidationReview.tsx

@@ -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 =>
    {
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

src/qqq/styles/qqq-override-styles.css

@@ -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;
+}

src/qqq/utils/QValueUtils.tsx

@@ -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 this.formatDateTime(date);
-         return (`${date.toString("yyyy-MM-dd hh:mm:ss")} ${date.getHours() < 12 ? "AM" : "PM"} ${date.getTimezone()}`);
       }
       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
@@ -221,28 +242,28 @@ class QValueUtils
 
    /*******************************************************************************
     ** Take a date-time value, and format it the way the ui's date-times want it
-    ** to be.  
+    ** to be.
     *******************************************************************************/
    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
       {