mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 05:10:45 +00:00
SPRINT-12: added widgets to tables
This commit is contained in:
Tim Chamberlain
172
src/qqq/components/DashboardWidgets.tsx
Normal file
172
src/qqq/components/DashboardWidgets.tsx
Normal file
@ -0,0 +1,172 @@
|
||||
/* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
|
||||
import LineChart from "qqq/pages/dashboards/Widgets/LineChart";
|
||||
import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
|
||||
import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
|
||||
const qController = QClient.getInstance();
|
||||
|
||||
interface Props
|
||||
{
|
||||
widgetNameList: string[];
|
||||
entityPrimaryKey?: string;
|
||||
}
|
||||
|
||||
DashboardWidgets.defaultProps = {
|
||||
widgetNameList: null,
|
||||
entityPrimaryKey: null
|
||||
};
|
||||
|
||||
function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Element
|
||||
{
|
||||
const [qInstance, setQInstance] = useState(null as QInstance);
|
||||
const [widgets, setWidgets] = useState([] as any[]);
|
||||
const [widgetNames, setWidgetNames] = useState([] as any[]);
|
||||
const [widgetCounter, setWidgetCounter] = useState(0);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
(async () =>
|
||||
{
|
||||
const newQInstance = await qController.loadMetaData();
|
||||
setQInstance(newQInstance);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if (!qInstance)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < widgetNameList.length; i++)
|
||||
{
|
||||
widgets[i] = {};
|
||||
(async () =>
|
||||
{
|
||||
widgets[i] = await qController.widget(widgetNameList[i], `id=${entityPrimaryKey}`);
|
||||
setWidgetCounter(widgetCounter + 1);
|
||||
})();
|
||||
}
|
||||
setWidgets(widgets);
|
||||
}, [qInstance, widgetNames]);
|
||||
|
||||
const widgetCount = widgets ? widgets.length : 0;
|
||||
|
||||
const handleDropdownOnChange = (value: string, index: number) =>
|
||||
{
|
||||
setTimeout(async () =>
|
||||
{
|
||||
widgets[index] = await qController.widget(widgetNameList[index]);
|
||||
}, 1);
|
||||
};
|
||||
|
||||
console.log(`primarkey ${entityPrimaryKey}`);
|
||||
console.log(`widgets: ${JSON.stringify(widgets)}`);
|
||||
|
||||
return (
|
||||
widgetCount > 0 ? (
|
||||
<Grid item xs={12} lg={12}>
|
||||
<Grid container spacing={3}>
|
||||
{
|
||||
widgets.map((widget, i) => (
|
||||
<Grid key={`${i}`} item xs={12} lg={12}>
|
||||
<MDBox mb={3}>
|
||||
{
|
||||
widget.type === "table" && (
|
||||
<TableCard
|
||||
color="info"
|
||||
title={widget.title}
|
||||
data={widget}
|
||||
dropdownOptions={widget.dropdownOptions}
|
||||
dropdownOnChange={handleDropdownOnChange}
|
||||
widgetIndex={i}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</MDBox>
|
||||
</Grid>
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={widgetCount === 1 ? 3 : 6}>
|
||||
{
|
||||
widgets.map((widget, i) => (
|
||||
<Grid key={`${i}`} item xs={12} lg={widgetCount === 1 ? 12 : 6}>
|
||||
{
|
||||
widget.type === "quickSightChart" && (
|
||||
<MDBox mb={3}>
|
||||
<QuickSightChart url={widget.url} label={widget.label} />
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
{
|
||||
widget.type === "barChart" && (
|
||||
<MDBox mb={3}>
|
||||
<BarChart
|
||||
color="info"
|
||||
title={widget.title}
|
||||
date={`As of ${new Date().toDateString()}`}
|
||||
data={widget.chartData}
|
||||
/>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
{
|
||||
widget.type === "lineChart" && (
|
||||
<MDBox mb={3}>
|
||||
<LineChart
|
||||
title={widget.title}
|
||||
description={(
|
||||
<MDBox display="flex" justifyContent="space-between">
|
||||
<MDBox display="flex" ml={-1}>
|
||||
{
|
||||
widget.lineChartData.datasets.map((dataSet: any) => (
|
||||
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
|
||||
))
|
||||
}
|
||||
</MDBox>
|
||||
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
|
||||
</MDBox>
|
||||
)}
|
||||
chart={widget.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
|
||||
/>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
</Grid>
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
</Grid>
|
||||
) : null
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardWidgets;
|
||||
@ -30,20 +30,46 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
interface Props
|
||||
{
|
||||
tableSections: QTableSection[];
|
||||
widgetNames?: string[];
|
||||
light?: boolean;
|
||||
}
|
||||
|
||||
function QRecordSidebar({tableSections, light}: Props): JSX.Element
|
||||
interface SidebarEntry
|
||||
{
|
||||
iconName: string;
|
||||
name: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
function QRecordSidebar({tableSections, widgetNames, light}: Props): JSX.Element
|
||||
{
|
||||
/////////////////////////////////////////////////////////
|
||||
// insert widgets after identity (first) table section //
|
||||
/////////////////////////////////////////////////////////
|
||||
const sidebarEntries = [] as SidebarEntry[];
|
||||
tableSections.forEach((section, index) =>
|
||||
{
|
||||
if (index === 1 && widgetNames)
|
||||
{
|
||||
widgetNames.forEach((name) =>
|
||||
{
|
||||
sidebarEntries.push({iconName: "troubleshoot", name: name, label: name});
|
||||
});
|
||||
}
|
||||
sidebarEntries.push({iconName: section.iconName, name: section.name, label: section.label});
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<Card sx={{borderRadius: ({borders: {borderRadius}}) => borderRadius.lg, position: "sticky", top: "1%"}}>
|
||||
<MDBox component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
|
||||
{
|
||||
tableSections ? tableSections.map((section: QTableSection, key: number) => (
|
||||
<MDBox key={`section-${section.name}`} component="li" pt={key === 0 ? 0 : 1}>
|
||||
sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (
|
||||
|
||||
<MDBox key={`section-${entry.name}`} component="li" pt={key === 0 ? 0 : 1}>
|
||||
<MDTypography
|
||||
component="a"
|
||||
href={`#${section.name}`}
|
||||
href={`#${entry.name}`}
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
sx={({
|
||||
@ -64,9 +90,9 @@ function QRecordSidebar({tableSections, light}: Props): JSX.Element
|
||||
})}
|
||||
>
|
||||
<MDBox mr={1.5} lineHeight={1} color="black">
|
||||
<Icon fontSize="small">{section.iconName}</Icon>
|
||||
<Icon fontSize="small">{entry.iconName}</Icon>
|
||||
</MDBox>
|
||||
{section.label}
|
||||
{entry.label}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
)) : null
|
||||
|
||||
@ -18,12 +18,15 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {tooltipClasses, TooltipProps} from "@mui/material";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {styled} from "@mui/material/styles";
|
||||
import Table from "@mui/material/Table";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableContainer from "@mui/material/TableContainer";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import parse from "html-react-parser";
|
||||
import {useEffect, useMemo, useState} from "react";
|
||||
import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
|
||||
@ -62,6 +65,15 @@ interface Props
|
||||
noEndBorder?: boolean;
|
||||
}
|
||||
|
||||
const NoMaxWidthTooltip = styled(({className, ...props}: TooltipProps) => (
|
||||
<Tooltip {...props} classes={{popper: className}} />
|
||||
))({
|
||||
[`& .${tooltipClasses.tooltip}`]: {
|
||||
maxWidth: "none",
|
||||
textAlign: "left"
|
||||
},
|
||||
});
|
||||
|
||||
function DataTable({
|
||||
entriesPerPage,
|
||||
canSearch,
|
||||
@ -272,6 +284,18 @@ function DataTable({
|
||||
) : (<DefaultCell>{cell.render("Cell")}</DefaultCell>)
|
||||
)
|
||||
}
|
||||
{
|
||||
cell.column.type === "htmlAndTooltip" && (
|
||||
<DefaultCell>
|
||||
|
||||
<NoMaxWidthTooltip title={parse(row.values["tooltip"])}>
|
||||
<MDBox>
|
||||
{parse(cell.value)}
|
||||
</MDBox>
|
||||
</NoMaxWidthTooltip>
|
||||
</DefaultCell>
|
||||
)
|
||||
}
|
||||
{
|
||||
cell.column.type === "html" && (
|
||||
<DefaultCell>{parse(cell.value)}</DefaultCell>
|
||||
|
||||
@ -31,16 +31,12 @@ import Grid from "@mui/material/Grid";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Link, useLocation} from "react-router-dom";
|
||||
import BaseLayout from "qqq/components/BaseLayout";
|
||||
import DashboardWidgets from "qqq/components/DashboardWidgets";
|
||||
import ProcessLinkCard from "qqq/components/ProcessLinkCard";
|
||||
import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
import MiniStatisticsCard from "qqq/components/Temporary/MiniStatisticsCard";
|
||||
import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
|
||||
import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
|
||||
import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import LineChart from "../dashboards/Widgets/LineChart";
|
||||
|
||||
const qController = QClient.getInstance();
|
||||
|
||||
@ -160,81 +156,12 @@ function AppHome({app}: Props): JSX.Element
|
||||
return (
|
||||
<BaseLayout>
|
||||
<MDBox mt={4}>
|
||||
{app.widgets && (
|
||||
<Grid container spacing={3}>
|
||||
<DashboardWidgets widgetNameList={app.widgets} />
|
||||
</Grid>
|
||||
)}
|
||||
<Grid container spacing={3}>
|
||||
{
|
||||
widgetCount > 0 ? (
|
||||
<Grid item xs={12} lg={12}>
|
||||
<Grid container spacing={3}>
|
||||
{
|
||||
widgets.map((chart, i) => (
|
||||
<Grid key={`${i}`} item xs={12} lg={12}>
|
||||
<MDBox mb={3}>
|
||||
{
|
||||
chart.type === "table" && (
|
||||
<TableCard
|
||||
color="info"
|
||||
title={chart.title}
|
||||
data={chart}
|
||||
dropdownOptions={chart.dropdownOptions}
|
||||
dropdownOnChange={handleDropdownOnChange}
|
||||
widgetIndex={i}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</MDBox>
|
||||
</Grid>
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={widgetCount === 1 ? 3 : 6}>
|
||||
{
|
||||
widgets.map((chart, i) => (
|
||||
<Grid key={`${i}`} item xs={12} lg={widgetCount === 1 ? 12 : 6}>
|
||||
<MDBox mb={3}>
|
||||
{
|
||||
chart.type === "quickSightChart" && (
|
||||
<QuickSightChart url={chart.url} label={chart.label} />
|
||||
)
|
||||
}
|
||||
{
|
||||
chart.type === "barChart" && (
|
||||
<BarChart
|
||||
color="info"
|
||||
title={chart.title}
|
||||
date={`As of ${new Date().toDateString()}`}
|
||||
data={chart.chartData}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
chart.type === "lineChart" && (
|
||||
<LineChart
|
||||
title={chart.title}
|
||||
description={(
|
||||
<MDBox display="flex" justifyContent="space-between">
|
||||
<MDBox display="flex" ml={-1}>
|
||||
{
|
||||
chart.lineChartData.datasets.map((dataSet: any) => (
|
||||
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
|
||||
))
|
||||
}
|
||||
</MDBox>
|
||||
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
|
||||
</MDBox>
|
||||
)}
|
||||
chart={chart.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</MDBox>
|
||||
</Grid>
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
</Grid>
|
||||
) : null
|
||||
}
|
||||
|
||||
{
|
||||
app.sections ? (
|
||||
<Grid item xs={12} lg={widgetCount === 0 ? 12 : widgetCount === 1 ? 9 : 6}>
|
||||
|
||||
@ -37,7 +37,10 @@ interface Props
|
||||
{
|
||||
title: string;
|
||||
data: TableDataInput;
|
||||
dropdownOptions?: string[];
|
||||
dropdownOptions?: {
|
||||
id: string,
|
||||
name: string
|
||||
}[];
|
||||
dropdownOnChange?: (selectedValue: string, widgetIndex: number) => void;
|
||||
widgetIndex?: number;
|
||||
|
||||
@ -49,7 +52,8 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
|
||||
const openArrowIcon = "arrow_drop_down";
|
||||
const closeArrowIcon = "arrow_drop_up";
|
||||
const [dropdown, setDropdown] = useState<string | null>(null);
|
||||
const [dropdownValue, setDropdownValue] = useState<string>("");
|
||||
const [dropdownValue, setDropdownValue] = useState("");
|
||||
const [dropdownLabel, setDropdownLabel] = useState<string>("");
|
||||
const [dropdownIcon, setDropdownIcon] = useState<string>(openArrowIcon);
|
||||
|
||||
const openDropdown = ({currentTarget}: any) =>
|
||||
@ -79,8 +83,8 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
|
||||
disableAutoFocusItem
|
||||
>
|
||||
{
|
||||
dropdownOptions.map((option) =>
|
||||
<MenuItem key={option} onClick={close}>{option}</MenuItem>
|
||||
dropdownOptions.map((optionMap, index: number) =>
|
||||
<MenuItem id={optionMap["id"]} key={index} onClick={close}>{optionMap["name"]}</MenuItem>
|
||||
)
|
||||
}
|
||||
</Menu>
|
||||
@ -93,7 +97,8 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
|
||||
console.log(dropdownOptions);
|
||||
if (dropdownOptions)
|
||||
{
|
||||
setDropdownValue(dropdownOptions[0]);
|
||||
setDropdownValue(dropdownOptions[0]["id"]);
|
||||
setDropdownLabel(dropdownOptions[0]["name"]);
|
||||
}
|
||||
}, [dropdownOptions]);
|
||||
|
||||
@ -103,7 +108,7 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
|
||||
<Grid container>
|
||||
<Grid item xs={7}>
|
||||
<MDBox pt={3} px={3}>
|
||||
<MDTypography variant="h6" fontWeight="medium">
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
{title}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
@ -111,6 +116,13 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
|
||||
<Grid item xs={5}>
|
||||
{dropdownOptions && (
|
||||
<MDBox p={2} width="100%" textAlign="right" lineHeight={1}>
|
||||
<MDTypography
|
||||
variant="caption"
|
||||
color="secondary"
|
||||
fontWeight="regular"
|
||||
>
|
||||
<strong>Billing Period: </strong>
|
||||
</MDTypography>
|
||||
<MDTypography
|
||||
variant="caption"
|
||||
color="secondary"
|
||||
@ -118,7 +130,7 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
|
||||
sx={{cursor: "pointer"}}
|
||||
onClick={openDropdown}
|
||||
>
|
||||
{dropdownValue}
|
||||
{dropdownLabel}
|
||||
</MDTypography>
|
||||
{renderMenu(dropdown, openDropdown, closeDropdown, dropdownIcon)}
|
||||
</MDBox>
|
||||
|
||||
@ -37,6 +37,7 @@ import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import React, {useReducer, useState} from "react";
|
||||
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
|
||||
import DashboardWidgets from "qqq/components/DashboardWidgets";
|
||||
import {QActionsMenuButton, QDeleteButton, QEditButton} from "qqq/components/QButtons";
|
||||
import QRecordSidebar from "qqq/components/QRecordSidebar";
|
||||
import colors from "qqq/components/Temporary/colors";
|
||||
@ -66,7 +67,6 @@ function ViewContents({id, table}: Props): JSX.Element
|
||||
const tableName = table ? table.name : pathParts[pathParts.length - 2];
|
||||
|
||||
const [asyncLoadInited, setAsyncLoadInited] = useState(false);
|
||||
const [nameValues, setNameValues] = useState([] as JSX.Element[]);
|
||||
const [sectionFieldElements, setSectionFieldElements] = useState(null as Map<string, JSX.Element[]>);
|
||||
const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
|
||||
const [tableMetaData, setTableMetaData] = useState(null);
|
||||
@ -77,6 +77,7 @@ function ViewContents({id, table}: Props): JSX.Element
|
||||
const [nonT1TableSections, setNonT1TableSections] = useState([] as QTableSection[]);
|
||||
const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]);
|
||||
const [actionsMenu, setActionsMenu] = useState(null);
|
||||
const [widgets, setWidgets] = useState([] as string[]);
|
||||
const [searchParams] = useSearchParams();
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
@ -106,6 +107,7 @@ function ViewContents({id, table}: Props): JSX.Element
|
||||
/////////////////////
|
||||
const record = await qController.get(tableName, id);
|
||||
setRecord(record);
|
||||
setWidgets(tableMetaData.widgets);
|
||||
|
||||
/////////////////////////////////////////////////
|
||||
// define the sections, e.g., for the left-bar //
|
||||
@ -237,7 +239,7 @@ function ViewContents({id, table}: Props): JSX.Element
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} lg={3}>
|
||||
<QRecordSidebar tableSections={tableSections} />
|
||||
<QRecordSidebar tableSections={tableSections} widgetNames={widgets} />
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={9}>
|
||||
|
||||
@ -264,6 +266,9 @@ function ViewContents({id, table}: Props): JSX.Element
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{tableMetaData && tableMetaData.widgets && record && (
|
||||
<DashboardWidgets widgetNameList={tableMetaData.widgets} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} />
|
||||
)}
|
||||
{nonT1TableSections.length > 0 ? nonT1TableSections.map(({
|
||||
iconName, label, name, fieldNames, tier,
|
||||
}: any) => (
|
||||
|
||||
Reference in New Issue
Block a user