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

CE-2261: updated to respect field column widths on view and edit forms

Browse Source
This commit is contained in:
Tim Chamberlain
2025-02-19 17:05:10 -06:00
parent 71dc3f3f65
commit 6076c4ddfd
3 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -6,7 +6,7 @@
"@auth0/auth0-react": "1.10.2", "@auth0/auth0-react": "1.10.2",
"@emotion/react": "11.7.1", "@emotion/react": "11.7.1",
"@emotion/styled": "11.6.0", "@emotion/styled": "11.6.0",
"@kingsrook/qqq-frontend-core": "1.0.113", "@kingsrook/qqq-frontend-core": "1.0.114",
"@mui/icons-material": "5.4.1", "@mui/icons-material": "5.4.1",
"@mui/material": "5.11.1", "@mui/material": "5.11.1",
"@mui/styles": "5.11.1", "@mui/styles": "5.11.1",

17
src/qqq/components/forms/DynamicForm.tsx
View File

@ -57,7 +57,7 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
<MDTypography variant="h5">{formLabel}</MDTypography> <MDTypography variant="h5">{formLabel}</MDTypography>
</Box> </Box>
<Box mt={1.625}> <Box mt={1.625}>
<Grid container spacing={3}> <Grid container lg={12} display="flex" spacing={3}>
{formFields {formFields
&& Object.keys(formFields).length > 0 && Object.keys(formFields).length > 0
&& Object.keys(formFields).map((fieldName: any) => && Object.keys(formFields).map((fieldName: any) =>
@ -74,13 +74,14 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
} }
let formattedHelpContent = <HelpContent helpContents={field?.fieldMetaData?.helpContents} roles={helpRoles} helpContentKey={`${helpContentKeyPrefix ?? ""}field:${fieldName}`} />; let formattedHelpContent = <HelpContent helpContents={field?.fieldMetaData?.helpContents} roles={helpRoles} helpContentKey={`${helpContentKeyPrefix ?? ""}field:${fieldName}`} />;
if(formattedHelpContent) if (formattedHelpContent)
{ {
formattedHelpContent = <Box color="#757575" fontSize="0.875rem" mt="-0.25rem">{formattedHelpContent}</Box> formattedHelpContent = <Box color="#757575" fontSize="0.875rem" mt="-0.25rem">{formattedHelpContent}</Box>;
} }
const labelElement = <DynamicFormFieldLabel name={field.name} label={field.label} />; const labelElement = <DynamicFormFieldLabel name={field.name} label={field.label} />;
let itemLG = (field?.fieldMetaData?.gridColumns && field?.fieldMetaData?.gridColumns > 0) ? field.fieldMetaData.gridColumns : 6;
let itemXS = 12; let itemXS = 12;
let itemSM = 6; let itemSM = 6;
@ -92,13 +93,13 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
const fileUploadAdornment = field.fieldMetaData?.getAdornment(AdornmentType.FILE_UPLOAD); const fileUploadAdornment = field.fieldMetaData?.getAdornment(AdornmentType.FILE_UPLOAD);
const width = fileUploadAdornment?.values?.get("width") ?? "half"; const width = fileUploadAdornment?.values?.get("width") ?? "half";
if(width == "full") if (width == "full")
{ {
itemSM = 12; itemSM = 12;
} }
return ( return (
<Grid item xs={itemXS} sm={itemSM} key={fieldName}> <Grid item lg={itemLG} xs={itemXS} sm={itemSM} flexDirection="column" key={fieldName}>
{labelElement} {labelElement}
<FileInputField field={field} record={record} errorMessage={errors[fieldName]} /> <FileInputField field={field} record={record} errorMessage={errors[fieldName]} />
</Grid> </Grid>
@ -114,10 +115,10 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
Object.keys(values).forEach((key) => Object.keys(values).forEach((key) =>
{ {
otherValuesMap.set(key, values[key]); otherValuesMap.set(key, values[key]);
}) });
return ( return (
<Grid item xs={itemXS} sm={itemSM} key={fieldName}> <Grid item lg={itemLG} xs={itemXS} sm={itemSM} key={fieldName}>
{labelElement} {labelElement}
<DynamicSelect <DynamicSelect
fieldPossibleValueProps={field.possibleValueProps} fieldPossibleValueProps={field.possibleValueProps}
@ -138,7 +139,7 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
// everything else!! // // everything else!! //
/////////////////////// ///////////////////////
return ( return (
<Grid item xs={itemXS} sm={itemSM} key={fieldName}> <Grid item lg={itemLG} xs={itemXS} sm={itemSM} key={fieldName}>
{labelElement} {labelElement}
<QDynamicFormField <QDynamicFormField
id={field.name} id={field.name}

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

@ -92,9 +92,9 @@ 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 }, styleOverrides?: {label?: SxProps, value?: SxProps}) 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}> return <Grid container lg={12} key={key} display="flex" py={1} pr={2}>
{ {
fieldNames.map((fieldName: string) => fieldNames.map((fieldName: string) =>
{ {
@ -103,6 +103,7 @@ export function renderSectionOfFields(key: string, fieldNames: string[], tableMe
if (field != null) if (field != null)
{ {
let label = field.label; let label = field.label;
let gridColumns = (field.gridColumns && field.gridColumns > 0) ? field.gridColumns : 12;
const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]; const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles); const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
@ -111,7 +112,7 @@ export function renderSectionOfFields(key: string, fieldNames: string[], tableMe
const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default", ...(styleOverrides?.label ?? {})}}>{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 ( return (
<Box key={fieldName} flexDirection="row" pr={2}> <Grid item key={fieldName} lg={gridColumns} flexDirection="column" pr={2}>
<> <>
{ {
showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
@ -121,12 +122,12 @@ export function renderSectionOfFields(key: string, fieldNames: string[], tableMe
{ValueUtils.getDisplayValue(field, record, "view", fieldName)} {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
</Typography> </Typography>
</> </>
</Box> </Grid>
); );
} }
}) })
} }
</Box>; </Grid>;
} }