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

7
src/qqq/components/audits/AuditBody.tsx
View File

@ -34,8 +34,8 @@ import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";
import {useEffect, useState} from "react";
import colors from "qqq/components/legacy/colors";
import {useContext, useEffect, useState} from "react";
import QContext from "QContext";
import Client from "qqq/utils/qqq/Client";
import ValueUtils from "qqq/utils/qqq/ValueUtils";
@ -60,6 +60,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
const [auditsByDate, setAuditsByDate] = useState([] as QRecord[][]);
const [auditDetailMap, setAuditDetailMap] = useState(null as Map<number, string[]>)
const [sortDirection, setSortDirection] = useState(localStorage.getItem("audit.sortDirection") === "true");
const {accentColor} = useContext(QContext);
useEffect(() =>
{
@ -261,7 +262,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
return (
<Box key={audit.values.get("id")} display="flex" flexDirection="row" mb={1} className="singleAuditBlock">
<Avatar sx={{bgcolor: colors.info.main, zIndex: 2}}>
<Avatar sx={{bgcolor: accentColor, zIndex: 2}}>
<Icon>check</Icon>
</Avatar>
<Box p={1}>

4
src/qqq/components/forms/EntityForm.tsx
View File

@ -40,7 +40,6 @@ import QContext from "QContext";
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
import QDynamicForm from "qqq/components/forms/DynamicForm";
import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
import colors from "qqq/components/legacy/colors";
import MDTypography from "qqq/components/legacy/MDTypography";
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
import Client from "qqq/utils/qqq/Client";
@ -71,6 +70,7 @@ function EntityForm(props: Props): JSX.Element
const qController = Client.getInstance();
const tableNameParam = useParams().tableName;
const tableName = props.table === null ? tableNameParam : props.table.name;
const {accentColor} = useContext(QContext);
const [formTitle, setFormTitle] = useState("");
const [validations, setValidations] = useState({});
@ -487,7 +487,7 @@ function EntityForm(props: Props): JSX.Element
<Card id={`${t1sectionName}`} sx={{overflow: "visible", pb: 2, scrollMarginTop: "100px"}} elevation={cardElevation}>
<Box display="flex" p={3} pb={1}>
<Box mr={1.5}>
<Avatar sx={{bgcolor: colors.info.main}}>
<Avatar sx={{bgcolor: accentColor}}>
<Icon>
{tableMetaData?.iconName}
</Icon>

7
src/qqq/components/legacy/MDBadgeDot/index.tsx
View File

@ -19,9 +19,11 @@
*/
import Box from "@mui/material/Box";
import {FC, forwardRef} from "react";
import {FC, forwardRef, useContext} from "react";
import QContext from "QContext";
import MDTypography from "qqq/components/legacy/MDTypography";
// declaring props types for MDBadgeDot
interface Props
{
@ -42,6 +44,7 @@ interface Props
const MDBadgeDot: FC<Props> = forwardRef(
({variant, color, size, badgeContent, font = {}, ...rest}, ref) =>
{
const {accentColor} = useContext(QContext);
let finalSize;
let fontSize: any;
let padding;
@ -90,7 +93,7 @@ const MDBadgeDot: FC<Props> = forwardRef(
const colorValues = {
"primary": "#e91e63",
"secondary": "#7b809a",
"info": "#04aaef",
"info": accentColor,
"success": "#4CAF50",
"warning": "#fb8c00",
"error": "#F44335",

637
src/qqq/components/legacy/Theme/base/colors.ts
View File

@ -1,17 +1,17 @@
/**
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
=========================================================
* Material Dashboard 2 PRO React TS - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/**
* The base colors for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
@ -20,370 +20,375 @@ Coded by www.creative-tim.com
*/
// types
interface ColorsTypes {
main: string;
focus: string;
interface ColorsTypes
{
main: string;
focus: string;
}
interface GradientsTypes {
main: string;
state: string;
interface GradientsTypes
{
main: string;
state: string;
}
interface SocialMediaColorsTypes {
main: string;
dark: string;
interface SocialMediaColorsTypes
{
main: string;
dark: string;
}
interface BadgeColorsTypes {
background: string;
text: string;
interface BadgeColorsTypes
{
background: string;
text: string;
}
interface Types {
background:
| {
default: string;
sidenav?: string;
card?: string;
interface Types
{
background:
| {
default: string;
sidenav?: string;
card?: string;
}
| any;
white:
| {
main: string;
focus: string;
}
| any;
text:
| {
main: string;
focus: string;
primary?: string;
secondary?: string;
disabled?: string;
}
| any;
transparent:
| {
main: string;
}
| any;
black:
| {
light: string;
main: string;
focus: string;
}
| any;
primary: ColorsTypes | any;
secondary: ColorsTypes | any;
info: ColorsTypes | any;
success: ColorsTypes | any;
warning: ColorsTypes | any;
error: ColorsTypes | any;
light: ColorsTypes | any;
dark: ColorsTypes | any;
grey:
| {
[key: string | number]: string;
}
| any;
gradients:
| {
primary: GradientsTypes;
secondary: GradientsTypes;
info: GradientsTypes;
success: GradientsTypes;
warning: GradientsTypes;
error: GradientsTypes;
light: GradientsTypes;
dark: GradientsTypes;
}
| any;
socialMediaColors:
| {
facebook: SocialMediaColorsTypes;
twitter: SocialMediaColorsTypes;
instagram: SocialMediaColorsTypes;
linkedin: SocialMediaColorsTypes;
pinterest: SocialMediaColorsTypes;
youtube: SocialMediaColorsTypes;
vimeo: SocialMediaColorsTypes;
slack: SocialMediaColorsTypes;
dribbble: SocialMediaColorsTypes;
github: SocialMediaColorsTypes;
reddit: SocialMediaColorsTypes;
tumblr: SocialMediaColorsTypes;
}
| any;
badgeColors:
| {
primary: BadgeColorsTypes;
secondary: BadgeColorsTypes;
info: BadgeColorsTypes;
success: BadgeColorsTypes;
warning: BadgeColorsTypes;
error: BadgeColorsTypes;
light: BadgeColorsTypes;
dark: BadgeColorsTypes;
}
| any;
coloredShadows:
| {
[key: string]: string;
}
| any;
inputBorderColor: string;
tabs:
| {
indicator:
| {
boxShadow: string;
}
| any;
white:
| {
main: string;
focus: string;
}
| any;
text:
| {
main: string;
focus: string;
primary?: string;
secondary?: string;
disabled?: string;
}
| any;
transparent:
| {
main: string;
}
| any;
black:
| {
light: string;
main: string;
focus: string;
}
| any;
primary: ColorsTypes | any;
secondary: ColorsTypes | any;
info: ColorsTypes | any;
success: ColorsTypes | any;
warning: ColorsTypes | any;
error: ColorsTypes | any;
light: ColorsTypes | any;
dark: ColorsTypes | any;
grey:
| {
[key: string | number]: string;
}
| any;
gradients:
| {
primary: GradientsTypes;
secondary: GradientsTypes;
info: GradientsTypes;
success: GradientsTypes;
warning: GradientsTypes;
error: GradientsTypes;
light: GradientsTypes;
dark: GradientsTypes;
}
| any;
socialMediaColors:
| {
facebook: SocialMediaColorsTypes;
twitter: SocialMediaColorsTypes;
instagram: SocialMediaColorsTypes;
linkedin: SocialMediaColorsTypes;
pinterest: SocialMediaColorsTypes;
youtube: SocialMediaColorsTypes;
vimeo: SocialMediaColorsTypes;
slack: SocialMediaColorsTypes;
dribbble: SocialMediaColorsTypes;
github: SocialMediaColorsTypes;
reddit: SocialMediaColorsTypes;
tumblr: SocialMediaColorsTypes;
}
| any;
badgeColors:
| {
primary: BadgeColorsTypes;
secondary: BadgeColorsTypes;
info: BadgeColorsTypes;
success: BadgeColorsTypes;
warning: BadgeColorsTypes;
error: BadgeColorsTypes;
light: BadgeColorsTypes;
dark: BadgeColorsTypes;
}
| any;
coloredShadows:
| {
[key: string]: string;
}
| any;
inputBorderColor: string;
tabs:
| {
indicator:
| {
boxShadow: string;
}
| any;
}
| any;
| any;
}
| any;
}
const colors: Types = {
background: {
default: "#f0f2f5",
},
background: {
default: "#f0f2f5",
},
text: {
main: "#7b809a",
focus: "#7b809a",
},
text: {
main: "#7b809a",
focus: "#7b809a",
},
transparent: {
main: "transparent",
},
transparent: {
main: "transparent",
},
white: {
main: "#ffffff",
focus: "#ffffff",
},
white: {
main: "#ffffff",
focus: "#ffffff",
},
black: {
light: "#000000",
main: "#000000",
focus: "#000000",
},
black: {
light: "#000000",
main: "#000000",
focus: "#000000",
},
primary: {
main: "#e91e63",
focus: "#e91e63",
},
primary: {
main: "#e91e63",
focus: "#e91e63",
},
secondary: {
main: "#7b809a",
focus: "#8f93a9",
},
secondary: {
main: "#7b809a",
focus: "#8f93a9",
},
info: {
main: "#04aaef",
focus: "#1662C4",
},
info: {
main: "#0062FF",
focus: "#1662C4",
},
success: {
main: "#4CAF50",
focus: "#67bb6a",
},
success: {
main: "#4CAF50",
focus: "#67bb6a",
},
warning: {
main: "#fb8c00",
focus: "#fc9d26",
},
warning: {
main: "#fb8c00",
focus: "#fc9d26",
},
error: {
main: "#F44335",
focus: "#f65f53",
},
error: {
main: "#F44335",
focus: "#f65f53",
},
light: {
main: "#f0f2f5",
focus: "#f0f2f5",
},
light: {
main: "#f0f2f5",
focus: "#f0f2f5",
},
dark: {
main: "#344767",
focus: "#2c3c58",
},
dark: {
main: "#344767",
focus: "#2c3c58",
},
grey: {
100: "#f8f9fa",
200: "#f0f2f5",
300: "#dee2e6",
400: "#ced4da",
500: "#adb5bd",
600: "#6c757d",
700: "#495057",
800: "#343a40",
900: "#212529",
},
grey: {
100: "#f8f9fa",
200: "#f0f2f5",
300: "#dee2e6",
400: "#ced4da",
500: "#adb5bd",
600: "#6c757d",
700: "#495057",
800: "#343a40",
900: "#212529",
},
gradients: {
primary: {
main: "#EC407A",
state: "#D81B60",
},
gradients: {
primary: {
main: "#EC407A",
state: "#D81B60",
},
secondary: {
main: "#747b8a",
state: "#495361",
},
secondary: {
main: "#747b8a",
state: "#495361",
},
info: {
main: "#49a3f1",
state: "#04aaef",
},
info: {
main: "#49a3f1",
state: "#0062FF",
},
success: {
main: "#66BB6A",
state: "#43A047",
},
success: {
main: "#66BB6A",
state: "#43A047",
},
warning: {
main: "#FFA726",
state: "#FB8C00",
},
warning: {
main: "#FFA726",
state: "#FB8C00",
},
error: {
main: "#EF5350",
state: "#E53935",
},
error: {
main: "#EF5350",
state: "#E53935",
},
light: {
main: "#EBEFF4",
state: "#CED4DA",
},
light: {
main: "#EBEFF4",
state: "#CED4DA",
},
dark: {
main: "#42424a",
state: "#191919",
},
},
dark: {
main: "#42424a",
state: "#191919",
},
},
socialMediaColors: {
facebook: {
main: "#3b5998",
dark: "#344e86",
},
socialMediaColors: {
facebook: {
main: "#3b5998",
dark: "#344e86",
},
twitter: {
main: "#55acee",
dark: "#3ea1ec",
},
twitter: {
main: "#55acee",
dark: "#3ea1ec",
},
instagram: {
main: "#125688",
dark: "#0e456d",
},
instagram: {
main: "#125688",
dark: "#0e456d",
},
linkedin: {
main: "#0077b5",
dark: "#00669c",
},
linkedin: {
main: "#0077b5",
dark: "#00669c",
},
pinterest: {
main: "#cc2127",
dark: "#b21d22",
},
pinterest: {
main: "#cc2127",
dark: "#b21d22",
},
youtube: {
main: "#e52d27",
dark: "#d41f1a",
},
youtube: {
main: "#e52d27",
dark: "#d41f1a",
},
vimeo: {
main: "#1ab7ea",
dark: "#13a3d2",
},
vimeo: {
main: "#1ab7ea",
dark: "#13a3d2",
},
slack: {
main: "#3aaf85",
dark: "#329874",
},
slack: {
main: "#3aaf85",
dark: "#329874",
},
dribbble: {
main: "#ea4c89",
dark: "#e73177",
},
dribbble: {
main: "#ea4c89",
dark: "#e73177",
},
github: {
main: "#24292e",
dark: "#171a1d",
},
github: {
main: "#24292e",
dark: "#171a1d",
},
reddit: {
main: "#ff4500",
dark: "#e03d00",
},
reddit: {
main: "#ff4500",
dark: "#e03d00",
},
tumblr: {
main: "#35465c",
dark: "#2a3749",
},
},
tumblr: {
main: "#35465c",
dark: "#2a3749",
},
},
badgeColors: {
primary: {
background: "#f8b3ca",
text: "#cc084b",
},
badgeColors: {
primary: {
background: "#f8b3ca",
text: "#cc084b",
},
secondary: {
background: "#d7d9e1",
text: "#6c757d",
},
secondary: {
background: "#d7d9e1",
text: "#6c757d",
},
info: {
background: "#aecef7",
text: "#095bc6",
},
info: {
background: "#aecef7",
text: "#095bc6",
},
success: {
background: "#bce2be",
text: "#339537",
},
success: {
background: "#bce2be",
text: "#339537",
},
warning: {
background: "#ffd59f",
text: "#c87000",
},
warning: {
background: "#ffd59f",
text: "#c87000",
},
error: {
background: "#fcd3d0",
text: "#f61200",
},
error: {
background: "#fcd3d0",
text: "#f61200",
},
light: {
background: "#ffffff",
text: "#c7d3de",
},
light: {
background: "#ffffff",
text: "#c7d3de",
},
dark: {
background: "#8097bf",
text: "#1e2e4a",
},
},
dark: {
background: "#8097bf",
text: "#1e2e4a",
},
},
coloredShadows: {
primary: "#e91e62",
secondary: "#110e0e",
info: "#00bbd4",
success: "#4caf4f",
warning: "#ff9900",
error: "#f44336",
light: "#adb5bd",
dark: "#404040",
},
coloredShadows: {
primary: "#e91e62",
secondary: "#110e0e",
info: "#00bbd4",
success: "#4caf4f",
warning: "#ff9900",
error: "#f44336",
light: "#adb5bd",
dark: "#404040",
},
inputBorderColor: "#d2d6da",
inputBorderColor: "#d2d6da",
tabs: {
indicator: { boxShadow: "#ddd" },
},
tabs: {
indicator: {boxShadow: "#ddd"},
},
};
export default colors;

237
src/qqq/components/legacy/colors.ts
View File

@ -19,129 +19,134 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
interface ColorsTypes {
main: string;
focus: string;
interface ColorsTypes
{
main: string;
focus: string;
}
interface GradientsTypes {
main: string;
state: string;
interface GradientsTypes
{
main: string;
state: string;
}
interface SocialMediaColorsTypes {
main: string;
dark: string;
interface SocialMediaColorsTypes
{
main: string;
dark: string;
}
interface BadgeColorsTypes {
background: string;
text: string;
interface BadgeColorsTypes
{
background: string;
text: string;
}
interface Types {
background:
| {
default: string;
sidenav?: string;
card?: string;
interface Types
{
background:
| {
default: string;
sidenav?: string;
card?: string;
}
| any;
white:
| {
main: string;
focus: string;
}
| any;
text:
| {
main: string;
focus: string;
primary?: string;
secondary?: string;
disabled?: string;
}
| any;
transparent:
| {
main: string;
}
| any;
black:
| {
light: string;
main: string;
focus: string;
}
| any;
primary: ColorsTypes | any;
secondary: ColorsTypes | any;
info: ColorsTypes | any;
success: ColorsTypes | any;
warning: ColorsTypes | any;
error: ColorsTypes | any;
light: ColorsTypes | any;
dark: ColorsTypes | any;
grey:
| {
[key: string | number]: string;
}
| any;
gradients:
| {
primary: GradientsTypes;
secondary: GradientsTypes;
info: GradientsTypes;
success: GradientsTypes;
warning: GradientsTypes;
error: GradientsTypes;
light: GradientsTypes;
dark: GradientsTypes;
}
| any;
socialMediaColors:
| {
facebook: SocialMediaColorsTypes;
twitter: SocialMediaColorsTypes;
instagram: SocialMediaColorsTypes;
linkedin: SocialMediaColorsTypes;
pinterest: SocialMediaColorsTypes;
youtube: SocialMediaColorsTypes;
vimeo: SocialMediaColorsTypes;
slack: SocialMediaColorsTypes;
dribbble: SocialMediaColorsTypes;
github: SocialMediaColorsTypes;
reddit: SocialMediaColorsTypes;
tumblr: SocialMediaColorsTypes;
}
| any;
badgeColors:
| {
primary: BadgeColorsTypes;
secondary: BadgeColorsTypes;
info: BadgeColorsTypes;
success: BadgeColorsTypes;
warning: BadgeColorsTypes;
error: BadgeColorsTypes;
light: BadgeColorsTypes;
dark: BadgeColorsTypes;
}
| any;
coloredShadows:
| {
[key: string]: string;
}
| any;
inputBorderColor: string;
tabs:
| {
indicator:
| {
boxShadow: string;
}
| any;
white:
| {
main: string;
focus: string;
}
| any;
text:
| {
main: string;
focus: string;
primary?: string;
secondary?: string;
disabled?: string;
}
| any;
transparent:
| {
main: string;
}
| any;
black:
| {
light: string;
main: string;
focus: string;
}
| any;
primary: ColorsTypes | any;
secondary: ColorsTypes | any;
info: ColorsTypes | any;
success: ColorsTypes | any;
warning: ColorsTypes | any;
error: ColorsTypes | any;
light: ColorsTypes | any;
dark: ColorsTypes | any;
grey:
| {
[key: string | number]: string;
}
| any;
gradients:
| {
primary: GradientsTypes;
secondary: GradientsTypes;
info: GradientsTypes;
success: GradientsTypes;
warning: GradientsTypes;
error: GradientsTypes;
light: GradientsTypes;
dark: GradientsTypes;
}
| any;
socialMediaColors:
| {
facebook: SocialMediaColorsTypes;
twitter: SocialMediaColorsTypes;
instagram: SocialMediaColorsTypes;
linkedin: SocialMediaColorsTypes;
pinterest: SocialMediaColorsTypes;
youtube: SocialMediaColorsTypes;
vimeo: SocialMediaColorsTypes;
slack: SocialMediaColorsTypes;
dribbble: SocialMediaColorsTypes;
github: SocialMediaColorsTypes;
reddit: SocialMediaColorsTypes;
tumblr: SocialMediaColorsTypes;
}
| any;
badgeColors:
| {
primary: BadgeColorsTypes;
secondary: BadgeColorsTypes;
info: BadgeColorsTypes;
success: BadgeColorsTypes;
warning: BadgeColorsTypes;
error: BadgeColorsTypes;
light: BadgeColorsTypes;
dark: BadgeColorsTypes;
}
| any;
coloredShadows:
| {
[key: string]: string;
}
| any;
inputBorderColor: string;
tabs:
| {
indicator:
| {
boxShadow: string;
}
| any;
}
| any;
| any;
}
| any;
}
const colors: Types = {
@ -180,7 +185,7 @@ const colors: Types = {
},
info: {
main: "#04aaef",
main: "#0062FF",
focus: "#1662C4",
},
@ -234,7 +239,7 @@ const colors: Types = {
info: {
main: "#49a3f1",
state: "#04aaef",
state: "#0062FF",
},
success: {

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