mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 05:10:45 +00:00
Add record grid widget; move table widgets down into sections
This commit is contained in:
@ -13,7 +13,7 @@
|
|||||||
"@fullcalendar/interaction": "5.10.0",
|
"@fullcalendar/interaction": "5.10.0",
|
||||||
"@fullcalendar/react": "5.10.0",
|
"@fullcalendar/react": "5.10.0",
|
||||||
"@fullcalendar/timegrid": "5.10.0",
|
"@fullcalendar/timegrid": "5.10.0",
|
||||||
"@kingsrook/qqq-frontend-core": "1.0.34",
|
"@kingsrook/qqq-frontend-core": "1.0.35",
|
||||||
"@mui/icons-material": "5.4.1",
|
"@mui/icons-material": "5.4.1",
|
||||||
"@mui/material": "5.4.1",
|
"@mui/material": "5.4.1",
|
||||||
"@mui/styled-engine": "5.4.1",
|
"@mui/styled-engine": "5.4.1",
|
||||||
|
|||||||
@ -33,6 +33,7 @@ import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
|
|||||||
import LineChart from "qqq/pages/dashboards/Widgets/LineChart";
|
import LineChart from "qqq/pages/dashboards/Widgets/LineChart";
|
||||||
import MultiStatisticsCard from "qqq/pages/dashboards/Widgets/MultiStatisticsCard";
|
import MultiStatisticsCard from "qqq/pages/dashboards/Widgets/MultiStatisticsCard";
|
||||||
import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
|
import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
|
||||||
|
import RecordGridWidget from "qqq/pages/dashboards/Widgets/RecordGridWidget";
|
||||||
import StepperCard from "qqq/pages/dashboards/Widgets/StepperCard";
|
import StepperCard from "qqq/pages/dashboards/Widgets/StepperCard";
|
||||||
import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
|
import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
|
||||||
import QClient from "qqq/utils/QClient";
|
import QClient from "qqq/utils/QClient";
|
||||||
@ -43,14 +44,16 @@ interface Props
|
|||||||
{
|
{
|
||||||
widgetMetaDataList: QWidgetMetaData[];
|
widgetMetaDataList: QWidgetMetaData[];
|
||||||
entityPrimaryKey?: string;
|
entityPrimaryKey?: string;
|
||||||
|
omitWrappingGridContainer: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
DashboardWidgets.defaultProps = {
|
DashboardWidgets.defaultProps = {
|
||||||
widgetMetaDataList: null,
|
widgetMetaDataList: null,
|
||||||
entityPrimaryKey: null
|
entityPrimaryKey: null,
|
||||||
|
omitWrappingGridContainer: false
|
||||||
};
|
};
|
||||||
|
|
||||||
function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.Element
|
function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGridContainer}: Props): JSX.Element
|
||||||
{
|
{
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const [qInstance, setQInstance] = useState(null as QInstance);
|
const [qInstance, setQInstance] = useState(null as QInstance);
|
||||||
@ -105,125 +108,158 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.El
|
|||||||
// console.log(JSON.stringify(widgetMetaDataList));
|
// console.log(JSON.stringify(widgetMetaDataList));
|
||||||
// console.log(widgetCount);
|
// console.log(widgetCount);
|
||||||
|
|
||||||
return (
|
const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
|
||||||
widgetCount > 0 ? (
|
{
|
||||||
<Grid container spacing={3} pb={4}>
|
return (
|
||||||
|
<>
|
||||||
|
{
|
||||||
|
widgetMetaData.type === "table" && (
|
||||||
|
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%"}}>
|
||||||
|
<TableCard
|
||||||
|
color="info"
|
||||||
|
title={widgetMetaData.label}
|
||||||
|
linkText={widgetData[i]?.linkText}
|
||||||
|
linkURL={widgetData[i]?.linkURL}
|
||||||
|
noRowsFoundHTML={widgetData[i]?.noRowsFoundHTML}
|
||||||
|
data={widgetData[i]}
|
||||||
|
dropdownOptions={widgetData[i]?.dropdownOptions}
|
||||||
|
dropdownOnChange={handleDropdownOnChange}
|
||||||
|
widgetIndex={i}
|
||||||
|
/>
|
||||||
|
</MDBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
widgetMetaData.type === "stepper" && (
|
||||||
|
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||||
|
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||||
|
<MDBox padding="1rem">
|
||||||
|
{
|
||||||
|
widgetMetaData.label && (
|
||||||
|
<MDTypography variant="h5" textTransform="capitalize">
|
||||||
|
{widgetMetaData.label}
|
||||||
|
</MDTypography>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
<StepperCard data={widgetData[i]} />
|
||||||
|
</MDBox>
|
||||||
|
</Card>
|
||||||
|
</MDBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
widgetMetaData.type === "html" && (
|
||||||
|
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||||
|
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||||
|
<MDBox padding="1rem">
|
||||||
|
<MDTypography variant="h5" textTransform="capitalize">
|
||||||
|
{widgetMetaData.label}
|
||||||
|
</MDTypography>
|
||||||
|
<MDTypography component="div" variant="button" color="text" fontWeight="light">
|
||||||
|
{
|
||||||
|
widgetData && widgetData[i] && widgetData[i].html ? (
|
||||||
|
parse(widgetData[i].html)
|
||||||
|
) : <Skeleton />
|
||||||
|
}
|
||||||
|
</MDTypography>
|
||||||
|
</MDBox>
|
||||||
|
</Card>
|
||||||
|
</MDBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
widgetMetaData.type === "multiStatistics" && (
|
||||||
|
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||||
|
<MultiStatisticsCard
|
||||||
|
color="info"
|
||||||
|
title={widgetMetaData.label}
|
||||||
|
data={widgetData[i]}
|
||||||
|
/>
|
||||||
|
</MDBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
widgetMetaData.type === "quickSightChart" && (
|
||||||
|
<MDBox sx={{display: "flex"}}>
|
||||||
|
<QuickSightChart url={widgetData[i]?.url} label={widgetMetaData.label} />
|
||||||
|
</MDBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
widgetMetaData.type === "barChart" && (
|
||||||
|
<MDBox mb={3} sx={{display: "flex"}}>
|
||||||
|
<BarChart
|
||||||
|
color="info"
|
||||||
|
title={widgetMetaData.label}
|
||||||
|
date={`As of ${new Date().toDateString()}`}
|
||||||
|
data={widgetData[i]?.chartData}
|
||||||
|
/>
|
||||||
|
</MDBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
widgetMetaData.type === "lineChart" && (
|
||||||
|
widgetData && widgetData[i] ? (
|
||||||
|
<MDBox mb={3}>
|
||||||
|
<LineChart
|
||||||
|
title={widgetData[i].title}
|
||||||
|
description={(
|
||||||
|
<MDBox display="flex" justifyContent="space-between">
|
||||||
|
<MDBox display="flex" ml={-1}>
|
||||||
|
{
|
||||||
|
widgetData[i].lineChartData.datasets.map((dataSet: any) => (
|
||||||
|
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</MDBox>
|
||||||
|
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
|
||||||
|
</MDBox>
|
||||||
|
)}
|
||||||
|
chart={widgetData[i].lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
|
||||||
|
/>
|
||||||
|
</MDBox>
|
||||||
|
) : null
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
widgetMetaData.type === "childRecordList" && (
|
||||||
|
widgetData && widgetData[i] &&
|
||||||
|
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%"}}>
|
||||||
|
<RecordGridWidget
|
||||||
|
title={widgetMetaData.label}
|
||||||
|
data={widgetData[i]}
|
||||||
|
/>
|
||||||
|
</MDBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const body: JSX.Element =
|
||||||
|
(
|
||||||
|
<>
|
||||||
{
|
{
|
||||||
widgetMetaDataList.map((widgetMetaData, i) => (
|
widgetMetaDataList.map((widgetMetaData, i) => (
|
||||||
<Grid id={widgetMetaData.name} key={`${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
|
omitWrappingGridContainer
|
||||||
{
|
? renderWidget(widgetMetaData, i)
|
||||||
widgetMetaData.type === "table" && (
|
:
|
||||||
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
<Grid id={widgetMetaData.name} key={`${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
|
||||||
<TableCard
|
{renderWidget(widgetMetaData, i)}
|
||||||
color="info"
|
</Grid>
|
||||||
title={widgetMetaData.label}
|
|
||||||
linkText={widgetData[i]?.linkText}
|
|
||||||
linkURL={widgetData[i]?.linkURL}
|
|
||||||
noRowsFoundHTML={widgetData[i]?.noRowsFoundHTML}
|
|
||||||
data={widgetData[i]}
|
|
||||||
dropdownOptions={widgetData[i]?.dropdownOptions}
|
|
||||||
dropdownOnChange={handleDropdownOnChange}
|
|
||||||
widgetIndex={i}
|
|
||||||
/>
|
|
||||||
</MDBox>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{
|
|
||||||
widgetMetaData.type === "stepper" && (
|
|
||||||
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
|
||||||
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
|
||||||
<MDBox padding="1rem">
|
|
||||||
{
|
|
||||||
widgetMetaData.label && (
|
|
||||||
<MDTypography variant="h5" textTransform="capitalize">
|
|
||||||
{widgetMetaData.label}
|
|
||||||
</MDTypography>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
<StepperCard data={widgetData[i]} />
|
|
||||||
</MDBox>
|
|
||||||
</Card>
|
|
||||||
</MDBox>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{
|
|
||||||
widgetMetaData.type === "html" && (
|
|
||||||
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
|
||||||
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
|
||||||
<MDBox padding="1rem">
|
|
||||||
<MDTypography variant="h5" textTransform="capitalize">
|
|
||||||
{widgetMetaData.label}
|
|
||||||
</MDTypography>
|
|
||||||
<MDTypography component="div" variant="button" color="text" fontWeight="light">
|
|
||||||
{
|
|
||||||
widgetData && widgetData[i] && widgetData[i].html ? (
|
|
||||||
parse(widgetData[i].html)
|
|
||||||
) : <Skeleton />
|
|
||||||
}
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</Card>
|
|
||||||
</MDBox>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{
|
|
||||||
widgetMetaData.type === "multiStatistics" && (
|
|
||||||
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
|
||||||
<MultiStatisticsCard
|
|
||||||
color="info"
|
|
||||||
title={widgetMetaData.label}
|
|
||||||
data={widgetData[i]}
|
|
||||||
/>
|
|
||||||
</MDBox>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{
|
|
||||||
widgetMetaData.type === "quickSightChart" && (
|
|
||||||
<MDBox sx={{display: "flex"}}>
|
|
||||||
<QuickSightChart url={widgetData[i]?.url} label={widgetMetaData.label} />
|
|
||||||
</MDBox>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{
|
|
||||||
widgetMetaData.type === "barChart" && (
|
|
||||||
<MDBox mb={3} sx={{display: "flex"}}>
|
|
||||||
<BarChart
|
|
||||||
color="info"
|
|
||||||
title={widgetMetaData.label}
|
|
||||||
date={`As of ${new Date().toDateString()}`}
|
|
||||||
data={widgetData[i]?.chartData}
|
|
||||||
/>
|
|
||||||
</MDBox>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{
|
|
||||||
widgetMetaData.type === "lineChart" && (
|
|
||||||
widgetData && widgetData[i] ? (
|
|
||||||
<MDBox mb={3}>
|
|
||||||
<LineChart
|
|
||||||
title={widgetData[i].title}
|
|
||||||
description={(
|
|
||||||
<MDBox display="flex" justifyContent="space-between">
|
|
||||||
<MDBox display="flex" ml={-1}>
|
|
||||||
{
|
|
||||||
widgetData[i].lineChartData.datasets.map((dataSet: any) => (
|
|
||||||
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</MDBox>
|
|
||||||
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
|
|
||||||
</MDBox>
|
|
||||||
)}
|
|
||||||
chart={widgetData[i].lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
|
|
||||||
/>
|
|
||||||
</MDBox>
|
|
||||||
) : null
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</Grid>
|
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</Grid>
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
widgetCount > 0 ? (
|
||||||
|
omitWrappingGridContainer ? body :
|
||||||
|
(
|
||||||
|
<Grid container spacing={3} pb={4}>
|
||||||
|
{body}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
) : null
|
) : null
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -186,6 +186,11 @@ function EntityForm({table, id}: Props): JSX.Element
|
|||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(!section.fieldNames)
|
||||||
|
{
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
for (let j = 0; j < section.fieldNames.length; j++)
|
for (let j = 0; j < section.fieldNames.length; j++)
|
||||||
{
|
{
|
||||||
const fieldName = section.fieldNames[j];
|
const fieldName = section.fieldNames[j];
|
||||||
|
|||||||
@ -31,8 +31,8 @@ import TextField from "@mui/material/TextField";
|
|||||||
import React, {useState} from "react";
|
import React, {useState} from "react";
|
||||||
import AceEditor from "react-ace";
|
import AceEditor from "react-ace";
|
||||||
import {QCancelButton, QSaveButton} from "qqq/components/QButtons";
|
import {QCancelButton, QSaveButton} from "qqq/components/QButtons";
|
||||||
import ScriptDocsForm from "qqq/pages/entity-view/ScriptDocsForm";
|
import ScriptDocsForm from "qqq/components/ScriptComponents/ScriptDocsForm";
|
||||||
import ScriptTestForm from "qqq/pages/entity-view/ScriptTestForm";
|
import ScriptTestForm from "qqq/components/ScriptComponents/ScriptTestForm";
|
||||||
import QClient from "qqq/utils/QClient";
|
import QClient from "qqq/utils/QClient";
|
||||||
|
|
||||||
interface AssociatedScriptDefinition
|
interface AssociatedScriptDefinition
|
||||||
54
src/qqq/components/TabPanel/TabPanel.tsx
Normal file
54
src/qqq/components/TabPanel/TabPanel.tsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
/*
|
||||||
|
* QQQ - Low-code Application Framework for Engineers.
|
||||||
|
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||||
|
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||||
|
* contact@kingsrook.com
|
||||||
|
* https://github.com/Kingsrook/
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Affero General Public License as
|
||||||
|
* published by the Free Software Foundation, either version 3 of the
|
||||||
|
* License, or (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Affero General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {Typography} from "@mui/material";
|
||||||
|
import Box from "@mui/material/Box";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface TabPanelProps
|
||||||
|
{
|
||||||
|
children?: React.ReactNode;
|
||||||
|
index: number;
|
||||||
|
value: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TabPanel(props: TabPanelProps)
|
||||||
|
{
|
||||||
|
const {children, value, index, ...other} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="tabpanel"
|
||||||
|
hidden={value !== index}
|
||||||
|
id={`simple-tabpanel-${index}`}
|
||||||
|
aria-labelledby={`simple-tab-${index}`}
|
||||||
|
{...other}
|
||||||
|
>
|
||||||
|
{value === index && (
|
||||||
|
<Box>
|
||||||
|
<Typography>{children}</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
122
src/qqq/pages/dashboards/Widgets/RecordGridWidget.tsx
Normal file
122
src/qqq/pages/dashboards/Widgets/RecordGridWidget.tsx
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
/*
|
||||||
|
* QQQ - Low-code Application Framework for Engineers.
|
||||||
|
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||||
|
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||||
|
* contact@kingsrook.com
|
||||||
|
* https://github.com/Kingsrook/
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Affero General Public License as
|
||||||
|
* published by the Free Software Foundation, either version 3 of the
|
||||||
|
* License, or (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Affero General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||||
|
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||||
|
import Box from "@mui/material/Box";
|
||||||
|
import Card from "@mui/material/Card";
|
||||||
|
import Typography from "@mui/material/Typography";
|
||||||
|
import {DataGridPro, GridValidRowModel} from "@mui/x-data-grid-pro";
|
||||||
|
import React, {useEffect, useState} from "react";
|
||||||
|
import {Link} from "react-router-dom";
|
||||||
|
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||||
|
import DataGridUtils from "qqq/utils/DataGridUtils";
|
||||||
|
|
||||||
|
interface Props
|
||||||
|
{
|
||||||
|
title: string
|
||||||
|
data: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
RecordGridWidget.defaultProps = {
|
||||||
|
};
|
||||||
|
|
||||||
|
function RecordGridWidget({title, data}: Props): JSX.Element
|
||||||
|
{
|
||||||
|
const [rows, setRows] = useState([]);
|
||||||
|
const [columns, setColumns] = useState([])
|
||||||
|
|
||||||
|
useEffect(() =>
|
||||||
|
{
|
||||||
|
if(data && data.childTableMetaData && data.queryOutput)
|
||||||
|
{
|
||||||
|
const records: QRecord[] = [];
|
||||||
|
const queryOutputRecords = data.queryOutput.records;
|
||||||
|
if (queryOutputRecords)
|
||||||
|
{
|
||||||
|
for (let i = 0; i < queryOutputRecords.length; i++)
|
||||||
|
{
|
||||||
|
records.push(new QRecord(queryOutputRecords[i]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const tableMetaData = new QTableMetaData(data.childTableMetaData);
|
||||||
|
const {rows, columnsToRender} = DataGridUtils.makeRows(records, tableMetaData);
|
||||||
|
const columns = DataGridUtils.setupGridColumns(tableMetaData, columnsToRender, data.tablePath);
|
||||||
|
|
||||||
|
setRows(rows);
|
||||||
|
setColumns(columns);
|
||||||
|
}
|
||||||
|
}, [data])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card sx={{width: "100%"}}>
|
||||||
|
<Box display="flex" justifyContent="space-between" alignItems="center">
|
||||||
|
<Typography variant="h5" fontWeight="medium" p={3}>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
{
|
||||||
|
data.viewAllLink &&
|
||||||
|
<Typography variant="body2" p={3}>
|
||||||
|
<Link to={data.viewAllLink}>
|
||||||
|
View All
|
||||||
|
</Link>
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
</Box>
|
||||||
|
<DataGridPro
|
||||||
|
autoHeight
|
||||||
|
rows={rows}
|
||||||
|
disableSelectionOnClick
|
||||||
|
columns={columns}
|
||||||
|
rowBuffer={10}
|
||||||
|
getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
|
||||||
|
// getRowHeight={() => "auto"} // maybe nice? wraps values in cells...
|
||||||
|
// components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading}}
|
||||||
|
// pinnedColumns={pinnedColumns}
|
||||||
|
// onPinnedColumnsChange={handlePinnedColumnsChange}
|
||||||
|
// pagination
|
||||||
|
// paginationMode="server"
|
||||||
|
// sortingMode="server"
|
||||||
|
// filterMode="server"
|
||||||
|
// page={pageNumber}
|
||||||
|
// checkboxSelection
|
||||||
|
// rowCount={totalRecords === null ? 0 : totalRecords}
|
||||||
|
// onPageSizeChange={handleRowsPerPageChange}
|
||||||
|
// onRowClick={handleRowClick}
|
||||||
|
// onStateChange={handleStateChange}
|
||||||
|
// density={density}
|
||||||
|
// loading={loading}
|
||||||
|
// filterModel={filterModel}
|
||||||
|
// onFilterModelChange={handleFilterChange}
|
||||||
|
// columnVisibilityModel={columnVisibilityModel}
|
||||||
|
// onColumnVisibilityModelChange={handleColumnVisibilityChange}
|
||||||
|
// onColumnOrderChange={handleColumnOrderChange}
|
||||||
|
// onSelectionModelChange={selectionChanged}
|
||||||
|
// onSortModelChange={handleSortChange}
|
||||||
|
// sortingOrder={[ "asc", "desc" ]}
|
||||||
|
// sortModel={columnSortModel}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default RecordGridWidget;
|
||||||
@ -57,6 +57,7 @@ import MDAlert from "qqq/components/Temporary/MDAlert";
|
|||||||
import MDBox from "qqq/components/Temporary/MDBox";
|
import MDBox from "qqq/components/Temporary/MDBox";
|
||||||
import {buildQGridPvsOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/entity-list/QGridFilterOperators";
|
import {buildQGridPvsOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/entity-list/QGridFilterOperators";
|
||||||
import ProcessRun from "qqq/pages/process-run";
|
import ProcessRun from "qqq/pages/process-run";
|
||||||
|
import DataGridUtils from "qqq/utils/DataGridUtils";
|
||||||
import QClient from "qqq/utils/QClient";
|
import QClient from "qqq/utils/QClient";
|
||||||
import QFilterUtils from "qqq/utils/QFilterUtils";
|
import QFilterUtils from "qqq/utils/QFilterUtils";
|
||||||
import QProcessUtils from "qqq/utils/QProcessUtils";
|
import QProcessUtils from "qqq/utils/QProcessUtils";
|
||||||
@ -442,120 +443,6 @@ function EntityList({table, launchProcess}: Props): JSX.Element
|
|||||||
})();
|
})();
|
||||||
};
|
};
|
||||||
|
|
||||||
const setupGridColumns = (columnsToRender: any) =>
|
|
||||||
{
|
|
||||||
const sortedKeys: string[] = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < tableMetaData.sections.length; i++)
|
|
||||||
{
|
|
||||||
const section = tableMetaData.sections[i];
|
|
||||||
for (let j = 0; j < section.fieldNames.length; j++)
|
|
||||||
{
|
|
||||||
sortedKeys.push(section.fieldNames[j]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns = [] as GridColDef[];
|
|
||||||
sortedKeys.forEach((key) =>
|
|
||||||
{
|
|
||||||
const field = tableMetaData.fields.get(key);
|
|
||||||
|
|
||||||
let columnType = "string";
|
|
||||||
let columnWidth = 200;
|
|
||||||
let filterOperators: GridFilterOperator<any>[] = QGridStringOperators;
|
|
||||||
|
|
||||||
if (field.possibleValueSourceName)
|
|
||||||
{
|
|
||||||
filterOperators = buildQGridPvsOperators(tableName, field);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
switch (field.type)
|
|
||||||
{
|
|
||||||
case QFieldType.DECIMAL:
|
|
||||||
case QFieldType.INTEGER:
|
|
||||||
columnType = "number";
|
|
||||||
columnWidth = 100;
|
|
||||||
|
|
||||||
if (key === tableMetaData.primaryKeyField && field.label.length < 3)
|
|
||||||
{
|
|
||||||
columnWidth = 75;
|
|
||||||
}
|
|
||||||
|
|
||||||
filterOperators = QGridNumericOperators;
|
|
||||||
break;
|
|
||||||
case QFieldType.DATE:
|
|
||||||
columnType = "date";
|
|
||||||
columnWidth = 100;
|
|
||||||
filterOperators = getGridDateOperators();
|
|
||||||
break;
|
|
||||||
case QFieldType.DATE_TIME:
|
|
||||||
columnType = "dateTime";
|
|
||||||
columnWidth = 200;
|
|
||||||
filterOperators = getGridDateOperators(true);
|
|
||||||
break;
|
|
||||||
case QFieldType.BOOLEAN:
|
|
||||||
columnType = "string"; // using boolean gives an odd 'no' for nulls.
|
|
||||||
columnWidth = 75;
|
|
||||||
filterOperators = QGridBooleanOperators;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
// noop - leave as string
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (field.hasAdornment(AdornmentType.SIZE))
|
|
||||||
{
|
|
||||||
const sizeAdornment = field.getAdornment(AdornmentType.SIZE);
|
|
||||||
const width: string = sizeAdornment.getValue("width");
|
|
||||||
const widths: Map<string, number> = new Map<string, number>([
|
|
||||||
[ "small", 100 ],
|
|
||||||
[ "medium", 200 ],
|
|
||||||
[ "large", 400 ],
|
|
||||||
[ "xlarge", 600 ]
|
|
||||||
]);
|
|
||||||
if (widths.has(width))
|
|
||||||
{
|
|
||||||
columnWidth = widths.get(width);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
console.log("Unrecognized size.width adornment value: " + width);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const column = {
|
|
||||||
field: field.name,
|
|
||||||
type: columnType,
|
|
||||||
headerName: field.label,
|
|
||||||
width: columnWidth,
|
|
||||||
renderCell: null as any,
|
|
||||||
filterOperators: filterOperators,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (columnsToRender[field.name])
|
|
||||||
{
|
|
||||||
column.renderCell = (cellValues: any) => (
|
|
||||||
(cellValues.value)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (key === tableMetaData.primaryKeyField)
|
|
||||||
{
|
|
||||||
columns.splice(0, 0, column);
|
|
||||||
column.renderCell = (cellValues: any) => (
|
|
||||||
<Link to={cellValues.value}>{cellValues.value}</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
columns.push(column);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
setColumnsModel(columns);
|
|
||||||
};
|
|
||||||
|
|
||||||
///////////////////////////
|
///////////////////////////
|
||||||
// display count results //
|
// display count results //
|
||||||
///////////////////////////
|
///////////////////////////
|
||||||
@ -592,47 +479,16 @@ function EntityList({table, launchProcess}: Props): JSX.Element
|
|||||||
const results = queryResults[latestQueryId];
|
const results = queryResults[latestQueryId];
|
||||||
delete queryResults[latestQueryId];
|
delete queryResults[latestQueryId];
|
||||||
|
|
||||||
const fields = [ ...tableMetaData.fields.values() ];
|
const {rows, columnsToRender} = DataGridUtils.makeRows(results, tableMetaData);
|
||||||
const rows = [] as any[];
|
|
||||||
const columnsToRender = {} as any;
|
|
||||||
results.forEach((record: QRecord) =>
|
|
||||||
{
|
|
||||||
const row: any = {};
|
|
||||||
fields.forEach((field) =>
|
|
||||||
{
|
|
||||||
const value = QValueUtils.getDisplayValue(field, record, "query");
|
|
||||||
if (typeof value !== "string")
|
|
||||||
{
|
|
||||||
columnsToRender[field.name] = true;
|
|
||||||
}
|
|
||||||
row[field.name] = value;
|
|
||||||
});
|
|
||||||
|
|
||||||
if(!row["id"])
|
|
||||||
{
|
|
||||||
row["id"] = row[tableMetaData.primaryKeyField];
|
|
||||||
}
|
|
||||||
|
|
||||||
rows.push(row);
|
|
||||||
});
|
|
||||||
|
|
||||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
||||||
// do this secondary check for columnsToRender - in case we didn't have any rows above, and our check for string isn't enough. //
|
|
||||||
// ... shouldn't this be just based on the field definition anyway... ? plus adornments? //
|
|
||||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
||||||
fields.forEach((field) =>
|
|
||||||
{
|
|
||||||
if(field.possibleValueSourceName)
|
|
||||||
{
|
|
||||||
columnsToRender[field.name] = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if(columnsModel.length == 0)
|
if(columnsModel.length == 0)
|
||||||
{
|
{
|
||||||
setupGridColumns(columnsToRender);
|
const columns = DataGridUtils.setupGridColumns(tableMetaData, columnsToRender);
|
||||||
|
setColumnsModel(columns);
|
||||||
}
|
}
|
||||||
|
|
||||||
setRows(rows);
|
setRows(rows);
|
||||||
|
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
setAlertContent(null);
|
setAlertContent(null);
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
|
|||||||
@ -20,7 +20,6 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
|
import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
|
||||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
|
||||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||||
import {Alert, Chip, Icon, ListItem, ListItemAvatar, Typography} from "@mui/material";
|
import {Alert, Chip, Icon, ListItem, ListItemAvatar, Typography} from "@mui/material";
|
||||||
@ -43,13 +42,15 @@ import {useParams} from "react-router-dom";
|
|||||||
import QContext from "QContext";
|
import QContext from "QContext";
|
||||||
import BaseLayout from "qqq/components/BaseLayout";
|
import BaseLayout from "qqq/components/BaseLayout";
|
||||||
import CustomWidthTooltip from "qqq/components/CustomWidthTooltip/CustomWidthTooltip";
|
import CustomWidthTooltip from "qqq/components/CustomWidthTooltip/CustomWidthTooltip";
|
||||||
|
import AssociatedScriptEditor from "qqq/components/ScriptComponents/AssociatedScriptEditor";
|
||||||
|
import ScriptDocsForm from "qqq/components/ScriptComponents/ScriptDocsForm";
|
||||||
|
import ScriptLogsView from "qqq/components/ScriptComponents/ScriptLogsView";
|
||||||
|
import ScriptTestForm from "qqq/components/ScriptComponents/ScriptTestForm";
|
||||||
|
import TabPanel from "qqq/components/TabPanel/TabPanel";
|
||||||
import MDBox from "qqq/components/Temporary/MDBox";
|
import MDBox from "qqq/components/Temporary/MDBox";
|
||||||
import AssociatedScriptEditor from "qqq/pages/entity-view/AssociatedScriptEditor";
|
import DeveloperModeUtils from "qqq/utils/DeveloperModeUtils";
|
||||||
import ScriptLogsView from "qqq/pages/entity-view/ScriptLogsView";
|
|
||||||
import ScriptTestForm from "qqq/pages/entity-view/ScriptTestForm";
|
|
||||||
import QClient from "qqq/utils/QClient";
|
import QClient from "qqq/utils/QClient";
|
||||||
import QValueUtils from "qqq/utils/QValueUtils";
|
import QValueUtils from "qqq/utils/QValueUtils";
|
||||||
import ScriptDocsForm from "./ScriptDocsForm";
|
|
||||||
|
|
||||||
import "ace-builds/src-noconflict/mode-java";
|
import "ace-builds/src-noconflict/mode-java";
|
||||||
import "ace-builds/src-noconflict/mode-javascript";
|
import "ace-builds/src-noconflict/mode-javascript";
|
||||||
@ -59,35 +60,6 @@ import "ace-builds/src-noconflict/ext-language_tools";
|
|||||||
|
|
||||||
const qController = QClient.getInstance();
|
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
|
// Declaring props types for ViewForm
|
||||||
interface Props
|
interface Props
|
||||||
{
|
{
|
||||||
@ -115,8 +87,6 @@ function EntityDeveloperView({table}: Props): JSX.Element
|
|||||||
const [selectedTabs, setSelectedTabs] = useState({} as any);
|
const [selectedTabs, setSelectedTabs] = useState({} as any);
|
||||||
const [viewingRevisions, setViewingRevisions] = useState({} as any);
|
const [viewingRevisions, setViewingRevisions] = useState({} as any);
|
||||||
const [scriptLogs, setScriptLogs] = useState({} as any);
|
const [scriptLogs, setScriptLogs] = useState({} as any);
|
||||||
const [testInputValues, setTestInputValues] = useState({} as any);
|
|
||||||
const [testOutputValues, setTestOutputValues] = useState({} as any);
|
|
||||||
|
|
||||||
const [editingScript, setEditingScript] = useState(null as any);
|
const [editingScript, setEditingScript] = useState(null as any);
|
||||||
const [alertText, setAlertText] = useState(null as string);
|
const [alertText, setAlertText] = useState(null as string);
|
||||||
@ -155,23 +125,6 @@ function EntityDeveloperView({table}: Props): JSX.Element
|
|||||||
|
|
||||||
setAssociatedScripts(developerModeData.associatedScripts);
|
setAssociatedScripts(developerModeData.associatedScripts);
|
||||||
|
|
||||||
const testInputValues = {};
|
|
||||||
const testOutputValues = {};
|
|
||||||
console.log("@dk - here");
|
|
||||||
console.log(developerModeData.associatedScripts);
|
|
||||||
developerModeData.associatedScripts.forEach((object: any) =>
|
|
||||||
{
|
|
||||||
const fieldName = object.associatedScript.fieldName;
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
testInputValues[fieldName] = {};
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
testOutputValues[fieldName] = {};
|
|
||||||
});
|
|
||||||
setTestInputValues(testInputValues);
|
|
||||||
setTestOutputValues(testOutputValues);
|
|
||||||
|
|
||||||
const recordJSONObject = {} as any;
|
const recordJSONObject = {} as any;
|
||||||
for (let key of record.values.keys())
|
for (let key of record.values.keys())
|
||||||
{
|
{
|
||||||
@ -197,32 +150,6 @@ function EntityDeveloperView({table}: Props): JSX.Element
|
|||||||
})();
|
})();
|
||||||
}
|
}
|
||||||
|
|
||||||
const revToColor = (fieldName: string, rev: number): string =>
|
|
||||||
{
|
|
||||||
let hash = 0;
|
|
||||||
let idFactor = 1;
|
|
||||||
try
|
|
||||||
{
|
|
||||||
idFactor = Number(id);
|
|
||||||
}
|
|
||||||
catch (e)
|
|
||||||
{
|
|
||||||
}
|
|
||||||
const string = `${fieldName} ${90210 * idFactor * rev}`;
|
|
||||||
for (let i = 0; i < string.length; i += 1)
|
|
||||||
{
|
|
||||||
hash = string.charCodeAt(i) + ((hash << 5) - hash);
|
|
||||||
}
|
|
||||||
|
|
||||||
let color = "#";
|
|
||||||
for (let i = 0; i < 3; i += 1)
|
|
||||||
{
|
|
||||||
const value = (hash >> (i * 8)) & 0xff;
|
|
||||||
color += `00${value.toString(16)}`.slice(-2);
|
|
||||||
}
|
|
||||||
return color;
|
|
||||||
};
|
|
||||||
|
|
||||||
const editScript = (fieldName: string, code: string, object: any) =>
|
const editScript = (fieldName: string, code: string, object: any) =>
|
||||||
{
|
{
|
||||||
const editingScript = {} as any;
|
const editingScript = {} as any;
|
||||||
@ -233,34 +160,6 @@ function EntityDeveloperView({table}: Props): JSX.Element
|
|||||||
setEditingScript(editingScript);
|
setEditingScript(editingScript);
|
||||||
};
|
};
|
||||||
|
|
||||||
const testScript = (object: any, fieldName: string) =>
|
|
||||||
{
|
|
||||||
const viewingRevisionArray = object.scriptRevisions?.filter((rev: any) => rev?.values?.id === viewingRevisions[fieldName]);
|
|
||||||
const code = viewingRevisionArray?.length > 0 ? viewingRevisionArray[0].values.contents : "";
|
|
||||||
|
|
||||||
const inputValues = new Map<string, any>();
|
|
||||||
if (object.testInputFields)
|
|
||||||
{
|
|
||||||
object.testInputFields.forEach((field: QFieldMetaData) =>
|
|
||||||
{
|
|
||||||
console.log(`${field.name} = ${testInputValues[fieldName][field.name]}`)
|
|
||||||
inputValues.set(field.name, testInputValues[fieldName][field.name]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const newTestOutputValues = JSON.parse(JSON.stringify(testOutputValues));
|
|
||||||
newTestOutputValues[fieldName] = {};
|
|
||||||
setTestOutputValues(newTestOutputValues);
|
|
||||||
|
|
||||||
(async () =>
|
|
||||||
{
|
|
||||||
const output = await qController.testScript(tableName, id, fieldName, code, inputValues);
|
|
||||||
const newTestOutputValues = JSON.parse(JSON.stringify(testOutputValues));
|
|
||||||
newTestOutputValues[fieldName] = output.outputValues;
|
|
||||||
setTestOutputValues(newTestOutputValues);
|
|
||||||
})();
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeEditingScript = (event: object, reason: string, alert: string = null) =>
|
const closeEditingScript = (event: object, reason: string, alert: string = null) =>
|
||||||
{
|
{
|
||||||
if (reason === "backdropClick")
|
if (reason === "backdropClick")
|
||||||
@ -336,7 +235,7 @@ function EntityDeveloperView({table}: Props): JSX.Element
|
|||||||
<React.Fragment key={revision.values.id}>
|
<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)}>
|
<ListItem sx={{p: 1}} alignItems="flex-start" selected={viewingRevisions[fieldName] == revision.values.id} onClick={(event) => selectRevision(fieldName, revision.values.id)}>
|
||||||
<ListItemAvatar>
|
<ListItemAvatar>
|
||||||
<Avatar sx={{bgcolor: revToColor(fieldName, revision.values.sequenceNo)}}>{`${revision.values.sequenceNo}`}</Avatar>
|
<Avatar sx={{bgcolor: DeveloperModeUtils.revToColor(fieldName, id, revision.values.sequenceNo)}}>{`${revision.values.sequenceNo}`}</Avatar>
|
||||||
</ListItemAvatar>
|
</ListItemAvatar>
|
||||||
<ListItemText
|
<ListItemText
|
||||||
primaryTypographyProps={{fontSize: "1rem"}}
|
primaryTypographyProps={{fontSize: "1rem"}}
|
||||||
|
|||||||
@ -24,9 +24,9 @@ import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capabi
|
|||||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||||
import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
|
import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
|
||||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
|
||||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||||
import Avatar from "@mui/material/Avatar";
|
import Avatar from "@mui/material/Avatar";
|
||||||
|
import Box from "@mui/material/Box";
|
||||||
import Button from "@mui/material/Button";
|
import Button from "@mui/material/Button";
|
||||||
import Card from "@mui/material/Card";
|
import Card from "@mui/material/Card";
|
||||||
import Dialog from "@mui/material/Dialog";
|
import Dialog from "@mui/material/Dialog";
|
||||||
@ -95,7 +95,6 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
|||||||
const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]);
|
const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]);
|
||||||
const [allTableProcesses, setAllTableProcesses] = useState([] as QProcessMetaData[]);
|
const [allTableProcesses, setAllTableProcesses] = useState([] as QProcessMetaData[]);
|
||||||
const [actionsMenu, setActionsMenu] = useState(null);
|
const [actionsMenu, setActionsMenu] = useState(null);
|
||||||
const [tableWidgets, setTableWidgets] = useState([] as QWidgetMetaData[]);
|
|
||||||
const [notFoundMessage, setNotFoundMessage] = useState(null);
|
const [notFoundMessage, setNotFoundMessage] = useState(null);
|
||||||
const [searchParams] = useSearchParams();
|
const [searchParams] = useSearchParams();
|
||||||
const {setPageHeader} = useContext(QContext);
|
const {setPageHeader} = useContext(QContext);
|
||||||
@ -116,7 +115,6 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
|||||||
setNonT1TableSections([]);
|
setNonT1TableSections([]);
|
||||||
setTableProcesses([]);
|
setTableProcesses([]);
|
||||||
setTableSections(null);
|
setTableSections(null);
|
||||||
setTableWidgets(null);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
////////////////////////////////////////////////////////////////////////////////////////////////////
|
////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
@ -210,17 +208,6 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
|||||||
|
|
||||||
setPageHeader(record.recordLabel);
|
setPageHeader(record.recordLabel);
|
||||||
|
|
||||||
///////////////////////////
|
|
||||||
// load widget meta data //
|
|
||||||
///////////////////////////
|
|
||||||
const matchingWidgets: QWidgetMetaData[] = [];
|
|
||||||
tableMetaData.widgets && tableMetaData.widgets.forEach((widgetName) =>
|
|
||||||
{
|
|
||||||
const widget = metaData.widgets.get(widgetName);
|
|
||||||
matchingWidgets.push(widget);
|
|
||||||
});
|
|
||||||
setTableWidgets(matchingWidgets);
|
|
||||||
|
|
||||||
/////////////////////////////////////////////////
|
/////////////////////////////////////////////////
|
||||||
// define the sections, e.g., for the left-bar //
|
// define the sections, e.g., for the left-bar //
|
||||||
/////////////////////////////////////////////////
|
/////////////////////////////////////////////////
|
||||||
@ -235,28 +222,75 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
|||||||
for (let i = 0; i < tableSections.length; i++)
|
for (let i = 0; i < tableSections.length; i++)
|
||||||
{
|
{
|
||||||
const section = tableSections[i];
|
const section = tableSections[i];
|
||||||
if(section.isHidden)
|
if (section.isHidden)
|
||||||
{
|
{
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
sectionFieldElements.set(
|
if (section.widgetName)
|
||||||
section.name,
|
{
|
||||||
<MDBox key={section.name} display="flex" flexDirection="column" py={1} pr={2}>
|
const widgetMetaData = metaData.widgets.get(section.widgetName);
|
||||||
{
|
|
||||||
section.fieldNames.map((fieldName: string) => (
|
////////////////////////////////////////////////////////////////////////////
|
||||||
<MDBox key={fieldName} flexDirection="row" pr={2}>
|
// for a section with a widget name, call the dashboard widgets component //
|
||||||
<MDTypography variant="button" fontWeight="bold" pr={1}>
|
////////////////////////////////////////////////////////////////////////////
|
||||||
{tableMetaData.fields.get(fieldName).label}:
|
sectionFieldElements.set(section.name,
|
||||||
</MDTypography>
|
<Grid id={section.name} key={section.name} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", flexGrow: 1, scrollMarginTop: "100px"}}>
|
||||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
<Box width="100%" flexGrow={1} alignItems="stretch">
|
||||||
{QValueUtils.getDisplayValue(tableMetaData.fields.get(fieldName), record, "view")}
|
<DashboardWidgets key={section.name} widgetMetaDataList={[widgetMetaData]} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} omitWrappingGridContainer={true} />
|
||||||
</MDTypography>
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else if (section.fieldNames)
|
||||||
|
{
|
||||||
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
// for a section with field names, render the field values. //
|
||||||
|
// for the T1 section, the "wrapper" will come out below - but for other sections, produce a wrapper too. //
|
||||||
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
const fields = (
|
||||||
|
<MDBox key={section.name} display="flex" flexDirection="column" py={1} pr={2}>
|
||||||
|
{
|
||||||
|
section.fieldNames.map((fieldName: string) => (
|
||||||
|
<MDBox key={fieldName} flexDirection="row" pr={2}>
|
||||||
|
<MDTypography variant="button" fontWeight="bold" pr={1}>
|
||||||
|
{tableMetaData.fields.get(fieldName).label}:
|
||||||
|
</MDTypography>
|
||||||
|
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||||
|
{QValueUtils.getDisplayValue(tableMetaData.fields.get(fieldName), record, "view")}
|
||||||
|
</MDTypography>
|
||||||
|
</MDBox>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</MDBox>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (section.tier === "T1")
|
||||||
|
{
|
||||||
|
sectionFieldElements.set(section.name, fields);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
sectionFieldElements.set(section.name,
|
||||||
|
<Grid id={section.name} key={section.name} item lg={12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
|
||||||
|
<MDBox mb={3} width="100%">
|
||||||
|
<Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}}>
|
||||||
|
<MDTypography variant="h5" p={3} pb={1}>
|
||||||
|
{section.label}
|
||||||
|
</MDTypography>
|
||||||
|
<MDBox p={3} pt={0} flexDirection="column">
|
||||||
|
{fields}
|
||||||
|
</MDBox>
|
||||||
|
</Card>
|
||||||
</MDBox>
|
</MDBox>
|
||||||
))
|
</Grid>
|
||||||
}
|
);
|
||||||
</MDBox>,
|
}
|
||||||
);
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
if (section.tier === "T1")
|
if (section.tier === "T1")
|
||||||
{
|
{
|
||||||
@ -401,7 +435,7 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
|||||||
|
|
||||||
<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} />
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} lg={9}>
|
<Grid item xs={12} lg={9}>
|
||||||
|
|
||||||
@ -428,21 +462,15 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
|||||||
</Card>
|
</Card>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
{tableMetaData && tableMetaData.widgets && record && (
|
<Grid container spacing={3} pb={4}>
|
||||||
<DashboardWidgets widgetMetaDataList={tableWidgets} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} />
|
{nonT1TableSections.length > 0 ? nonT1TableSections.map(({
|
||||||
)}
|
iconName, label, name, fieldNames, tier,
|
||||||
{nonT1TableSections.length > 0 ? nonT1TableSections.map(({
|
}: any) => (
|
||||||
iconName, label, name, fieldNames, tier,
|
<>
|
||||||
}: any) => (
|
{sectionFieldElements.get(name)}
|
||||||
<MDBox mb={3} key={name}>
|
</>
|
||||||
<Card key={name} id={name} sx={{overflow: "visible", scrollMarginTop: "100px"}}>
|
)) : null}
|
||||||
<MDTypography variant="h5" p={3} pb={1}>
|
</Grid>
|
||||||
{label}
|
|
||||||
</MDTypography>
|
|
||||||
<MDBox p={3} pt={0} flexDirection="column">{sectionFieldElements.get(name)}</MDBox>
|
|
||||||
</Card>
|
|
||||||
</MDBox>
|
|
||||||
)) : null}
|
|
||||||
<MDBox component="form" p={3}>
|
<MDBox component="form" p={3}>
|
||||||
<Grid container justifyContent="flex-end" spacing={3}>
|
<Grid container justifyContent="flex-end" spacing={3}>
|
||||||
{
|
{
|
||||||
|
|||||||
203
src/qqq/utils/DataGridUtils.tsx
Normal file
203
src/qqq/utils/DataGridUtils.tsx
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
/*
|
||||||
|
* 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 {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
|
||||||
|
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||||
|
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||||
|
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||||
|
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||||
|
import {getGridDateOperators, GridColDef, GridRowsProp} from "@mui/x-data-grid-pro";
|
||||||
|
import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
|
||||||
|
import {Link} from "react-router-dom";
|
||||||
|
import {buildQGridPvsOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/entity-list/QGridFilterOperators";
|
||||||
|
import QValueUtils from "qqq/utils/QValueUtils";
|
||||||
|
|
||||||
|
export default class DataGridUtils
|
||||||
|
{
|
||||||
|
|
||||||
|
/*******************************************************************************
|
||||||
|
**
|
||||||
|
*******************************************************************************/
|
||||||
|
public static makeRows = (results: QRecord[], tableMetaData: QTableMetaData): {rows: GridRowsProp[], columnsToRender: any} =>
|
||||||
|
{
|
||||||
|
const fields = [ ...tableMetaData.fields.values() ];
|
||||||
|
const rows = [] as any[];
|
||||||
|
const columnsToRender = {} as any;
|
||||||
|
results.forEach((record: QRecord) =>
|
||||||
|
{
|
||||||
|
const row: any = {};
|
||||||
|
fields.forEach((field) =>
|
||||||
|
{
|
||||||
|
const value = QValueUtils.getDisplayValue(field, record, "query");
|
||||||
|
if (typeof value !== "string")
|
||||||
|
{
|
||||||
|
columnsToRender[field.name] = true;
|
||||||
|
}
|
||||||
|
row[field.name] = value;
|
||||||
|
});
|
||||||
|
|
||||||
|
if(!row["id"])
|
||||||
|
{
|
||||||
|
row["id"] = row[tableMetaData.primaryKeyField];
|
||||||
|
}
|
||||||
|
|
||||||
|
rows.push(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
// do this secondary check for columnsToRender - in case we didn't have any rows above, and our check for string isn't enough. //
|
||||||
|
// ... shouldn't this be just based on the field definition anyway... ? plus adornments? //
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
fields.forEach((field) =>
|
||||||
|
{
|
||||||
|
if(field.possibleValueSourceName)
|
||||||
|
{
|
||||||
|
columnsToRender[field.name] = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return ({rows, columnsToRender});
|
||||||
|
}
|
||||||
|
|
||||||
|
/*******************************************************************************
|
||||||
|
**
|
||||||
|
*******************************************************************************/
|
||||||
|
public static setupGridColumns = (tableMetaData: QTableMetaData, columnsToRender: any, linkBase: string = ""): GridColDef[] =>
|
||||||
|
{
|
||||||
|
const columns = [] as GridColDef[];
|
||||||
|
const sortedKeys: string[] = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < tableMetaData.sections.length; i++)
|
||||||
|
{
|
||||||
|
const section = tableMetaData.sections[i];
|
||||||
|
if(!section.fieldNames)
|
||||||
|
{
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let j = 0; j < section.fieldNames.length; j++)
|
||||||
|
{
|
||||||
|
sortedKeys.push(section.fieldNames[j]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sortedKeys.forEach((key) =>
|
||||||
|
{
|
||||||
|
const field = tableMetaData.fields.get(key);
|
||||||
|
|
||||||
|
let columnType = "string";
|
||||||
|
let columnWidth = 200;
|
||||||
|
let filterOperators: GridFilterOperator<any>[] = QGridStringOperators;
|
||||||
|
|
||||||
|
if (field.possibleValueSourceName)
|
||||||
|
{
|
||||||
|
filterOperators = buildQGridPvsOperators(tableMetaData.name, field);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
switch (field.type)
|
||||||
|
{
|
||||||
|
case QFieldType.DECIMAL:
|
||||||
|
case QFieldType.INTEGER:
|
||||||
|
columnType = "number";
|
||||||
|
columnWidth = 100;
|
||||||
|
|
||||||
|
if (key === tableMetaData.primaryKeyField && field.label.length < 3)
|
||||||
|
{
|
||||||
|
columnWidth = 75;
|
||||||
|
}
|
||||||
|
|
||||||
|
filterOperators = QGridNumericOperators;
|
||||||
|
break;
|
||||||
|
case QFieldType.DATE:
|
||||||
|
columnType = "date";
|
||||||
|
columnWidth = 100;
|
||||||
|
filterOperators = getGridDateOperators();
|
||||||
|
break;
|
||||||
|
case QFieldType.DATE_TIME:
|
||||||
|
columnType = "dateTime";
|
||||||
|
columnWidth = 200;
|
||||||
|
filterOperators = getGridDateOperators(true);
|
||||||
|
break;
|
||||||
|
case QFieldType.BOOLEAN:
|
||||||
|
columnType = "string"; // using boolean gives an odd 'no' for nulls.
|
||||||
|
columnWidth = 75;
|
||||||
|
filterOperators = QGridBooleanOperators;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
// noop - leave as string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (field.hasAdornment(AdornmentType.SIZE))
|
||||||
|
{
|
||||||
|
const sizeAdornment = field.getAdornment(AdornmentType.SIZE);
|
||||||
|
const width: string = sizeAdornment.getValue("width");
|
||||||
|
const widths: Map<string, number> = new Map<string, number>([
|
||||||
|
["small", 100],
|
||||||
|
["medium", 200],
|
||||||
|
["large", 400],
|
||||||
|
["xlarge", 600]
|
||||||
|
]);
|
||||||
|
if (widths.has(width))
|
||||||
|
{
|
||||||
|
columnWidth = widths.get(width);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
console.log("Unrecognized size.width adornment value: " + width);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const column = {
|
||||||
|
field: field.name,
|
||||||
|
type: columnType,
|
||||||
|
headerName: field.label,
|
||||||
|
width: columnWidth,
|
||||||
|
renderCell: null as any,
|
||||||
|
filterOperators: filterOperators,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (columnsToRender[field.name])
|
||||||
|
{
|
||||||
|
column.renderCell = (cellValues: any) => (
|
||||||
|
(cellValues.value)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (key === tableMetaData.primaryKeyField)
|
||||||
|
{
|
||||||
|
columns.splice(0, 0, column);
|
||||||
|
column.renderCell = (cellValues: any) => (
|
||||||
|
<Link to={`${linkBase}${cellValues.value}`}>{cellValues.value}</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
columns.push(column);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (columns);
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
52
src/qqq/utils/DeveloperModeUtils.tsx
Normal file
52
src/qqq/utils/DeveloperModeUtils.tsx
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
/*
|
||||||
|
* 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/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
export default class DeveloperModeUtils
|
||||||
|
{
|
||||||
|
|
||||||
|
public static revToColor = (fieldName: string, recordId: string, rev: number): string =>
|
||||||
|
{
|
||||||
|
let hash = 0;
|
||||||
|
let idFactor = 1;
|
||||||
|
try
|
||||||
|
{
|
||||||
|
idFactor = Number(recordId);
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user