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

SPRINT-12: added stepper card and link on table widgets

Browse Source
This commit is contained in:
Tim Chamberlain
2022-09-29 13:39:43 -05:00
parent 3ce6a8858e
commit 34d3164087
6 changed files with 558 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/qqq/pages/dashboards/Widgets/StepperCard.tsx Normal file
View 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;

17
src/qqq/pages/dashboards/Widgets/TableCard.tsx
View File

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