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/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.22", "@kingsrook/qqq-frontend-core": "file:.yalc/@kingsrook/qqq-frontend-core",
"@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",

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

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