mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 12:50:43 +00:00
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:
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
Reference in New Issue
Block a user