mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-19 05:40:44 +00:00
SPRINT-12: added widget meta data
This commit is contained in:
Tim Chamberlain
@ -19,6 +19,7 @@
|
||||
*/
|
||||
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import parse from "html-react-parser";
|
||||
@ -39,21 +40,20 @@ const qController = QClient.getInstance();
|
||||
|
||||
interface Props
|
||||
{
|
||||
widgetNameList: string[];
|
||||
widgetMetaDataList: QWidgetMetaData[];
|
||||
entityPrimaryKey?: string;
|
||||
}
|
||||
|
||||
DashboardWidgets.defaultProps = {
|
||||
widgetNameList: null,
|
||||
widgetMetaDataList: null,
|
||||
entityPrimaryKey: null
|
||||
};
|
||||
|
||||
function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Element
|
||||
function DashboardWidgets({widgetMetaDataList, 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[]);
|
||||
const [widgetData, setWidgetData] = useState([] as any[]);
|
||||
const [widgetCounter, setWidgetCounter] = useState(0);
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
@ -73,86 +73,90 @@ function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Elemen
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < widgetNameList.length; i++)
|
||||
for (let i = 0; i < widgetMetaDataList.length; i++)
|
||||
{
|
||||
widgets[i] = {};
|
||||
widgetData[i] = {};
|
||||
(async () =>
|
||||
{
|
||||
widgets[i] = await qController.widget(widgetNameList[i], `id=${entityPrimaryKey}`);
|
||||
widgetData[i] = await qController.widget(widgetMetaDataList[i].name, `id=${entityPrimaryKey}`);
|
||||
setWidgetCounter(widgetCounter + 1);
|
||||
forceUpdate();
|
||||
})();
|
||||
}
|
||||
setWidgets(widgets);
|
||||
}, [qInstance, widgetNames]);
|
||||
setWidgetData(widgetData);
|
||||
}, [qInstance, widgetMetaDataList]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
setWidgets([] as any[]);
|
||||
setWidgetNames([] as any[]);
|
||||
setWidgetData([] as any[]);
|
||||
}, [location]);
|
||||
|
||||
const handleDropdownOnChange = (value: string, index: number) =>
|
||||
{
|
||||
setTimeout(async () =>
|
||||
{
|
||||
widgets[index] = await qController.widget(widgetNameList[index]);
|
||||
widgetData[index] = await qController.widget(widgetMetaDataList[index].name);
|
||||
}, 1);
|
||||
};
|
||||
|
||||
const widgetCount = widgets ? widgets.length : 0;
|
||||
console.log(widgets);
|
||||
const widgetCount = widgetMetaDataList ? widgetMetaDataList.length : 0;
|
||||
|
||||
return (
|
||||
widgetCount > 0 ? (
|
||||
<Grid item xs={12} lg={12}>
|
||||
<Grid container spacing={3}>
|
||||
{
|
||||
widgets.map((widget, i) => (
|
||||
widgetMetaDataList.map((widgetMetaData, i) => (
|
||||
<Grid key={`${i}`} item xs={12} lg={12}>
|
||||
{
|
||||
widget.type === "table" && (
|
||||
<TableCard
|
||||
color="info"
|
||||
title={widget.title}
|
||||
linkText={widget.linkText}
|
||||
linkURL={widget.linkURL}
|
||||
noRowsFoundHTML={widget.noRowsFoundHTML}
|
||||
data={widget}
|
||||
dropdownOptions={widget.dropdownOptions}
|
||||
dropdownOnChange={handleDropdownOnChange}
|
||||
widgetIndex={i}
|
||||
/>
|
||||
widgetMetaData.type === "table" && (
|
||||
widgetData && widgetData[i] ? (
|
||||
<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}
|
||||
/>
|
||||
) : null
|
||||
)
|
||||
}
|
||||
{
|
||||
widget.type === "stepper" && (
|
||||
widgetMetaData.type === "stepper" && (
|
||||
<MDBox>
|
||||
<Card sx={{marginTop: "0px", paddingTop: "0px"}}>
|
||||
<MDBox padding="1rem">
|
||||
{
|
||||
widget.title && (
|
||||
widgetMetaData.label && (
|
||||
<MDTypography variant="h5" textTransform="capitalize">
|
||||
{widget.title}
|
||||
{widgetMetaData.label}
|
||||
</MDTypography>
|
||||
)
|
||||
}
|
||||
<StepperCard data={widget} />
|
||||
<StepperCard data={widgetData[i]} />
|
||||
</MDBox>
|
||||
</Card>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
{
|
||||
widget.type === "html" && (
|
||||
widgetMetaData.type === "html" && (
|
||||
<MDBox pb={3}>
|
||||
<Card sx={{marginTop: "0px", paddingTop: "0px"}}>
|
||||
<MDBox padding="1rem">
|
||||
<MDTypography variant="h5" textTransform="capitalize">
|
||||
{widget.title}
|
||||
{widgetMetaData.label}
|
||||
</MDTypography>
|
||||
<MDTypography component="div" variant="button" color="text" fontWeight="light">
|
||||
{parse(widget.html)}
|
||||
{
|
||||
widgetData && widgetData[i] && widgetData[i].html && (
|
||||
parse(widgetData[i].html)
|
||||
)
|
||||
}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</Card>
|
||||
@ -160,12 +164,14 @@ function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Elemen
|
||||
)
|
||||
}
|
||||
{
|
||||
widget.type === "multiStatistics" && (
|
||||
<MultiStatisticsCard
|
||||
color="info"
|
||||
title={widget.title}
|
||||
data={widget}
|
||||
/>
|
||||
widgetMetaData.type === "multiStatistics" && (
|
||||
widgetData && widgetData[i] ? (
|
||||
<MultiStatisticsCard
|
||||
color="info"
|
||||
title={widgetData[i].title}
|
||||
data={widgetData[i]}
|
||||
/>
|
||||
) : null
|
||||
)
|
||||
}
|
||||
</Grid>
|
||||
@ -174,47 +180,53 @@ function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Elemen
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={widgetCount === 1 ? 3 : 6}>
|
||||
{
|
||||
widgets.map((widget, i) => (
|
||||
widgetMetaDataList.map((widgetMetaData, 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>
|
||||
widgetMetaData.type === "quickSightChart" && (
|
||||
widgetData && widgetData[i] ? (
|
||||
<MDBox mb={3}>
|
||||
<QuickSightChart url={widgetData[i].url} label={widgetData[i].label} />
|
||||
</MDBox>
|
||||
) : null
|
||||
)
|
||||
}
|
||||
{
|
||||
widget.type === "barChart" && (
|
||||
<MDBox mb={3}>
|
||||
<BarChart
|
||||
color="info"
|
||||
title={widget.title}
|
||||
date={`As of ${new Date().toDateString()}`}
|
||||
data={widget.chartData}
|
||||
/>
|
||||
</MDBox>
|
||||
widgetMetaData.type === "barChart" && (
|
||||
widgetData && widgetData[i] ? (
|
||||
<MDBox mb={3}>
|
||||
<BarChart
|
||||
color="info"
|
||||
title={widgetData[i].title}
|
||||
date={`As of ${new Date().toDateString()}`}
|
||||
data={widgetData[i].chartData}
|
||||
/>
|
||||
</MDBox>
|
||||
) : null
|
||||
)
|
||||
}
|
||||
{
|
||||
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} />
|
||||
))
|
||||
}
|
||||
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>
|
||||
<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>
|
||||
)}
|
||||
chart={widgetData[i].lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
|
||||
/>
|
||||
</MDBox>
|
||||
) : null
|
||||
)
|
||||
}
|
||||
</Grid>
|
||||
|
||||
@ -19,7 +19,9 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {Theme} from "@mui/material/styles";
|
||||
@ -30,7 +32,8 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
interface Props
|
||||
{
|
||||
tableSections: QTableSection[];
|
||||
widgetNames?: string[];
|
||||
metaData?: QTableMetaData;
|
||||
widgetMetaDataList?: QWidgetMetaData[];
|
||||
light?: boolean;
|
||||
}
|
||||
|
||||
@ -41,7 +44,7 @@ interface SidebarEntry
|
||||
label: string;
|
||||
}
|
||||
|
||||
function QRecordSidebar({tableSections, widgetNames, light}: Props): JSX.Element
|
||||
function QRecordSidebar({tableSections, widgetMetaDataList, light}: Props): JSX.Element
|
||||
{
|
||||
/////////////////////////////////////////////////////////
|
||||
// insert widgets after identity (first) table section //
|
||||
@ -49,11 +52,11 @@ function QRecordSidebar({tableSections, widgetNames, light}: Props): JSX.Element
|
||||
const sidebarEntries = [] as SidebarEntry[];
|
||||
tableSections && tableSections.forEach((section, index) =>
|
||||
{
|
||||
if (index === 1 && widgetNames)
|
||||
if (index === 1 && widgetMetaDataList)
|
||||
{
|
||||
widgetNames.forEach((name) =>
|
||||
widgetMetaDataList.forEach((widget) =>
|
||||
{
|
||||
sidebarEntries.push({iconName: "troubleshoot", name: name, label: name});
|
||||
sidebarEntries.push({iconName: widget.icon, name: widget.name, label: widget.label});
|
||||
});
|
||||
}
|
||||
sidebarEntries.push({iconName: section.iconName, name: section.name, label: section.label});
|
||||
|
||||
@ -24,6 +24,7 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QReportMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QReportMetaData";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {Icon} from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Divider from "@mui/material/Divider";
|
||||
@ -123,17 +124,16 @@ function AppHome({app}: Props): JSX.Element
|
||||
|
||||
if (app.widgets)
|
||||
{
|
||||
const widgets: any[] = [];
|
||||
for (let i = 0; i < app.widgets.length; i++)
|
||||
///////////////////////////
|
||||
// load widget meta data //
|
||||
///////////////////////////
|
||||
const matchingWidgets: QWidgetMetaData[] = [];
|
||||
app.widgets.forEach((widgetName) =>
|
||||
{
|
||||
widgets[i] = {};
|
||||
setTimeout(async () =>
|
||||
{
|
||||
widgets[i] = await qController.widget(app.widgets[i]);
|
||||
setUpdatedTableCounts(new Date());
|
||||
}, 1);
|
||||
}
|
||||
setWidgets(widgets);
|
||||
const widget = qInstance.widgets.get(widgetName);
|
||||
matchingWidgets.push(widget);
|
||||
});
|
||||
setWidgets(matchingWidgets);
|
||||
}
|
||||
}, [qInstance, location]);
|
||||
|
||||
@ -144,8 +144,6 @@ function AppHome({app}: Props): JSX.Element
|
||||
|
||||
const handleDropdownOnChange = (value: string, index: number) =>
|
||||
{
|
||||
alert(value);
|
||||
|
||||
setTimeout(async () =>
|
||||
{
|
||||
widgets[index] = await qController.widget(app.widgets[index]);
|
||||
@ -158,7 +156,7 @@ function AppHome({app}: Props): JSX.Element
|
||||
<MDBox mt={4}>
|
||||
{app.widgets && (
|
||||
<Grid container spacing={3}>
|
||||
<DashboardWidgets widgetNameList={app.widgets} />
|
||||
<DashboardWidgets widgetMetaDataList={widgets} />
|
||||
</Grid>
|
||||
)}
|
||||
<Grid container spacing={3}>
|
||||
|
||||
@ -20,11 +20,12 @@
|
||||
*/
|
||||
|
||||
import {Check, Pending, RocketLaunch} from "@mui/icons-material";
|
||||
import {StepConnector} from "@mui/material";
|
||||
import {Skeleton, StepConnector} from "@mui/material";
|
||||
import Step from "@mui/material/Step";
|
||||
import StepLabel from "@mui/material/StepLabel";
|
||||
import Stepper from "@mui/material/Stepper";
|
||||
import {withStyles} from "@mui/styles";
|
||||
import React from "react";
|
||||
import {NavLink} from "react-router-dom";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
|
||||
@ -71,12 +72,14 @@ function StepperCard({data}: Props): JSX.Element
|
||||
}
|
||||
})(StepConnector);
|
||||
|
||||
console.log(`data ${JSON.stringify(data)}`);
|
||||
|
||||
return (
|
||||
<Stepper connector={<CustomizedConnector />} activeStep={activeStep} alternativeLabel sx={{paddingBottom: "0px", boxShadow: "none", background: "white"}}>
|
||||
{
|
||||
data && (
|
||||
data && data.steps ? (
|
||||
data.steps.map((step, index) => (
|
||||
<Step key={step.label} sx={{color: "red"}}>
|
||||
<Step key={step.label}>
|
||||
{
|
||||
index < activeStep && (
|
||||
<MDBox>
|
||||
@ -128,6 +131,8 @@ function StepperCard({data}: Props): JSX.Element
|
||||
}
|
||||
</Step>
|
||||
))
|
||||
) : (
|
||||
<Skeleton width="100%" height="80px" />
|
||||
)
|
||||
}
|
||||
</Stepper>
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
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 Avatar from "@mui/material/Avatar";
|
||||
import Button from "@mui/material/Button";
|
||||
@ -77,7 +78,7 @@ function ViewContents({id, table}: Props): JSX.Element
|
||||
const [nonT1TableSections, setNonT1TableSections] = useState([] as QTableSection[]);
|
||||
const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]);
|
||||
const [actionsMenu, setActionsMenu] = useState(null);
|
||||
const [widgets, setWidgets] = useState([] as string[]);
|
||||
const [tableWidgets, setTableWidgets] = useState([] as QWidgetMetaData[]);
|
||||
const [searchParams] = useSearchParams();
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
@ -113,7 +114,17 @@ function ViewContents({id, table}: Props): JSX.Element
|
||||
/////////////////////
|
||||
const record = await qController.get(tableName, id);
|
||||
setRecord(record);
|
||||
setWidgets(tableMetaData.widgets);
|
||||
|
||||
///////////////////////////
|
||||
// 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 //
|
||||
@ -245,7 +256,7 @@ function ViewContents({id, table}: Props): JSX.Element
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} lg={3}>
|
||||
<QRecordSidebar tableSections={tableSections} widgetNames={widgets} />
|
||||
<QRecordSidebar tableSections={tableSections} widgetMetaDataList={tableWidgets} />
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={9}>
|
||||
|
||||
@ -273,7 +284,7 @@ function ViewContents({id, table}: Props): JSX.Element
|
||||
</Grid>
|
||||
</Grid>
|
||||
{tableMetaData && tableMetaData.widgets && record && (
|
||||
<DashboardWidgets widgetNameList={tableMetaData.widgets} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} />
|
||||
<DashboardWidgets widgetMetaDataList={tableWidgets} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} />
|
||||
)}
|
||||
{nonT1TableSections.length > 0 ? nonT1TableSections.map(({
|
||||
iconName, label, name, fieldNames, tier,
|
||||
|
||||
Reference in New Issue
Block a user