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

SPRINT-18: fixed import orders, some fixes due to using Box vs MDBox

Browse Source
This commit is contained in:
Tim Chamberlain
2023-01-05 11:25:55 -06:00
parent 267580b44b
commit 28cdb78c3a
15 changed files with 289 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.tsx
View File

@ -35,10 +35,10 @@ import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} f
import {useCookies} from "react-cookie";
import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
import {Md5} from "ts-md5/dist/md5";
import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "qqq/context";
import QContext from "QContext";
import Sidenav from "qqq/components/horseshoe/sidenav/SideNav";
import theme from "qqq/components/legacy/Theme";
import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "qqq/context";
import AppHome from "qqq/pages/apps/Home";
import ProcessRun from "qqq/pages/processes/ProcessRun";
import ReportRun from "qqq/pages/processes/ReportRun";
@ -50,6 +50,7 @@ import RecordView from "qqq/pages/records/view/RecordView";
import Client from "qqq/utils/qqq/Client";
import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
const qController = Client.getInstance();
export const SESSION_ID_COOKIE_NAME = "sessionId";
LicenseInfo.setLicenseKey(process.env.REACT_APP_MATERIAL_UI_LICENSE_KEY);

2
src/index.tsx
View File

@ -26,9 +26,9 @@ import {render} from "react-dom";
import {BrowserRouter, useNavigate, useSearchParams} from "react-router-dom";
import App from "App";
import "qqq/styles/qqq-override-styles.css";
import {MaterialUIControllerProvider} from "qqq/context";
import HandleAuthorizationError from "HandleAuthorizationError";
import ProtectedRoute from "qqq/authorization/auth0/ProtectedRoute";
import {MaterialUIControllerProvider} from "qqq/context";
import Client from "qqq/utils/qqq/Client";
const qController = Client.getInstance();

2
src/qqq/components/horseshoe/sidenav/SideNav.tsx
View File

@ -26,7 +26,6 @@ import Link from "@mui/material/Link";
import List from "@mui/material/List";
import {ReactNode, useEffect, useReducer, useState} from "react";
import {NavLink, useLocation} from "react-router-dom";
import {setMiniSidenav, setTransparentSidenav, setWhiteSidenav, useMaterialUIController,} from "qqq/context";
import AuthenticationButton from "qqq/components/buttons/AuthenticationButton";
import SideNavCollapse from "qqq/components/horseshoe/sidenav/SideNavCollapse";
import SideNavItem from "qqq/components/horseshoe/sidenav/SideNavItem";
@ -34,6 +33,7 @@ import SideNavList from "qqq/components/horseshoe/sidenav/SideNavList";
import SidenavRoot from "qqq/components/horseshoe/sidenav/SideNavRoot";
import sidenavLogoLabel from "qqq/components/horseshoe/sidenav/styles/SideNav";
import MDTypography from "qqq/components/legacy/MDTypography";
import {setMiniSidenav, setTransparentSidenav, setWhiteSidenav, useMaterialUIController,} from "qqq/context";
interface Props

2
src/qqq/components/horseshoe/sidenav/SideNavItem.tsx
View File

