CE-1955 - Add styleOverrides argument to renderSectionOfFields; add css classes recordSidebar and recordWithSidebar

This commit is contained in:
2024-11-27 15:23:47 -06:00
parent ee9cd5a5f6
commit 9b5d9f1290

View File

@ -47,6 +47,7 @@ import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Modal from "@mui/material/Modal";
import Tooltip from "@mui/material/Tooltip/Tooltip";
import {SxProps} from "@mui/system";
import QContext from "QContext";
import colors from "qqq/assets/theme/base/colors";
import AuditBody from "qqq/components/audits/AuditBody";
@ -91,7 +92,7 @@ const TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT = "qqq.tableVariant";
/*******************************************************************************
**
*******************************************************************************/
export function renderSectionOfFields(key: string, fieldNames: string[], tableMetaData: QTableMetaData, helpHelpActive: boolean, record: QRecord, fieldMap?: {[name: string]: QFieldMetaData} )
export function renderSectionOfFields(key: string, fieldNames: string[], tableMetaData: QTableMetaData, helpHelpActive: boolean, record: QRecord, fieldMap?: {[name: string]: QFieldMetaData}, styleOverrides?: {label?: SxProps, value?: SxProps})
{
return <Box key={key} display="flex" flexDirection="column" py={1} pr={2}>
{
@ -107,7 +108,7 @@ export function renderSectionOfFields(key: string, fieldNames: string[], tableMe
const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableMetaData?.name};field:${fieldName}`} />;
const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>;
const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default", ...(styleOverrides?.label ?? {})}}>{label}:</Typography>;
return (
<Box key={fieldName} flexDirection="row" pr={2}>
@ -116,7 +117,7 @@ export function renderSectionOfFields(key: string, fieldNames: string[], tableMe
showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
}
<div style={{display: "inline-block", width: 0}}>&nbsp;</div>
<Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
<Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)" sx={{...(styleOverrides?.value ?? {})}}>
{ValueUtils.getDisplayValue(field, record, "view", fieldName)}
</Typography>
</>
@ -993,10 +994,10 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
}
<Grid container spacing={3}>
<Grid item xs={12} lg={3}>
<Grid item xs={12} lg={3} className="recordSidebar">
<QRecordSidebar tableSections={tableSections} />
</Grid>
<Grid item xs={12} lg={9}>
<Grid item xs={12} lg={9} className="recordWithSidebar">
<Grid container spacing={3}>
<Grid item xs={12} mb={3}>