QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

SPRINT-20: made pagination options avaialble for table widgets, updated 'primary color' to come from metadata where possible (at this time),

Browse Source
This commit is contained in:
Tim Chamberlain
2023-02-13 13:18:19 -06:00
parent 12aa042058
commit 57c02fe7c8
20 changed files with 1045 additions and 1001 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/qqq/components/widgets/DashboardWidgets.tsx
View File

@ -23,9 +23,9 @@ import {Skeleton} from "@mui/material";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import parse from "html-react-parser";
import React, {useEffect, useReducer, useState} from "react";
import React, {useContext, useEffect, useReducer, useState} from "react";
import {useLocation} from "react-router-dom";
import colors from "qqq/assets/theme/base/colors";
import QContext from "QContext";
import MDTypography from "qqq/components/legacy/MDTypography";
import BarChart from "qqq/components/widgets/charts/barchart/BarChart";
import HorizontalBarChart from "qqq/components/widgets/charts/barchart/HorizontalBarChart";
@ -81,6 +81,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
const [currentUrlParams, setCurrentUrlParams] = useState(null as string);
const [haveLoadedParams, setHaveLoadedParams] = useState(false);
const {accentColor} = useContext(QContext);
useEffect(() =>
{
@ -198,6 +199,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
>
<TableCard
noRowsFoundHTML={widgetData[i]?.noRowsFoundHTML}
rowsPerPage={widgetData[i]?.rowsPerPage}
hidePaginationDropdown={widgetData[i]?.hidePaginationDropdown}
data={widgetData[i]}
/>
</Widget>
@ -301,7 +304,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
{
widgetMetaData.type === "barChart" && (
<BarChart
color={colors.info.main}
color={accentColor}
title={widgetData[i]?.title}
date={`As of ${new Date().toDateString()}`}
description={widgetData[i]?.description}

2
src/qqq/components/widgets/charts/barchart/BarChart.tsx
View File

@ -101,7 +101,7 @@ const options = {
////////////////////////////////////
interface Props
{
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
color?: string
title: string;
description?: string;
date: string;

7
src/qqq/components/widgets/misc/QuickSightChart.tsx
View File

@ -21,7 +21,8 @@
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import React from "react";
import React, {useContext} from "react";
import QContext from "QContext";
import MDTypography from "qqq/components/legacy/MDTypography";
interface Props
@ -42,7 +43,9 @@ function Iframe({iframe}: IframeProps)
function QuickSightChart({label, url}: Props): JSX.Element
{
const iframe = `<iframe style='border: 0 solid #04aaef; height: 411px; width: 99%' title=${label} src=${url} />`;
const {accentColor} = useContext(QContext);
const iframe = `<iframe style='border: 0 solid ${accentColor}; height: 411px; width: 99%' title=${label} src=${url} />`;
return (
<Card sx={{height: "100%"}}>

6
src/qqq/components/widgets/misc/StepperCard.tsx
View File

@ -26,8 +26,9 @@ import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import Stepper from "@mui/material/Stepper";
import {withStyles} from "@mui/styles";
import React from "react";
import React, {useContext} from "react";
import {NavLink} from "react-router-dom";
import QContext from "QContext";
/////////////////////////////////////////////
@ -58,6 +59,7 @@ interface Props
function StepperCard({data}: Props): JSX.Element
{
const {accentColor} = useContext(QContext);
const activeStep = data && data.activeStep ? data.activeStep : 0;
const CustomizedConnector = withStyles({
@ -109,7 +111,7 @@ function StepperCard({data}: Props): JSX.Element
index === activeStep && (
<Box>
<StepLabel icon={step.iconOverride ? <Icon>{step.iconOverride}</Icon> : <RocketLaunch />} sx={{
color: step.colorOverride ?? "#04aaef",
color: step.colorOverride ?? accentColor,
fontSize: "35px",
"& .MuiStepLabel-label.MuiStepLabel-alternativeLabel":
{

40
src/qqq/components/widgets/tables/DataTable.tsx
View File

@ -42,14 +42,11 @@ import {TableDataInput} from "qqq/components/widgets/tables/TableCard";
interface Props
{
entriesPerPage?:
| false
| {
defaultValue: number;
entries: number[];
};
entriesPerPage?: number;
entriesPerPageOptions?: number[];
canSearch?: boolean;
showTotalEntries?: boolean;
hidePaginationDropdown?: boolean;
table: TableDataInput;
pagination?: {
variant: "contained" | "gradient";
@ -70,6 +67,8 @@ const NoMaxWidthTooltip = styled(({className, ...props}: TooltipProps) => (
function DataTable({
entriesPerPage,
entriesPerPageOptions,
hidePaginationDropdown,
canSearch,
showTotalEntries,
table,
@ -81,11 +80,8 @@ function DataTable({
let defaultValue: any;
let entries: any[];
if (entriesPerPage)
{
defaultValue = entriesPerPage.defaultValue ? entriesPerPage.defaultValue : "10";
entries = entriesPerPage.entries ? entriesPerPage.entries : ["10", "25", "50", "100"];
}
defaultValue = (entriesPerPage) ? entriesPerPage : "10";
entries = entriesPerPageOptions ? entriesPerPageOptions : ["10", "25", "50", "100"];
const columns = useMemo<any>(() => table.columns, [table]);
const data = useMemo<any>(() => table.rows, [table]);
@ -126,7 +122,7 @@ function DataTable({
// Set the entries per page value based on the select value
const setEntriesPerPage = (value: any) => setPageSize(value);
// Render the paginations
// Render the pagination
const renderPagination = pageOptions.map((option: any) => (
<MDPagination
item
@ -164,7 +160,7 @@ function DataTable({
if (isSorted && column.isSorted)
{
sortedValue = column.isSortedDesc ? "desc" : "asce";
sortedValue = column.isSortedDesc ? "desc" : "asc";
}
else if (isSorted)
{
@ -199,17 +195,24 @@ function DataTable({
return (
<TableContainer sx={{boxShadow: "none"}}>
{entriesPerPage || canSearch ? (
{entriesPerPage && ((hidePaginationDropdown !== undefined && ! hidePaginationDropdown) || canSearch) ? (
<Box display="flex" justifyContent="space-between" alignItems="center" p={3}>
{entriesPerPage && (
{entriesPerPage && (hidePaginationDropdown === undefined || ! hidePaginationDropdown) && (
<Box display="flex" alignItems="center">
<Autocomplete
disableClearable
value={pageSize.toString()}
options={entries}
onChange={(event, newValues) =>
onChange={(event, newValues: any) =>
{
setEntriesPerPage(parseInt(newValues[0], 10));
if(typeof newValues === "string")
{
setEntriesPerPage(parseInt(newValues, 10));
}
else
{
setEntriesPerPage(parseInt(newValues[0], 10));
}
}}
size="small"
sx={{width: "5rem"}}
@ -367,7 +370,8 @@ function DataTable({
// Declaring default props for DataTable
DataTable.defaultProps = {
entriesPerPage: {defaultValue: 10, entries: ["5", "10", "15", "20", "25"]},
entriesPerPage: 10,
entriesPerPageOptions: ["5", "10", "15", "20", "25"],
canSearch: false,
showTotalEntries: true,
pagination: {variant: "gradient", color: "info"},

7
src/qqq/components/widgets/tables/TableCard.tsx
View File

@ -52,11 +52,13 @@ export interface TableDataInput
interface Props
{
noRowsFoundHTML?: string;
rowsPerPage?: number;
hidePaginationDropdown?: boolean;
data: TableDataInput;
}
const qController = Client.getInstance();
function TableCard({noRowsFoundHTML, data}: Props): JSX.Element
function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown}: Props): JSX.Element
{
const [qInstance, setQInstance] = useState(null as QInstance);
@ -75,7 +77,8 @@ function TableCard({noRowsFoundHTML, data}: Props): JSX.Element
data && data.columns && !noRowsFoundHTML ?
<DataTable
table={data}
entriesPerPage={false}
entriesPerPage={rowsPerPage}
hidePaginationDropdown={hidePaginationDropdown}
showTotalEntries={false}
isSorted={false}
noEndBorder