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

updated to show error if widgets dont load correctly, tried to make 'big icons' more specific and an 'opt in'

Browse Source
This commit is contained in:
Tim Chamberlain
2023-05-18 15:51:46 -05:00
parent 6df245ca99
commit ecbd8ed9f6
4 changed files with 51 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/qqq/components/widgets/DashboardWidgets.tsx
View File

@ -97,9 +97,19 @@ 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);
widgetData[i]["errorLoading"] = false;
}
catch(e)
{
console.error(e);
widgetData[i]["errorLoading"] = true;
}
forceUpdate();
})();
}
@ -112,9 +122,19 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
const urlParams = getQueryParams(widgetMetaDataList[index], data);
setCurrentUrlParams(urlParams);
widgetData[index] = await qController.widget(widgetMetaDataList[index].name, urlParams);
setWidgetCounter(widgetCounter + 1);
setWidgetData(widgetData);
try
{
widgetData[index] = await qController.widget(widgetMetaDataList[index].name, urlParams);
setWidgetCounter(widgetCounter + 1);
setWidgetData(widgetData);
widgetData[index]["errorLoading"] = false;
}
catch(e)
{
console.error(e);
widgetData[index]["errorLoading"] = true;
}
forceUpdate();
})();
};

32
src/qqq/components/widgets/Widget.tsx
View File

@ -43,6 +43,7 @@ export interface WidgetData
}[][];
dropdownNeedsSelectedText?: string;
hasPermission?: boolean;
errorLoading?: boolean;
}
@ -297,6 +298,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
}
const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
const errorLoading = props.widgetData?.errorLoading !== undefined && props.widgetData?.errorLoading === true;
const widgetContent =
<Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}>
<Box pr={2} display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%"}}>
@ -360,11 +362,6 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
)
)
}
{/*
<Button onClick={() => toggleFullScreenWidget()}>
{fullScreenWidgetClassName ? "-" : "+"}
</Button>
*/}
{
hasPermission && (
props.labelAdditionalComponentsLeft.map((component, i) =>
@ -386,22 +383,29 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
</Box>
</Box>
{
hasPermission && props.widgetData?.dropdownNeedsSelectedText ? (
<Box pb={3} pr={3} sx={{width: "100%", textAlign: "right"}}>
<Typography variant="body2">
{props.widgetData?.dropdownNeedsSelectedText}
</Typography>
errorLoading ? (
<Box p={3} sx={{display: "flex", justifyContent: "center", alignItems: "flex-start"}}>
<Icon color="error">error</Icon>
<Typography sx={{paddingLeft: "4px", textTransform: "revert"}} variant="button">An error occurred loading widget content.</Typography>
</Box>
) : (
hasPermission ? (
props.children
hasPermission && props.widgetData?.dropdownNeedsSelectedText ? (
<Box pb={3} pr={3} sx={{width: "100%", textAlign: "right"}}>
<Typography variant="body2">
{props.widgetData?.dropdownNeedsSelectedText}
</Typography>
</Box>
) : (
<Box mt={2} mb={5} sx={{display: "flex", justifyContent: "center"}}><Typography variant="body2">You do not have permission to view this data.</Typography></Box>
hasPermission ? (
props.children
) : (
<Box mt={2} mb={5} sx={{display: "flex", justifyContent: "center"}}><Typography variant="body2">You do not have permission to view this data.</Typography></Box>
)
)
)
}
{
props?.footerHTML && (
! errorLoading && props?.footerHTML && (
<Box mt={1} ml={3} mr={3} mb={2} sx={{fontWeight: 300, color: "#7b809a", display: "flex", alignContent: "flex-end", fontSize: "14px"}}>{parse(props.footerHTML)}</Box>
)
}

5
src/qqq/pages/apps/Home.tsx
View File

@ -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
<Grid key={table.name} item xs={12} md={12} lg={tileSizeLg}>
{hasTablePermission(tableName) ?
<Link to={table.name}>
<Box mb={3}>
<Box className="big-icon" mb={3}>
<MiniStatisticsCard
title={{fontWeight: "bold", text: table.label}}
count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))}

9
src/qqq/styles/qqq-override-styles.css
View File

@ -386,16 +386,15 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
font-size: 0.875rem;
}
.MuiGrid-root > .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;
}