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-12: added skeletons throughout widgets, fixed page header under breadcrumb, misc other improvements

Browse Source
This commit is contained in:
Tim Chamberlain
2022-10-04 12:38:53 -05:00
parent e67301dc4b
commit 30f2da17a4
16 changed files with 353 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/qqq/pages/app-home/index.tsx
View File

@ -29,8 +29,9 @@ import {Icon} from "@mui/material";
import Card from "@mui/material/Card";
import Divider from "@mui/material/Divider";
import Grid from "@mui/material/Grid";
import React, {useEffect, useState} from "react";
import React, {useContext, useEffect, useState} from "react";
import {Link, useLocation} from "react-router-dom";
import QContext from "QContext";
import BaseLayout from "qqq/components/BaseLayout";
import DashboardWidgets from "qqq/components/DashboardWidgets";
import ProcessLinkCard from "qqq/components/ProcessLinkCard";
@ -57,6 +58,8 @@ function AppHome({app}: Props): JSX.Element
const [updatedTableCounts, setUpdatedTableCounts] = useState(new Date());
const [widgets, setWidgets] = useState([] as any[]);
const {pageHeader, setPageHeader} = useContext(QContext);
const location = useLocation();
useEffect(() =>
@ -70,6 +73,8 @@ function AppHome({app}: Props): JSX.Element
useEffect(() =>
{
setPageHeader(app.label);
if (!qInstance)
{
return;
@ -153,11 +158,9 @@ function AppHome({app}: Props): JSX.Element
return (
<BaseLayout>
<MDBox mt={4}>
<MDBox mt={4} mb={4}>
{app.widgets && (
<Grid container spacing={3}>
<DashboardWidgets widgetMetaDataList={widgets} />
</Grid>
<DashboardWidgets widgetMetaDataList={widgets} />
)}
<Grid container spacing={3}>
{

6
src/qqq/pages/dashboards/CarrierPerformance.tsx
View File

@ -24,7 +24,8 @@ import {Icon} from "@mui/material";
import Grid from "@mui/material/Grid";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import React, {useEffect, useState} from "react";
import React, {useContext, useEffect, useState} from "react";
import QContext from "QContext";
import DashboardLayout from "qqq/components/DashboardLayout";
import Footer from "qqq/components/Footer";
import Navbar from "qqq/components/Navbar";
@ -115,12 +116,15 @@ function CarrierPerformance(): JSX.Element
const [qInstance, setQInstance] = useState(null as QInstance);
const [dataLoaded, setDataLoaded] = useState(false);
const {pageHeader, setPageHeader} = useContext(QContext);
//////////////////////////
// load meta data first //
//////////////////////////
useEffect(() =>
{
setPageHeader("Carrier Performance");
(async () =>
{
const newQInstance = await qController.loadMetaData();

6
src/qqq/pages/dashboards/Overview.tsx
View File

@ -23,7 +23,8 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
import Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import Tooltip from "@mui/material/Tooltip";
import {useEffect, useState} from "react";
import {useContext, useEffect, useState} from "react";
import QContext from "QContext";
import DashboardLayout from "qqq/components/DashboardLayout";
import Footer from "qqq/components/Footer";
import Navbar from "qqq/components/Navbar";
@ -66,6 +67,7 @@ function Overview(): JSX.Element
const [warehouseData, setWarehouseData] = useState([] as LocationCardData[]);
const [qInstance, setQInstance] = useState(null as QInstance);
const {pageHeader, setPageHeader} = useContext(QContext);
//////////////////////////
@ -73,6 +75,8 @@ function Overview(): JSX.Element
//////////////////////////
useEffect(() =>
{
setPageHeader("Overview");
(async () =>
{
const newQInstance = await qController.loadMetaData();

31
src/qqq/pages/dashboards/Widgets/MultiStatisticsCard.tsx
View File

@ -19,6 +19,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {Skeleton} from "@mui/material";
import Card from "@mui/material/Card";
import Divider from "@mui/material/Divider";
import Grid from "@mui/material/Grid";
@ -76,7 +77,7 @@ function MultiStatisticsCard({title, data}: Props): JSX.Element
</Grid>
<Grid container>
{
data && data.statisticsGroupData && (
data && data.statisticsGroupData ? (
data.statisticsGroupData.map((statisticsGroup, i1) =>
<Grid key={`statgroup-${i1}`} item xs={3} lg={3} sx={{textAlign: "center"}}>
<MDBox p={3} pt={3} sx={{alignItems: "center"}}>
@ -112,6 +113,34 @@ function MultiStatisticsCard({title, data}: Props): JSX.Element
</MDBox>
</Grid>
)
) : (
Array(4).fill(0).map((_, i) =>
<Grid key={`item-${i}`} item xs={3} lg={3} sx={{textAlign: "center"}}>
<MDBox p={3} pt={3} sx={{alignItems: "center"}}>
<MDBox>
<MDTypography variant="h6">
<Icon sx={{fontSize: "30px", margin: "5px", color: "grey"}} fontSize="medium">pending</Icon>
</MDTypography>
</MDBox>
<MDBox>
<MDTypography variant="h6">
<Skeleton />
</MDTypography>
<MDTypography variant="subtitle2">
<Skeleton />
</MDTypography>
</MDBox>
<Divider sx={{margin: "10px"}}></Divider>
<MDBox sx={{alignItems: "center"}}>
<MDBox key={`stat-${i}`}>
<MDTypography variant="subtitle2">
<Skeleton />
</MDTypography>
</MDBox>
</MDBox>
</MDBox>
</Grid>
)
)
}
</Grid>

22
src/qqq/pages/dashboards/Widgets/StepperCard.tsx
View File

@ -65,11 +65,7 @@ function StepperCard({data}: Props): JSX.Element
marginTop: "9px",
marginRight: "30px",
marginLeft: "30px",
},
"& .MuiStepConnector-completed":
{
color: "red !important"
}
}
})(StepConnector);
console.log(`data ${JSON.stringify(data)}`);
@ -132,7 +128,21 @@ function StepperCard({data}: Props): JSX.Element
</Step>
))
) : (
<Skeleton width="100%" height="80px" />
Array(5).fill(0).map((_, i) =>
<Step key={`step-${i}`}>
<MDBox>
<StepLabel icon={<Pending />} sx={{
color: "#ced4da",
fontSize: "35px",
"& .MuiStepLabel-label.MuiStepLabel-alternativeLabel":
{
color: "#ced4da !important",
}
}}><Skeleton /></StepLabel>
</MDBox>
</Step>
)
)
}
</Stepper>

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

@ -24,10 +24,17 @@ import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableContainer from "@mui/material/TableContainer";
import TableRow from "@mui/material/TableRow";
import parse from "html-react-parser";
import React, {useEffect, useState} from "react";
import {NavLink} from "react-router-dom";
import DefaultCell from "layouts/dashboards/sales/components/DefaultCell";
import DataTable, {TableDataInput} from "qqq/components/Temporary/DataTable";
import DataTableBodyCell from "qqq/components/Temporary/DataTable/DataTableBodyCell";
import DataTableHeadCell from "qqq/components/Temporary/DataTable/DataTableHeadCell";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
@ -175,17 +182,30 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
</MDTypography>
</MDBox>
) : (
<MDBox p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
<MDTypography
variant="subtitle2"
color="secondary"
fontWeight="regular"
>
<Skeleton />
<Skeleton />
<Skeleton />
</MDTypography>
</MDBox>
<TableContainer sx={{boxShadow: "none"}}>
<Table>
<MDBox component="thead">
<TableRow key="header">
{Array(8).fill(0).map((_, i) =>
<DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center">
<Skeleton width="100%" />
</DataTableHeadCell>
)}
</TableRow>
</MDBox>
<TableBody>
{Array(5).fill(0).map((_, i) =>
<TableRow sx={{verticalAlign: "top"}} key={`row-${i}`}>
{Array(8).fill(0).map((_, j) =>
<DataTableBodyCell key={`cell-${i}-${j}`} align="center">
<DefaultCell><Skeleton /></DefaultCell>
</DataTableBodyCell>
)}
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
)
}
</MDBox>

39
src/qqq/pages/entity-list/index.tsx
View File

@ -57,8 +57,9 @@ import {
MuiEvent
} from "@mui/x-data-grid-pro";
import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
import React, {useCallback, useEffect, useReducer, useRef, useState} from "react";
import React, {useCallback, useContext, useEffect, useReducer, useRef, useState} from "react";
import {Link, useNavigate, useParams, useSearchParams} from "react-router-dom";
import QContext from "QContext";
import DashboardLayout from "qqq/components/DashboardLayout";
import Footer from "qqq/components/Footer";
import Navbar from "qqq/components/Navbar";
@ -197,6 +198,7 @@ function EntityList({table}: Props): JSX.Element
const [queryErrors, setQueryErrors] = useState({} as any);
const [receivedQueryErrorTimestamp, setReceivedQueryErrorTimestamp] = useState(new Date());
const {pageHeader, setPageHeader} = useContext(QContext);
const [, forceUpdate] = useReducer((x) => x + 1, 0);
@ -233,6 +235,7 @@ function EntityList({table}: Props): JSX.Element
(async () =>
{
const tableMetaData = await qController.loadTableMetaData(tableName);
setPageHeader(tableMetaData.label);
////////////////////////////////////////////////////////////////////////////////////////////////
// we need the table meta data to look up the default filter (if it comes from query string), //
@ -263,7 +266,7 @@ function EntityList({table}: Props): JSX.Element
// assign a new query id to the query being issued here. then run both the count & query async //
// and when they load, store their results associated with this id. //
//////////////////////////////////////////////////////////////////////////////////////////////////
const thisQueryId = latestQueryId + 1
const thisQueryId = latestQueryId + 1;
setLatestQueryId(thisQueryId);
console.log(`Issuing query: ${thisQueryId}`);
@ -291,7 +294,7 @@ function EntityList({table}: Props): JSX.Element
{
errorMessage = error.message;
}
else if(error && error.response && error.response.data && error.response.data.error)
else if (error && error.response && error.response.data && error.response.data.error)
{
errorMessage = error.response.data.error;
}
@ -307,7 +310,7 @@ function EntityList({table}: Props): JSX.Element
throw error;
});
})();
}
};
///////////////////////////
// display count results //
@ -358,9 +361,9 @@ function EntityList({table}: Props): JSX.Element
///////////////////////////
// display query results //
///////////////////////////
useEffect(() =>
useEffect(() =>
{
if(!queryResults[latestQueryId])
if (!queryResults[latestQueryId])
{
///////////////////////////////////////////////////////////////////////////////////////////
// to avoid showing results from an "older" query (e.g., one that was slow, and returned //
@ -382,8 +385,8 @@ function EntityList({table}: Props): JSX.Element
const row: any = {};
fields.forEach((field) =>
{
const value = QValueUtils.getDisplayValue(field, record)
if(typeof value !== "string")
const value = QValueUtils.getDisplayValue(field, record);
if (typeof value !== "string")
{
columnsToRender[field.name] = true;
}
@ -450,15 +453,15 @@ function EntityList({table}: Props): JSX.Element
filterOperators = getCustomGridBooleanOperators();
break;
default:
// noop - leave as string
// noop - leave as string
}
}
if(field.hasAdornment(AdornmentType.SIZE))
if (field.hasAdornment(AdornmentType.SIZE))
{
const sizeAdornment = field.getAdornment(AdornmentType.SIZE)
const width = sizeAdornment.getValue("width")
switch(width)
const sizeAdornment = field.getAdornment(AdornmentType.SIZE);
const width = sizeAdornment.getValue("width");
switch (width)
{
case "small":
{
@ -482,7 +485,7 @@ function EntityList({table}: Props): JSX.Element
}
default:
{
console.log("Unrecognized size.width adornment value: " + width)
console.log("Unrecognized size.width adornment value: " + width);
}
}
}
@ -496,7 +499,7 @@ function EntityList({table}: Props): JSX.Element
filterOperators: filterOperators,
};
if(columnsToRender[field.name])
if (columnsToRender[field.name])
{
column.renderCell = (cellValues: any) => (
(cellValues.value)
@ -811,9 +814,9 @@ function EntityList({table}: Props): JSX.Element
// @ts-ignore
const defaultLabelDisplayedRows = ({from, to, count}) =>
{
if(count !== null && count !== undefined)
if (count !== null && count !== undefined)
{
if(count === 0)
if (count === 0)
{
return (loading ? "Counting records..." : "No rows");
}
@ -823,7 +826,7 @@ function EntityList({table}: Props): JSX.Element
{
return ("Counting records...");
}
}
};
function CustomPagination()
{

5
src/qqq/pages/entity-view/components/ViewContents/index.tsx
View File

@ -36,8 +36,9 @@ import Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import React, {useEffect, useReducer, useState} from "react";
import React, {useContext, useEffect, useReducer, useState} from "react";
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
import QContext from "QContext";
import DashboardWidgets from "qqq/components/DashboardWidgets";
import {QActionsMenuButton, QDeleteButton, QEditButton} from "qqq/components/QButtons";
import QRecordSidebar from "qqq/components/QRecordSidebar";
@ -80,6 +81,7 @@ function ViewContents({id, table}: Props): JSX.Element
const [actionsMenu, setActionsMenu] = useState(null);
const [tableWidgets, setTableWidgets] = useState([] as QWidgetMetaData[]);
const [searchParams] = useSearchParams();
const {pageHeader, setPageHeader} = useContext(QContext);
const [, forceUpdate] = useReducer((x) => x + 1, 0);
const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
@ -126,6 +128,7 @@ function ViewContents({id, table}: Props): JSX.Element
/////////////////////
const record = await qController.get(tableName, id);
setRecord(record);
setPageHeader(record.recordLabel);
///////////////////////////
// load widget meta data //

21
src/qqq/pages/process-run/ReportRun.tsx
View File

@ -20,9 +20,9 @@
*/
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import {QReportMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QReportMetaData";
import React, {useEffect, useState} from "react";
import React, {useContext, useEffect, useState} from "react";
import QContext from "QContext";
import ProcessRun from "qqq/pages/process-run/index";
import QClient from "qqq/utils/QClient";
@ -36,10 +36,11 @@ function ReportRun({report}: Props): JSX.Element
// const reportNameParam = useParams().reportName;
// const processName = process === null ? processNameParam : process.name;
const [metaData, setMetaData] = useState(null as QInstance);
const {pageHeader, setPageHeader} = useContext(QContext);
useEffect(() =>
{
if(!metaData)
if (!metaData)
{
(async () =>
{
@ -49,18 +50,20 @@ function ReportRun({report}: Props): JSX.Element
}
});
if(metaData)
if (metaData)
{
console.log(`Report Process name is ${report.processName}`)
const process = metaData.processes.get(report.processName)
console.log(`Process is ${process.name}`)
const defaultProcessValues = {reportName: report.name}
setPageHeader(report.label);
console.log(`Report Process name is ${report.processName}`);
const process = metaData.processes.get(report.processName);
console.log(`Process is ${process.name}`);
const defaultProcessValues = {reportName: report.name};
return (<ProcessRun process={process} defaultProcessValues={defaultProcessValues} />);
}
else
{
// todo - loading?
return (<div/>);
return (<div />);
}
}

29
src/qqq/pages/process-run/index.tsx
View File

@ -31,7 +31,7 @@ import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobEr
import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import {Button, Icon, CircularProgress, TablePagination} from "@mui/material";
import {Button, CircularProgress, Icon, TablePagination} from "@mui/material";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
@ -41,12 +41,12 @@ import StepLabel from "@mui/material/StepLabel";
import Stepper from "@mui/material/Stepper";
import Typography from "@mui/material/Typography";
import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
import {GoogleOAuthProvider} from "@react-oauth/google";
import FormData from "form-data";
import {Form, Formik} from "formik";
import React, {useEffect, useState} from "react";
import {useLocation, useParams, useNavigate} from "react-router-dom";
import React, {useContext, useEffect, useState} from "react";
import {useLocation, useNavigate, useParams} from "react-router-dom";
import * as Yup from "yup";
import QContext from "QContext";
import BaseLayout from "qqq/components/BaseLayout";
import {QCancelButton, QSubmitButton} from "qqq/components/QButtons";
import QDynamicForm from "qqq/components/QDynamicForm";
@ -102,6 +102,8 @@ function ProcessRun({process, defaultProcessValues}: Props): JSX.Element
const [showErrorDetail, setShowErrorDetail] = useState(false);
const [showFullHelpText, setShowFullHelpText] = useState(false);
const {pageHeader, setPageHeader} = useContext(QContext);
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// for setting the processError state - call this function, which will also set the isUserFacingError state //
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
@ -302,7 +304,7 @@ function ProcessRun({process, defaultProcessValues}: Props): JSX.Element
component.values.previewText ?
<>
<Box mt={1}>
<Button onClick={toggleShowFullHelpText} startIcon={<Icon>{showFullHelpText ? "expand_less" : "expand_more"}</Icon>} sx={{pl: 1}} >
<Button onClick={toggleShowFullHelpText} startIcon={<Icon>{showFullHelpText ? "expand_less" : "expand_more"}</Icon>} sx={{pl: 1}}>
{showFullHelpText ? "Hide " : "Show "}
{component.values.previewText}
</Button>
@ -471,17 +473,17 @@ function ProcessRun({process, defaultProcessValues}: Props): JSX.Element
{
let rs: QFieldMetaData[] = [];
if(activeStep && activeStep.formFields)
if (activeStep && activeStep.formFields)
{
for(let i = 0; i<activeStep.formFields.length; i++)
for (let i = 0; i < activeStep.formFields.length; i++)
{
rs.push(activeStep.formFields[i]);
}
}
if(processValues.inputFieldList)
if (processValues.inputFieldList)
{
for(let i = 0; i<processValues.inputFieldList.length; i++)
for (let i = 0; i < processValues.inputFieldList.length; i++)
{
let inputField = new QFieldMetaData(processValues.inputFieldList[i]);
rs.push(inputField);
@ -501,6 +503,7 @@ function ProcessRun({process, defaultProcessValues}: Props): JSX.Element
console.log("No process meta data yet, so returning early");
return;
}
setPageHeader(processMetaData.label)
let newIndex = null;
if (typeof newStep === "number")
@ -590,7 +593,7 @@ function ProcessRun({process, defaultProcessValues}: Props): JSX.Element
addField("googleDriveFolderName", {type: "hidden", omitFromQDynamicForm: true}, null, null);
}
if(Object.keys(dynamicFormFields).length > 0)
if (Object.keys(dynamicFormFields).length > 0)
{
///////////////////////////////////////////
// if there are form fields, set them up //
@ -743,7 +746,7 @@ function ProcessRun({process, defaultProcessValues}: Props): JSX.Element
const qJobError = lastProcessResponse as QJobError;
console.log(`Got an error from the backend... ${qJobError.error} : ${qJobError.userFacingError}`);
setJobUUID(null);
if(qJobError.userFacingError)
if (qJobError.userFacingError)
{
setProcessError(qJobError.userFacingError, true);
}
@ -874,9 +877,9 @@ function ProcessRun({process, defaultProcessValues}: Props): JSX.Element
return;
}
if(defaultProcessValues)
if (defaultProcessValues)
{
for(let key in defaultProcessValues)
for (let key in defaultProcessValues)
{
queryStringPairsForInit.push(`${key}=${encodeURIComponent(defaultProcessValues[key])}`);
}