mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-19 05:40:44 +00:00
SPRINT-12: added stepper card and link on table widgets
This commit is contained in:
Tim Chamberlain
@ -31,6 +31,7 @@ import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
|
||||
import LineChart from "qqq/pages/dashboards/Widgets/LineChart";
|
||||
import MultiStatisticsCard from "qqq/pages/dashboards/Widgets/MultiStatisticsCard";
|
||||
import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
|
||||
import StepperCard from "qqq/pages/dashboards/Widgets/StepperCard";
|
||||
import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
|
||||
@ -100,7 +101,6 @@ function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Elemen
|
||||
};
|
||||
|
||||
const widgetCount = widgets ? widgets.length : 0;
|
||||
|
||||
console.log(widgets);
|
||||
|
||||
return (
|
||||
@ -115,6 +115,8 @@ function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Elemen
|
||||
<TableCard
|
||||
color="info"
|
||||
title={widget.title}
|
||||
linkText={widget.linkText}
|
||||
linkURL={widget.linkURL}
|
||||
noRowsFoundHTML={widget.noRowsFoundHTML}
|
||||
data={widget}
|
||||
dropdownOptions={widget.dropdownOptions}
|
||||
@ -123,6 +125,24 @@ function DashboardWidgets({widgetNameList, entityPrimaryKey}: Props): JSX.Elemen
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
widget.type === "stepper" && (
|
||||
<MDBox>
|
||||
<Card sx={{marginTop: "0px", paddingTop: "0px"}}>
|
||||
<MDBox padding="1rem">
|
||||
{
|
||||
widget.title && (
|
||||
<MDTypography variant="h5" textTransform="capitalize">
|
||||
{widget.title}
|
||||
</MDTypography>
|
||||
)
|
||||
}
|
||||
<StepperCard data={widget} />
|
||||
</MDBox>
|
||||
</Card>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
{
|
||||
widget.type === "html" && (
|
||||
<MDBox pb={3}>
|
||||
|
||||
@ -37,7 +37,6 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
|
||||
<MDBox
|
||||
component="td"
|
||||
textAlign={align}
|
||||
verticalAlign="top"
|
||||
py={1.5}
|
||||
px={3}
|
||||
sx={({palette: {light}, typography: {size}, borders: {borderWidth}}: Theme) => ({
|
||||
|
||||
137
src/qqq/pages/dashboards/Widgets/StepperCard.tsx
Normal file
137
src/qqq/pages/dashboards/Widgets/StepperCard.tsx
Normal file
@ -0,0 +1,137 @@
|
||||
/*
|
||||
* 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 {Check, Pending, RocketLaunch} from "@mui/icons-material";
|
||||
import {StepConnector} from "@mui/material";
|
||||
import Step from "@mui/material/Step";
|
||||
import StepLabel from "@mui/material/StepLabel";
|
||||
import Stepper from "@mui/material/Stepper";
|
||||
import {withStyles} from "@mui/styles";
|
||||
import {NavLink} from "react-router-dom";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
|
||||
|
||||
/////////////////////////////////////////////
|
||||
// structure of expected stepper card data //
|
||||
/////////////////////////////////////////////
|
||||
export interface StepperCardData
|
||||
{
|
||||
title: string;
|
||||
activeStep: number;
|
||||
steps: {
|
||||
icon: string;
|
||||
label: string;
|
||||
linkText: string;
|
||||
linkURL: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
|
||||
////////////////////////////////////
|
||||
// define properties and defaults //
|
||||
////////////////////////////////////
|
||||
interface Props
|
||||
{
|
||||
data: StepperCardData;
|
||||
}
|
||||
|
||||
|
||||
function StepperCard({data}: Props): JSX.Element
|
||||
{
|
||||
const activeStep = data && data.activeStep ? data.activeStep : 0;
|
||||
|
||||
const CustomizedConnector = withStyles({
|
||||
line: {
|
||||
color: "#344767",
|
||||
marginTop: "9px",
|
||||
marginRight: "30px",
|
||||
marginLeft: "30px",
|
||||
},
|
||||
"& .MuiStepConnector-completed":
|
||||
{
|
||||
color: "red !important"
|
||||
}
|
||||
})(StepConnector);
|
||||
|
||||
return (
|
||||
<Stepper connector={<CustomizedConnector />} activeStep={activeStep} alternativeLabel sx={{paddingBottom: "0px", boxShadow: "none", background: "white"}}>
|
||||
{
|
||||
data && (
|
||||
data.steps.map((step, index) => (
|
||||
<Step key={step.label} sx={{color: "red"}}>
|
||||
{
|
||||
index < activeStep && (
|
||||
<MDBox>
|
||||
<StepLabel icon={<Check />} sx={{
|
||||
color: "green",
|
||||
fontSize: "35px",
|
||||
"& .MuiStepLabel-label.Mui-completed.MuiStepLabel-alternativeLabel":
|
||||
{
|
||||
color: "green !important",
|
||||
}
|
||||
}}>{step.label}</StepLabel>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
{
|
||||
index > activeStep && (
|
||||
<MDBox>
|
||||
<StepLabel icon={<Pending />} sx={{
|
||||
color: "#ced4da",
|
||||
fontSize: "35px",
|
||||
"& .MuiStepLabel-label.MuiStepLabel-alternativeLabel":
|
||||
{
|
||||
color: "#ced4da !important",
|
||||
}
|
||||
}}>{step.label}</StepLabel>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
{
|
||||
index === activeStep && (
|
||||
<MDBox>
|
||||
<StepLabel icon={<RocketLaunch />} sx={{
|
||||
color: "#04aaef",
|
||||
fontSize: "35px",
|
||||
"& .MuiStepLabel-label.MuiStepLabel-alternativeLabel":
|
||||
{
|
||||
color: "#344767 !important", // Just text label (COMPLETED)
|
||||
}
|
||||
}}>{step.label}</StepLabel>
|
||||
{
|
||||
step.linkURL && (
|
||||
<MDBox sx={{textAlign: "center", fontSize: "14px"}}>
|
||||
<NavLink to={step.linkURL}>{step.linkText}</NavLink>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
</Step>
|
||||
))
|
||||
)
|
||||
}
|
||||
</Stepper>
|
||||
);
|
||||
}
|
||||
|
||||
export default StepperCard;
|
||||
@ -26,6 +26,7 @@ import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import parse from "html-react-parser";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {NavLink} from "react-router-dom";
|
||||
import DataTable, {TableDataInput} from "qqq/components/Temporary/DataTable";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
@ -37,6 +38,8 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
interface Props
|
||||
{
|
||||
title: string;
|
||||
linkText?: string;
|
||||
linkURL?: string;
|
||||
noRowsFoundHTML?: string;
|
||||
data: TableDataInput;
|
||||
dropdownOptions?: {
|
||||
@ -49,7 +52,7 @@ interface Props
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function TableCard({title, noRowsFoundHTML, data, dropdownOptions, dropdownOnChange, widgetIndex}: Props): JSX.Element
|
||||
function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOptions, dropdownOnChange, widgetIndex}: Props): JSX.Element
|
||||
{
|
||||
const openArrowIcon = "arrow_drop_down";
|
||||
const closeArrowIcon = "arrow_drop_up";
|
||||
@ -96,7 +99,6 @@ function TableCard({title, noRowsFoundHTML, data, dropdownOptions, dropdownOnCha
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
console.log(dropdownOptions);
|
||||
if (dropdownOptions)
|
||||
{
|
||||
setDropdownValue(dropdownOptions[0]["id"]);
|
||||
@ -107,13 +109,22 @@ function TableCard({title, noRowsFoundHTML, data, dropdownOptions, dropdownOnCha
|
||||
return (
|
||||
<Card>
|
||||
<Grid container>
|
||||
<Grid item xs={7}>
|
||||
<Grid item xs={6}>
|
||||
<MDBox pt={3} px={3}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
{title}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
{
|
||||
linkText && (
|
||||
<MDBox sx={{textAlign: "right", fontSize: "14px"}} pt={3} px={3}>
|
||||
<NavLink to={linkURL}>{linkText}</NavLink>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
</Grid>
|
||||
<Grid item xs={5}>
|
||||
{dropdownOptions && (
|
||||
<MDBox p={2} width="100%" textAlign="right" lineHeight={1}>
|
||||
|
||||
Reference in New Issue
Block a user