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

SPRINT-12: added html type widget

Browse Source
This commit is contained in:
Tim Chamberlain
2022-09-26 09:44:14 -05:00
parent d1841b038f
commit cbfd5511f5
2 changed files with 28 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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.22",
"@kingsrook/qqq-frontend-core": "file:.yalc/@kingsrook/qqq-frontend-core",
"@mui/icons-material": "5.4.1",
"@mui/material": "5.4.1",
"@mui/styled-engine": "5.4.1",

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

@ -19,10 +19,14 @@
*/
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import parse from "html-react-parser";
import React, {useEffect, useState} from "react";
import {useLocation} from "react-router-dom";
import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
import LineChart from "qqq/pages/dashboards/Widgets/LineChart";
import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
@ -44,6 +48,7 @@ DashboardWidgets.defaultProps = {
function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Element
{
const location = useLocation();
const [qInstance, setQInstance] = useState(null as QInstance);
const [widgets, setWidgets] = useState([] as any[]);
const [widgetNames, setWidgetNames] = useState([] as any[]);
@ -77,7 +82,11 @@ function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Elemen
setWidgets(widgets);
}, [qInstance, widgetNames]);
const widgetCount = widgets ? widgets.length : 0;
useEffect(() =>
{
setWidgets([] as any[]);
setWidgetNames([] as any[]);
}, [location]);
const handleDropdownOnChange = (value: string, index: number) =>
{
@ -87,8 +96,7 @@ function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Elemen
}, 1);
};
console.log(`primarkey ${entityPrimaryKey}`);
console.log(`widgets: ${JSON.stringify(widgets)}`);
const widgetCount = widgets ? widgets.length : 0;
return (
widgetCount > 0 ? (
@ -138,6 +146,22 @@ function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Elemen
</MDBox>
)
}
{
widget.type === "html" && (
<MDBox mb={3}>
<Card>
<MDBox padding="1rem">
<MDTypography variant="h6" textTransform="capitalize">
{widget.title}
</MDTypography>
<MDTypography component="div" variant="button" color="text" fontWeight="light">
{parse(widget.html)}
</MDTypography>
</MDBox>
</Card>
</MDBox>
)
}
{
widget.type === "lineChart" && (
<MDBox mb={3}>