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
@ -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