mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
463 lines
21 KiB
TypeScript
463 lines
21 KiB
TypeScript
/*
|
|
* 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 {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
|
|
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
|
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 {Button, FormControlLabel, ListItem, Radio, RadioGroup, Typography} from "@mui/material";
|
|
import Box from "@mui/material/Box";
|
|
import Grid from "@mui/material/Grid";
|
|
import Icon from "@mui/material/Icon";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import List from "@mui/material/List";
|
|
import ListItemText from "@mui/material/ListItemText";
|
|
import MDTypography from "qqq/components/legacy/MDTypography";
|
|
import CustomWidthTooltip from "qqq/components/tooltips/CustomWidthTooltip";
|
|
import RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
|
|
import {ProcessSummaryLine} from "qqq/models/processes/ProcessSummaryLine";
|
|
import {renderSectionOfFields} from "qqq/pages/records/view/RecordView";
|
|
import Client from "qqq/utils/qqq/Client";
|
|
import TableUtils from "qqq/utils/qqq/TableUtils";
|
|
import ValueUtils from "qqq/utils/qqq/ValueUtils";
|
|
import React, {useEffect, useState} from "react";
|
|
|
|
interface Props
|
|
{
|
|
qInstance: QInstance,
|
|
process: QProcessMetaData,
|
|
table: QTableMetaData,
|
|
processValues: any,
|
|
step: QFrontendStepMetaData,
|
|
previewRecords: QRecord[],
|
|
formValues: any,
|
|
doFullValidationRadioChangedHandler: any,
|
|
loadingRecords?: boolean
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////
|
|
// e.g., for bulk-load, where we want to show associations under a record //
|
|
// the processValue will have these data, to drive this screen. //
|
|
////////////////////////////////////////////////////////////////////////////
|
|
interface AssociationPreview
|
|
{
|
|
tableName: string;
|
|
widgetName: string;
|
|
associationName: string;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
** This is the process validation/review component - where the user may be prompted
|
|
** to do a full validation or skip it. It's the same screen that shows validation
|
|
** results when they are available.
|
|
*******************************************************************************/
|
|
function ValidationReview({
|
|
qInstance, process, table = null, processValues, step, previewRecords = [], formValues, doFullValidationRadioChangedHandler, loadingRecords
|
|
}: Props): JSX.Element
|
|
{
|
|
const [previewRecordIndex, setPreviewRecordIndex] = useState(0);
|
|
const [sourceTableMetaData, setSourceTableMetaData] = useState(null as QTableMetaData);
|
|
const [previewTableMetaData, setPreviewTableMetaData] = useState(null as QTableMetaData);
|
|
const [childTableMetaData, setChildTableMetaData] = useState({} as { [name: string]: QTableMetaData });
|
|
|
|
const [associationPreviewsByWidgetName, setAssociationPreviewsByWidgetName] = useState({} as { [widgetName: string]: AssociationPreview });
|
|
|
|
if (processValues.sourceTable && !sourceTableMetaData)
|
|
{
|
|
(async () =>
|
|
{
|
|
const sourceTableMetaData = await Client.getInstance().loadTableMetaData(processValues.sourceTable);
|
|
setSourceTableMetaData(sourceTableMetaData);
|
|
})();
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////////////
|
|
// load meta-data and set up associations-data structure, if so directed from backend //
|
|
////////////////////////////////////////////////////////////////////////////////////////
|
|
useEffect(() =>
|
|
{
|
|
if (processValues.formatPreviewRecordUsingTableLayout && !previewTableMetaData)
|
|
{
|
|
(async () =>
|
|
{
|
|
const previewTableMetaData = await Client.getInstance().loadTableMetaData(processValues.formatPreviewRecordUsingTableLayout);
|
|
setPreviewTableMetaData(previewTableMetaData);
|
|
})();
|
|
}
|
|
|
|
try
|
|
{
|
|
const previewRecordAssociatedTableNames: string[] = processValues.previewRecordAssociatedTableNames ?? [];
|
|
const previewRecordAssociatedWidgetNames: string[] = processValues.previewRecordAssociatedWidgetNames ?? [];
|
|
const previewRecordAssociationNames: string[] = processValues.previewRecordAssociationNames ?? [];
|
|
|
|
const associationPreviewsByWidgetName: { [widgetName: string]: AssociationPreview } = {};
|
|
for (let i = 0; i < Math.min(previewRecordAssociatedTableNames.length, previewRecordAssociatedWidgetNames.length, previewRecordAssociationNames.length); i++)
|
|
{
|
|
const associationPreview = {tableName: previewRecordAssociatedTableNames[i], widgetName: previewRecordAssociatedWidgetNames[i], associationName: previewRecordAssociationNames[i]};
|
|
associationPreviewsByWidgetName[associationPreview.widgetName] = associationPreview;
|
|
}
|
|
setAssociationPreviewsByWidgetName(associationPreviewsByWidgetName);
|
|
|
|
if (Object.keys(associationPreviewsByWidgetName))
|
|
{
|
|
(async () =>
|
|
{
|
|
for (let key in associationPreviewsByWidgetName)
|
|
{
|
|
const associationPreview = associationPreviewsByWidgetName[key];
|
|
childTableMetaData[associationPreview.tableName] = await Client.getInstance().loadTableMetaData(associationPreview.tableName);
|
|
setChildTableMetaData(Object.assign({}, childTableMetaData));
|
|
}
|
|
})();
|
|
}
|
|
}
|
|
catch (e)
|
|
{
|
|
console.log(`Error setting up association previews: ${e}`);
|
|
}
|
|
}, []);
|
|
|
|
|
|
/***************************************************************************
|
|
**
|
|
***************************************************************************/
|
|
const updatePreviewRecordIndex = (offset: number) =>
|
|
{
|
|
let newIndex = previewRecordIndex + offset;
|
|
if (newIndex < 0)
|
|
{
|
|
newIndex = 0;
|
|
}
|
|
if (newIndex >= previewRecords.length - 1)
|
|
{
|
|
newIndex = previewRecords.length - 1;
|
|
}
|
|
|
|
setPreviewRecordIndex(newIndex);
|
|
};
|
|
|
|
|
|
/***************************************************************************
|
|
**
|
|
***************************************************************************/
|
|
const buildDoFullValidationRadioListItem = (value: "true" | "false", labelText: string, tooltipHTML: JSX.Element): JSX.Element =>
|
|
{
|
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
// split up the label into words - then we'll display the last word by itself with a non-breaking space, no-wrap-glued to the button. //
|
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
const labelWords = labelText.split(" ");
|
|
const lastWord = labelWords[labelWords.length - 1];
|
|
labelWords.splice(labelWords.length - 1, 1);
|
|
|
|
return (
|
|
<ListItem sx={{pl: 2}}>
|
|
<FormControlLabel
|
|
value={value}
|
|
control={<Radio />}
|
|
label={(
|
|
<ListItemText primaryTypographyProps={{fontSize: 16, pt: 0.625}}>
|
|
{`${labelWords.join(" ")} `}
|
|
<span style={{whiteSpace: "nowrap"}}>
|
|
{/* eslint-disable-next-line react/jsx-one-expression-per-line */}
|
|
{lastWord}. <CustomWidthTooltip title={tooltipHTML}>
|
|
<IconButton sx={{py: 0}}><Icon fontSize="small">info_outlined</Icon></IconButton>
|
|
{/* eslint-disable-next-line react/jsx-closing-tag-location */}
|
|
</CustomWidthTooltip>
|
|
</span>
|
|
</ListItemText>
|
|
)}
|
|
/>
|
|
</ListItem>
|
|
);
|
|
};
|
|
|
|
const preValidationList = (
|
|
<List sx={{mt: 2}}>
|
|
{
|
|
processValues?.recordCount !== undefined && sourceTableMetaData && (
|
|
<ListItem sx={{my: 2}}>
|
|
<ListItemText primaryTypographyProps={{fontSize: 16}}>
|
|
{`Input: ${ValueUtils.getFormattedNumber(processValues.recordCount)} ${sourceTableMetaData?.label} record${processValues.recordCount === 1 ? "" : "s"}.`}
|
|
</ListItemText>
|
|
</ListItem>
|
|
)
|
|
}
|
|
{
|
|
processValues?.supportsFullValidation && formValues && formValues.doFullValidation !== undefined && (
|
|
<>
|
|
<ListItem sx={{mb: 1, mt: 6}}>
|
|
<ListItemText primaryTypographyProps={{fontSize: 16}}>How would you like to proceed?</ListItemText>
|
|
</ListItem>
|
|
<List className="doFullValidationRadios">
|
|
<RadioGroup name="doFullValidation" value={formValues.doFullValidation} onChange={doFullValidationRadioChangedHandler}>
|
|
{buildDoFullValidationRadioListItem(
|
|
"true",
|
|
"Perform Validation on all records before processing", (
|
|
<div>
|
|
If you choose this option, a Validation step will run on all of the input records.
|
|
You will then be told how many can process successfully, and how many have issues.
|
|
<br />
|
|
<br />
|
|
Running this validation may take several minutes, depending on the complexity of the work, and the number of records.
|
|
<br />
|
|
<br />
|
|
Choose this option if you want more information about what will happen, and you are willing to wait for that information.
|
|
</div>
|
|
),
|
|
)}
|
|
|
|
{buildDoFullValidationRadioListItem(
|
|
"false",
|
|
"Skip Validation. Submit the records for immediate processing", (
|
|
<div>
|
|
If you choose this option, the input records will immediately be processed.
|
|
You will be told how many records were successfully processed, and which ones had issues after the processing is completed.
|
|
<br />
|
|
<br />
|
|
Choose this option if you feel that you do not need this information, or are not willing to wait for it.
|
|
</div>
|
|
),
|
|
)}
|
|
</RadioGroup>
|
|
</List>
|
|
</>
|
|
)
|
|
}
|
|
</List>
|
|
);
|
|
|
|
const postValidationList = (
|
|
<List sx={{mt: 2}}>
|
|
{
|
|
processValues?.recordCount !== undefined && sourceTableMetaData && (
|
|
<ListItem sx={{my: 2}}>
|
|
<ListItemText primaryTypographyProps={{fontSize: 16}}>
|
|
Validation complete on
|
|
{` ${ValueUtils.getFormattedNumber(processValues.recordCount)} ${sourceTableMetaData?.label} ${processValues.recordCount === 1 ? "record." : "records."}`}
|
|
</ListItemText>
|
|
</ListItem>
|
|
)
|
|
}
|
|
<List>
|
|
{
|
|
processValues.validationSummary && processValues.validationSummary.map((processSummaryLine: ProcessSummaryLine, i: number) => (new ProcessSummaryLine(processSummaryLine).getProcessSummaryListItem(i, sourceTableMetaData, qInstance)))
|
|
}
|
|
</List>
|
|
</List>
|
|
);
|
|
|
|
|
|
const recordPreviewWidget = step.recordListFields && (
|
|
<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}>
|
|
<Box display="flex">
|
|
{
|
|
loadingRecords ? <i>Loading...</i> : <>
|
|
{
|
|
processValues?.previewMessage && previewRecords && previewRecords.length > 0 ? (
|
|
<>
|
|
<i>{processValues?.previewMessage}</i>
|
|
<CustomWidthTooltip
|
|
title={(
|
|
<div>
|
|
Note that the number of preview records available may be fewer than the total number of records being processed.
|
|
</div>
|
|
)}
|
|
>
|
|
<IconButton sx={{py: 0}}><Icon fontSize="small">info_outlined</Icon></IconButton>
|
|
</CustomWidthTooltip>
|
|
</>
|
|
) : (
|
|
<>
|
|
<i>No record previews are available at this time.</i>
|
|
<CustomWidthTooltip
|
|
title={(
|
|
<div>
|
|
{
|
|
processValues.validationSummary ? (
|
|
<>
|
|
It appears as though this process does not contain any valid records.
|
|
</>
|
|
) : (
|
|
<>
|
|
If you choose to Perform Validation, and there are any valid records, then you will see a preview here.
|
|
</>
|
|
)
|
|
}
|
|
</div>
|
|
)}
|
|
>
|
|
<IconButton sx={{py: 0}}><Icon fontSize="small">info_outlined</Icon></IconButton>
|
|
</CustomWidthTooltip>
|
|
</>
|
|
)
|
|
}
|
|
</>
|
|
}
|
|
</Box>
|
|
</MDTypography>
|
|
<MDTypography color="body" variant="body2" component="div">
|
|
<Box sx={{maxHeight: "calc(100vh - 640px)", overflow: "auto", minHeight: "300px", marginRight: "-40px"}}>
|
|
<Box sx={{paddingRight: "40px"}}>
|
|
{
|
|
previewRecords && !processValues.formatPreviewRecordUsingTableLayout && previewRecords[previewRecordIndex] && step.recordListFields.map((field) => (
|
|
<Box key={field.name} style={{marginBottom: "12px"}}>
|
|
<b>{`${field.label}:`}</b>
|
|
{" "}
|
|
|
|
{" "}
|
|
{ValueUtils.getDisplayValue(field, previewRecords[previewRecordIndex], "view")}
|
|
</Box>
|
|
))
|
|
}
|
|
{
|
|
previewRecords && processValues.formatPreviewRecordUsingTableLayout && previewRecords[previewRecordIndex] &&
|
|
<PreviewRecordUsingTableLayout
|
|
index={previewRecordIndex}
|
|
record={previewRecords[previewRecordIndex]}
|
|
tableMetaData={previewTableMetaData}
|
|
qInstance={qInstance}
|
|
associationPreviewsByWidgetName={associationPreviewsByWidgetName}
|
|
childTableMetaData={childTableMetaData}
|
|
/>
|
|
}
|
|
</Box>
|
|
</Box>
|
|
{
|
|
previewRecords && previewRecords.length > 0 && (
|
|
<Box display="flex" justifyContent="space-between" alignItems="center">
|
|
<Button startIcon={<Icon>navigate_before</Icon>} onClick={() => updatePreviewRecordIndex(-1)} disabled={previewRecordIndex <= 0}>Previous</Button>
|
|
<span>
|
|
{`Preview ${previewRecordIndex + 1} of ${previewRecords.length}`}
|
|
</span>
|
|
<Button endIcon={<Icon>navigate_next</Icon>} onClick={() => updatePreviewRecordIndex(1)} disabled={previewRecordIndex >= previewRecords.length - 1}>Next</Button>
|
|
</Box>
|
|
)
|
|
}
|
|
</MDTypography>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
|
|
return (
|
|
<Box m={{xs: 0, md: 3}} mt={"3rem!important"}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} lg={6}>
|
|
<MDTypography color="body" variant="button">
|
|
{processValues.validationSummary ? postValidationList : preValidationList}
|
|
</MDTypography>
|
|
</Grid>
|
|
<Grid item xs={12} lg={6} mt={3}>
|
|
{recordPreviewWidget}
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
interface PreviewRecordUsingTableLayoutProps
|
|
{
|
|
index: number
|
|
record: QRecord,
|
|
tableMetaData: QTableMetaData,
|
|
qInstance: QInstance,
|
|
associationPreviewsByWidgetName: { [widgetName: string]: AssociationPreview },
|
|
childTableMetaData: { [name: string]: QTableMetaData },
|
|
}
|
|
|
|
function PreviewRecordUsingTableLayout({record, tableMetaData, qInstance, associationPreviewsByWidgetName, childTableMetaData, index}: PreviewRecordUsingTableLayoutProps): JSX.Element
|
|
{
|
|
if (!tableMetaData)
|
|
{
|
|
return (<i>Loading...</i>);
|
|
}
|
|
|
|
const renderedSections: JSX.Element[] = [];
|
|
const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData);
|
|
|
|
for (let i = 0; i < tableSections.length; i++)
|
|
{
|
|
const section = tableSections[i];
|
|
if (section.isHidden)
|
|
{
|
|
continue;
|
|
}
|
|
|
|
if (section.fieldNames)
|
|
{
|
|
renderedSections.push(<Box mb="1rem">
|
|
<Box><h4>{section.label}</h4></Box>
|
|
<Box ml="1rem">
|
|
{renderSectionOfFields(section.name, section.fieldNames, tableMetaData, false, record, undefined, {label: {fontWeight: "500"}})}
|
|
</Box>
|
|
</Box>);
|
|
}
|
|
else if (section.widgetName)
|
|
{
|
|
const widget = qInstance.widgets.get(section.widgetName);
|
|
if (widget)
|
|
{
|
|
let data: ChildRecordListData = null;
|
|
if (associationPreviewsByWidgetName[section.widgetName])
|
|
{
|
|
const associationPreview = associationPreviewsByWidgetName[section.widgetName];
|
|
const associationRecords = record.associatedRecords?.get(associationPreview.associationName) ?? [];
|
|
data = {
|
|
canAddChildRecord: false,
|
|
childTableMetaData: childTableMetaData[associationPreview.tableName],
|
|
defaultValuesForNewChildRecords: {},
|
|
disabledFieldsForNewChildRecords: {},
|
|
queryOutput: {records: associationRecords},
|
|
totalRows: associationRecords.length,
|
|
tablePath: "",
|
|
title: "",
|
|
viewAllLink: "",
|
|
};
|
|
|
|
renderedSections.push(<Box mb="1rem">
|
|
{
|
|
data && <Box>
|
|
<Box mb="0.5rem"><h4>{section.label}</h4></Box>
|
|
<Box pl="1rem">
|
|
<RecordGridWidget key={index} data={data} widgetMetaData={widget} disableRowClick gridOnly={true} gridDensity={"compact"} />
|
|
</Box>
|
|
</Box>
|
|
}
|
|
</Box>);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return <>{renderedSections}</>;
|
|
}
|
|
|
|
|
|
export default ValidationReview;
|