mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-19 05:40:44 +00:00
Add recently viewed / history; add AdornmentType.RENDER_HTML; add FieldValueListWidget
This commit is contained in:
98
src/qqq/pages/dashboards/Widgets/FieldValueListWidget.tsx
Normal file
98
src/qqq/pages/dashboards/Widgets/FieldValueListWidget.tsx
Normal file
@ -0,0 +1,98 @@
|
||||
/*
|
||||
* 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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import {Skeleton} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import React from "react";
|
||||
import QValueUtils from "qqq/utils/QValueUtils";
|
||||
import Widget from "./Widget";
|
||||
|
||||
interface Props
|
||||
{
|
||||
title: string;
|
||||
data: any;
|
||||
}
|
||||
|
||||
FieldValueListWidget.defaultProps = {};
|
||||
|
||||
function FieldValueListWidget({title, data}: Props): JSX.Element
|
||||
{
|
||||
if(!data.fields || !data.record)
|
||||
{
|
||||
const skeletons = [75, 50, 90];
|
||||
return (
|
||||
<Widget label={title}>
|
||||
<Box p={3} pt={0} display="flex" flexDirection="column">
|
||||
{skeletons.map((s) =>
|
||||
(
|
||||
<Box key={s} display="flex" flexDirection="row" pr={2}>
|
||||
<Typography variant="button" pr={2}>
|
||||
<Skeleton width={s + "px"} />
|
||||
</Typography>
|
||||
<Typography variant="button">
|
||||
<Skeleton width={2*(s + (100 - (1.25*s))) + "px"} />
|
||||
</Typography>
|
||||
</Box>
|
||||
))
|
||||
}
|
||||
</Box>
|
||||
</Widget>
|
||||
);
|
||||
}
|
||||
|
||||
const fields = data.fields.map((f: any) => new QFieldMetaData(f));
|
||||
const record = new QRecord(data.record);
|
||||
const fieldLabelPrefixIconNames = data.fieldLabelPrefixIconNames ?? {};
|
||||
const fieldLabelPrefixIconColors = data.fieldLabelPrefixIconColors ?? {};
|
||||
const fieldIndentLevels = data.fieldIndentLevels ?? {};
|
||||
|
||||
return (
|
||||
<Widget label={title}>
|
||||
<Box p={3} pt={0} display="flex" flexDirection="column">
|
||||
{
|
||||
fields.map((field: QFieldMetaData, index: number) => (
|
||||
<Box key={field.label} flexDirection="row" pr={2} pl={3 * (fieldIndentLevels[field.name] ?? 0)}>
|
||||
{
|
||||
fieldLabelPrefixIconNames[field.name] &&
|
||||
<Icon color={fieldLabelPrefixIconColors[field.name] ?? "primary"} sx={{position: "relative", top: "4px", paddingRight: "8px", width: "24px"}}>{fieldLabelPrefixIconNames[field.name]}</Icon>
|
||||
}
|
||||
{
|
||||
field.label &&
|
||||
<Typography variant="button" fontWeight="bold" pr={1} sx={{textTransform: "none", color: "#344767"}}>
|
||||
{field.label}:
|
||||
</Typography>
|
||||
}
|
||||
<Typography variant="button" fontWeight="regular" color="text" sx={{textTransform: "none", color: "#7b809a", fontWeight: 400}}>
|
||||
{QValueUtils.getDisplayValue(field, record, "view")}
|
||||
</Typography>
|
||||
</Box>
|
||||
))
|
||||
}
|
||||
</Box>
|
||||
</Widget>
|
||||
);
|
||||
}
|
||||
|
||||
export default FieldValueListWidget;
|
||||
@ -74,7 +74,12 @@ function RecordGridWidget({title, data, reloadWidgetCallback}: Props): JSX.Eleme
|
||||
const labelAdditionalComponentsRight: LabelComponent[] = []
|
||||
if(data && data.canAddChildRecord)
|
||||
{
|
||||
labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords))
|
||||
let disabledFields = data.disabledFieldsForNewChildRecords;
|
||||
if(!disabledFields)
|
||||
{
|
||||
disabledFields = data.defaultValuesForNewChildRecords;
|
||||
}
|
||||
labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields))
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
*/
|
||||
|
||||
import {Check, Pending, RocketLaunch} from "@mui/icons-material";
|
||||
import {Skeleton, StepConnector} from "@mui/material";
|
||||
import {Icon, Skeleton, StepConnector} from "@mui/material";
|
||||
import Step from "@mui/material/Step";
|
||||
import StepLabel from "@mui/material/StepLabel";
|
||||
import Stepper from "@mui/material/Stepper";
|
||||
@ -38,10 +38,11 @@ export interface StepperCardData
|
||||
title: string;
|
||||
activeStep: number;
|
||||
steps: {
|
||||
icon: string;
|
||||
label: string;
|
||||
linkText: string;
|
||||
linkURL: string;
|
||||
iconOverride: string;
|
||||
colorOverride: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
@ -79,12 +80,12 @@ function StepperCard({data}: Props): JSX.Element
|
||||
{
|
||||
index < activeStep && (
|
||||
<MDBox>
|
||||
<StepLabel icon={<Check />} sx={{
|
||||
color: "green",
|
||||
<StepLabel icon={step.iconOverride ? <Icon>{step.iconOverride}</Icon> : <Check />} sx={{
|
||||
color: step.colorOverride ?? "green",
|
||||
fontSize: "35px",
|
||||
"& .MuiStepLabel-label.Mui-completed.MuiStepLabel-alternativeLabel":
|
||||
{
|
||||
color: "green !important",
|
||||
color: `${step.colorOverride ?? "green"} !important`,
|
||||
}
|
||||
}}>{step.label}</StepLabel>
|
||||
</MDBox>
|
||||
@ -93,12 +94,12 @@ function StepperCard({data}: Props): JSX.Element
|
||||
{
|
||||
index > activeStep && (
|
||||
<MDBox>
|
||||
<StepLabel icon={<Pending />} sx={{
|
||||
color: "#ced4da",
|
||||
<StepLabel icon={step.iconOverride ? <Icon>{step.iconOverride}</Icon> : <Pending />} sx={{
|
||||
color: step.colorOverride ?? "#ced4da",
|
||||
fontSize: "35px",
|
||||
"& .MuiStepLabel-label.MuiStepLabel-alternativeLabel":
|
||||
{
|
||||
color: "#ced4da !important",
|
||||
color: `${step.colorOverride ?? "#ced4da"} !important`,
|
||||
}
|
||||
}}>{step.label}</StepLabel>
|
||||
</MDBox>
|
||||
@ -107,12 +108,12 @@ function StepperCard({data}: Props): JSX.Element
|
||||
{
|
||||
index === activeStep && (
|
||||
<MDBox>
|
||||
<StepLabel icon={<RocketLaunch />} sx={{
|
||||
color: "#04aaef",
|
||||
<StepLabel icon={step.iconOverride ? <Icon>{step.iconOverride}</Icon> : <RocketLaunch />} sx={{
|
||||
color: step.colorOverride ?? "#04aaef",
|
||||
fontSize: "35px",
|
||||
"& .MuiStepLabel-label.MuiStepLabel-alternativeLabel":
|
||||
{
|
||||
color: "#344767 !important", // Just text label (COMPLETED)
|
||||
color: `${step.colorOverride ?? "#344767"} !important`,
|
||||
}
|
||||
}}>{step.label}</StepLabel>
|
||||
{
|
||||
|
||||
@ -54,6 +54,7 @@ import MDAlert from "qqq/components/Temporary/MDAlert";
|
||||
import MDBox from "qqq/components/Temporary/MDBox";
|
||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
import ProcessRun from "qqq/pages/process-run";
|
||||
import HistoryUtils from "qqq/utils/HistoryUtils";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import QProcessUtils from "qqq/utils/QProcessUtils";
|
||||
import QTableUtils from "qqq/utils/QTableUtils";
|
||||
@ -109,6 +110,7 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
||||
|
||||
const reload = () =>
|
||||
{
|
||||
setNotFoundMessage(null);
|
||||
setAsyncLoadInited(false);
|
||||
setTableMetaData(null);
|
||||
setRecord(null);
|
||||
@ -258,6 +260,16 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
||||
if ((e as QException).status === "404")
|
||||
{
|
||||
setNotFoundMessage(`${tableMetaData.label} ${id} could not be found.`);
|
||||
|
||||
try
|
||||
{
|
||||
HistoryUtils.ensurePathNotInHistory(location.pathname);
|
||||
}
|
||||
catch(e)
|
||||
{
|
||||
console.error("Error pushing history: " + e);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -265,6 +277,16 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
||||
|
||||
setPageHeader(record.recordLabel);
|
||||
|
||||
try
|
||||
{
|
||||
HistoryUtils.push({label: `${tableMetaData?.label}: ${record.recordLabel}`, path: location.pathname, iconName: table.iconName})
|
||||
}
|
||||
catch(e)
|
||||
{
|
||||
console.error("Error pushing history: " + e);
|
||||
}
|
||||
|
||||
|
||||
/////////////////////////////////////////////////
|
||||
// define the sections, e.g., for the left-bar //
|
||||
/////////////////////////////////////////////////
|
||||
|
||||
Reference in New Issue
Block a user