From ecbd8ed9f62e18098518bc0b3f65ccb9f7ecc467 Mon Sep 17 00:00:00 2001
From: Tim Chamberlain <tchamberlain76@gmail.com>
Date: Thu, 18 May 2023 15:51:46 -0500
Subject: [PATCH 1/2] updated to show error if widgets dont load correctly,
 tried to make 'big icons' more specific and an 'opt in'

---
 .../components/widgets/DashboardWidgets.tsx   | 32 +++++++++++++++----
 src/qqq/components/widgets/Widget.tsx         | 32 +++++++++++--------
 src/qqq/pages/apps/Home.tsx                   |  5 +--
 src/qqq/styles/qqq-override-styles.css        |  9 +++---
 4 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/src/qqq/components/widgets/DashboardWidgets.tsx b/src/qqq/components/widgets/DashboardWidgets.tsx
index 9929d40..b870b85 100644
--- a/src/qqq/components/widgets/DashboardWidgets.tsx
+++ b/src/qqq/components/widgets/DashboardWidgets.tsx
@@ -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();
       })();
    };
diff --git a/src/qqq/components/widgets/Widget.tsx b/src/qqq/components/widgets/Widget.tsx
index 21f0582..5e5a4d3 100644
--- a/src/qqq/components/widgets/Widget.tsx
+++ b/src/qqq/components/widgets/Widget.tsx
@@ -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>
             )
          }
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
                                                    <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))}
diff --git a/src/qqq/styles/qqq-override-styles.css b/src/qqq/styles/qqq-override-styles.css
index 6bdd6a1..cd7bcd1 100644
--- a/src/qqq/styles/qqq-override-styles.css
+++ b/src/qqq/styles/qqq-override-styles.css
@@ -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;
 }

From 96bc57f5f9a18f749ae4a1c64897ed4bef88a023 Mon Sep 17 00:00:00 2001
From: Tim Chamberlain <tchamberlain76@gmail.com>
Date: Thu, 18 May 2023 19:36:16 -0500
Subject: [PATCH 2/2] fixed layout, null checks

---
 .../components/widgets/DashboardWidgets.tsx   | 24 +++++++++++++++----
 src/qqq/components/widgets/Widget.tsx         |  2 +-
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/qqq/components/widgets/DashboardWidgets.tsx b/src/qqq/components/widgets/DashboardWidgets.tsx
index b870b85..831e735 100644
--- a/src/qqq/components/widgets/DashboardWidgets.tsx
+++ b/src/qqq/components/widgets/DashboardWidgets.tsx
@@ -102,12 +102,18 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                widgetData[i] = await qController.widget(widgetMetaData.name, urlParams);
                setWidgetData(widgetData);
                setWidgetCounter(widgetCounter + 1);
-               widgetData[i]["errorLoading"] = false;
+               if(widgetData[i])
+               {
+                  widgetData[i]["errorLoading"] = false;
+               }
             }
             catch(e)
             {
                console.error(e);
-               widgetData[i]["errorLoading"] = true;
+               if(widgetData[i])
+               {
+                  widgetData[i]["errorLoading"] = true;
+               }
             }
 
             forceUpdate();
@@ -121,23 +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);
-            widgetData[index]["errorLoading"] = false;
+
+            if (widgetData[index])
+            {
+               widgetData[index]["errorLoading"] = false;
+            }
          }
          catch(e)
          {
             console.error(e);
-            widgetData[index]["errorLoading"] = true;
+            if (widgetData[index])
+            {
+               widgetData[index]["errorLoading"] = true;
+            }
          }
 
          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 5e5a4d3..447cfc9 100644
--- a/src/qqq/components/widgets/Widget.tsx
+++ b/src/qqq/components/widgets/Widget.tsx
@@ -384,7 +384,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          </Box>
          {
             errorLoading ? (
-               <Box p={3} sx={{display: "flex", justifyContent: "center", alignItems: "flex-start"}}>
+               <Box pb={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>