Merge pull request #45 from Kingsrook/feature/CE-989-bug-performance-issue

CE-989 add option to (not) includeTableCountsOn(app)HomeScreen
This commit is contained in:
tim-chamberlain
2024-03-08 10:56:11 -06:00
committed by GitHub
2 changed files with 118 additions and 32 deletions

View File

@ -22,7 +22,9 @@
package com.kingsrook.qqq.frontend.materialdashboard.model.metadata; package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
import com.kingsrook.qqq.backend.core.model.metadata.layout.QAppMetaData;
import com.kingsrook.qqq.backend.core.model.metadata.layout.QSupplementalAppMetaData; import com.kingsrook.qqq.backend.core.model.metadata.layout.QSupplementalAppMetaData;
import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
/******************************************************************************* /*******************************************************************************
@ -30,7 +32,39 @@ import com.kingsrook.qqq.backend.core.model.metadata.layout.QSupplementalAppMeta
*******************************************************************************/ *******************************************************************************/
public class MaterialDashboardAppMetaData extends QSupplementalAppMetaData public class MaterialDashboardAppMetaData extends QSupplementalAppMetaData
{ {
public static final String TYPE_NAME = "materialDashboard";
private Boolean showAppLabelOnHomeScreen = true; private Boolean showAppLabelOnHomeScreen = true;
private Boolean includeTableCountsOnHomeScreen = true;
/*******************************************************************************
**
*******************************************************************************/
public static MaterialDashboardAppMetaData of(QAppMetaData app)
{
return ((MaterialDashboardAppMetaData) CollectionUtils.nonNullMap(app.getSupplementalMetaData()).get(TYPE_NAME));
}
/*******************************************************************************
** either get the supplemental meta dat attached to an app - or create a new one
** and attach it to the app, and return that.
*******************************************************************************/
public static MaterialDashboardAppMetaData ofOrWithNew(QAppMetaData app)
{
MaterialDashboardAppMetaData materialDashboardAppMetaData = of(app);
if(materialDashboardAppMetaData == null)
{
materialDashboardAppMetaData = new MaterialDashboardAppMetaData();
app.withSupplementalMetaData(materialDashboardAppMetaData);
}
return (materialDashboardAppMetaData);
}
@ -51,7 +85,7 @@ public class MaterialDashboardAppMetaData extends QSupplementalAppMetaData
@Override @Override
public String getType() public String getType()
{ {
return ("materialDashboard"); return TYPE_NAME;
} }
@ -85,4 +119,35 @@ public class MaterialDashboardAppMetaData extends QSupplementalAppMetaData
return (this); return (this);
} }
/*******************************************************************************
** Getter for includeTableCountsOnHomeScreen
*******************************************************************************/
public Boolean getIncludeTableCountsOnHomeScreen()
{
return (this.includeTableCountsOnHomeScreen);
}
/*******************************************************************************
** Setter for includeTableCountsOnHomeScreen
*******************************************************************************/
public void setIncludeTableCountsOnHomeScreen(Boolean includeTableCountsOnHomeScreen)
{
this.includeTableCountsOnHomeScreen = includeTableCountsOnHomeScreen;
}
/*******************************************************************************
** Fluent setter for includeTableCountsOnHomeScreen
*******************************************************************************/
public MaterialDashboardAppMetaData withIncludeTableCountsOnHomeScreen(Boolean includeTableCountsOnHomeScreen)
{
this.includeTableCountsOnHomeScreen = includeTableCountsOnHomeScreen;
return (this);
}
} }

View File

