diff --git a/src/qqq/components/widgets/DashboardWidgets.tsx b/src/qqq/components/widgets/DashboardWidgets.tsx index 005acf4..057f02c 100644 --- a/src/qqq/components/widgets/DashboardWidgets.tsx +++ b/src/qqq/components/widgets/DashboardWidgets.tsx @@ -97,9 +97,25 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit widgetData[i] = {}; (async () => { - widgetData[i] = await qController.widget(widgetMetaData.name, urlParams); - setWidgetData(widgetData); - setWidgetCounter(widgetCounter + 1); + try + { + widgetData[i] = await qController.widget(widgetMetaData.name, urlParams); + setWidgetData(widgetData); + setWidgetCounter(widgetCounter + 1); + if(widgetData[i]) + { + widgetData[i]["errorLoading"] = false; + } + } + catch(e) + { + console.error(e); + if(widgetData[i]) + { + widgetData[i]["errorLoading"] = true; + } + } + forceUpdate(); })(); } @@ -111,13 +127,31 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit { const urlParams = getQueryParams(widgetMetaDataList[index], data); setCurrentUrlParams(urlParams); + widgetData[index] = {}; + + try + { + widgetData[index] = await qController.widget(widgetMetaDataList[index].name, urlParams); + setWidgetCounter(widgetCounter + 1); + setWidgetData(widgetData); + + if (widgetData[index]) + { + widgetData[index]["errorLoading"] = false; + } + } + catch(e) + { + console.error(e); + if (widgetData[index]) + { + widgetData[index]["errorLoading"] = true; + } + } - widgetData[index] = await qController.widget(widgetMetaDataList[index].name, urlParams); - setWidgetCounter(widgetCounter + 1); - setWidgetData(widgetData); forceUpdate(); })(); - }; + } function getQueryParams(widgetMetaData: QWidgetMetaData, extraParams: string): string { diff --git a/src/qqq/components/widgets/Widget.tsx b/src/qqq/components/widgets/Widget.tsx index cd23c2e..32c320e 100644 --- a/src/qqq/components/widgets/Widget.tsx +++ b/src/qqq/components/widgets/Widget.tsx @@ -46,6 +46,7 @@ export interface WidgetData }[][]; dropdownNeedsSelectedText?: string; hasPermission?: boolean; + errorLoading?: boolean; [other: string]: any; } @@ -400,6 +401,7 @@ function Widget(props: React.PropsWithChildren): JSX.Element needLabelBox ||= isSet(props.widgetMetaData?.label); } + const errorLoading = props.widgetData?.errorLoading !== undefined && props.widgetData?.errorLoading === true; const widgetContent = { @@ -465,11 +467,6 @@ function Widget(props: React.PropsWithChildren): JSX.Element ) ) } - {/* - - */} { hasPermission && ( effectiveLabelAdditionalComponentsLeft.map((component, i) => @@ -495,22 +492,29 @@ function Widget(props: React.PropsWithChildren): JSX.Element props.widgetMetaData?.isCard && (reloading ? : ) } { - hasPermission && props.widgetData?.dropdownNeedsSelectedText ? ( - - - {props.widgetData?.dropdownNeedsSelectedText} - + errorLoading ? ( + + error + An error occurred loading widget content. ) : ( - hasPermission ? ( - props.children + hasPermission && props.widgetData?.dropdownNeedsSelectedText ? ( + + + {props.widgetData?.dropdownNeedsSelectedText} + + ) : ( - You do not have permission to view this data. + hasPermission ? ( + props.children + ) : ( + You do not have permission to view this data. + ) ) ) } { - props?.footerHTML && ( + ! errorLoading && props?.footerHTML && ( {parse(props.footerHTML)} ) } diff --git a/src/qqq/pages/apps/Home.tsx b/src/qqq/pages/apps/Home.tsx index db4f326..58639d6 100644 --- a/src/qqq/pages/apps/Home.tsx +++ b/src/qqq/pages/apps/Home.tsx @@ -26,7 +26,8 @@ import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/ 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 {Box, Icon, Typography} from "@mui/material"; +import {Icon, Typography} from "@mui/material"; +import Box from "@mui/material/Box"; import Card from "@mui/material/Card"; import Divider from "@mui/material/Divider"; import Grid from "@mui/material/Grid"; @@ -316,7 +317,7 @@ function AppHome({app}: Props): JSX.Element {hasTablePermission(tableName) ? - + .MuiBox-root > .material-icons-round, -.MuiBox-root > .MuiBox-root > .material-icons-round +.big-icon .material-icons-round { font-size: 2rem !important; } .dashboard-schedule-icon { - font-size: 1rem !important; + font-size: 1.1rem !important; position: relative; - top: -13px; - margin-right: 3px; + top: -5px; + margin-right: 8px; }