mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 13:20:43 +00:00
SPRINT-12: added widgets to tables
This commit is contained in:
Tim Chamberlain
172
src/qqq/components/DashboardWidgets.tsx
Normal file
172
src/qqq/components/DashboardWidgets.tsx
Normal file
@ -0,0 +1,172 @@
|
||||
/* 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 {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
|
||||
import LineChart from "qqq/pages/dashboards/Widgets/LineChart";
|
||||
import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
|
||||
import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
|
||||
const qController = QClient.getInstance();
|
||||
|
||||
interface Props
|
||||
{
|
||||
widgetNameList: string[];
|
||||
entityPrimaryKey?: string;
|
||||
}
|
||||
|
||||
DashboardWidgets.defaultProps = {
|
||||
widgetNameList: null,
|
||||
entityPrimaryKey: null
|
||||
};
|
||||
|
||||
function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Element
|
||||
{
|
||||
const [qInstance, setQInstance] = useState(null as QInstance);
|
||||
const [widgets, setWidgets] = useState([] as any[]);
|
||||
const [widgetNames, setWidgetNames] = useState([] as any[]);
|
||||
const [widgetCounter, setWidgetCounter] = useState(0);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
(async () =>
|
||||
{
|
||||
const newQInstance = await qController.loadMetaData();
|
||||
setQInstance(newQInstance);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if (!qInstance)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < widgetNameList.length; i++)
|
||||
{
|
||||
widgets[i] = {};
|
||||
(async () =>
|
||||
{
|
||||
widgets[i] = await qController.widget(widgetNameList[i], `id=${entityPrimaryKey}`);
|
||||
setWidgetCounter(widgetCounter + 1);
|
||||
})();
|
||||
}
|
||||
setWidgets(widgets);
|
||||
}, [qInstance, widgetNames]);
|
||||
|
||||
const widgetCount = widgets ? widgets.length : 0;
|
||||
|
||||
const handleDropdownOnChange = (value: string, index: number) =>
|
||||
{
|
||||
setTimeout(async () =>
|
||||
{
|
||||
widgets[index] = await qController.widget(widgetNameList[index]);
|
||||
}, 1);
|
||||
};
|
||||
|
||||
console.log(`primarkey ${entityPrimaryKey}`);
|
||||
console.log(`widgets: ${JSON.stringify(widgets)}`);
|
||||
|
||||
return (
|
||||
widgetCount > 0 ? (
|
||||
<Grid item xs={12} lg={12}>
|
||||
<Grid container spacing={3}>
|
||||
{
|
||||
widgets.map((widget, i) => (
|
||||
<Grid key={`${i}`} item xs={12} lg={12}>
|
||||
<MDBox mb={3}>
|
||||
{
|
||||
widget.type === "table" && (
|
||||
<TableCard
|
||||
color="info"
|
||||
title={widget.title}
|
||||
data={widget}
|
||||
dropdownOptions={widget.dropdownOptions}
|
||||
dropdownOnChange={handleDropdownOnChange}
|
||||
widgetIndex={i}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</MDBox>
|
||||
</Grid>
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={widgetCount === 1 ? 3 : 6}>
|
||||
{
|
||||
widgets.map((widget, i) => (
|
||||
<Grid key={`${i}`} item xs={12} lg={widgetCount === 1 ? 12 : 6}>
|
||||
{
|
||||
widget.type === "quickSightChart" && (
|
||||
<MDBox mb={3}>
|
||||
<QuickSightChart url={widget.url} label={widget.label} />
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
{
|
||||
widget.type === "barChart" && (
|
||||
<MDBox mb={3}>
|
||||
<BarChart
|
||||
color="info"
|
||||
title={widget.title}
|
||||
date={`As of ${new Date().toDateString()}`}
|
||||
data={widget.chartData}
|
||||
/>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
{
|
||||
widget.type === "lineChart" && (
|
||||
<MDBox mb={3}>
|
||||
<LineChart
|
||||
title={widget.title}
|
||||
description={(
|
||||
<MDBox display="flex" justifyContent="space-between">
|
||||
<MDBox display="flex" ml={-1}>
|
||||
{
|
||||
widget.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={widget.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
|
||||
/>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
</Grid>
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
</Grid>
|
||||
) : null
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardWidgets;
|
||||
@ -30,20 +30,46 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
interface Props
|
||||
{
|
||||
tableSections: QTableSection[];
|
||||
widgetNames?: string[];
|
||||
light?: boolean;
|
||||
}
|
||||
|
||||
function QRecordSidebar({tableSections, light}: Props): JSX.Element
|
||||
interface SidebarEntry
|
||||
{
|
||||
iconName: string;
|
||||
name: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
function QRecordSidebar({tableSections, widgetNames, light}: Props): JSX.Element
|
||||
{
|
||||
/////////////////////////////////////////////////////////
|
||||
// insert widgets after identity (first) table section //
|
||||
/////////////////////////////////////////////////////////
|
||||
const sidebarEntries = [] as SidebarEntry[];
|
||||
tableSections.forEach((section, index) =>
|
||||
{
|
||||
if (index === 1 && widgetNames)
|
||||
{
|
||||
widgetNames.forEach((name) =>
|
||||
{
|
||||
sidebarEntries.push({iconName: "troubleshoot", name: name, label: name});
|
||||
});
|
||||
}
|
||||
sidebarEntries.push({iconName: section.iconName, name: section.name, label: section.label});
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<Card sx={{borderRadius: ({borders: {borderRadius}}) => borderRadius.lg, position: "sticky", top: "1%"}}>
|
||||
<MDBox component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
|
||||
{
|
||||
tableSections ? tableSections.map((section: QTableSection, key: number) => (
|
||||
<MDBox key={`section-${section.name}`} component="li" pt={key === 0 ? 0 : 1}>
|
||||
sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (
|
||||
|
||||
<MDBox key={`section-${entry.name}`} component="li" pt={key === 0 ? 0 : 1}>
|
||||
<MDTypography
|
||||
component="a"
|
||||
href={`#${section.name}`}
|
||||
href={`#${entry.name}`}
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
sx={({
|
||||
@ -64,9 +90,9 @@ function QRecordSidebar({tableSections, light}: Props): JSX.Element
|
||||
})}
|
||||
>
|
||||
<MDBox mr={1.5} lineHeight={1} color="black">
|
||||
<Icon fontSize="small">{section.iconName}</Icon>
|
||||
<Icon fontSize="small">{entry.iconName}</Icon>
|
||||
</MDBox>
|
||||
{section.label}
|
||||
{entry.label}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
)) : null
|
||||
|
||||
@ -18,12 +18,15 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {tooltipClasses, TooltipProps} from "@mui/material";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {styled} from "@mui/material/styles";
|
||||
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 Tooltip from "@mui/material/Tooltip";
|
||||
import parse from "html-react-parser";
|
||||
import {useEffect, useMemo, useState} from "react";
|
||||
import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
|
||||
@ -62,6 +65,15 @@ interface Props
|
||||
noEndBorder?: boolean;
|
||||
}
|
||||
|
||||
const NoMaxWidthTooltip = styled(({className, ...props}: TooltipProps) => (
|
||||
<Tooltip {...props} classes={{popper: className}} />
|
||||
))({
|
||||
[`& .${tooltipClasses.tooltip}`]: {
|
||||
maxWidth: "none",
|
||||
textAlign: "left"
|
||||
},
|
||||
});
|
||||
|
||||
function DataTable({
|
||||
entriesPerPage,
|
||||
canSearch,
|
||||
@ -272,6 +284,18 @@ function DataTable({
|
||||
) : (<DefaultCell>{cell.render("Cell")}</DefaultCell>)
|
||||
)
|
||||
}
|
||||
{
|
||||
cell.column.type === "htmlAndTooltip" && (
|
||||
<DefaultCell>
|
||||
|
||||
<NoMaxWidthTooltip title={parse(row.values["tooltip"])}>
|
||||
<MDBox>
|
||||
{parse(cell.value)}
|
||||
</MDBox>
|
||||
</NoMaxWidthTooltip>
|
||||
</DefaultCell>
|
||||
)
|
||||
}
|
||||
{
|
||||
cell.column.type === "html" && (
|
||||
<DefaultCell>{parse(cell.value)}</DefaultCell>
|
||||
|
||||
Reference in New Issue
Block a user