@ -77,9 +77,11 @@ function AppHome({app}: Props): JSX.Element
const mdbMetaData = app?.supplementalAppMetaData?.get("materialDashboard"); const mdbMetaData = app?.supplementalAppMetaData?.get("materialDashboard");
let showAppLabelOnHomeScreen = true; let showAppLabelOnHomeScreen = true;
let includeTableCountsOnHomeScreen = true;
if(mdbMetaData) if(mdbMetaData)
{ {
showAppLabelOnHomeScreen = mdbMetaData.showAppLabelOnHomeScreen; showAppLabelOnHomeScreen = mdbMetaData.showAppLabelOnHomeScreen;
includeTableCountsOnHomeScreen = mdbMetaData.includeTableCountsOnHomeScreen;
} }
useEffect(() => useEffect(() =>
@ -129,48 +131,60 @@ function AppHome({app}: Props): JSX.Element
const tableCountTexts = new Map<string, string>(); const tableCountTexts = new Map<string, string>();
newTables.forEach((table) => newTables.forEach((table) =>
{ {
tableCounts.set(table.name, {isLoading: true, value: null}); if(includeTableCountsOnHomeScreen)
setTimeout(async () =>
{ {
const tableMetaData = await qController.loadTableMetaData(table.name); tableCounts.set(table.name, {isLoading: true, value: null});
let countResult = null; setTimeout(async () =>
if(tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
{ {
try const tableMetaData = await qController.loadTableMetaData(table.name);
let countResult = null;
if (tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
{ {
[countResult] = await qController.count(table.name); try
{
[countResult] = await qController.count(table.name);
if (countResult !== null && countResult !== undefined) if (countResult !== null && countResult !== undefined)
{ {
tableCountNumbers.set(table.name, countResult.toLocaleString()); tableCountNumbers.set(table.name, countResult.toLocaleString());
tableCountTexts.set(table.name, countResult === 1 ? "total record" : "total records"); tableCountTexts.set(table.name, countResult === 1 ? "total record" : "total records");
}
else
{
tableCountNumbers.set(table.name, "");
tableCountTexts.set(table.name, " ");
}
} }
else catch (e)
{ {
console.log("Caught: " + e);
tableCountNumbers.set(table.name, ""); tableCountNumbers.set(table.name, "");
tableCountTexts.set(table.name, " "); tableCountTexts.set(table.name, " ");
} }
} }
catch(e) else
{ {
console.log("Caught: " + e);
tableCountNumbers.set(table.name, ""); tableCountNumbers.set(table.name, "");
tableCountTexts.set(table.name, " "); tableCountTexts.set(table.name, " ");
} }
}
else
{
tableCountNumbers.set(table.name, "");
tableCountTexts.set(table.name, " ");
}
tableCounts.set(table.name, {isLoading: false, value: countResult}); tableCounts.set(table.name, {isLoading: false, value: countResult});
setTableCounts(tableCounts);
setTableCountNumbers(tableCountNumbers);
setTableCountTexts(tableCountTexts);
setUpdatedTableCounts(new Date());
}, 1);
}
else
{
tableCounts.set(table.name, {isLoading: false, value: null});
tableCountNumbers.set(table.name, " ");
tableCountTexts.set(table.name, " ");
setTableCounts(tableCounts); setTableCounts(tableCounts);
setTableCountNumbers(tableCountNumbers); setTableCountNumbers(tableCountNumbers);
setTableCountTexts(tableCountTexts); setTableCountTexts(tableCountTexts);
setUpdatedTableCounts(new Date()); }
}, 1);
}); });
setTableCounts(tableCounts); setTableCounts(tableCounts);
@ -299,7 +313,7 @@ function AppHome({app}: Props): JSX.Element
</Box> </Box>
{ {
section.processes ? ( section.processes ? (
<Box p={3} pl={5} pt={0} pb={1}> <Box p={3} pl={3} pt={0} pb={1}>
<MDTypography variant="h6">Actions</MDTypography> <MDTypography variant="h6">Actions</MDTypography>
</Box> </Box>
) : null ) : null
@ -340,7 +354,7 @@ function AppHome({app}: Props): JSX.Element
} }
{ {
section.reports ? ( section.reports ? (
<Box p={3} pl={5} pt={0} pb={1}> <Box p={3} pl={3} pt={0} pb={1}>
<MDTypography variant="h6">Reports</MDTypography> <MDTypography variant="h6">Reports</MDTypography>
</Box> </Box>
) : null ) : null
@ -383,7 +397,7 @@ function AppHome({app}: Props): JSX.Element
} }
{ {
section.tables ? ( section.tables ? (
<Box p={3} pl={5} pb={1} pt={0}> <Box p={3} pl={3} pb={1} pt={0}>
<MDTypography variant="h6">Data</MDTypography> <MDTypography variant="h6">Data</MDTypography>
</Box> </Box>
) : null ) : null
@ -395,6 +409,13 @@ function AppHome({app}: Props): JSX.Element
section.tables.map((tableName) => section.tables.map((tableName) =>
{ {
let table = app.childMap.get(tableName); let table = app.childMap.get(tableName);
let count = "";
let percentage = "";
if(includeTableCountsOnHomeScreen)
{
count = !tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name));
percentage = !tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name));
}
return ( return (
<Grid key={table.name} item xs={12} md={12} lg={tileSizeLg}> <Grid key={table.name} item xs={12} md={12} lg={tileSizeLg}>
{hasTablePermission(tableName) ? {hasTablePermission(tableName) ?
@ -402,8 +423,8 @@ function AppHome({app}: Props): JSX.Element
<Box className="big-icon" mb={3}> <Box className="big-icon" mb={3}>
<MiniStatisticsCard <MiniStatisticsCard
title={{fontWeight: "bold", text: table.label}} title={{fontWeight: "bold", text: table.label}}
count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))} count={count}
percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}} percentage={{color: "info", text: percentage}}
icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}} icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
/> />
</Box> </Box>
@ -411,8 +432,8 @@ function AppHome({app}: Props): JSX.Element
<Box mb={3} title="You do not have permission to access this table"> <Box mb={3} title="You do not have permission to access this table">
<MiniStatisticsCard <MiniStatisticsCard
title={{fontWeight: "bold", text: table.label}} title={{fontWeight: "bold", text: table.label}}
count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))} count={count}
percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}} percentage={{color: "info", text: percentage}}
icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}} icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
isDisabled={true} isDisabled={true}
/> />