From 9a00d297db87a168a739214c3f6d584915bfd901 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Mon, 22 Aug 2022 11:13:32 -0500 Subject: [PATCH] QQQ-38 Update to load widgets & table counts from backend --- src/App.tsx | 2 +- src/qqq/pages/app-home/index.tsx | 326 ++++++++++++++++++------------- 2 files changed, 191 insertions(+), 137 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 0540bec..9508ad8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -226,7 +226,7 @@ export default function App() name: `${app.label}`, key: app.name, route: path, - component: , + component: , }); } else if (app.type === QAppNodeType.TABLE) diff --git a/src/qqq/pages/app-home/index.tsx b/src/qqq/pages/app-home/index.tsx index 7cda0a4..cdb68b0 100644 --- a/src/qqq/pages/app-home/index.tsx +++ b/src/qqq/pages/app-home/index.tsx @@ -33,8 +33,6 @@ import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCar import {Icon} from "@mui/material"; import MDTypography from "components/MDTypography"; import Card from "@mui/material/Card"; -import ComplexStatisticsCard from "examples/Cards/StatisticsCards/ComplexStatisticsCard"; -import ReportsLineChart from "examples/Charts/LineCharts/ReportsLineChart"; import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart"; import MDBadgeDot from "components/MDBadgeDot"; import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart"; @@ -57,6 +55,9 @@ function AppHome({app}: Props): JSX.Element const [tables, setTables] = useState([] as QTableMetaData[]); const [processes, setProcesses] = useState([] as QProcessMetaData[]); const [childApps, setChildApps] = useState([] as QAppMetaData[]); + const [tableCounts, setTableCounts] = useState(new Map()); + const [updatedTableCounts, setUpdatedTableCounts] = useState(new Date()); + const [widgets, setWidgets] = useState([] as any[]); const location = useLocation(); @@ -102,154 +103,207 @@ function AppHome({app}: Props): JSX.Element setTables(newTables); setProcesses(newProcesses); setChildApps(newChildApps); + + const tableCounts = new Map(); + newTables.forEach((table) => + { + tableCounts.set(table.name, {isLoading: true, value: null}); + + setTimeout(async () => + { + const count = await qController.count(table.name); + tableCounts.set(table.name, {isLoading: false, value: count}); + setTableCounts(tableCounts); + setUpdatedTableCounts(new Date()); + }, 1); + }); + setTableCounts(tableCounts); + + console.log(app.widgets); + if (app.widgets) + { + const widgets: any[] = []; + for (let i = 0; i < app.widgets.length; i++) + { + widgets[i] = {}; + setTimeout(async () => + { + const widget = await qController.widget(app.widgets[i]); + widgets[i] = widget; + setUpdatedTableCounts(new Date()); + }, 1); + } + setWidgets(widgets); + } }, [qInstance, location]); - const reportsBarChartData = { - labels: ["M", "T", "W", "T", "F", "S", "S"], - datasets: {label: "Sales", data: [50, 20, 10, 22, 50, 10, 40]}, - }; - - interface Types { - labels: string[]; - datasets: { - label: string; - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - data: number[]; - }[]; - } - - const demoLineChartData: Types = { - labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], - datasets: [ - { - label: "Facebook Ads", - color: "info", - data: [50, 100, 200, 190, 400, 350, 500, 450, 700], + /* + const charts = [ + { + type: "barChart", + title: "Parcel Invoice Lines per Month", + barChartData: { + labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"], + datasets: {label: "Parcel Invoice Lines", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]}, }, - { - label: "Google Ads", - color: "dark", - data: [10, 30, 40, 120, 150, 220, 280, 250, 280], + }, + { + type: "lineChart", + title: "Total Charges by Carrier per Month", + lineChartData: { + labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"], + datasets: [ + {label: "UPS", color: "info", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]}, + {label: "FedEx", color: "dark", data: [5000, 22000, 31111, 32333, 20404, 19876, 24355]}, + {label: "LSO", color: "error", data: [500, 2200, 1111, 2333, 404, 17876, 2355]}, + ], }, - ], - }; + }, + ]; + */ + + console.log(`Widgets: ${widgets} and tables: ${tables}`); + + const haveWidgets = widgets && widgets.length; + const widgetCount = widgets ? widgets.length : 0; + + // eslint-disable-next-line no-nested-ternary + const tileSizeLg = (widgetCount === 0 ? 3 : widgetCount === 1 ? 4 : 6); return ( - - - - - - - - - - - - - - - - - - - - - )} - chart={demoLineChartData} - /> - - - - - - - { - tables.length ? ( - - - - Tables - - - {tables.map((table) => ( - - - - {table.iconName || app.iconName}}} - direction="right" + { + widgetCount > 0 ? ( + + + { + widgets.map((chart) => ( + + + { + chart.type === "barChart" && ( + - - - - ))} - - - - ) : null - } + ) + } + { + chart.type === "lineChart" && ( + + + { + chart.lineChartData.datasets.map((dataSet: any) => ( + + )) + } + + + + )} + chart={chart.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }} + /> + ) + } + + + )) + } + + + ) : null + } - { - processes.length ? ( - - - - Processes + { + tables.length > 0 || processes.length > 0 || childApps.length > 0 ? ( + // eslint-disable-next-line no-nested-ternary + + { + tables.length ? ( + + + + Tables + + + {tables.map((table) => ( + + + + {table.iconName || app.iconName}}} + direction="right" + /> + + + + ))} + + - - {processes.map((process) => ( - - - - - - ))} - - - - ) : null - } + ) : null + } - { - childApps.length ? ( - - - - {childApps.map((childApp) => ( - - - - + { + processes.length ? ( + + + + Processes + + + {processes.map((process) => ( + + + + + + ))} - ))} - - - - ) : null - } - + + + ) : null + } + + { + childApps.length ? ( + + + + Apps + + + {childApps.map((childApp) => ( + + + + + + ))} + + + + ) : null + } + + ) : null + }