@ -26,8 +26,8 @@ import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import {Theme} from "@mui/material/styles";
import {ReactNode} from "react";
import {useMaterialUIController} from "qqq/context";
import {item, itemArrow, itemContent} from "qqq/components/horseshoe/sidenav/styles/SideNavItem";
import {useMaterialUIController} from "qqq/context";
// Declaring props types for SideNavCollapse
interface Props {

2
src/qqq/components/legacy/MDTypography/index.tsx
View File

@ -21,8 +21,8 @@
import {TypographyProps} from "@mui/material";
import {FC, forwardRef, ReactNode} from "react";
import {useMaterialUIController} from "qqq/context";
import MDTypographyRoot from "qqq/components/legacy/MDTypography/MDTypographyRoot";
import {useMaterialUIController} from "qqq/context";
// Declaring props types for MDTypography
interface Props extends TypographyProps

4
src/qqq/components/processes/ProcessSummaryResults.tsx
View File

@ -88,8 +88,8 @@ function ProcessSummaryResults({
<Grid container>
<Grid item xs={0} lg={2} />
<Grid item xs={12} lg={8}>
<Box border="1px solid rgb(70%, 70%, 70%)" borderRadius="lg" p={2} mt={2}>
<Box mt={-5} p={1} sx={{width: "fit-content", backgroundColor: "success"}} borderRadius=".25em" width="initial" color="white">
<Box border="1px solid rgb(70%, 70%, 70%)" borderRadius="10px" p={2} mt={2}>
<Box mx={2} mt={-5} p={1} sx={{width: "fit-content", borderRadius: ".25em", backgroundColor: "rgb(76, 175, 80)"}} width="initial" color="#FFFFFF">
<Box display="flex" alignItems="center" color="white">
{process.iconName && <Icon fontSize="medium" sx={{mr: 1}}>{process.iconName}</Icon>}
Process Summary

8
src/qqq/components/processes/ValidationReview.tsx
View File

@ -24,7 +24,7 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import {Box, Button, FormControlLabel, ListItem, Radio, RadioGroup} from "@mui/material";
import {Box, Button, FormControlLabel, ListItem, Radio, RadioGroup, Typography} from "@mui/material";
import Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton";
@ -192,9 +192,9 @@ function ValidationReview({
);
const recordPreviewWidget = step.recordListFields && (
<Box border="1px solid rgb(70%, 70%, 70%)" borderRadius="lg" p={2} mt={2}>
<Box mx={2} mt={-5} p={1} sx={{width: "fit-content", borderWidth: "2px", borderStyle: "solid", borderRadius: ".25em", backgroundColor: "white"}} borderColor="orange" width="initial" color="white">
<MDTypography sx={{color: "warning"}}>Preview</MDTypography>
<Box border="1px solid rgb(70%, 70%, 70%)" borderRadius="10px" p={2} mt={2}>
<Box mx={2} mt={-5} p={1} sx={{width: "fit-content", borderColor: "rgb(70%, 70%, 70%)", borderWidth: "2px", borderStyle: "solid", borderRadius: ".25em", backgroundColor: "#FFFFFF"}} width="initial" color="white">
<Typography>Preview</Typography>
</Box>
<Box p={3} pb={0}>
<MDTypography color="body" variant="body2" component="div" mb={2}>

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

@ -27,6 +27,7 @@ import Grid from "@mui/material/Grid";
import parse from "html-react-parser";
import React, {useEffect, useReducer, useState} from "react";
import {useLocation} from "react-router-dom";
import colors from "qqq/assets/theme/base/colors";
import MDBadgeDot from "qqq/components/legacy/MDBadgeDot";
import MDTypography from "qqq/components/legacy/MDTypography";
import BarChart from "qqq/components/widgets/charts/barchart/BarChart";
@ -48,7 +49,6 @@ import TableCard from "qqq/components/widgets/tables/TableCard";
import Widget from "qqq/components/widgets/Widget";
import ProcessRun from "qqq/pages/processes/ProcessRun";
import Client from "qqq/utils/qqq/Client";
import colors from "qqq/assets/theme/base/colors";
const qController = Client.getInstance();

2
src/qqq/components/widgets/charts/linechart/SmallLineChart.tsx
View File

@ -24,9 +24,9 @@ import Card from "@mui/material/Card";
import parse from "html-react-parser";
import {useMemo} from "react";
import {Line} from "react-chartjs-2";
import colors from "qqq/assets/theme/base/colors";
import MDTypography from "qqq/components/legacy/MDTypography";
import configs from "qqq/components/widgets/charts/linechart/LineChartConfigs";
import colors from "qqq/assets/theme/base/colors";
//////////////////////////////////////////
// structure of expected bar chart data //

57
src/qqq/components/widgets/statistics/MiniStatisticsCard.tsx
View File

@ -24,8 +24,9 @@ import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import {ReactNode} from "react";
import {useMaterialUIController} from "qqq/context";
import colors from "qqq/assets/theme/base/colors";
import MDTypography from "qqq/components/legacy/MDTypography";
import {useMaterialUIController} from "qqq/context";
// Decalaring props types for MiniStatisticsCard
@ -70,24 +71,6 @@ function MiniStatisticsCard({
>
<Box p={2}>
<Grid container alignItems="center">
{direction === "left" ? (
<Grid item xs={4}>
<Box
color={bgColor === "white" ? "white" : "dark"}
width="4rem"
height="4rem"
borderRadius="md"
display="flex"
justifyContent="center"
alignItems="center"
sx={{backgroundColor: bgColor === "white" ? icon.color : "white"}}
>
<Icon fontSize="medium" color="inherit">
{icon.component}
</Icon>
</Box>
</Grid>
) : null}
<Grid item xs={8}>
<Box
ml={direction === "left" ? 2 : 0}
@ -115,25 +98,23 @@ function MiniStatisticsCard({
</MDTypography>
</Box>
</Grid>
{direction === "right" ? (
<Grid item xs={4}>
<Box
color={bgColor === "white" ? "white" : "dark"}
width="4rem"
height="4rem"
marginLeft="auto"
borderRadius="md"
display="flex"
justifyContent="center"
alignItems="center"
sx={{backgroundColor: bgColor === "white" ? icon.color : "white"}}
>
<Icon fontSize="medium" color="inherit">
{icon.component}
</Icon>
</Box>
</Grid>
) : null}
<Grid item xs={4}>
<Box
width="4rem"
height="4rem"
marginLeft="auto"
borderRadius="md"
display="flex"
justifyContent="center"
alignItems="center"
color="#FFFFFF"
sx={{borderRadius: "10px", backgroundColor: colors.info.main}}
>
<Icon fontSize="medium" color="inherit">
{icon.component}
</Icon>
</Box>
</Grid>
</Grid>
</Box>
</Box>

1
src/qqq/pages/apps/Home.tsx
View File

@ -300,7 +300,6 @@ function AppHome({app}: Props): JSX.Element
count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))}
percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}}
icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
direction="right"
/>
</Box>
</Link>

2
src/qqq/pages/processes/ProcessRun.tsx
View File

@ -46,7 +46,6 @@ import Typography from "@mui/material/Typography";
import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
import FormData from "form-data";
import {Form, Formik} from "formik";
import MDTypography from "qqq/components/legacy/MDTypography";
import React, {useContext, useEffect, useState} from "react";
import {useLocation, useNavigate, useParams} from "react-router-dom";
import * as Yup from "yup";
@ -56,6 +55,7 @@ import QDynamicForm from "qqq/components/forms/DynamicForm";
import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
import MDButton from "qqq/components/legacy/MDButton";
import MDProgress from "qqq/components/legacy/MDProgress";
import MDTypography from "qqq/components/legacy/MDTypography";
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
import {GoogleDriveFolderPickerWrapper} from "qqq/components/processes/GoogleDriveFolderPickerWrapper";
import ProcessSummaryResults from "qqq/components/processes/ProcessSummaryResults";

4
src/qqq/pages/records/view/RecordView.tsx
View File

@ -344,10 +344,10 @@ function RecordView({table, launchProcess}: Props): JSX.Element
{
section.fieldNames.map((fieldName: string) => (
<Box key={fieldName} flexDirection="row" pr={2}>
<Typography variant="button" fontWeight="bold" pr={1}>
<Typography variant="button" textTransform="none" fontWeight="bold" pr={1}>
{tableMetaData.fields.get(fieldName).label}:
</Typography>
<Typography variant="button" fontWeight="regular" color="text">
<Typography variant="button" textTransform="none" fontWeight="regular" color="text">
{ValueUtils.getDisplayValue(tableMetaData.fields.get(fieldName), record, "view")}
</Typography>
</Box>